2.1.2　網(wǎng)頁中文字的設(shè)計(jì)規(guī)范

在網(wǎng)頁UI設(shè)計(jì)中，文字設(shè)計(jì)能夠起到美化網(wǎng)頁UI、有效傳達(dá)主題信息、豐富頁面內(nèi)容等重要作用。如何更好地對(duì)網(wǎng)頁中的文字進(jìn)行設(shè)計(jì)，以達(dá)到更好的整體視覺效果，給瀏覽者新穎的視覺體驗(yàn)?zāi)兀?/p>

1．PC端網(wǎng)頁文字設(shè)計(jì)規(guī)范

PC端的網(wǎng)頁UI空間比較大，一屏內(nèi)容中文字的使用量是相當(dāng)可觀的，這使得PC端網(wǎng)頁中的文字使用方式比較簡單，故而它的規(guī)范也比較少。字號(hào)使用規(guī)范如表2-1所示。

2．iOS系統(tǒng)的文字設(shè)計(jì)規(guī)范

在iOS系統(tǒng)UI設(shè)計(jì)中，關(guān)于文字的字體如何選擇，字號(hào)如何設(shè)定，這些都有一定的規(guī)范。下面為讀者介紹iOS系統(tǒng)規(guī)定使用的字體，分為中文字體（蘋方字體）和英文字體（San Francisco字體）兩種形式，如圖2-5所示。

3．Android系統(tǒng)的文字設(shè)計(jì)規(guī)范

文字作為視覺元素中必不可少的一個(gè)，在Android系統(tǒng)界面設(shè)計(jì)時(shí)也擁有自己獨(dú)立的設(shè)計(jì)規(guī)范。Google官方規(guī)定，Android系統(tǒng)的默認(rèn)字體是思源黑體和Roboto，圖2-6所示為Android系統(tǒng)的規(guī)定字體。

練一練——設(shè)計(jì)制作網(wǎng)頁3D廣告文字

源文件：第2章\2-1-2.psd

視頻：第2章\2-1-2.mp4

·案例分析

本案例是設(shè)計(jì)制作一款3D廣告文字，此款廣告文字的設(shè)計(jì)主旨是簡潔、明了。使用青色和白色的配色設(shè)計(jì)，適合一些食品網(wǎng)頁和運(yùn)動(dòng)網(wǎng)頁使用。其中綠色的樹葉裝飾，讀者可以根據(jù)使用時(shí)的具體情況進(jìn)行替換。圖2-7所示為3D廣告文字的圖像效果。

·制作步驟

Step01　打開Photoshop CC軟件，單擊“歡迎界面”中的“新建”按鈕，彈出“新建文檔”對(duì)話框，新建文檔的各項(xiàng)參數(shù)如圖2-8所示。設(shè)置完成后，單擊“創(chuàng)建”按鈕進(jìn)入工作區(qū)。

Step02　打開“字符”面板，設(shè)置如圖2-9所示的字符參數(shù)。單擊工具箱中的“橫排文字工具”按鈕，在畫布中輸入如圖2-10所示的文字，文字顏色為RGB（39、195、186）。

Step03　復(fù)制圖層，隱藏舊圖層。為復(fù)制的圖層執(zhí)行“3D>從所選圖層新建3D模型”命令，并為3D模型設(shè)置如圖2-11所示的參數(shù)。設(shè)置完成后，文字內(nèi)容的展示效果如圖2-12所示。

Step04　柵格化3D圖層，按住Ctrl鍵，單擊圖層縮覽圖將文字內(nèi)容添加到選區(qū)，如圖2-13所示。使用組合鍵Shift+F5，彈出“填充”對(duì)話框，設(shè)置如圖2-14所示的參數(shù)，前景色顏色值為RGB（39、195、186）。

Step05　選區(qū)填充完成后，圖像效果如圖2-15所示。使用組合鍵Ctrl+D取消選區(qū)后，為圖層添加“描邊”的圖層樣式，圖層樣式的具體參數(shù)如圖2-16所示。

Step06　圖層樣式設(shè)置完成后，文字的圖像效果如圖2-17所示。復(fù)制隱藏圖層，更改文字圖層的顏色參數(shù)為如圖2-18所示的數(shù)值。

Step07　顏色設(shè)置完成后，圖形效果如圖2-19所示。為文字圖層添加“內(nèi)發(fā)光”的圖層樣式，圖層樣式的具體參數(shù)如圖2-20所示。

Step08　設(shè)置完成后，單擊“確定”按鈕，圖像效果如圖2-21所示。繼續(xù)復(fù)制隱藏的文字圖層，并為文字圖層更改填充顏色為白色，復(fù)制的文字圖層的字符參數(shù)如圖2-22所示。

Step09　更改完文字圖層的參數(shù)后，圖像效果如圖2-23所示。執(zhí)行“文件>打開”命令，選中素材圖像將其打開，使用“移動(dòng)工具”將素材圖像拖曳到設(shè)計(jì)文檔中，調(diào)整圖層順序到隱藏的文字圖層上方，最終的廣告文字效果如圖2-24所示。