微信公眾帳號：「bidlab」
來源： @ MICU設計
Tag：字體 設計
by 王鐸
很多剛做APP界面的設計師，經常會因為字號，字體顏色，間距而困擾。這裡我將和大家理一理界面中常用的字體，字號，字體顏色及間距對齊的一些小經驗。
◤ 1. 成也字，敗也字
在設計師的職業生涯中，至少一次甚至多次在工作中因為字體不協調栽跟頭。我們常常會聽到，這也太LOW了吧！！你能統一一下字體嗎？
不明確而繁瑣的字體搭配會導致整個畫面失調。可以這樣說，字體可以成就設計也可以毀掉設計。
問題的關鍵有：
1. 字體樣式太多，導致頁面雜亂
2. 使用的字體不易識別
3. 字體樣式和內容的氣氛或規範不匹配
怎麼避免這樣的結果發生呢？
1. 了解不同平臺的常用字體設計規範
2. 在每個項目設計中只使用1-2個字體樣式，而在品牌字有明確的規範的情況下，只需要一種字體貫穿全文，通過對字體放大來強調重點文案。
3. 不同的樣式的字體，形狀或系列最好相同，保證字體風格的一致性。
4. 字體與背景的層次要分明
5. 確保字體樣式與色調氣氛相匹配
◤ 2.移動端界面中文使用規則
在不同平臺的界面設計中規範的字體會有不同，像移動界面的設計就會有固定的字體樣式。網頁中會有常用的幾個字體，在這我和大家分別介紹一下。
移動端常規字體——
IOS:常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好。
Android：Droid Sans Fallback
移動端常用字號——
導航主標題字號：40-42px，我一般設計就用40px，偏小的40px字號，顯得精緻些。
內文展示中，大的正文字號32px,副文是26px，小字20px。根據不同類型的App會有所區別。
具體案例說明——
像新聞類的APP或文字閱讀類的APP更注重文本的閱讀便捷性，正文字號36px，會選擇性的加粗。
而列表形式、工具化的APP普遍是正文32px，不加粗。副文案26px,小字20px
26px的字號還會用於劃分類別的提示文案，因為這樣的文字希望用戶閱讀，但不要搶過主列表信息的引導。
36px的字號還經常運用在頁面的大按鈕中。為了拉開按鈕的層次，同時加強按鈕引導性，選用了稍大號的字體。
（見下圖中的退出按鈕)
大家注意了，在選用字體大小的時候一定要選擇偶數的字號，因為在開發界面的時候，字號大小換算是要除以二的。這個詳細緣由大家可以網上查詢，我就不在這一一的介紹了。
常用字號的大小基本就這幾個，根據版式設計需要也會採用異樣大小的字號來特殊處理。這種更高的要求設計師的全局把控能力了。
◤ 3.網頁端界面中文使用規則
網頁端常用字號——
網頁中文字字號一般都是宋體12px或14px(無狀態)，大號字體用微軟雅黑或黑體。大號字體是18px、20px、26px、30px，一般使用雙數字號，單數的字體在顯示的時候會有毛邊。
網頁端常用字體——
1.平平穩穩:微軟雅黑/方正中黑
微軟雅黑系列：在網頁設計中這款字體使用的非常平凡，這款只無論是放大還是縮小，形體都非常的規整舒服。在設計過程中建議多使用雅黑，大標題用加粗字體，正文用常規字體。
方正中黑系列：中黑系列的字體筆畫比較銳利而渾厚，一般運用在標題文字中。但這種字體不適用於正文中，因為邊緣相對比較的複雜，文字一多會影響用戶的閱讀。
2.與時俱進：方正蘭亭系列
方正蘭亭系列: 個人最推薦的就是這個系類的字體，整個蘭亭系列的字體有大黑、準黑、纖黑、超細黑等。因筆畫清晰簡潔，這個系類的字體就足以滿足排版設計的需要。可以通過對這個系列的不同字體進行組合，不僅能保證字體的統一感，還能很好的區分出文本的層次。
3.剛勁有力，運動型：漢儀菱心簡/造字工房力黑/造字工房勁黑
在這幾個字體中，他們有著共同的特點，字體非常的有力而厚實。基本都是以直線和斜線為主。適合廣告和專題使用。在使用這類字體的時候我們可以使用字體傾斜的樣式，讓文字顯得更為活力。在這三種字體中，菱心和造字工房力黑在筆畫、拐角的地方採用了圓和圓角。而且筆畫也比較的疏鬆，更多的有些時尚而柔美的氣氛。而勁黑這款字體相對更為厚重和方正。這類字體使用在大圖中偏多，效果比較突出。
4.毛筆字生成器
通過自由的書法網站在線生成。在網址中輸入文本，再進行選擇書法字體樣式。通過這種方法我們能很快的找到需要的書法字體。這招非常管用。
推薦大家幾個毛筆字相關的網站：
http://www.51poca.com/
http://www.epinv.com/online/
http://www.akuziti.com/mb/
簡單操作一下毛筆字的使用方法——
將下載下來的字體圖片AI轉路徑，編輯文字。
首先使用在線生成器輸入選擇好你需要的文字字形，將文字圖片拖至AI中。
選中拉入圖片，點擊［圖像描摹］
然後繼續點擊［擴展］按鈕
擴展完畢後，圖片已經都變成了路徑。
使用魔棒選擇顏色就可以將文字的路徑提選出來。
最後經過設計後的Banner效果，這就是我經常用的Banner風格，你們也試試吧~
重要提示，怎麼找不認識的字體名稱——
很多朋友會看到別人使用的字體非常好看，但又不知道是什麼字體。在這我告訴你一個方法。可以通過網絡上傳字體圖片進行搜索字體名稱。網址：http://www.qiuziti.com/
常用字體顏色——
在界面中的文字分為三個層級，主文、副文、提示文案等。
在白色的背景下，字體的顏色層次其實就是黑、深灰、灰色。
常用的色值是#333333；#666666；#999999
在界面中還經常會用到背景色#eeeeee。
分割線則採用#e5e5e5或#cccccc的顏色值，一個深一些，一個淺一些。這個會更具不同的軟體風格採用不同的深淺，由設計自己把控。
在我們做設計的時候，字體和圖庫均是有版權的，請注意合法使用。
設計的時候我們還可以將字體進行變形來達到宣傳的目的，這個需要設計師對字體設計有一定的了解。
總之，設計是要有規範，有體系的。使用規範化的設計對產品的延續性非常有幫助，並且保證了產品的獨特性和一致性。所以，大家要在設計初期找到風格和規範，這樣做出來的界面才會統一一致，在變化的需求中找到定量，調整起來也相對輕鬆很多。
"閱讀原文"即可查看原址
更多閱讀：輸入數字即可查看【21】三張圖了解設計師的級別之分
【22】別再讓設計師朋友抽空給你設計個logo
【23】歷史上最有名的電腦密碼
【24】百歲山廣告是這個意思
【25】2014紅點十佳概念設計
【26】十二年logo趨勢設計匯總
【27】報價公式之設計師接活不可不知
【28】如何讓「加載」圖標跑得讓人異常心動？
【29】紀念碑谷手稿挫？還不是被美翻了
【30】宮崎駿 食物是最溫暖的治癒
【31】2015年至關重要4種排版趨勢
【32】扁平化設計的 8 個Tips
【33】關於《紀念碑谷》的低面建模
《商業創新設計》
分享網際網路與設計的商業世界！
商業趨勢研究
企業家精神
創新設計
設計思考
商業模式
創客世界
設計在線教育