網頁界面設計與制作第5章-網頁界面中文字的編排設課件

第5章網頁界面中文字的編排設計

課堂學習目標：

了解字體在網頁界面設計中的作用

熟悉常用字體的特征

掌握文字編排設計的規(guī)律和手法

掌握文字群體的編排·

在網頁界面設計領域，文字既是信息傳達的重要媒介，也是具有直觀訴求力的視覺傳達要素?！?/p>

文字在界面中的組織、安排及其藝術處理也越來越多地得到設計師們的重視。文字的編排設計5.4文字在網頁界面設計中的作用5.1關于字體5.2字體編排5.3案例——MODELSAGENCY首頁界面設計5.5課后思考與練習5.65.1文字在網頁界面設計中的作用·

在平面設計的構成要素中有兩大基本元素，一個是圖形，另一個就是文字?！?/p>

只通過圖形來傳遞信息常常不能達到最佳的傳達效果，須借助文字才能進行最有效的說明。·

在網頁界面中也是如此?！?/p>

眾多構成要素中文字具有最佳的直觀傳達作用以及最高的明確性?！?/p>

圖形圖像、色彩、版式、動畫等要素都可以傳達信息，但有時會產生信息傳遞不明確甚至引發(fā)歧義的現象，而通過文字的傳達則可以在很大程度上避免這種情況，從而使瀏覽者能夠順利、方便、愉快地接受信息，不致因信息不明確而失去主題的傳達目的?！?/p>

文字作為圖形符號，在處理文字造型時也適用圖形設計的基本原理，這些原理在文字的形態(tài)構成、空間分布、色彩配置等多方面都具有指導性的作用?！?/p>

通過設計與編排，文字的存在價值在界面中應體現為提高信息的明確程度與可讀性，加強界面的藝術性與視覺感染力，從而獲得良好的視覺傳達效果?！?/p>

具體來說，文字在網頁界面中的作用可以通過以下幾點在優(yōu)秀設計作品中體現出的文字的特性來體現。1．適合性·

文字與具體文字內容以及界面主題相適應?！?/p>

根據主題內容、欲傳達的信息含義和文字所處環(huán)境來確定文字的字體、色彩、形態(tài)和表現形式是保證適合性的必要條件，如圖5-2所示。2．明確性·

文字的主要功能在于傳達外形特征以便瀏覽者識別，保證信息的準確傳遞。·

文字的點劃、橫豎、圓弧等結構要素造成文字本身的不可變異，因而在選擇時須格外注意，在特別強調信息嚴格準確的情況下應優(yōu)先選取易于識別的文字，在進行字體創(chuàng)作時也應保證形態(tài)的明確性，如圖5-3所示。3．易讀性·

文字的形態(tài)及編排設計能夠提高界面的易讀程度?！?/p>

一般情況下，人的視覺對于過粗、過細的文字形態(tài)需花費更多的時間去識別，不易順暢瀏覽?！?/p>

在版式布局中，合理的文字排列與分布會使瀏覽變得極為愉快，對視覺適宜的文字色彩配置也能夠加強界面的易讀性，如圖5-4所示。4．美觀性·

文字可以通過自身形象的個性與風格給人以美的感受，使界面更加美觀?！?/p>

文字形態(tài)的變化與統(tǒng)一、文字編排的節(jié)奏與韻律、文字體量的對比與和諧，都是達成美觀性的表現手法，如圖5-5所示。5．創(chuàng)新性·

文字與界面信息主題需求相配合并進行形態(tài)變化，將文字進行創(chuàng)意發(fā)揮，產生創(chuàng)造的美感，進而加強界面整體設計效果的創(chuàng)新性，給瀏覽者耳目一新的感受，如圖5-6所示。5.2關于字體·

字體，又稱文字的“體式”?！?/p>

文字作為視覺形式的信息傳達符號，同一文字體系中包含有多種不同的字體?！?/p>

在達成利于閱讀和傳遞特定信息的功能第一性的同時，文字可以通過不同字體所特有的藝術風格特征來傳達更多的信息，并形成各具特色的視覺效果?！?/p>

網頁界面中使用的字體，分為中文字體和外文字體兩大類，在設計中常常要交替使用?！?/p>

中文和外文字體都是在標準印刷字體，即中文的宋體、黑體以及拉丁字的新羅馬體與無飾線體的基礎上不斷演化、發(fā)展而來的。·

以常用的字庫來看，僅中文字庫就有漢儀、漢鼎、文鼎、方正、金山、華文等多種，每一種字庫又包含有宋體、黑體、楷體、隸書體、行書體、圓體、新藝體、綜藝體、廣告體、魏碑體、舒同體、勘亭流體、古印體、手寫體……，從幾十種到上百種不一而足，英文字體的種類則更加繁復?！?/p>

字體中最常用的還可以依據其各行、其筆劃的粗細細分為細、中、粗、特、特超等，而新的字體仍在不斷開發(fā)中?！?/p>

設計師在字體上的選擇范圍是非常廣闊的，并且這個范圍還在不斷擴大。5.2.1中文字體·

網頁界面中使用的中文字體主要是漢字字體?！?/p>

蒙古文、藏文等少數民族文字雖然也屬于中文范疇，但因在網頁界面中極少見到，故不在本書討論范圍之內?！?/p>

漢字的形態(tài)、風格是字體的特有屬性，不同的字體會給瀏覽者造成不同的心理印象。·

在選用時要注意不同字體的不同用途，充分理解與掌握，恰當運用?！?/p>

也就是說，字體的選擇要以文字信息的內涵和設計意圖為依據，使字體的形態(tài)、心理效應與在設計中要傳達的主題信息相一致，即文字的內容與形式達到高度統(tǒng)一?！?/p>

下面就幾種常用字體做簡要的說明和分析：

（1）宋體（2）楷體（3）仿宋體（4）黑體

（5）圓體（6）手寫體（7）美術體5.2.2外文字體·

網頁界面中使用的外文字體主要指由拉丁字母構成的文字體系?！?/p>

拉丁字母是世界上使用地域最為廣泛的文字，全世界約有60多個國家以拉丁字母作為表意交流的傳媒符號，英文就是最具代表性的由拉丁字母構成的語言文字系統(tǒng)?！?/p>

拉丁字母雖然只有26個，但拉丁字母字體卻有數百種之多?！?/p>

計算機的普及應用更是為新字體誕生創(chuàng)造了有利的條件?！?/p>

字體造型不僅表現出時代的文化形式，更能顯示出設計者不同的審美口味和趣向?！?/p>

從字型結構來看，拉丁字母包含矩形、圓形和三角形3種基本形，并通過基本形進行組合變化，字高相對統(tǒng)一，而字符寬度則因字而異，這與中文的方形字型具有較大的差異。·

拉丁字母依據其基本結構可以歸納為3種類型：

（1）飾線體（Serif）（2）無飾線體（SansSerif）（3）裝飾體（Decorative，也稱disp1ay）5.3字體編排

5.3.1字號級數·

在界面中文字主要分為兩種類型：一種是具有提示和引導功能的文字，如頁面中的標題、廣告和欄目名稱等；另一種是篇幅較長的閱讀性材料和說明性文字，如網絡文章的正文、主題內容的詳細說明等?！?/p>

從文字功能來看，前者的主要功能在于誘發(fā)視覺的關注，而后者則對易讀性有較高的要求。·

現有的字庫為網頁界面設計師提供了豐富的字體選擇空間，在處理標題性文字和說明性文字時可以不同類型的字體加以區(qū)分?！?/p>

除了字體之外，字號級數在界面中也具有不可忽視的作用，它同樣可以達到區(qū)分文字功能的目的?！?/p>

適當的字號級數是保證文字的識別性和易讀性的重要條件?！?/p>

通常，人在計算機前眼睛距離屏幕為50～80公分，這就要求界面中所用的字符規(guī)格應該限制在一定范圍之內，過小或過大的字號級數都不便瀏覽?！?/p>

計算機對字符的級數作了詳細的劃分，并通過軟件可以達到字符級數的無極縮放功能（如在CorelDRAW中拖動字符可隨意改變大?。！oint，即常說的“磅”數，是字符規(guī)格的基本單位，常用的規(guī)格有6P、7P、8P、9P、10P、12P、14P、18P、20P、24P、30P、36P、42P、48P、60P、72P等?！ぁ銇碚f，屏幕上10P～14P的字符適用于說明性文字，18P以上的字符適用于標題性文字，小于9P的文字在屏幕上不易閱讀?！?/p>

標題文字通常大于正文文字，這是平面設計中的一般規(guī)律?！?/p>

但這一點并非絕對的規(guī)定，應根據具體情況靈活掌握?！?/p>

有時將這一規(guī)律反轉應用，反而能夠獲得新穎獨特的界面效果?！?/p>

不同字號級數配合上相同的字體，會給人造成不同的心理印象，相同字號級數的不同字體也會產生不同的心理效果，在設計中需要依靠設計師的經驗去加以把握，如圖5-19所示。5.3.2字符間距·

中國書法藝術講布白、求行氣，字里行間形成的黑白對比關系是體現書法藝術美感的重要表現因素?！?/p>

界面設計中文字依靠行距字間的寬窄程度處理，可以產生空間指引作用并達到類似于書法藝術中文字布局的藝術美感?！?/p>

字符的字距和行距是決定文字易讀性的重要因素，通常所說的讀竄了行，就是由于行距過窄或文字過密造成的?！?/p>

界面中正文的字距通常采用“密距”，即設定字符間隔為0，而標題和指示性文字的間距可以根據需要自行設定，沒有統(tǒng)一的標準?！?/p>

從閱讀習慣來看，界面中中文正文的字符數每行為20～35個較為適宜，西文則約40～70個字符最容易閱讀?！?/p>

每行少于此數會造成瀏覽者視線頻繁移行，多于此數則會使人目光作長距離水平移動而感到疲倦，因此較寬的文字幅面可考慮采用分欄的排布方式。·

中文正文的行距一般在半個字高（半方）和一個字高（全方）之間。·

計算方式為從上一行文字頂端到下一行文字頂端。·

所以設定時行距通常定為字高的150%～200%，除非特殊需要，一般最大不超過200%?！?/p>

西文的行距通常小于中文行距?！?/p>

標題和篇幅較短的文本可以采取較為自由的形式?！?/p>

不同的字符間距在視覺上給人以不同的心理印象，設計時要加以注意，針對不同需求而設定或松或緊的差異性效果，同時應當避免因過度擁擠而影響瀏覽者的閱讀興趣，如圖5-20所示。5.4文字的編排設計·

以文字表現為中心的編排設計，是網頁界面達成視覺信息傳達功能的重要手段?！?/p>

文字編排設計以傳播效率為首要目的，要求做到易看易懂，一目了然地傳達信息是設計的根本原則?！?/p>

文字編排設計除了傳達功能外，還可以像一般藝術創(chuàng)作那樣具有表現情感的能力。·

在現代繪畫中，勃拉克和畢加索最早把文字作為藝術材料應用于繪畫作品中，他們認為：“詞句和文章不應僅僅用于閱讀，只要順便地反射到觀眾的眼睛里，一瞥而過就行了?！薄?/p>

文字的實體字群與留白虛空間的對比，以及文字在界面上產生的灰色值，能夠給人心理上和情感上造成愉快或壓抑的不同反應?！?/p>

這種反應如果與文字內容所傳播的信息相一致，會起到增強作品感染力的作用?！?/p>

以文字為創(chuàng)作元素的平面設計作品十分常見，圖5-21所示即為幾幅設計名家的作品。5.4.1文字編排的規(guī)律·

文字編排應當注重界面上下、左右空間和面積的經營，易于瀏覽并創(chuàng)造形式美感?！?/p>

通常應根據設計的目的選擇適當的字體，運用對比、協(xié)調、節(jié)奏、韻律、比例、平衡、對稱等形式創(chuàng)造法則，構造特定的表現形式，以達到更具感染力的傳播信息的目的。1．對比·

界面的空間排布美感是在對比中產生的?！?/p>

通過對比可以突出主要成分，使界面主要信息一目了然?！?/p>

主要的手法有以下幾種：

（1）大小對比（2）粗細對比（3）明暗對比（4）疏密對比（5）主從對比（6）綜合對比2．統(tǒng)一與協(xié)調·

在網頁界面設計中，統(tǒng)一與協(xié)調也是創(chuàng)造形式美感的重要法則?！?/p>

優(yōu)秀設計作品中的文字編排，都給人以完整協(xié)調的視覺印象。·

尤其是在使用對比手法時，過分強調對比關系、空間對比過大或各種對比元素混用，會導致界面的混亂?！?/p>

為了使界面中各種元素協(xié)調起來，通常采用的手法是選取同類的造型因素。·

有相同形態(tài)特征的造型因素在界面中反復出現，就會形成統(tǒng)一的調子，使整個界面具有整體感，從而達到協(xié)調的目的。·

如字體選用同一字族的不同字體，以相同的字距和行距，選用近似色彩和字號級數，控制近似面積等都是實現界面統(tǒng)一和協(xié)調的常用方法?！?/p>

如果造型因素本身帶有動感，可以將各因素的運動方向設定為相同方向，或添加輔助元素來形成統(tǒng)一的視覺印象。·

圖5-28所示的界面設計作品為對比中求得統(tǒng)一的具有協(xié)調和整體感的設計實例。3．平衡

·

平衡指在界面中合理地安排各個文字群及視覺現象，使瀏覽者產生穩(wěn)定可靠的感覺?！?/p>

界面中文字編排要求視覺上產生類似于天平平衡的印象?！?/p>

失去平衡的文字編排設計，將得不到瀏覽者的信賴，并給人以粗劣的印象。·

對稱的文字編排形式是獲得平衡最基本的手段，但對稱的形式顯得平淡乏味，沒有生命力和趣味感，通常不宜采用?！?/p>

界面中的平衡是要求動勢中的平衡，利用巧妙的手法加強布局中較弱的一方，是界面中求取平衡的最佳手法?！?/p>

圖5-29所示為變化中獲得平衡的設計實例。

4．節(jié)奏與韻律·

節(jié)奏與韻律由于具有活躍的運動感，是形成輕松活潑的形式美感的重要方法?！?/p>

界面中反復出現有特征的文字造型并按照一定的規(guī)律排列，就會產生強烈的節(jié)奏和韻律。·

節(jié)奏和韻律也是界面條理性的表現，強調文字的節(jié)奏感與韻律感，有利于界面形式的協(xié)調統(tǒng)一?！?/p>

同一特征的文字造型多次連接排列，或相同造型由大到小、由密而疏有秩序地出現，都會形成節(jié)奏與韻律?！?/p>

即使不同的造型因素，只要按一定規(guī)律來排布，甚至特征明顯的文字造型僅僅出現兩次，都可以產生節(jié)奏與韻律?！?/p>

圖5-30所示為富有節(jié)奏與韻律感的網頁界面設計作品。5．視覺誘導·

在界面的文字編排中，必須遵循視覺運動的法則，使一部分文字首先接觸瀏覽者的視線，然后誘導視線依照設計師安排好的結構形式順序瀏覽，從而達到順暢傳遞信息的目的。·

視覺誘導主要可以通過以下幾種方式實現：

（1）線的引導（2）圖形的引導5.4.2文字編排設計的手法·

對于網頁界面整體而言，文字編排有若干相對規(guī)律性的設計手法。·

不同面積、不同份量的文字群體在界面中合理配置，形成字與留白、字與字、群與群以及字與背景和圖形的相互映襯，從而構成穩(wěn)定、完整而具有活力的界面形式?！?/p>

常用的手法有以下幾種：1．控制界面四角與對角線·

界面的四角具有潛在的重要性?！?/p>

四角是表示界面邊界的四個點?！?/p>

在四角配置文字或符號，界面的勢力范圍就明確地確定下來，界面中即使存在讓人感覺動蕩不定的元素也會因此而穩(wěn)定下來。·

把界面四角連接起來的是對角線，對角線的交叉點是界面的中心點，這個中心點是潛在于界面之中的基本點和視覺中心?！?/p>

以控制界面的四角和對角線作為界面文字編排的基本手法，會使瀏覽者產生一種穩(wěn)定、可靠的視覺感受。2．將文字以線或面的形式加以構成·

界面中的文字往往不是以單個字符的形式出現，而是以字群方式存在?！?/p>

把若干文字排列起來，就形成了線或面，可以按照平面構成的方式進行編排處理?！?/p>

按事先設定的幾何圖形的輪廓來編排文字的構成，可以使界面形式顯得新穎活潑，如圖5-34所示。3．文字造型參差錯落·

為使界面產生活潑、有趣味的微妙效果，可以在完整的文字編排形式中安排部分非規(guī)律性造型以形成錯落變化?！?/p>

使用這一手法時應當注意，錯落的程度或在界面中所占面積如果過大反而會減弱效果，使造型顯得混亂，因而必須謹慎選擇錯落出現的位置和幅度。·

一般而言，錯落應出現在周圍有較充分的留白空間的場所，效果較為顯著，如在界面中央或正上方表現效果較好?！?/p>

標題性文字往往多用此手法處理，在框線中加入文字以及文字位置錯落均較為常見，如圖5-35所示。4．文字中加入雜音·

所謂文字中加入雜音，即指將文字符號與其他構成元素疊加使用，往往會產生意料之外的趣味感，使界面達到令人耳目一新的視覺效果?！?/p>

加入雜音的手法有下列幾種：

（1）圖形與文字的疊加（2）文字與文字的疊加（3）文字邊緣的處理（4）文字的缺損與破裂5．分離排列·

將屬于一個文字群體的字符獨立出來加以排列，也是一種引人注目的編排方法，可以使界面活潑而富有情趣。·

分離排列出現于70年代的后半期，在平面設計作品中較為常見，是具有現代裝飾美感的文字編排手法，如圖5-37所示。5.4.3文字群體的編排·

文字群體的主體是說明性文字，也就是常說的正文?！?/p>