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

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

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

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

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

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

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

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

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

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

10、定品牌命運的5.2.8 logo設(shè)計分類1 .具體表現(xiàn)形式：具體表現(xiàn)形式忠實于客觀物體的自然形態(tài)，是用被客觀物體高度概括精制的具體圖形設(shè)計的表現(xiàn)形式。 人體造型的圖形動物造型的圖形、a、17、植物造型的圖形器物造型的圖形自然造型的圖形、a、18、2 .抽象表現(xiàn)形式抽象表現(xiàn)形式用抽象的圖形符號表現(xiàn)標(biā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)志是視覺圖形，而文字標(biāo)志同時具有語言特征和語音形式。 (1)漢字標(biāo)識圖形

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

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

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

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

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

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