我們項目的UI設(shè)計師是是一個胖胖的暖男，我們喜歡稱他為胖虎。胖虎除了胖之外，還有一個特別的地方，就是說話慢條斯理、有理有據(jù)，這也讓大家特別喜歡他。

我們產(chǎn)品經(jīng)理每次扔給他原型之后，他總會極其高效的完成UI效果圖，每一次我都會被他設(shè)計的作品驚嘆，我總會在想，他怎么將顏色和文字運用的如此恰到好處，怎么呈現(xiàn)出這種經(jīng)驗的作品的。

他一定是個藏匿于此處歇腳的大師。

來自：百度圖片

那天，我微信問他：胖虎，咱們UI的設(shè)計規(guī)范都有哪些?。磕芎唵谓榻B一下嗎？

胖虎：這個只能用嘴說

我頓時裂開。

胖虎：要不明天給你帶一本書吧

我再次裂開。

中午吃飯的時候我看見他踏出了辦公室，我快步跟上他，喊了聲，胖虎哥，今天中午準(zhǔn)備吃點啥呀？他笑瞇瞇的看著我說，當(dāng)然去吃美食啦。

……

此處省去和胖虎的對話，下午的時候，我簡單整理了一下胖虎給我的第一堂課。

一 文字的基本規(guī)范

文字是任何產(chǎn)品的基本元素，打開任何一個產(chǎn)品，首先呈現(xiàn)給用戶的當(dāng)然是文字了，它承載了產(chǎn)品的內(nèi)容信息，具有舉足輕重的地位。字體是設(shè)計中不可或缺的因素，不同風(fēng)格的字體呈現(xiàn)出來的氣質(zhì)不一樣，在不同的場合中會給人不同的感受。

因此在設(shè)計過程中要考慮字體的設(shè)計效果，并且在設(shè)計的UI規(guī)范匯中標(biāo)明。這樣前端或后端在開發(fā)過程中就可以按照既定的規(guī)范來合理開發(fā)了。

產(chǎn)品中對文字的要求有哪幾個方面呢？就像一個合格的畢業(yè)論文都固定的文字格式和排版格式，同樣的，在產(chǎn)品中文字應(yīng)該如何選擇、字號應(yīng)該如何設(shè)定、字體顏色怎么設(shè)置呢？

1 字體選擇

在字體的選擇上往往根據(jù)產(chǎn)品的特點、產(chǎn)品品牌延伸出來的關(guān)鍵詞來定位。有的字體字形方正、有的鑒定穩(wěn)固、有的蒼穹有力、有的藝術(shù)多變。

常用的字體有華文黑體、微軟雅黑、蘋方字體、方正欄亭黑、Open Sans、Display、Helvertica Neue等等。

胖虎強烈推薦的萬能字體：蘋方字體和Helvetica Neue字體，如果有特殊要求，那么就制定個性化的方案。一般的在定義字體規(guī)范格式如下：

來自：百度圖片

2 字號選擇

每個設(shè)計師遵循的字號理念是：字號的大小決定了信息的層次和權(quán)重，整齊大方、層次分明能夠讓整體設(shè)計清晰有序。相反，如果沒有選擇正確的字號，那么會打破扁平化的設(shè)計，會讓界面看起來雜亂無章。

實際工作中對于字號的選擇，可以遵循IOS、Android的字體規(guī)范，還可以根據(jù)產(chǎn)品的特點去個性化定義。

胖虎認(rèn)為根據(jù)文字位置和內(nèi)容的重要程度可以將其分為三大級別：重要級別、一般級別和較弱級別，他們所對應(yīng)的樣式、字號和使用場景分別如下：

來自：百度圖片

3 字體顏色

字體顏色同樣的根據(jù)文字位置和內(nèi)容的重要程度分為三個級別：重要級別、一般級別和較弱級別，對應(yīng)的分別為用于特別強調(diào)突出的文字、正文標(biāo)題、正文文字、用戶輸入框的提示和用于次級提示。

胖虎常用的字色選擇如下圖片所示。

來自：百度圖片

二 寫在最后

在整理這些文字時，我越發(fā)覺得一個優(yōu)秀的UI設(shè)計師是一個多么嚴(yán)謹(jǐn)而富有浪漫的職業(yè)。產(chǎn)品的每一個地方都離不開UI設(shè)計師辛苦的、一絲不茍的細(xì)節(jié)把關(guān)，小到每個字號的大小，大到商業(yè)宣傳時海報的制作，也正是這個職業(yè)讓我們的產(chǎn)品變得更加活潑，更加貼近生活。

胖虎的三言兩語讓我深受啟發(fā)，讓我覺得作為產(chǎn)品經(jīng)理的我對UI交互、UI設(shè)計知之甚少，這一方面也是亟待需要提高的地方。

我抬頭望了眼胖虎，他正飛速的敲擊著鍵盤，飛速中透露著優(yōu)雅，這次一定又是滿意的答卷吧。