**成也字,敗也字**
可以這樣說,字體可以成就設計也可以毀掉設計
當年這么說,今天還是這么說!

看完上面這張圖你就能明白了
是不是閱讀起來非常的難受?
**那就對了!**
**其實折磨你的問題有以下幾點**
1.字體樣式太多,雜亂無章
2.使用的字體不易識別
3.字體和內容的氣氛不匹配
怎么避免這樣的結果發生呢?
一句話:**通過常用字體規范可以幫助你做出符合要求的設計**
**一.字不過三!**
很多大神說過色不過三,其實在同一個APP或在同一個設計作品中字體也不要過三種樣式,一般在每個項目設計中使用**1-2個字體樣式就夠了,**然后通過對字體大小或顏色來強調重點文案。

看到上圖中的幾個界面,都是通過字體的大小來區分出界面內容中的層級關系的。
其中包括了螞蟻花唄的banner里只用了一種字體來區分主標題和副標題的關系。
其實網頁也是一樣,使用一種字體樣式,通過字體大小的對比也能做出高逼格的構圖和設計。

**講真!字體用的太多,會顯得你不夠專業!**
**二 .字與背景的層次要分明**


看完上面兩張Banner圖是不是發現了同樣的問題,字體和背景融到一塊去了,在閱讀的時候非常的不方便
這樣的Banner如何才能達到廣而告知呢?
包括做移動界面也是一個道理,選擇下面這樣的一個背景,用戶在光照很強的時候能看清嗎?

所以**易讀性和易用性是用戶的根本訴求!**
**三.字體樣式與氣氛要匹配**
****
看完這個圖
第一個感覺就是**看不懂!**仔細看才知道是眼部精華油。
文字的風格和整體的設計風格不一致,沒有帶動用戶的購買欲。
我們再來看看下圖

結合文案內容,設計風格采用了比較明快剛勁的設計風格,字體也選擇了比較剛勁有力的造字工坊勁黑體。氣氛匹配,用戶代入感強。

活動banner的氣氛非常重要,選擇合適的字體樣式能加強購買欲和點擊欲。
**以風格分類常用的字體有以下幾種類型**
**1.平穩型字體**

****
在陌陌APP歡迎也中使用到了比較平穩的方正正中黑,整體風格比較直接明了。
****
方正蘭亭系列是網頁設計中必用的字體,穩重而細膩,還具有時尚科技感。
看看下面這個蘋果的網頁,就造了
用了方正蘭亭超細后的感覺,是不是高端了許多~


當然用在科技產品的官網中更合適不過了。穩重而富有科技感。
****
**2.剛勁有力型**
****
張海山的字體非常的好用,可以試試,清晰明了,年輕有力

華康儷金黑有種大字報的感覺
****
**3.可愛型字體**

使用方正經黑設計的內涵banner
是不是很可愛很有深度~~~

漢儀小麥使用在插畫中的感覺,不解釋

(by 白茶)
**華康海報體**
專題和引導頁面中經常會用到

**騰翔金磚體**
這也是一個非常不錯的字體
設計師利用了騰翔金磚體的原型將美食的元素融入到了設計中

(注意合法使用字體,字體都是有版權的哦~)
**當然我們還可以使用毛筆字生成器**
通過自由的書法網站在線生成
在網址中輸入文本,再進行選擇書法字體樣式
通過這種方法我們能很快的找到需要的書法字體
這招非常管用!

推薦大家來兩個毛筆字生成的網站:
http://www.akuziti.com/mb/
http://www.51poca.com/
**二.界面中文字使用的規則**
**1.了解系統字體**
**iOS系統中用的是蘋方字體系列**
為了加強層次關系蘋方系列從細到粗有著不同的樣式

**Android的默認字體是Roboto和Noto系列**
Roboto有6種字樣
Thin、Light、Regular、Medium、Bold 和 Black

Noto有7種字樣
Thin, Light、DemiLight、Regular、Medium、Bold 和 Black

**2.統一字號**
一個App,不同位置的字體字號
**你能準確地說出來嗎?**
如果不能,說明你還不了解規范,沒有去制定規范。
那我們先了解一下常規的一些大小(應用于2倍尺寸中,即iphone5/6)
**導航主標題字號:****34/36px**
蘋果默認標題字號為**34px**,而有些軟件也會用到**36px,更加強頁面位置關系**
比如**微信導航標題字號36px,導航字體醒目易于對應頁面位置。**

在內文展示中字號大小又是多大呢?
**正文字號32px-34px**
**副文是28px-24px**
**最小字號不低于20px**
字在正文字號使用中,閱讀類的APP更注重文本的閱讀便捷性
正文字號34px,會選擇性的選用蘋方粗體

而列表形式、工具化的APP普遍是正文32px
(**由于屏幕使用變大正文大小趨勢變成了34px**)
副文案28px,時間文字24px

26px的字號還會用于劃分類別的提示文案
因為這樣的文字希望用戶閱讀,但不要搶過主列表信息的引導。

34px的字號還經常運用在頁面的大按鈕中。為了拉開按鈕的層次,同時加強按鈕引導性,選用了稍大號的字體。

**注意了!**在選用字體大小的時候一定要選擇偶數的字號。因為在開發界面的時候,字號大小換算是要除以二的
**那網頁中常用的字號有哪些呢?**
網頁字號最小12px
常用微軟14px/16px作為正文
大號字體是18px、20px、26px、30px
(注意使用雙數字號,單數的字體在顯示的時候會有毛邊)
**好的設計不應該永遠是“人家的設計”**
**一定是看得不夠多,琢磨不夠透,練手太少**
- PHP學習
- PHP應用
- PHP函數總結整理
- 39個對初學者非常有用的PHP技巧
- 深入淺出之Smarty模板引擎工作機制
- 數組操作
- file操作的常用方法
- PHP字符串輸出之Heredoc說明
- require(_once)和include(_once)的理解
- PHP提高效率的幾點
- php無限遍歷目錄
- 53個要點提高PHP編程效率
- THINKPHP
- THINKPHP 常見的問題
- 微信
- 微信公眾號接口
- 微信小程序開發資料收集
- 微信小程序開發:MINA
- 通過微信小程序看前端
- 微信小程序開發初體驗
- 微信小程序 Demo(豆瓣電影)
- API應用
- 支付寶
- 二維碼轉換
- 前端開發
- HTML5
- CSS
- 七種css方式讓一個容器水平垂直居中
- JavaScript
- JavaScript奇技淫巧44招
- JavaScript筆記
- 后端開發
- Node
- SQL數據庫
- 服務維護
- git使用
- Git入門私房菜
- MAC終端維護
- VIM命令大全
- 開發規范
- 智能手機屏幕的秘密
- 超實用六步透視網易設計規范(附完整PDF下載)
- UI設計常用字體規范
- APP界面切圖命名和文件整理規范
- 網頁UI視覺設計規范
- ios視覺設計規范說明
- 開發APP時需要注意的原則
- 移動端APP設計初步入門
- Axure
- 基礎操作
- 基礎1-10
- 基礎11-20
- 基礎21-30
- 基礎31-40
- 基礎41-50
- 基礎51-60
- Sketch
- 軟件使用
- sublime3_用戶設置
- sublime下如何修改自動補全 后lang=zh-cn?
- 運營理念
- 新人指導心得體會
- 從一次活動設計,聊聊交互設計師的3個階段
- 詳情頁優化那些不得不說的細節
- 店鋪裝修淺析
- 淘寶店鋪裝修之寶貝詳情頁的布局教程
- 寶貝詳情頁 客戶需求調研及總結
- 寶貝描述樣板房