2.1.2　網頁中文字的設計規范

在網頁UI設計中，文字設計能夠起到美化網頁UI、有效傳達主題信息、豐富頁面內容等重要作用。如何更好地對網頁中的文字進行設計，以達到更好的整體視覺效果，給瀏覽者新穎的視覺體驗呢？

1．PC端網頁文字設計規范

PC端的網頁UI空間比較大，一屏內容中文字的使用量是相當可觀的，這使得PC端網頁中的文字使用方式比較簡單，故而它的規范也比較少。字號使用規范如表2-1所示。

2．iOS系統的文字設計規范

在iOS系統UI設計中，關于文字的字體如何選擇，字號如何設定，這些都有一定的規范。下面為讀者介紹iOS系統規定使用的字體，分為中文字體（蘋方字體）和英文字體（San Francisco字體）兩種形式，如圖2-5所示。

3．Android系統的文字設計規范

文字作為視覺元素中必不可少的一個，在Android系統界面設計時也擁有自己獨立的設計規范。Google官方規定，Android系統的默認字體是思源黑體和Roboto，圖2-6所示為Android系統的規定字體。

練一練——設計制作網頁3D廣告文字

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

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

·案例分析

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

·制作步驟

Step01　打開Photoshop CC軟件，單擊“歡迎界面”中的“新建”按鈕，彈出“新建文檔”對話框，新建文檔的各項參數如圖2-8所示。設置完成后，單擊“創建”按鈕進入工作區。

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

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

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

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

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

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

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

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