網(wǎng)頁文字編排設(shè)計(jì)

1、網(wǎng)頁網(wǎng)頁文字文字編排設(shè)計(jì)編排設(shè)計(jì)主要內(nèi)容4.1 網(wǎng)頁字體與字體編排網(wǎng)頁字體與字體編排14.2 文字編排的基本形式文字編排的基本形式24.3 網(wǎng)頁文字設(shè)計(jì)方法網(wǎng)頁文字設(shè)計(jì)方法3 在網(wǎng)頁設(shè)計(jì)中，字體的處理與色彩、版式、圖形等其他設(shè)計(jì)元素的處理一樣非常關(guān)鍵。從藝術(shù)的角度可以將字體本身看成是一種藝術(shù)形式，它在個(gè)性和情感方面對人們有著很大影響。4.1 網(wǎng)頁字體與字體編排1.標(biāo)志 文字型標(biāo)志是以含有象征意義的文字造型作基點(diǎn)，對其變形或抽象地改造，使之圖案化。使用文字作為網(wǎng)站標(biāo)志，可以使用中文或外文及數(shù)字組合來表現(xiàn)，意義簡單明確。 4.1.1 網(wǎng)頁文字的形式概述 2.標(biāo)題 除了文章的標(biāo)題采用文字形式外，一些

2、信息的欄目、網(wǎng)絡(luò)廣告的標(biāo)題等也是通過文字形式體現(xiàn)的。標(biāo)題不一定是一個(gè)完整的句子，可以使用短語或口號。文字標(biāo)題要盡量簡單明了、引人注目，這樣才能得到瀏覽者的青睞。標(biāo)題應(yīng)安排在醒目的位置，使用較大的字體，在版面中作點(diǎn)或線的編排。為了保證標(biāo)題的顯示效果，大部分設(shè)計(jì)者都將其設(shè)置為圖形格式。 3.超級鏈接 文字鏈接是網(wǎng)頁中最常見的超鏈接形式，能直觀地呈現(xiàn)鏈接的相關(guān)主題信息，使瀏覽者對所包含信息一目了然。文字鏈接可方便瀏覽者對信息的檢索。文字鏈接可應(yīng)用于網(wǎng)頁中導(dǎo)航欄鏈接、側(cè)焦點(diǎn)鏈接欄的鏈接、中部分類信息主題鏈接以及文章中關(guān)鍵詞的鏈接等。 4.文字信息 文字信息是網(wǎng)頁內(nèi)容的具體表現(xiàn)，是傳達(dá)信息的主體部分。其

3、主體作用是動(dòng)畫、圖形和影音等其他任何元素所不能取代的。文字信息是標(biāo)題的詳細(xì)內(nèi)容，瀏覽者在閱讀標(biāo)題之后，還要在文字信息中得到進(jìn)一步的解答。在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，文字信息雖然簡單，但內(nèi)容一定要適合標(biāo)題。同時(shí)對文字的字體、字形、大小、顏色和編排要進(jìn)行精心的設(shè)置，以達(dá)到更好的瀏覽效果。 字體的最大特點(diǎn)就是每種字體給人帶來不同的情感和風(fēng)格屬性。字體具有兩方面的作用：一是實(shí)現(xiàn)字意與語義的功能，二是美學(xué)效應(yīng)。從加強(qiáng)平臺(tái)無關(guān)性的角度來考慮，正文內(nèi)容最好采用默認(rèn)字體。因?yàn)闉g覽器是用本地機(jī)器上的字庫顯示頁面內(nèi)容。在網(wǎng)頁設(shè)計(jì)中準(zhǔn)確選擇字體，是每個(gè)網(wǎng)頁設(shè)計(jì)師首先要考慮的問題。4.1.2 字體的使用1.中文字體（1）規(guī)范字

4、體u宋體字型結(jié)構(gòu)方中有圓，剛?cè)嵯酀?jì)，既典雅莊重，又不失韻昧靈氣，從視覺角度來說，宋體閱讀最省目力，不易造成視覺疲勞，具有很好的易讀性和識(shí)別性。標(biāo)題使用宋體給人穩(wěn)健、傳統(tǒng)的印象，宋體由書法體發(fā)展而來，最便于閱讀。u楷體字型柔和悅目，間架結(jié)構(gòu)舒張有度，可讀性和識(shí)別性均較好，適用于較長的文本段落，也可用于標(biāo)題。u仿宋體筆畫粗細(xì)均勻，秀麗挺拔，有輕快、易讀的特點(diǎn)，適用于文本段落。因其字型娟秀，力度感差，故不宜用作標(biāo)題。u黑體它的橫豎線條粗細(xì)相同，結(jié)構(gòu)非常合理。黑體不僅莊重醒目，而且極富現(xiàn)代感，因其形體粗壯，在較小字體級數(shù)時(shí)宜采用等線體（即細(xì)黑），否則不易識(shí)別。標(biāo)題使用黑體給人以合理、理智的印象。u圓體

5、視覺沖擊力不如黑體，但在視覺心理上給人以明亮清新、輕松愉快的感覺，但其識(shí)別性弱，故只適宜作標(biāo)題性文字。1.中文字體（2）手寫體（書法體） 手寫體分為兩種，一種來源于傳統(tǒng)書法，如隸書體，行書體，另一種是以現(xiàn)代風(fēng)格創(chuàng)造的自由手寫體，如廣告體，POP體。手寫體只適用于標(biāo)題和廣告性文字，長篇文本段落和小字體級數(shù)時(shí)不宜使用，應(yīng)盡量避免在同一頁面中使用兩種不同的手寫體，因?yàn)槭謱戵w形態(tài)特征鮮明顯著，很難形成統(tǒng)一風(fēng)格，不同手寫體易造成界面雜亂的視覺形象，手寫體與黑體宋體等規(guī)范的字體相配合，則會(huì)產(chǎn)生動(dòng)靜相宜，相得益彰的效果。1.中文字體（3）美術(shù)體（裝飾字體） 美術(shù)體是在宋體、黑體等規(guī)范字體基礎(chǔ)上變化而成的各種

6、字體，如綜藝體、琥珀體。美術(shù)體具有鮮明的風(fēng)格特征，不適于文本段落，也不宜混雜使用，多用于字體級數(shù)較大的標(biāo)題，發(fā)揮引人注目，活躍界面氣氛的作用。國內(nèi)電腦字體根據(jù)字庫文件不同稍有區(qū)別，如常用的方正字庫、文鼎字庫、華康字庫等。2.拉丁字母（1）飾線體 此類字體在筆畫末端帶有裝飾性部分，筆畫精細(xì)對比明顯，與中文的宋體具有近似形態(tài)特征，飾線體在閱讀時(shí)具有較好的易讀性，適于用作長篇幅文本段落。代表字體是新羅馬體（Times New Roman）。（2）無飾線體 筆畫的粗細(xì)對比不明顯，筆畫末端沒有裝飾性部分，字體形態(tài)與中文的黑體相類似。由于其筆畫粗細(xì)均勻，故在遠(yuǎn)距離易于辨認(rèn)，具有很好的識(shí)別性，多用于標(biāo)題和指

7、示性文字。無飾線體具有簡潔規(guī)整的形態(tài)特征，符合現(xiàn)代的審美標(biāo)準(zhǔn)。代表字體是赫爾維梯卡體（Helvetica）。（3）裝飾體 即通常所說的“花”體，由于此類字體偏重于形式的裝飾意味，閱讀時(shí)較為費(fèi)力，易讀性較差，只適合于標(biāo)題或較短文本，類似于中文的美術(shù)體和手寫體。代表字體是草體（Script）。1、文字的大小決定形象 標(biāo)題的大小控制了畫面的形象。放大標(biāo)題會(huì)給人有力量、活躍、自信的印象；縮小則表現(xiàn)出纖細(xì)和縝密的印象。另外，文字大小的對比也會(huì)左右印象。標(biāo)題文字的大小與正文之比叫做跳動(dòng)率。跳動(dòng)率越大，畫面越活躍；反之，越穩(wěn)重。 字號大小可以用不同的方式來計(jì)算，例如磅(point)或像素(pixel)。因?yàn)?/p>

8、網(wǎng)頁文字是通過顯示器顯示，所以建議采用像素為單位。較大的字體可用于標(biāo)題或其他需要強(qiáng)調(diào)的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字號容易產(chǎn)生整體感和精致感，但可讀性較差。4.1.3 文字的大小 2.粗細(xì)印象優(yōu)先 將標(biāo)題的文字變大，粗細(xì)效果會(huì)加倍。例如，大而粗的文字最有精神，大而細(xì)的文字都市性印象最強(qiáng)。另一方面，將文字變小，粗細(xì)效果會(huì)減弱。雖然細(xì)而小的文字有優(yōu)美的感覺，但如果使用細(xì)而大的文字，效果會(huì)更加明顯?？傊?，文字越大，越能強(qiáng)化粗細(xì)的印象。4.1.3 文字的大小 網(wǎng)頁設(shè)計(jì)者可以用字體更充分地體現(xiàn)設(shè)計(jì)中要表達(dá)的情感。字體選擇是一種感性、直觀的行為。粗體字強(qiáng)壯有力，有男性特點(diǎn)，適

9、合機(jī)械、建筑業(yè)等內(nèi)容；細(xì)體字高雅細(xì)致有女性特點(diǎn)，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。在同一頁面中，字體種類少，界面雅致，有穩(wěn)定感；字體種類多，則界面活躍，豐富多彩。關(guān)鍵是如何根據(jù)頁面內(nèi)容來掌握這個(gè)比例關(guān)系。4.1.4 字體的粗細(xì)1.字體粗細(xì)特征 字體細(xì)顯優(yōu)美，粗顯有力。將標(biāo)題文字變細(xì)，就會(huì)顯得十分優(yōu)美。宋體也好、黑體也罷，哪一種字體變細(xì)都會(huì)產(chǎn)生優(yōu)美的意味。將文字變粗，效果增強(qiáng)，粗字則傳遞了強(qiáng)而有力的印象。 2細(xì)字不適合做新聞標(biāo)題 字體網(wǎng)頁新聞的大標(biāo)題要用粗字來表示，如果用細(xì)字，看起來就像無聊的、沒有什么價(jià)值的新聞。粗字熱情而細(xì)字冷靜，因此，熱門的新聞與細(xì)字不相稱。粗字給人有精神、有力量的印象

10、，最適合于強(qiáng)調(diào)戲劇性信息與富有活力感的網(wǎng)頁。3 正文不要應(yīng)用粗細(xì)變化 粗細(xì)效果對于正文中的小字是一樣的。但是如果極端運(yùn)用粗細(xì)變化，就會(huì)造成可讀性的降低。調(diào)整字體粗細(xì)要把握好度。特別應(yīng)注意的是，主頁的設(shè)計(jì)未必能夠同制作者所指定的設(shè)計(jì)完全相同，考慮到這個(gè)差距的存在性，還是使用標(biāo)準(zhǔn)式樣比較穩(wěn)妥。 字距與行距的處理能直接體現(xiàn)設(shè)計(jì)作品的風(fēng)格與品味，也能夠影響讀者的視覺和心理感受?，F(xiàn)代網(wǎng)頁設(shè)計(jì)較流行把標(biāo)題文字字距拉開或變窄的排列方式，來體現(xiàn)輕松、舒展、娛樂或抒情的版面，也常通過壓扁文字或加寬行距來體現(xiàn)。此外，運(yùn)用字距與行距的寬窄同時(shí)綜合變化，這樣能夠令作品版式增加空間層次和彈性。字距與行距變化不是絕對的，

11、關(guān)鍵是要根據(jù)設(shè)計(jì)的主題內(nèi)容和設(shè)計(jì)情況需要進(jìn)行靈活處理。 行距的變化也會(huì)對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。行距的常規(guī)比例為10：12，即用字10點(diǎn)，則行距12點(diǎn)。適當(dāng)?shù)男芯鄷?huì)形成一條明顯的水平空白條，以引導(dǎo)瀏覽者的目光，而行距過寬會(huì)使一行文字失去較好的延續(xù)性。 除了對于可讀性的影響，行距本身也是具有很強(qiáng)表現(xiàn)力的設(shè)計(jì)語言，為了加強(qiáng)界面的裝飾效果，可以有意識(shí)地加寬或縮窄行距，體現(xiàn)獨(dú)特的審美意趣，但要注意行距一般不超過字高的200%。加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強(qiáng)界面的空間層次

12、與彈性，表現(xiàn)出獨(dú)到的匠心。4.1.5 字距與行距 網(wǎng)頁設(shè)計(jì)者必須考慮到大多數(shù)瀏覽者的機(jī)器里只裝有三種字體類型及一些相應(yīng)的特定字體。而我們指定的其他字體在瀏覽者的機(jī)器里并不一定能夠找到，這給網(wǎng)頁設(shè)計(jì)帶來很大的局限。1.特殊字體應(yīng)用 一些網(wǎng)站設(shè)計(jì)者喜歡使用特殊的字體，雖然可以在網(wǎng)頁中使用特殊的字體，但是如果瀏覽者計(jì)算機(jī)上沒有安裝相應(yīng)的字體，則顯示效果無法預(yù)料，顯示的網(wǎng)頁可能非常糟糕。為了避免你所選擇的字體在訪問者的計(jì)算機(jī)上不能顯示，有兩種解決問題的辦法：層疊樣式表CSS有助于解決這些問題，而通常的方法是在的確有必要使用特殊字體的地方，將文字設(shè)計(jì)成圖像，然后插入頁面中。 4.1.6 特殊字體2文字圖

13、形化 字體在一定的條件下，確實(shí)不能用電腦中提供的字體，必須要自己創(chuàng)造。這也是漢字魅力所在的地方。所謂“文字圖形化”是為了實(shí)現(xiàn)文字的字體效果，將文字筆畫做合理的變形搭配，使之產(chǎn)生類似有機(jī)或無機(jī)圖形的趣味，強(qiáng)調(diào)字體本身的結(jié)構(gòu)美和筆畫美，把記號性的文字作為圖形元素來表現(xiàn)，同時(shí)又強(qiáng)化了原有的功能。 3文字與圖形的疊置 在圖形上疊加文字，圖形就成了背景。文字與圖像之間或文字與文字之間在經(jīng)過疊置后，能夠產(chǎn)生空間感、跳躍感、透明感、雜音感和敘事感，從而成為頁面中活躍的、令人注目的元素。文字置于圖形上，會(huì)產(chǎn)生視覺的雜音，影響文字的可讀性，但能造成頁面獨(dú)特的視覺效果。這種不追求易讀，而刻意追求“雜音”的表現(xiàn)手法

14、，體現(xiàn)了一種藝術(shù)思潮。 網(wǎng)頁里的正文部分是由許多單個(gè)文字經(jīng)過編排組成的群體，我們要充分發(fā)揮這個(gè)群體形狀在界面整體布局中的作用。4.2 文字編排的基本形式1. 兩端對齊 文字編排可以橫排也可豎排，只要左右或上下的長度對齊，這樣的字群組合就顯得整齊、端正、嚴(yán)謹(jǐn)、大方、美觀。但要注意避免平淡，可選取不同形式的字體穿插使用，這種方式容易與圖片混排。 4.2.1 文字編排方式 2.一端對齊 一端對齊能產(chǎn)生視覺節(jié)奏與韻律的形式美感。通過左對齊或右對齊的方式使行首或行尾自然形成一條清晰的垂直線。另一端任其長短不同，能產(chǎn)生虛實(shí)變化，又富有節(jié)奏感。左對齊符合人們的閱讀時(shí)的習(xí)慣，有親切感。右對齊可改變?nèi)藗兊拈喿x習(xí)

15、慣，會(huì)顯得有新意，有一定的格調(diào)。 3.居中排列 以中心軸為準(zhǔn)，文字居中排列，左右兩端字距相等。這種編排形式可令視線集中，中心突出顯得優(yōu)雅、莊重、有個(gè)性。不足之處是閱讀起來不太方便，此形式適宜文字不多的版面編排。將文字居中排列，用于網(wǎng)絡(luò)廣告中，有利于主題信息的傳達(dá)。 4.文字繞圖編排 文字圍繞圖形邊緣排列，這樣穿插形式的應(yīng)用非常廣泛，能給人以親切、自然、生動(dòng)和融洽的感覺。海爾公司簡介的網(wǎng)頁中，將文字繞圖排列，極具親和力。 5. 自由編排 在綜合甚至打破上述幾種方式的基礎(chǔ)上，使版式更加活潑、更加新穎，具有較強(qiáng)烈的動(dòng)感。但要注意保持版面的完整性，還要注重有一定的編排規(guī)律。傾斜的文字適合版面活潑動(dòng)感的

16、特點(diǎn)，突出視覺焦點(diǎn)。 6. 標(biāo)題與正文的編排 標(biāo)題的字體、位置、大小、排列方向能夠直接影響編排版式的藝術(shù)風(fēng)格。標(biāo)題完全可以打破一般視覺的常規(guī)導(dǎo)向，可橫排、豎排、居中或邊置等排列。標(biāo)題雖是整段或整篇文章的標(biāo)題，但不一定千篇一律地置于段首之上。可作居中、橫向、豎向或邊置等編排處理，甚至可以直接插入字群中，以新穎的界面來打破舊有的規(guī)律。 一般情況下，正文不做分欄處理，因?yàn)榉謾趯⑹篂g覽者將面臨反復(fù)拖動(dòng)滾動(dòng)條的麻煩。如果想打破一欄的單調(diào)，可采用圖文混排的形式。 運(yùn)用對比的法則，將強(qiáng)調(diào)的文字作適當(dāng)?shù)奶幚?，使被?qiáng)調(diào)的文字在字體、規(guī)格、顏色、方位等方面與正文相區(qū)別而產(chǎn)生變化以滿足實(shí)現(xiàn)文字的語義功能和美學(xué)效應(yīng)。

17、但是，應(yīng)該注意盡可能少地運(yùn)用強(qiáng)調(diào)，如果什么都想強(qiáng)調(diào)，其實(shí)是什么也沒有強(qiáng)調(diào)。況且，在一個(gè)頁面上運(yùn)用過多的特殊設(shè)置會(huì)影響瀏覽者閱讀頁面內(nèi)容，除非你有特殊的設(shè)計(jì)目的。4.2.2 文字的強(qiáng)調(diào)1.強(qiáng)調(diào)字首 有意識(shí)地將正文的第一個(gè)字或字母放大或配上不同顏色并作裝飾性處理，形成注目焦點(diǎn)。由于它有吸引視線、裝飾和活躍界面的作用，所以被應(yīng)用于網(wǎng)頁的文字編排中。至于放大多少，則依據(jù)所處網(wǎng)頁環(huán)境而定。這種形式的編排顯得很時(shí)尚。 2.引文的強(qiáng)調(diào) 引文概括一個(gè)段落、一個(gè)章節(jié)或全文大意，因此在編排上應(yīng)給予特殊的平面位置和空間來強(qiáng)調(diào)。引文的編排方式多種多樣，如將引文嵌入正文的左右側(cè)、上方、下方或中心位置等，并且可以在字體或

18、字號上與正文相區(qū)別而產(chǎn)生變化。2. 關(guān)鍵詞的強(qiáng)調(diào) 如果將個(gè)別關(guān)鍵詞作為頁面的要點(diǎn)，則可以通過加粗、加框、加下劃線、加指示性符號、傾斜字體等手段有意識(shí)地強(qiáng)化文字的視覺效果，使其在網(wǎng)頁整體中顯得出眾而奪目。 3. 鏈接文字的強(qiáng)調(diào) 在網(wǎng)頁設(shè)計(jì)中，為文字鏈接、己訪問鏈接和當(dāng)前活動(dòng)鏈接選用各種顏色和樣式（如加粗、傾斜、下劃線）。例如，如果你使用Dreamweaver編輯器，默認(rèn)的設(shè)置是正常字體顏色為黑色，默認(rèn)的鏈接顏色為藍(lán)色，鼠標(biāo)點(diǎn)擊之后又變?yōu)樽霞t色。使用不同顏色的文字可以使想要強(qiáng)調(diào)的部分更加引人注目。如果要改變鏈接文字顏色，不要使用和背景相似的色相、相似的飽和度和相似的亮度的顏色作為鏈接的顏色。 5.

19、 線框、符號的強(qiáng)調(diào) 用符號、線框或?qū)蚓€有意加強(qiáng)文字元素的視覺效果，具有特別突出“賓與主”的對比關(guān)系 網(wǎng)頁文字版面的設(shè)計(jì)同時(shí)也是網(wǎng)頁創(chuàng)意的過程，創(chuàng)意是網(wǎng)頁設(shè)計(jì)師的思維水準(zhǔn)的體現(xiàn)，是評價(jià)一件網(wǎng)頁設(shè)計(jì)作品好壞的重要標(biāo)準(zhǔn)。在網(wǎng)頁設(shè)計(jì)領(lǐng)域，一切制作的程序由電腦代勞，使人類的勞動(dòng)僅限于思維上，這是好事，可以省去了許多不必要的工序，為創(chuàng)作提供了更好的條件。但在某些必要的階段上，我們應(yīng)該記住：人，畢竟才是設(shè)計(jì)的主體。根據(jù)作品主題的要求，突出文字設(shè)計(jì)的個(gè)性色彩，創(chuàng)造與眾不同的獨(dú)具特色的字體，給人以別開生面的視覺感受，有利于作者設(shè)計(jì)意圖的表現(xiàn)。4.3 網(wǎng)頁文字設(shè)計(jì)方法1.提高可讀性 （1）讓你想表達(dá)的內(nèi)容清晰、

20、醒目，讓瀏覽者一開始就可以明白你的意思。（2）避免使用不清晰的字體，否則容易使閱覽者產(chǎn)生反感和麻煩。（3）注意恰當(dāng)?shù)倪x擇你所需要的字體，適當(dāng)采用虛實(shí)對比、大小對比。（4）注意文字編排方向，注意安排閱覽者的視線，適當(dāng)運(yùn)用直線與曲線編排。（5）根據(jù)視覺流程的原理，通常將重點(diǎn)放在右邊。 4.3.1 網(wǎng)頁文字設(shè)計(jì)技巧 2. 精于位置 （1）注意文字的對齊、適當(dāng)拉來間距、適當(dāng)安排行距。（2）注意圖文交錯(cuò)，既不要影響圖形的觀看，也不能影響文字的閱覽。（3）文字不要頂天立地，也不要支持邊角。 3. 營造視覺美感 文字作為網(wǎng)頁形象要素之一，具有傳達(dá)感情的功能，因而它必須具有視覺上的美感，能夠給人以美的感受。字

21、型設(shè)計(jì)良好，組合巧妙的文字能使人感到愉快，留下美好的印象，從而獲得良好的心理反應(yīng)。反之，則使人看后心里不愉快，視覺上難以產(chǎn)生美感，甚至?xí)層^眾拒而不看，這樣勢必難以傳達(dá)出作者想表現(xiàn)出的意圖和構(gòu)想。注意改變文字的位置和大小，適當(dāng)調(diào)節(jié)字間距。對于段落文字的處理應(yīng)注意，字體加大后，段落之間的距離也應(yīng)該隨之調(diào)整。小字體同樣應(yīng)用這一規(guī)則，不過是相反的。 4.富于創(chuàng)造性 設(shè)計(jì)時(shí)，應(yīng)從字的形態(tài)特征與組合上進(jìn)行探求，不斷修改，反復(fù)琢磨，這樣才能創(chuàng)造出富有個(gè)性的文字，使其外部形態(tài)和設(shè)計(jì)格調(diào)都能喚起人們的審美愉悅感受。加入感受在字體里面，對文字的大小、間距、透明度做些調(diào)整，就會(huì)是完全不同的效果了。差別就在這里，也許只是一點(diǎn)小改動(dòng)，但是需要你思考的卻更多。有時(shí)候?qū)ξ淖值墓P畫做特殊的加工處理往往會(huì)產(chǎn)生一些意想不到的效果。而這樣的處理是帶有創(chuàng)造性的，同時(shí)人性化的味道也會(huì)更濃一些