2.1 網(wǎng)頁(yè)界面的小裝飾

網(wǎng)頁(yè)設(shè)計(jì)中會(huì)用到形形色色的小裝飾，比如說(shuō)一個(gè)圖形、一個(gè)花邊，就像我們穿衣打扮總喜歡用些首飾來(lái)裝點(diǎn)一下。雖然這些裝飾看起來(lái)可有可無(wú)，但是如果使用得當(dāng)，可以更好地襯托出主體頁(yè)面的個(gè)性與獨(dú)特性。下面簡(jiǎn)單介紹幾個(gè)界面中常用的小裝飾。

2.1.1 小圖標(biāo)

圖標(biāo)是具有功能的圖形，在網(wǎng)頁(yè)界面中圖標(biāo)分為抽象圖標(biāo)與具象圖標(biāo)（如圖2-1～圖2-3所示）。

1．抽象圖標(biāo)

這些通常稱之為ICO，是圖標(biāo)文件格式。系統(tǒng)包括PC、手機(jī)與電腦等系統(tǒng)。這類圖標(biāo)通常是對(duì)功能的一種概括表達(dá)，表達(dá)的形式較為抽象。但還是具有一定的可識(shí)別性與可讀性，加上現(xiàn)在已經(jīng)廣泛地使用這類圖標(biāo)，所以用戶還是可以快速掌握與識(shí)別。

2．具象圖標(biāo)

具象圖標(biāo)是指將一些物品的具體模樣轉(zhuǎn)化為圖形，風(fēng)格的表現(xiàn)會(huì)多樣化，但相對(duì)于抽象圖標(biāo)來(lái)說(shuō)更容易識(shí)別。

3．圖標(biāo)的好處

在界面中圖標(biāo)可以更加快速直接地傳達(dá)出信息，同時(shí)便于用戶快速瀏覽。圖標(biāo)的使用可以簡(jiǎn)化文字說(shuō)明，在排版上會(huì)更加隨意自由，不會(huì)因?yàn)槲淖痔喽a(chǎn)生壓迫感，還可以增強(qiáng)板塊節(jié)奏感與舒適感，圖文搭配的畫(huà)面會(huì)顯得更大方簡(jiǎn)潔（如圖2-4和圖2-5所示）。

2.1.2 序號(hào)

序號(hào)是指順序的編碼，就是我們常見(jiàn)的“1.2.3.4.5.6……”，或者是大寫(xiě)的“一、二、三……”，由于字體和功能的特殊性，無(wú)論序號(hào)在哪個(gè)位置，都可以增強(qiáng)版面的節(jié)奏感。加上它具有的獨(dú)特功能性，在界面設(shè)計(jì)中不僅僅是文字，也可以當(dāng)作一個(gè)小圖標(biāo)來(lái)看待。序號(hào)的表現(xiàn)形式也是多種多樣的，它的使用不僅可以為整體增添設(shè)計(jì)感，同時(shí)也可以給界面帶來(lái)趣味性。序號(hào)的作用在頁(yè)面中是不可小覷的（如圖2-6和圖2-7所示）。

1．引導(dǎo)視覺(jué)流程

序列號(hào)具有引導(dǎo)視覺(jué)流程的作用，當(dāng)我們看到數(shù)字“1”自然會(huì)聯(lián)想到數(shù)字“2”，在它的牽引下，會(huì)下意識(shí)地在界面中尋找下一個(gè)數(shù)字。另外，它的使用在版面中具有一定的靈活性，在不同的環(huán)境中，可以理順文字的先后順序（如圖2-8～圖2-11所示）。

無(wú)規(guī)律的排版可以為界面增添視覺(jué)上的美感，當(dāng)然保證其功能性是不可或缺的，所以序列號(hào)可以為此起到引導(dǎo)視覺(jué)閱讀和段落標(biāo)記的作用。在這樣順序不明確的排版上，如果沒(méi)有序列號(hào)的使用，我們?cè)陂喿x上會(huì)很費(fèi)力。添加上序號(hào)便可以很清楚地知道從哪開(kāi)始、從哪結(jié)束。

2．快速閱讀

序列號(hào)的使用可以幫助人們快速閱讀，提高閱讀效率?！?.2.3……”如同地圖上的坐標(biāo)一樣，能夠很輕松地讓人們確定內(nèi)容所在的位置。在閱讀中，用戶可以在大量文字和信息瀏覽的過(guò)程中稍有停頓，增強(qiáng)用戶的記憶力。另外在面對(duì)很多文字帶來(lái)的壓抑感時(shí)，數(shù)字可以減弱閱讀信息的恐懼感。序列號(hào)能夠讓讀者有條理地選擇重點(diǎn)進(jìn)行閱讀。

3．增強(qiáng)界面節(jié)奏感

序列號(hào)本身就可以起到一種裝飾作用，在對(duì)它進(jìn)行美化與放大時(shí)，會(huì)增強(qiáng)人們的視覺(jué)感。序列號(hào)可以與正文有明顯的大小對(duì)比，這樣可以為頁(yè)面增強(qiáng)節(jié)奏感。

4．可做裝飾圖片

我們可以逐個(gè)對(duì)序列號(hào)進(jìn)行圖片處理，根據(jù)不同的主題對(duì)其進(jìn)行不同的設(shè)計(jì)，以不同的設(shè)計(jì)形式展現(xiàn)給用戶，從而為界面帶來(lái)裝飾效果，同時(shí)還可以讓頁(yè)面內(nèi)容變得精致、有條理。

2.1.3 手繪

手繪圖形可以為刻板的網(wǎng)頁(yè)界面帶來(lái)親切感，可以拉近用戶與界面的距離，讓用戶覺(jué)著更親近、更信賴。手繪的形式和題材有很多，可以是溫馨的、帥氣的、酷酷的、可愛(ài)的等，都是可以描繪出來(lái)的，可以通過(guò)界面中的一些文字、人物和圖形來(lái)表現(xiàn)。

1．文字手繪

手繪的文字會(huì)更加生動(dòng)有趣，給人的感覺(jué)很活潑、隨意，有親切感（如圖2-12～圖2-15所示）。

2．人物手繪

人物的表現(xiàn)可以是幽默的、夸張的、可愛(ài)的，根據(jù)網(wǎng)頁(yè)界面的需要而定。繪制人物時(shí)可以適當(dāng)?shù)靥砑右恍┍砬椋屓擞X(jué)得有寓意或故事在里面，增加用戶對(duì)界面的好奇心。

3．手繪對(duì)話框

裝飾對(duì)話框起到了提示內(nèi)容的作用，一般頁(yè)面中有小提示或額外補(bǔ)充內(nèi)容會(huì)用到裝飾框。手繪裝飾框可以為界面增添幾分趣味性，讓網(wǎng)頁(yè)界面的整體畫(huà)面活躍起來(lái)（如圖2-16所示）。

4．內(nèi)容標(biāo)識(shí)手繪

內(nèi)容標(biāo)識(shí)可以起到標(biāo)注作用，對(duì)一些需要著重強(qiáng)調(diào)的文字進(jìn)行標(biāo)注，例如使用圈注、下劃線、勾選、箭頭及五角星等小涂鴉，可以讓網(wǎng)頁(yè)界面充滿小情趣（如圖2-17所示）。

2.1.4 小號(hào)字體

小號(hào)字體的存在是為了點(diǎn)綴界面，與大號(hào)字體之間產(chǎn)生節(jié)奏感，在界面上具有裝飾和修補(bǔ)界面整體美感的作用。在功能上，小字也是文意上的補(bǔ)充，文字可以是英文也可以是中文，可以是一小段話，也可以是一兩個(gè)詞匯（如圖2-18～圖2-21所示）。

好處：小字與大字的結(jié)合使用，粗細(xì)不同的筆畫(huà)讓文字在界面排版設(shè)計(jì)中具有很強(qiáng)的節(jié)奏感；填補(bǔ)空缺位置，小字可以在太過(guò)空白的位置上進(jìn)行裝點(diǎn)，避免整個(gè)頁(yè)面感覺(jué)不工整或者空曠；小字也可以對(duì)文字內(nèi)容進(jìn)一步進(jìn)行補(bǔ)充，起到輔助說(shuō)明的作用。

技巧：小號(hào)中文字使用要注意它的識(shí)別性，雖然有些小號(hào)字體用于裝飾效果，但也不要太小，要在用戶的可識(shí)別范圍內(nèi)。

在使用英文字母時(shí)，要注意字母的拼寫(xiě)，如果不能確定文字的準(zhǔn)確性，可以將文字縮小到不易識(shí)別的程度，只作為裝飾來(lái)使用。這種裝飾適合整篇的英文，裝飾效果會(huì)增強(qiáng)。