APP界面設計必備，經常使用字體規範

好長時間沒發帖，淨想過年了，過年哈，倒騰工做總結和年貨是大事。

這幾天有人問我說：「最近看了好多教程，都老高大上了，可是老弟我作不到呀，想學點直接能拿來用的，這個要求過度嗎……」

這個，好吧，那就直接說說能用的知識：字體字號。

也許你會說：字體字號？也太Low了吧，這個誰不知道重要呀。

對於這個問題，我想說：會和熟練，是兩回事。一個App，不一樣部分的字體字號你能準確地說出來嗎？

不少剛作APP界面的設計師，常常會由於字號，字體顏色，間距而困擾。
拿到設計需求後，開始進行設計，不知道從何去調整界面的字號和行間距等。容易碰到的問題是頁面和頁面的字號調着調着就大小或顏色不統一了。而且容易致使設計稿反覆得修改。設計出來的效果圖文字左右間距層次不齊，致使與預期不符等。
這小節我將和你們理一理界面中經常使用的字體，字號，字體顏色及間距對齊的一些小經驗。但願能對你們有些幫助。

一.成也字，敗也字

 

在設計師的職業生涯中，至少一次甚至屢次在工做中由於字體不協調栽跟頭。在實踐的過程當中咱們會慢慢發現一些規律或者經驗規範。接下來我將和你們一塊兒聊聊在界面設計中的那些常規字體的使用規範。

咱們經常會聽到，這也太LOW了吧！！你能統一一下字體嗎？

不明確而繁瑣的字體搭配會致使整個畫面失調。能夠這樣說，字體能夠成就設計也能夠毀掉設計。

 

問題的關鍵有：

 

1.字體樣式太多，致使頁面雜亂

2.使用的字體不易識別

3.字體樣式和內容的氣氛或規範不匹配

怎麼避免這樣的結果發生呢？
經過設計經驗能夠幫助你作出更好的版式

瞭解不一樣平臺的經常使用字體設計規範

在每一個項目設計中只使用1-2個字體樣式，而在品牌字有明確的規範的狀況下，只須要一種字體貫穿全文，經過對字體放大來強調重點文案。字體用的太多，越顯得不夠專業。

不一樣的樣式的字體，形狀或系列最好相同，保證字體風格的一致性。

字體與背景的層次要分明

確保字體樣式與色調氣氛相匹配

二.界面中文字使用的規則

 

在不一樣平臺的界面設計中規範的字體會有不一樣，像移動界面的設計就會有固定的字體樣式。網頁中會有經常使用的幾個字體，在這我和你們分別介紹一下。

如下是在  72像素/英寸  下的規範

移動端常規字體

IOS:常選擇華文黑體或者冬青黑體，尤爲是冬青黑體效果最好。

 

Android

英文字體：Roboto

中文字體：Noto

 

移動端經常使用的的字號有哪些呢？

導航主標題字號：40-42px

我通常設計就用40px，偏小的40px字號，顯得精緻些。

在內文展現中字號大小又是多大呢？

大的正文字號32px,
副文是26px，小字20px
在內文的使用中，根據不一樣類型的App會有所區別。

像新聞類的APP或文字閱讀類的APP更注重文本的閱讀便捷性，正文字號36px，會選擇性的加粗。

 

而列表形式、工具化的APP廣泛是正文32px，不加粗。副文案26px,小字20px

26px的字號還會用於劃分類別的提示文案，由於這樣的文字但願用戶閱讀，但不要搶過主列表信息的引導。

36px的字號還常常運用在頁面的大按鈕中。爲了拉開按鈕的層次，同時增強按鈕引導性，選用了稍大號的字體。

（見下圖中的退出按鈕)

你們注意了，在選用字體大小的時候必定要選擇偶數的字號，由於在開發界面的時候，字號大小換算是要除以二的。這個詳細原因你們能夠網上查詢，我就不在這一一的介紹了。

經常使用字號的大小基本就這幾個，根據版式設計須要也會採用異樣大小的字號來特殊處理。這種更高的要求設計師的全局把控能力了。

網頁端

經常使用的字號有哪些呢？

網頁中文字字號通常都是宋體12px或14px(無狀態)，大號字體用微軟雅黑或黑體。大號字體是18px、20px、26px、30px，通常使用雙數字號，單數的字體在顯示的時候會有毛邊。

經常使用的字體

1.平平穩穩:微軟雅黑/方正中黑

 

微軟雅黑系列：在網頁設計中這款字體使用的很是平凡，這款只不管是放大仍是縮小，形體都很是的規整舒服。在設計過程當中建議多使用雅黑，大標題用加粗字體，正文用常規字體。

 

方正正中黑系列：中黑系列的字體筆畫比較銳利而渾厚，通常運用在標題文字中。但這種字體不適用於正文中，由於邊緣相對比較的複雜，文字一多會影響用戶的閱讀。

 

2.與時俱進：方正蘭亭系列

 

方正蘭亭系列: 我的最推薦的就是這個系類的字體，整個蘭亭系列的字體有大黑、準黑、纖黑、超細黑等。因筆畫清晰簡潔，這個系類的字體就足以知足排版設計的須要。能夠經過對這個系列的不一樣字體進行組合，不只能保證字體的統一感，還能很好的區分出文本的層次。

3.剛勁有力，運動型：漢儀菱心簡/造字工房力黑/造字工房勁黑

在這幾個字體中，他們有着共同的特色，字體很是的有力而厚實。基本都是以直線和斜線爲主。適合廣告和專題使用。在使用這類字體的時候咱們可使用字體傾斜的樣式，讓文字顯得更爲活力。在這三種字體中，菱心和造字工房力黑在筆畫、拐角的地方採用了圓和圓角。並且筆畫也比較的疏鬆，更多的有些時尚而柔美的氣氛。而勁黑這款字體相對更爲厚重和方正。這類字體使用在大圖中偏多，效果比較突出。

毛筆字生成器

 

經過自由的書法網站在線生成。在網址中輸入文本，再進行選擇書法字體樣式。經過這種方法咱們能很快的找到須要的書法字體。這招很是管用。

推薦你們幾個毛筆字相關的網站：

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的顏色值，一個深一些，一個淺一些。這個會更具不一樣的軟件風格採用不一樣的深淺，由設計本身把控。

在咱們作設計的時候，字體和圖庫均是有版權的，請注意合法使用。

設計的時候咱們還能夠將字體進行變形來達到宣傳的目的，這個須要設計師對字體設計有必定的瞭解。

總之，設計是要有規範，有體系的。使用規範化的設計對產品的延續性很是有幫助，而且保證了產品的獨特性和一致性。因此，你們要在設計初期找到風格和規範，這樣作出來的界面纔會統一一致，在變化的需求中找到定量，調整起來也相對輕鬆不少。

 

【本文由Micu設計原創發佈，轉載請註明做者：Micu設計，請加上二維碼】