三 網(wǎng)頁(yè)界面設(shè)計(jì) 字體.ppt

1、a，1，web界面設(shè)計(jì)的基礎(chǔ)字體設(shè)計(jì)的基礎(chǔ)，主要是杜敬卿，a，2，第4章的網(wǎng)頁(yè)字體設(shè)計(jì)，文字是人類(lèi)思想感情交流的必然產(chǎn)物。 隨著人類(lèi)文明的進(jìn)步，它簡(jiǎn)單復(fù)雜，逐漸形成了科學(xué)完美規(guī)范的程序。 它不僅具有人的思想感情的抽象意義和韻和音響節(jié)奏，而且結(jié)構(gòu)完整，有章法規(guī)范，且變化無(wú)限鮮明的形象。 尤其是象形文字，與抽象的具體形象密切相關(guān)，其文字本身也可以說(shuō)是完整的美術(shù)設(shè)計(jì)。 1 .正確的漢字和拉丁文字的構(gòu)成，筆畫(huà)數(shù)是法定的，一點(diǎn)點(diǎn)不符，就變成另一個(gè)字，輕的話(huà)字母不同，重的話(huà)就變成不字，誰(shuí)也不知道，這就完全失去了文字本身的作用。 因此，字形必須正確，不能任意增加筆畫(huà)，也不能任意減少或變更，以保證信息傳遞功能

2、的正確性。 4.1字體的設(shè)計(jì)原理，a，3，2 .風(fēng)格必須統(tǒng)一字母漢字，字體筆畫(huà)必須統(tǒng)一。 寫(xiě)漢字不能把三筆所有者、兩筆仿宋、寫(xiě)拉丁文字也不能把楷書(shū)、小楷書(shū)、花楷書(shū)等寫(xiě)成一個(gè)字，鉛字和手寫(xiě)也不能混在一個(gè)字里使用。 3 .表情適應(yīng)文字內(nèi)容精神的所有字體，有其自己的表情。 在選擇某字體作為設(shè)計(jì)美術(shù)字的基調(diào)時(shí)，必須根據(jù)文字內(nèi)容的精神來(lái)決定。 表里一致，最大限度地發(fā)揮文字的感染力。 a，4，4 .字看起來(lái)勻稱(chēng)的字和字之間大小一致，字的像素?cái)?shù)要復(fù)雜簡(jiǎn)潔合理地配置。 5 .結(jié)構(gòu)嚴(yán)密的結(jié)構(gòu)必須多樣化統(tǒng)一、均勻穩(wěn)定、密集，變化有序。 6、藝術(shù)處理文字形象，提高文字傳播效果。 a、5、4.2字體和布局設(shè)計(jì)文字在布

3、局設(shè)計(jì)中，不僅是信息傳遞意義上的概念，也是一種高尚的藝術(shù)表現(xiàn)形式。 文字被啟發(fā)性和宣傳性提高了，成為了引導(dǎo)人們審美時(shí)尚的新視點(diǎn)。 文字是任何布局的核心，也是視覺(jué)傳達(dá)的最直接的方法，可以使用經(jīng)過(guò)精心處理的文字材料在不需要圖形的情況下制作有效的布局。 1 .字體、字體大小的設(shè)計(jì)和選項(xiàng)是合成設(shè)計(jì)的基礎(chǔ)。 2 .字間和行間的字間和行間的把握是對(duì)設(shè)計(jì)師布局的心理感覺(jué)，也是設(shè)計(jì)師設(shè)計(jì)品味的直接表現(xiàn)。 a，6，3 .布局形式文字的布局形式多種多樣4 .文字布局的特殊表現(xiàn)文字在布局中發(fā)揮著重要的作用，同時(shí)其形式也靈活多樣。a、7、4.3頁(yè)文字顏色的活用，一般來(lái)說(shuō)，頁(yè)面背景顏色柔和、清爽、淡、濃文字配合，顯得自

4、然舒適。 為了追求顯著的視覺(jué)效果，標(biāo)題可以使用深色。 以下是大家在設(shè)計(jì)網(wǎng)頁(yè)和閱覽的網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)的背景色和文字色經(jīng)常采用的顏色，這些顏色可以組合正文的底色、標(biāo)題的底色，還可以組合不同的字體，a、8、網(wǎng)站的整體風(fēng)格及其困難的是，能參照和模仿的程序沒(méi)有固定。 給出主題，誰(shuí)都不能設(shè)計(jì)完全相同的網(wǎng)站。 如果有人說(shuō)“這個(gè)網(wǎng)站很酷，很有個(gè)性”，是什么讓讀者成為cool呢？和一般的網(wǎng)站有什么不同呢？ 第5章的網(wǎng)頁(yè)設(shè)計(jì)中的布局和布局、5.1網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格和創(chuàng)意、5.1.1網(wǎng)頁(yè)風(fēng)格的概要、風(fēng)格抽象。 是網(wǎng)站整體形象給讀者的綜合感覺(jué)。 風(fēng)格獨(dú)特，是彼此的差異之一。 通過(guò)顏色、技術(shù)和交互方式，閱覽者可以明確地區(qū)分網(wǎng)站的

5、獨(dú)特性。 身材很人性化。 可以通過(guò)網(wǎng)站的外觀(guān)、內(nèi)容、文字、交流來(lái)總結(jié)網(wǎng)站的個(gè)性、感情。 建立a、9、9、9,5.1.2站點(diǎn)風(fēng)格是抽象的。 是網(wǎng)站整體形象給讀者的綜合感覺(jué)。1 .如何建立網(wǎng)站風(fēng)格確保風(fēng)格建立在有價(jià)值的內(nèi)容之上。 有的網(wǎng)站很有風(fēng)格，沒(méi)有內(nèi)容，像刺繡枕草，是傲慢的性格，但看不懂眼睛的人。 首先，必須保證內(nèi)容的質(zhì)量和價(jià)值。 有必要徹底弄清網(wǎng)站給人的印象是什么。 明確網(wǎng)站印象后，開(kāi)始努力確立和加強(qiáng)這一印象。 2 .活用創(chuàng)造性想法(idea )是網(wǎng)站生存的關(guān)鍵。 我相信這一點(diǎn)大家都同意。 但是，作為網(wǎng)頁(yè)設(shè)計(jì)師最困擾的是沒(méi)有好的創(chuàng)意來(lái)源。 a、10、logo是標(biāo)志或商標(biāo)的英語(yǔ)表達(dá)形式，起到了

6、標(biāo)識(shí)和推動(dòng)標(biāo)志所有者公司的作用。 網(wǎng)絡(luò)上的標(biāo)志主要是各網(wǎng)站用于與其他網(wǎng)站鏈接的圖形標(biāo)志，表示網(wǎng)站或網(wǎng)站的模板。 5.2.1角色1.LOGO是與其他站點(diǎn)鏈接并與其他站點(diǎn)鏈接的標(biāo)志和門(mén)戶(hù)。 2. LOGO是網(wǎng)站形象的重要表現(xiàn)。 3. LOGO便于群眾的選擇。5.2頁(yè)標(biāo)志設(shè)計(jì)，a，11，5.2.2國(guó)際標(biāo)準(zhǔn)需要統(tǒng)一的標(biāo)志國(guó)際標(biāo)準(zhǔn)，以便于互聯(lián)網(wǎng)上的信息傳播。 實(shí)際上，有一系列這樣的標(biāo)準(zhǔn)。 其中，關(guān)于網(wǎng)站的標(biāo)志，現(xiàn)在，1. 88*31這是互聯(lián)網(wǎng)上最常見(jiàn)的標(biāo)志標(biāo)準(zhǔn).2. 120*60標(biāo)準(zhǔn)被用于一般尺寸的標(biāo)志。 3. 120*90此標(biāo)準(zhǔn)用于大型標(biāo)志。 a，12，5.2.3設(shè)計(jì)過(guò)程1 .調(diào)查分析標(biāo)志不僅是圖形和

7、文字的組合，還是根據(jù)企業(yè)的組成結(jié)構(gòu)、行業(yè)類(lèi)別、經(jīng)營(yíng)理念，充分考慮標(biāo)志接觸的對(duì)象和應(yīng)用環(huán)境，為企業(yè)制定的標(biāo)準(zhǔn)視覺(jué)符號(hào)。 2 .要素挖掘要素挖掘是對(duì)設(shè)計(jì)開(kāi)發(fā)的進(jìn)一步準(zhǔn)備。 3 .設(shè)計(jì)開(kāi)發(fā)有企業(yè)的全面理解和充分掌握設(shè)計(jì)要素，可以從不同的角度和方向進(jìn)行設(shè)計(jì)開(kāi)發(fā)。 4 .在標(biāo)志修正提案階段確定的標(biāo)志在細(xì)節(jié)上可能還不完整，人們經(jīng)過(guò)標(biāo)志的標(biāo)準(zhǔn)制圖、尺寸修正、黑白應(yīng)用、線(xiàn)的應(yīng)用等不同表現(xiàn)形式的修正，使標(biāo)志的使用更加規(guī)范化，同時(shí)在標(biāo)志的特征、結(jié)構(gòu)不同的環(huán)境下使用也不丟失，統(tǒng)一、秩序、規(guī)范化的a，13，5.2.4制作工具和方法目前沒(méi)有專(zhuān)門(mén)的LOGO軟件，但實(shí)際上不需要這種軟件。 平時(shí)使用的圖像處理軟件和動(dòng)畫(huà)制作軟

8、件(如果是制作動(dòng)畫(huà)的標(biāo)志)，很適合FIREWORKS、PHOTOSHOP、Easy GIF Animator等這項(xiàng)工作。 5.2.5好條件一個(gè)好標(biāo)志應(yīng)該具備以下條件或具備其中的幾個(gè)條件。 1 .符合國(guó)際標(biāo)準(zhǔn)2 .美麗、獨(dú)特3 .融合網(wǎng)站整體風(fēng)格4 .能表現(xiàn)網(wǎng)站的類(lèi)型、內(nèi)容和風(fēng)格5 .能以最小的空間表現(xiàn)網(wǎng)站整體、公司的想法、精神等，a、14 LOGO的應(yīng)用一直是CIS引進(jìn)的基礎(chǔ)和最直接的其重要性不言而喻，通過(guò)標(biāo)識(shí)的識(shí)別、區(qū)別、聯(lián)想、記憶的增強(qiáng)，促進(jìn)被標(biāo)識(shí)體與其對(duì)象的交流和交流，建立和維持對(duì)被標(biāo)識(shí)體的認(rèn)知、認(rèn)同，達(dá)到提高效率、認(rèn)知度、榮譽(yù)度的效果。 作為時(shí)代的大膽，網(wǎng)絡(luò)標(biāo)志的設(shè)計(jì)應(yīng)該遵循CIS的整

9、體規(guī)律，已經(jīng)突破。 因此，網(wǎng)絡(luò)標(biāo)志的設(shè)計(jì)必須具備以下要素：1.關(guān)于識(shí)別性、識(shí)別性的要求容易識(shí)別、容易存儲(chǔ)。 顏色和構(gòu)圖都必須重視簡(jiǎn)潔。 2 .特異性是指與其他標(biāo)志相區(qū)別，具有自己的特性，與其他標(biāo)志相區(qū)別。 5.2.6制作要素、a、15、3 .內(nèi)涵型設(shè)計(jì)標(biāo)志必須有其自身的意義。 否則，只有更美，完美，形式上的美，沒(méi)有意義。 4 .法律意識(shí)關(guān)于LOGO的法律意識(shí)必須注意敏感的文字、形式和語(yǔ)言。5 .整體形象企劃(構(gòu)造性)如果LOGO的結(jié)構(gòu)不同，心理意識(shí)就不同。 水平線(xiàn)給人的感覺(jué)平靜，垂直線(xiàn)給人的感覺(jué)高，坦率，輕，焦躁，給人的感覺(jué)是擴(kuò)張和收縮，容易引起人的注意等。 a，16，5.2.8logo設(shè)計(jì)決

10、定品牌命運(yùn)的5.2.8 logo設(shè)計(jì)分類(lèi)1 .具體表現(xiàn)形式：具體表現(xiàn)形式忠實(shí)于客觀(guān)物體的自然形態(tài)，是用被客觀(guān)物體高度概括精制的具體圖形設(shè)計(jì)的表現(xiàn)形式。 人體造型的圖形動(dòng)物造型的圖形、a、17、植物造型的圖形器物造型的圖形自然造型的圖形、a、18、2 .抽象表現(xiàn)形式抽象表現(xiàn)形式用抽象的圖形符號(hào)表現(xiàn)標(biāo)識(shí)的意思，把合理計(jì)劃的幾何圖形和符號(hào)作為表現(xiàn)形式。 (1)圓形標(biāo)志圖案；(2)四邊形標(biāo)志圖案；(3)三角形標(biāo)志圖案；(2)多邊形標(biāo)志圖案；(3)方向形標(biāo)志圖案；a，20，3 .文字表現(xiàn)形式：文字表現(xiàn)與標(biāo)志圖像和字體組合成一體。 標(biāo)志是視覺(jué)圖形，而文字標(biāo)志同時(shí)具有語(yǔ)言特征和語(yǔ)音形式。 (1)漢字標(biāo)識(shí)圖形

11、；(2)數(shù)字標(biāo)識(shí)圖形；(3)數(shù)字標(biāo)識(shí)圖形，a、21、5.3導(dǎo)航欄的統(tǒng)一和變化；5.3.1導(dǎo)航欄導(dǎo)航系統(tǒng)的作用：告訴我能去哪里，這里有什么，附近有什么，下一步驟1 .導(dǎo)航系統(tǒng)的分類(lèi)全站、區(qū)域、情景式、輔助導(dǎo)航。 2 .網(wǎng)站索引：把網(wǎng)站內(nèi)容按照關(guān)鍵字、詞匯、標(biāo)簽按一定順序(字母、筆畫(huà))排列的內(nèi)容。 內(nèi)容之間可以沒(méi)有等級(jí)關(guān)系。 3 .導(dǎo)游：設(shè)計(jì)指南主要基于以下原則：導(dǎo)游必須短。 用戶(hù)隨時(shí)都可以離開(kāi)導(dǎo)游。 允許用戶(hù)在導(dǎo)游中前進(jìn)、后退的自由移動(dòng)。 指南的設(shè)計(jì)目的是回答問(wèn)題。 應(yīng)明確截圖具有擴(kuò)大重要功能的效果。 如果手冊(cè)有好幾頁(yè)，就需要目錄。 a、22、4 .高級(jí)設(shè)計(jì)導(dǎo)航方法：個(gè)性化是向用戶(hù)提供根據(jù)個(gè)人行

12、為、需求和喜好修剪過(guò)的網(wǎng)頁(yè)。 定制(雖然知道用戶(hù)想要什么，但有時(shí)不知道用戶(hù)自己需要什么)可以直接控制用戶(hù)，來(lái)調(diào)整表現(xiàn)形式、導(dǎo)航和內(nèi)容選項(xiàng)的組合。 可視化：使用戶(hù)可以用可視化的方法閱覽。 “在網(wǎng)上閱覽博物館的網(wǎng)站，就像訪(fǎng)問(wèn)現(xiàn)實(shí)的博物館一樣有臨場(chǎng)感”。 社會(huì)化：用戶(hù)對(duì)互聯(lián)網(wǎng)的需求點(diǎn)、興趣點(diǎn)可以通過(guò)觀(guān)察其他用戶(hù)的行動(dòng)來(lái)推論。 打開(kāi)a、23、網(wǎng)頁(yè)后，催促閱覽者閱覽，除了主頁(yè)上的內(nèi)容外，按鈕設(shè)計(jì)還發(fā)揮了重要的作用。 好的按鈕設(shè)計(jì)一定很顯眼，能“誘惑”用戶(hù)的眼睛。 以下是好按鈕設(shè)計(jì)不可缺少的5個(gè)特征： 1 .顏色必須比平穩(wěn)的頁(yè)面更不同，所以必須是明亮、對(duì)比度高的顏色。 2 .位置他們必須位于“位置”用戶(hù)希

13、望容易找到的地方。 產(chǎn)品旁邊、頁(yè)面、導(dǎo)航的頂部右側(cè)這些都是顯眼、不易找到的地方。 5.3.2按鈕設(shè)計(jì)、a、24、3 .文字表現(xiàn)按鈕使用哪個(gè)文字表現(xiàn)對(duì)用戶(hù)很重要。 必須簡(jiǎn)單明確要點(diǎn)，以注冊(cè)、下載、制作、試行等動(dòng)詞開(kāi)始。 4 .尺寸問(wèn)題是你最重要的按鈕，如果你想讓更多的用戶(hù)點(diǎn)擊，更引人注目并不是壞事。 把這個(gè)按鈕設(shè)計(jì)得比其他按鈕大，讓用戶(hù)在更多的地方找到并點(diǎn)擊。 5 .“呼吸”可能的空間按鈕不能和網(wǎng)頁(yè)的其他元素一起塞。 進(jìn)一步強(qiáng)調(diào)需要足夠的邊距，為了使文字更容易閱讀，需要更多的padding。 在a、25、網(wǎng)頁(yè)設(shè)計(jì)上，簡(jiǎn)約不一定與極簡(jiǎn)約主義者的設(shè)計(jì)美學(xué)相同。 簡(jiǎn)單的網(wǎng)站只是從設(shè)計(jì)、內(nèi)容和代碼中刪除

14、了所有不必要的元素。非常簡(jiǎn)單的網(wǎng)站滿(mǎn)足了這個(gè)標(biāo)準(zhǔn)，有很多網(wǎng)站，無(wú)論你怎么想，都還不像是適合簡(jiǎn)單定義的“非常簡(jiǎn)單主義”。 5.4網(wǎng)頁(yè)的簡(jiǎn)單設(shè)計(jì)，5.4.1簡(jiǎn)單設(shè)計(jì)的特點(diǎn)1 .簡(jiǎn)單設(shè)計(jì)便于網(wǎng)站的導(dǎo)航。 2 .簡(jiǎn)單的設(shè)計(jì)可以加快頁(yè)面的加載。 3 .設(shè)計(jì)簡(jiǎn)單，內(nèi)容容易“閱覽”。 4 .設(shè)計(jì)和創(chuàng)建簡(jiǎn)單的網(wǎng)站更快。 5 .簡(jiǎn)單的代碼容易避免脆弱性。 6 .小文件意味著較少的服務(wù)器空間，a、26、5.4.2如何簡(jiǎn)化站點(diǎn)1 .刪除不必要的裝飾元素。 2 .“這些因素真的重要嗎？ ”經(jīng)常自問(wèn)。 3 .網(wǎng)站上的哪個(gè)要素可以結(jié)合起來(lái)？ 4 .能把一部分頁(yè)面整理成一頁(yè)嗎？ 5、確保網(wǎng)站后端和前端一樣的簡(jiǎn)潔，a、27、

15、5.5網(wǎng)頁(yè)布局設(shè)計(jì)探討了網(wǎng)頁(yè)布局設(shè)計(jì)的藝術(shù)表現(xiàn)方法，掌握網(wǎng)頁(yè)布局設(shè)計(jì)的發(fā)展趨勢(shì)，傳統(tǒng)的平面設(shè)計(jì)中美形式規(guī)則和現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)將平面設(shè)計(jì)中美的基本形式和要素應(yīng)用于網(wǎng)頁(yè)，對(duì)提高網(wǎng)頁(yè)表現(xiàn)力、改善網(wǎng)站運(yùn)營(yíng)效果具有重要意義。 5.5.1布局設(shè)計(jì)在網(wǎng)頁(yè)上的藝術(shù)表現(xiàn)布局設(shè)計(jì)，在布局上把有限的視覺(jué)要素有機(jī)地排列起來(lái)，通過(guò)合理的思考，表現(xiàn)出個(gè)人風(fēng)格和具有藝術(shù)特色的視覺(jué)效果。 版面設(shè)計(jì)在傳遞信息的同時(shí)，還能創(chuàng)造出感覺(jué)上的美。 版面設(shè)計(jì)是現(xiàn)代設(shè)計(jì)藝術(shù)的重要組成部分，不僅體現(xiàn)了技能，還體現(xiàn)了技術(shù)和藝術(shù)的高度統(tǒng)一。 隨著互聯(lián)網(wǎng)和計(jì)算機(jī)技術(shù)的進(jìn)步，網(wǎng)絡(luò)以獨(dú)特的優(yōu)勢(shì)迅速壟斷了世界。 由于其發(fā)展融合了更多的新技術(shù)，其藝術(shù)表現(xiàn)形式

16、比傳統(tǒng)媒體更為多樣，具有獨(dú)特的特征。 a、28、1 .高交互性、多維性和效果多元性是媒體的基本特征，媒體相互作用的程度和形式不同。 為了保持閱覽者的網(wǎng)站的新鮮度，很多網(wǎng)站是定期的或不定期的改版，內(nèi)容需要不斷變更或“不斷更新”。 這是為了保持網(wǎng)站的視覺(jué)形象的一貫性，需要不斷地創(chuàng)作新的網(wǎng)頁(yè)設(shè)計(jì)作品，高的互動(dòng)媒體特性需要不斷地更新網(wǎng)頁(yè)布局的設(shè)計(jì)，如果不注意設(shè)計(jì)方面的互動(dòng)表現(xiàn)，網(wǎng)絡(luò)作品就會(huì)a、29、2 .“無(wú)法控制”的效果和“DIY”的網(wǎng)頁(yè)布局網(wǎng)絡(luò)應(yīng)用很難制定統(tǒng)一的標(biāo)準(zhǔn)，它無(wú)法控制網(wǎng)頁(yè)布局設(shè)計(jì)的效果。 站點(diǎn)的布局也可以根據(jù)閱覽者的喜好自由選擇或變更。 現(xiàn)在，也有網(wǎng)站提供了幾種風(fēng)格，為讀者提供“DIY”。 3 .網(wǎng)絡(luò)技術(shù)和藝術(shù)創(chuàng)造力的緊密結(jié)合自不必說(shuō)，網(wǎng)頁(yè)制作的進(jìn)步是技術(shù)的革新帶來(lái)的，網(wǎng)頁(yè)布局設(shè)計(jì)這一藝術(shù)對(duì)技術(shù)有著很深的依賴(lài)性，技術(shù)的更新不斷改變其本質(zhì)。 a、30、網(wǎng)絡(luò)技術(shù)日新月異的發(fā)展給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了新的表現(xiàn)。 在互聯(lián)網(wǎng)世界，技術(shù)始終起著先導(dǎo)性的作用，設(shè)計(jì)隨之發(fā)展，技術(shù)更新對(duì)網(wǎng)頁(yè)布局設(shè)計(jì)的影響確實(shí)很大。 1 .技術(shù)更新為網(wǎng)頁(yè)布局設(shè)計(jì)增加了新的設(shè)計(jì)要素。 (1)桌子布局取代了CSS布局。 (2)新的瀏覽器的出現(xiàn)，使網(wǎng)頁(yè)布局設(shè)計(jì)更為簡(jiǎn)單，5.5.2網(wǎng)頁(yè)布局設(shè)計(jì)的發(fā)展趨勢(shì)，a，31，2 .設(shè)計(jì)方式遵循新的要求頁(yè)像書(shū)籍一樣有文字，畫(huà)像電視一樣有視頻，聲音，幾乎