LOGO 是品牌設(shè)計當(dāng)中最為重要的一環(huán)，LOGO 本身的設(shè)計不僅昭示了品牌的身份，甚至可以表現(xiàn)品牌的價值觀和特點。你可能想開拓新的領(lǐng)域，或者重塑舊有的業(yè)務(wù)，又或者是基于 2020 或者2021 年的新趨勢，將原本的 LOGO 升級，這些都是促使 LOGO 革新變化的契機。
和視覺設(shè)計不同，LOGO 的設(shè)計常規(guī)類型其實是相對固定的，通常不會有某種類型的 LOGO 占據(jù)主流，但是不同類型的 LOGO 呈現(xiàn)出不同的變化和趨勢傾向，下面就是 LOGO 設(shè)計在 2021 年呈現(xiàn)出的 11 個趨勢：
2021 年將會是 3D 在設(shè)計領(lǐng)域中徹底崛起的一年。而相應(yīng)的，在 LOGO 設(shè)計領(lǐng)域，光影細節(jié)也成為了很多企業(yè)和品牌體現(xiàn)品牌價值和特質(zhì)的一種設(shè)計策略。如果你正在尋找一種流行的風(fēng)格，或者打算將已有的 LOGO 翻新升級，試試立體的 3D 設(shè)計，這可能是當(dāng)下的一種設(shè)計風(fēng)格。
這是最近2年又重新流行開來的一種設(shè)計風(fēng)格，復(fù)雜的輪廓和陰影，筆觸細節(jié)豐富，繁雜但是令人愉悅，手寫和手繪都融入其中，從手寫風(fēng)格的文本到近乎手繪的圖形圖像，你能在這樣的 LOGO 設(shè)計中感受到強烈的品質(zhì)感，感知到精致的元素和獨特的個性，整體其實是給人耳目一新的感覺。
文字 LOGO 一直是 LOGO 設(shè)計中的一個比較大的門類，只需要使用特別風(fēng)格化的字體來呈現(xiàn)品牌的名稱，就能夠很大程度上傳遞品牌的主要信息和氣質(zhì)，它足夠簡明，不費吹灰之力就可以確保信息的傳達，視覺的美觀，氣質(zhì)獨特，并且獲得某種程度的認可。下面的 LOGO 都是2020年新設(shè)計的文字 LOGO 中，比較有特點和代表性的作品。
有很多品牌本身，和自然元素是有關(guān)聯(lián)的。在今年這個大環(huán)境之下，大家對于自然的青睞是無與倫比的。這也是的很多和自然元素相關(guān)的品牌，會盡可能多地在設(shè)計的時候從自然汲取靈感，盡量創(chuàng)造富有識別度，有著平靜協(xié)調(diào)氣質(zhì)，并且能夠讓人想到「自然」的設(shè)計，下面的案例就是典型：
黑白是永恒的經(jīng)典。通常，黑白 LOGO 會更加考驗設(shè)計師對于形體和構(gòu)成的認知。優(yōu)秀的黑白 LOGO 通常輪廓分明，優(yōu)雅又頗具識別度。
有意思的地方在于，2021年的黑白 LOGO 并非和往常一樣毫無新意，很多設(shè)計師會將 3D 效果、動畫和黑白 LOGO 結(jié)合到一起來進行設(shè)計。
生動的色調(diào)，明亮的色彩，只有扎眼的設(shè)計才能夠在第一時刻抓住用戶的注意力。在 2021 年，反常規(guī)、大膽的用色會是 LOGO 設(shè)計當(dāng)中相當(dāng)合理且出彩的一種策略。用戶會下意識地被品牌色吸引，這也能夠讓LOGO 和品牌最快發(fā)揮效用。
角色總是能夠更容易引起共情，因為一個具體的角色總能夠更加具象和立體地呈現(xiàn)特征、傳達情感甚至在某些方面引起互動。
值得一提的是，在品牌設(shè)計方面，設(shè)計師將想象力和品牌特征加諸角色，也可以幫用戶和觀看者構(gòu)建出想象空間。
使用角色或者吉祥物構(gòu)建的 LOGO 可以更加輕松地應(yīng)用到海報、標牌、廣告、動畫、社交媒體等地方。這類 LOGO 設(shè)計的重難點，是如何通過簡單的角色傳遞出獨特的氣質(zhì)和情緒。
在抖音風(fēng)靡全世界之前，很少會有人在 LOGO 中玩故障效果。一方面是故障風(fēng)并沒有那么主流，雖然很贊很賽博朋克，另一方面是和故障風(fēng)在氣質(zhì)上契合的品牌其實并沒有那么多。
不過在這個注意力資源稀缺的時代，前有大廠帶路，后有市場壓力，很多品牌開始在條件允許的情況下，盡可能地采用更為大膽的故障效果，瘋狂地、富有創(chuàng)造性地嘗試這一效果。
總而言之，如果你正在尋找一些特殊的 LOGO 效果，來試試故障效果吧。
動效，或者我們稱之為微動效，是在2020年之前就存在的東西，不過在 LOGO 設(shè)計領(lǐng)域的大范圍流行，應(yīng)該在 2021 年。在數(shù)字硬件性能過剩的今天，讓 LOGO 動起來并不是什么大事，只要它能夠吸引用戶的注意力。
唯一的問題是在于，怎么動才會讓它恰到好處？很簡單，看看別人都是怎么做的：
和 3D 設(shè)計一樣，漸變色也一直身處設(shè)計領(lǐng)域的話題中心。漸變本身會賦予 LOGO 以更強的體積感和立體感，讓色彩更加有趣，即使 LOGO 不動的時候，依然具有足夠的「動感」，這大概是漸變色最富有價值的地方。
值得注意的是，隨著「擬物化」的「文藝復(fù)興」，大幅度漸變色重新成為了設(shè)計師們的寵兒，雖然這是大趨勢，但是在設(shè)計 LOGO 的時候，依然要注意堅守品牌色，同時控制好變化幅度，避免過猶不及的情況發(fā)生。
回歸簡約和基礎(chǔ)可能也是 2021 年 LOGO 設(shè)計的一個重要的主題。很少有東西能像基礎(chǔ)的幾何圖形那樣具有啟發(fā)性和趣味性。
將基礎(chǔ)的幾何圖形進行重新的排列組合，可以創(chuàng)作出各式各樣的圖形，傳達隱喻，還富有藝術(shù)性。在2021年，你可以嘗試一下這種 LOGO 設(shè)計，它巧妙且有趣。這種設(shè)計還可以結(jié)合動畫和色彩變換，創(chuàng)造出引人入勝的動畫效果。
相比于其他的設(shè)計門類，LOGO 設(shè)計更加考驗設(shè)計師的基本功和打磨的耐心，而與此同時還能擁抱變化的設(shè)計師，能夠在接下來的 2021年，創(chuàng)作出更優(yōu)秀的作品。
文章來源：優(yōu)設(shè) 作者：Iveta Pavlova
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每年的雙11在設(shè)計師們的眼里，都不僅僅是購物狂歡節(jié)還是一場視覺盛宴。這不，今年的雙11重頭戲來了。
天貓聯(lián)合各品牌發(fā)布了超級符合“貓頭海報”，一共55家下面讓我們一次看個夠。
1. 泡泡瑪特，很有意思的創(chuàng)意
2. The North Face場景感十足
3. 好奇很溫馨的設(shè)計
4. 外星人，一直都想買的電腦
5. VANS，我喜歡他家的黑格子鞋
6. Levi’s，我服了
7. 麥當(dāng)勞，煙霧的創(chuàng)意很契合產(chǎn)品
8. 惠氏鉑臻3，一團線織出來的創(chuàng)意
9. 拉面說，來碗面
10. 宜家家居，仔細看，是購物袋
11. 巴黎歐萊雅，萬能的C4D
12. 朗仕，細節(jié)很多
13. 華為，冷暖對比很有沖擊力
14. 樂高，積木的海洋
15. Marshall，燥起來
16. Jordan，喬丹
17. 肯德基，WOW好吃！
18. 林氏木業(yè)，俯視的構(gòu)圖角度，空間感很強
19. 元氣森林，故事性很強
20. 強生，滿是愛
21. fresh，高端的護膚品牌
22. 萬代，為“酷”而生
23. 始祖鳥，化石來了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起沖浪
26. 施華洛世奇，每個女孩都值得擁有
27. PINKO，亂的有創(chuàng)意
28. MINI，我有個進MINI車友群的夢
29. 孩之寶變形金剛，汽車人變形
30. Onisuka Tiger，日本的運動產(chǎn)品品牌
31. 優(yōu)衣庫，線下實體店的貨架創(chuàng)意
32. 三頓半
33. OLAY
34. Dyson，很親切的表達方式
35. 迪士尼商店，可愛、好玩
36. NIKE
37. 法國嬌蘭，看起來很貴氣
38. 榮耀
39. LINE FRIENDS
40. M.A.C
41. 紅星美凱龍，空間感很強
42. NET-A-PORTER，泡泡龍的感覺
43. 稀奇，太喜感了
44. 百威，喲喲切克鬧
45. 芭比
46. 李子柒，依然還是熟悉的味道
47. 愛他美3，陽光帥氣
48. 花西子，雕刻工藝品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，傳統(tǒng)國風(fēng)的感覺
52. Moleskine
53. 大疆，很喜歡無人機，有一起拼單的嗎？
54. 繪兒樂，這個創(chuàng)意現(xiàn)實中我玩過
55. 樂事，好吃
每個品牌對于貓頭的創(chuàng)意表達都不一樣，很多都是生活中隨處能見到的，但在設(shè)計師的眼中，就是創(chuàng)意靈感來源。
下面還有視頻版，大家一起看看：
以下視頻來源于
看完今年的貓頭海報，讓我更加期待接下來各品牌雙11活動的玩法和創(chuàng)意。接下來讓我拭目以待吧。
文章來源：優(yōu)設(shè) 作者：美工美邦
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文章來源：站酷 作者：杰克sean
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
專注設(shè)計理論書籍，大多偏底層原理的知識，特意整理過往的筆記與設(shè)計心得分享一下。對設(shè)計的學(xué)習(xí)，要知其然，也要知其所以然。
以上都是近年來的幾本閱讀筆記和心得總結(jié)，一直在慢慢整理中。特意分享給各位作為參考交流，本文還有諸多不足，望各位批評指證。
此篇為構(gòu)圖與形狀的第二節(jié)，開始深入原理的探討，第三節(jié)是關(guān)于構(gòu)圖與形狀與人類知覺關(guān)聯(lián)的深層內(nèi)容。
理論不同于軟件和技法，短時間的學(xué)習(xí)就能看到進步，不能現(xiàn)學(xué)現(xiàn)賣。它是一種所謂的“種樹”過程，靠的是日積月累，是一種學(xué)習(xí)、消化、迭代的過程，一種由量變到質(zhì)變的過程。需要堅持不懈、持之以恒。
僅作免費交流與啟發(fā)，請勿商用! 謝謝！
參考書籍：
《繪圖構(gòu)圖學(xué)》常銳倫
《圖像語言的私密》Molly.Bang
《攝影構(gòu)圖學(xué)》本.克萊門茨，大衛(wèi).羅森菲爾德
《圖解藝術(shù)》郭書宣
《迷情黑白》Marcos Mateu-Mestre
《設(shè)計元素.造型與空間》丹尼斯.M.普哈拉
《藝術(shù)與視知覺》魯?shù)婪?阿恩海姆
文章來源：站酷網(wǎng)
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
首先看看我們的素材：
當(dāng)拿到一張原始素材的時候！
怎么辦？該怎么入手？怎么找方向？
來吧！
先來看看成稿：
最終設(shè)計成果還可以，那么是通過怎樣的設(shè)計手法達到這樣的效果呢？
下面我就來分享一下我的作圖思路；
1.需求的梳理和信息收集：
理解核心需求，為設(shè)計方向做好前期準備
Slogan：傳武（作品名） 副文案：幽府之力，逆轉(zhuǎn)生死
我們漫畫類的作品眾多，內(nèi)容風(fēng)格繁雜，所以拿到需求之后,首先就是要對作品進行“調(diào)查”。通過對漫畫作品的閱讀，理解內(nèi)容、故事、繪畫風(fēng)格來定性設(shè)計的方向。這樣才能在設(shè)計過程中準確把握住作品調(diào)性，才能設(shè)計出最貼合作品風(fēng)格內(nèi)容的banner，才能把我們作品精髓的內(nèi)容傳遞給用戶。
比如上面這部作品，SLOGAN“傳武”是我們要著重設(shè)計展示的。而副標題“幽府之力，逆轉(zhuǎn)生死”也很重要，往往傳達出了作品的賣點和調(diào)性。
再看看我們拿到的素材，一張單人的簡單素材，看起來很單調(diào)，似乎沒有可切入的地方。這個時候就體現(xiàn)出為什么要先對作品進行“調(diào)查”的重要性了！
2. 確定設(shè)計方向：
明確設(shè)計方向，精準展現(xiàn)作品調(diào)性
通過閱讀，我們了解到這部作品是一部熱血，古風(fēng)，玄幻作品，還有大致的故事內(nèi)容，再結(jié)合我們的副標題“幽府之力，逆轉(zhuǎn)生死”。
腦子里就已經(jīng)開始有畫面了，“幽府”大概表達了一個場景，而“力量”和“逆轉(zhuǎn)生死”又傳達出了一種氣勢磅礴的場面。這就為我們設(shè)計的方向奠定了一個準確的方向。
首先就把我們的素材和文案拉進畫框里，進行一個大致的排版找找感覺。第一個左右排版就太常規(guī)了，在場面和氣勢上有些弱。第二個添加了漫畫框，想切入一些故事內(nèi)容一起展示。但又有一些強調(diào)漫畫框的存在了，磅礴的場景沒有展示出來。但注意右邊的部分，把主標題排在人物的兩邊似乎是一個不錯的選擇！我們就從這里入手。
重新嘗試了一下，發(fā)現(xiàn)這樣布局好像就是我們想要的感覺哈！那既然確定了框架，我們接下來就按照這個方向繼續(xù)強化出“氣勢”“力量”的感覺。
我們以人物為中心，想象畫面里有力量從人物背后向外“迸發(fā)”所以我們的字體可以設(shè)計得有一些趨勢在里邊，也是以一個圓弧為中心向外生長。以光從人物背面照射出來大逆光的視覺，營造一種“力量”迸發(fā)的感覺。
3. 顏色的選擇：
跟隨之前確定的設(shè)計方向，提煉選色搭配。
我的方法一般是先從素材本身出發(fā)，根據(jù)想要達成的視覺風(fēng)格來延伸出想要的配色。這樣得到的顏色更整體，人物素材能更好的融入背景氛圍中，也方便后期調(diào)整。觀察的素材，發(fā)現(xiàn)他的顏色都比較灰，缺乏對比，就會顯得很“平”，難以營造出我們想要的感覺。所以從人物素材本身的顏色出發(fā)，提取同類色和提高飽和度。結(jié)合考慮到有利于運營推廣的視覺需要“吸睛”。得出了后面一組對比更強烈的顏色。
4. 有主次地進行深入刻畫：
畫面中最主要的肯定是我們的SLOGAN和人物角色，是我們要重點刻畫的對象。剩下的副標題、背景氛圍次之。不僅是要在排版上做區(qū)分，在視覺感受上也要做出差異化。這樣才能有遠近虛實的感覺，增加空間感。
我們希望畫面具有一定的質(zhì)感，增加其沖擊力。所以我們在刻畫背景的時候可以選擇一些漫畫里比較好的場景，或扉頁背景素材來做底圖。再疊加上一些紋理材質(zhì)，再一層一層地來給背景打光，用“疊加”“柔光”“濾色”等圖層屬性來慢慢提高亮度,最終達到我們想要的效果。
小技巧1：相同光源的照射，傳達到不同的物體上時，它的視覺表現(xiàn)時不同的。并不是光源時什么顏色，照射的地方就會是什么顏色。
我們來對比一下兩種顏色的實際效果，可以說是很直觀了！
小技巧2：為了使素材更完美地融入到背景中，我們可以后期人為地給素材增加一圈高光/輪廓光。這樣使畫面更融洽的同時，也能讓我們的人物變得立體起來！。
再來對比下沒加輪廓光的感覺：
真的是少了些味道和細節(jié)哈哈，其實在很多時候我們都可以對我們的素材進行二次加工讓其提升一定的品質(zhì)，配合畫面以達到更好的視覺效果。
5. SLOGAN的設(shè)計：
主文案在我們草圖的基礎(chǔ)上，結(jié)合整體畫面的趨勢進行細化。（增加毛筆筆觸，和優(yōu)化筆畫）。
這里主要分了三層進行處理顏色層(文字層)：主要給一個基礎(chǔ)顏色；
材質(zhì)層：因為這兩個字的占比比較大，所以可以增加一些紋理細節(jié)讓畫面更豐富耐看；
厚度層：讓后面的光源，在我們的字上形成一圈高光，可以突出我們的文字。
增加一些光暈效果，再放上做好的SLOGAN看看效果，好像還不錯。
有些同學(xué)可能會疑惑這里為什么字體要做一個厚度層，我們也上一下對比圖先看下效果：
可以看少了一些些質(zhì)感和重量，在輕量的風(fēng)格里ok，但是在我們當(dāng)前的畫面里就差了些感覺，所以才做了厚度層來強調(diào)光線照射過來的視覺增強畫面沖擊力。
之后主要是做一些符合我們畫面氛圍的漂浮元素，豐富畫面。有一定手繪功底的話就再好不過了！
完成，到這一步差不多達成了我們想要實現(xiàn)的效果，“氣勢”和“力量”的感覺在這么“樸實無華”的素材身上也基本表現(xiàn)到位了。還是比較滿意的，差不多可以提審交稿了！
最后在觀察觀察整體的畫面，審視一遍,查缺補漏。
發(fā)現(xiàn)我們的畫面好像有些燥啊，紅色和黃色飽和略微有些高。整體的感覺也不夠清晰。最后再做一個調(diào)整吧。
降低一些紅色和黃色飽和度，在暗部加一些紫色(主文案暗的部分和畫面四周的暗部)。增加冷暖對比就好多了。
小技巧3：蓋印整個圖層——在濾鏡里面找到其他——高反差保留，數(shù)值根據(jù)畫面來調(diào)。
然后就得到這么一個圖層
是不是很神奇？別慌，把這個圖層的屬性改成線性光看看,畫面清晰了很多，也變得更有質(zhì)感了！
最后看下過程演變圖：
總結(jié)
1）梳理需求內(nèi)容：通過閱讀漫畫作品，深入了解內(nèi)容并收集整理信息；
2）提煉關(guān)鍵字延展：嘗試多種可行方案，最終確定設(shè)計方向；
3）slogan的設(shè)計：一定要符合畫面和作品調(diào)性，達到與畫面相映成輝的效果；
4）細節(jié)把控：完成之后再回過頭來審視整體畫面，查漏補缺力求做到最好！
文章來源：UI中國 作者：騰訊動漫TCD
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文字是界面中最核心的元素，是產(chǎn)品傳達給用戶的主要內(nèi)容，它的承載體即是字體。
前半部分從字體的最基本屬性（字族、字號、字重、大小寫等）說起，熟悉字體的那些特征，了解字體在界面中的作用，以及iOS與Android系統(tǒng)字體的使用規(guī)范。
字體是界面設(shè)計的基石
字體是排版中最重要的元素，對用戶的閱讀體驗有著至關(guān)重要的作用。一般來說，設(shè)計師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來已久，從最早的羅馬字體到現(xiàn)在蘋果手機中的SF-UI字體，經(jīng)歷了許多設(shè)計上的變革。而中文字體的發(fā)展并沒有西文字體那么順利，數(shù)量上也遠遠落后于其他字體。但中國設(shè)計正在崛起，我們也看到越來越多的設(shè)計團隊和設(shè)計師加入字體設(shè)計的隊伍，數(shù)量上正在呈指數(shù)級別增加。
設(shè)計是一門非常嚴謹?shù)膶W(xué)科，里面蘊含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過了將近千年的發(fā)展和演變，有非常多的專業(yè)知識。像平面設(shè)計一樣，在UI設(shè)計中字體的使用也有相應(yīng)的規(guī)范，設(shè)計師應(yīng)懂得這些基礎(chǔ)知識，才能將字體為自己所用。
本篇就從我們常用的設(shè)計軟件（sketch、Figma、P hotoshop）字符面板開始，來聊聊有關(guān)字體與排版應(yīng)用方面的知識。
Font 中文翻譯為「字型」，是指字的粗細、寬度和樣式，是一套具有同樣風(fēng)格和尺寸的字形。例如「Regular_16pt_SF-UI」。
Typeface 中文翻譯為「字體」，是指一整套的字形，一個或多個字型的多尺寸的集合，例如「SF-UI」里有不同粗細（Regular、Blod、Light）和不同寬度（12pt、14pt、20pt）。
Glyph 中文翻譯為「字形」，是指單個字的形體或是字體的骨骼。 同一字可以有不同的字形，而不影響其表達的意思，例如漢字中的「令」字，第三筆可以是一點或一撇， 最末兩筆可以作「ㄗ」或「マ」。
Font和Typeface常常被混淆使用，其實可以這樣理解，前者指一種設(shè)計，后者指具體的產(chǎn)品。
1. 族類 GenericFamily
族類就是不同字體類型，例如阿里巴巴普惠體、方正新書宋、站酷酷黑體等。
而這些眾多字體又可分為「襯線體」和「無襯線體」。
襯線體
宋體就是襯線體，特點就是筆畫開始和末端的地方都有額外的裝飾，且筆畫的粗細有所不同。在傳統(tǒng)的正文印刷中，普遍認為襯線字體能帶來更加的可讀性。常見的襯線體有宋體、Times New Roman、Georgia等。
襯線體一般在APP中比較少見，文字閱讀類偏愛這種襯線體，例如「單讀」，大標題用的是「華康標宋體」、正文內(nèi)容用的是「蘋方-纖細」而英文用的是「XCross Traditional Bold」
黑體
黑體是無襯線字體，特點是筆畫沒有額外的裝飾，且筆畫的粗細差不多。相比嚴肅的襯線體，簡單干凈的無襯線體給人一種休閑輕松的感覺。因此大多數(shù)App都是使用黑體作為默認字體。如冬青黑體、思源黑體、Myriad等。
2. 字族 FontFamily
一個族類包含不同的字體，然而一個字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會發(fā)現(xiàn)超過40多個前綴是Helvetica的字族。這是為了協(xié)助人們在不同的使用場景下表達合適的意思。
知識點：
基本字族包括細體、標準、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個著作」的含義。
例如：「若我們能以滿懷新鮮的眼神去觀照日常，「設(shè)計」的意義定會超越技術(shù)的層面，為我們的生活觀和人生觀注入力量?！梗ㄒ栽性盏摹对O(shè)計中的設(shè)計》）
3. X-height（X字高）
在西文字體中，x高度是指字母的基本高度，就是基線和主線之間的距離。它指一個字體中小寫字母的x高度，在現(xiàn)代字體設(shè)計領(lǐng)域，x高度代表了一個字體的設(shè)計因素，因此在一些場合字母x本身并不完全等于x字高。
除了字母a、c、e、m、n、o等高度一樣，還有一些小寫字母的字高都比x字高要大，并分為兩類：一是含有升部的字母，字母筆畫含有向上部分，如字母b、d、h；另一類是含有降部的字母，字母的筆畫向下超過了基線，如字母g、p、q。
4. 字號 Font-size
字號就是字體大小，通常在網(wǎng)頁端使用px作為字號的單位。移動端興起后，iOS字體單位是pt，Android是sp。
以iOS為例，正文字號不應(yīng)小于11pt，這樣才能被正常閱讀，建議在14-18pt之間。在使用較大的字體來獲得更好的易讀性的同時，我們也應(yīng)相應(yīng)地減小字體的字重，考慮Light、Thin，因為過重的字體會太過醒目，影響其他內(nèi)容的顯示效果。
當(dāng)字體大小為12-18pt時，建議使用Regular，18-24pt時，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過32pt時，建議使用Ultralight。
字號大小決定了信息的層級和主次關(guān)系，合理有序的字號設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號使用會讓界面混亂不堪，影響閱讀體驗。
設(shè)計中的最小字號
我們都知道在界面設(shè)計中最小字號不能低于20px，那是因為，正常情況下，在手機距離眼睛30cm左右，使用視角計算公式，我們能識別到的的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我們經(jīng)常使用iPhone7的尺寸1334×750為例。iPhone7的dpi為324，也就是一英寸上顯示324個像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。
字號的基數(shù)關(guān)系
我們在做設(shè)計時，字號的單位最好使用一個基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實我們在做移動端設(shè)計時，單位需要遵循偶數(shù)原則，因為開發(fā)中的單位是以一倍圖的基數(shù)來進行計算。那么其實在制定字體規(guī)范中，使用2為單位會導(dǎo)致字號過多，且2號字體的差異化不大。所以在字號方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。
5. 字重 FontWeight
Weight，中文翻譯為「字重」，是指字體筆畫的粗細，字體中很重要一個概念，不同字重傳遞出來視覺感受完全不一樣。一般在字體家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字體廠商劃分字重各有不同，例如「蘋方」字體就有6種不同的字重。
一般都有細體、正常、粗體三種基本字族。在應(yīng)用場景上，通?！讣汅w」多用于超大號字體；「正?！褂糜谡膬?nèi)容；「粗體」表示強調(diào)，多用于標題；
兩種字重屬性
輕字重：傳遞出輕盈放松的視覺感受，常配合粗的字重使用，在一些輔助信息，說明文案時候使用；
重字重：視覺感受莊重，很重要，常用在重點強調(diào)的文字，頁面大標題，數(shù)字，引導(dǎo)行動操作點上等；
例如百度網(wǎng)盤「發(fā)現(xiàn)」頁就用了Regular、Medium、Semibold三種字重以拉開信息層次對比；
知識點：
需要注意的是：在進行界面設(shè)計時，不要用軟件自帶的文本加粗，它不僅破壞了字體本身的美感，還改變了文字原本的字寬，小字體下會模糊不清，合理的方式是使用字體本身的字重來控制粗細。
注意超細體的字體
字重超細的字體要謹慎使用。如果你設(shè)計的文本是裝飾性倒還好，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分低分辨率的手機屏幕上看起來會非常糟糕。
6. 字色 FontColor
字色即文字對應(yīng)的顏色，不做過多解釋。需要大家注意的是 遠離純黑色和純灰色！
純黑色就像沒有生命力的深淵，能吞噬所有細節(jié)，使用戶陷入冷冰冰的極端情緒中。純黑色還會與白色產(chǎn)生強烈的對比度，看久了就會感覺疲勞，讓用戶產(chǎn)生焦慮情緒。
還有就是真實世界中是不存在純黑色的。嘗試在色彩中加入一些色相，這樣就不會讓頁面看上去死氣沉沉的。例如iOS系統(tǒng)「設(shè)置」頁面背景色就是加入了白色的低飽和度藍色，看上去柔和自然。
7. 字符樣式 FontStyle
除了以上幾個最常用的文字屬性外，還有幾個使用頻率比較低的字體設(shè)置。例如帶下劃線的、刪除線的文本?！赶聞澗€文本」一般出現(xiàn)在「文字按鈕」或帶鏈接的網(wǎng)址，而「刪除線文本」一般會出現(xiàn)在商品櫥窗的現(xiàn)價、原價
例如「CCtalk」的課程現(xiàn)價和原價的區(qū)分，原價用刪除文本，「微信讀書」文章底部「加入書架 隨時閱讀」就是帶鏈接的下劃線文本。
8. 字符選項 Text options
Ps和Sketch都有文字（字符）選項一欄，主要針對西文字母大小寫格式變換的設(shè)置。最常見有默認大小寫、全部大寫、全部小寫和小型大寫字母，Ps里面還有「上標」和「下標」。
默認大小寫：即正常大小寫格式，軟件不做干預(yù)；
全部大寫：如果輸入的是小寫字母，選擇這個選項，軟件會強制把小寫改為大寫；
全部小寫：如果輸入的是大寫字母，或者只是首字母大寫，選擇這個選項，軟件會強制把所大寫改為小寫；
小型大寫字母：這個選項比較特殊，所謂「小型大寫」就是，在字號一樣的情況下，與小寫字母一樣高，外形與大寫字母保持一致。
注意英文大寫
純大寫的字母文本本身不太適合大篇幅閱讀，會加大閱讀障礙，用的時候注意要額外拉開字母之間的字間距，提升可讀性。
9. 全角與半角 Full-width and half-width
全角是指一個字符占用兩個標準字符的位置。中文字符、全角的英文字符、國標GB2312-1980中的圖形符號、特殊符號都是全角字符。半角是指一個字符占用一個標準字符的位置。
通常情況下，英文字母、數(shù)字、符號等都是半角字符。半角和全角主要是針對標點符號來說的，因為正常情況下沒有打全角英文的需求。
知識點：
在設(shè)計作品時也一定要記得中文搭配全角符號，英文使用半角符號。否則會出現(xiàn)諸如「你好.」或者「t h a n k s?！惯@樣的錯誤。可按鍵盤「capslock」鍵切換全角和半角。這個小知識點雖然非?；A(chǔ)，卻也是設(shè)計中經(jīng)常出錯的地方。
眾所周知，iOS和Android兩大陣營都有各自的設(shè)計系統(tǒng)，要作出符合平臺規(guī)范的設(shè)計，設(shè)計師應(yīng)熟讀各平臺的設(shè)計規(guī)則。因為本篇以講字體為主，我們就來看看iOS和Android各自字體的規(guī)范是什么樣的。
1. iOS字體規(guī)范
可用字體
在iOS系統(tǒng)規(guī)范中，中文字體是「蘋方」字體。英文字體是「San Francisco」也簡稱「SF-UI」，英文還有另外一個襯線體「NewYork」。除了在iOS和Mac OS上，還單獨為Watch OS單獨對字體進行了調(diào)整，命名為 San Francisco Compact。
字體設(shè)置
因為在英文字體下，字體環(huán)境比較復(fù)雜，為了讓字體在任何地方看起來都最佳，蘋果官方針對不同字號開發(fā)了兩套「SF-UI Text」和「SF-UI Pro」字體，而每套字體下面又分為Text（文本模式）與Display（展示模式）兩種屬性，Text只有6個字重，而Display則有9個字重。
這么多類型的字體我們該怎么用呢？iOS的建議是，在字號小于20pt時，使用SF-UI Text，大于或等于20pt時，則使用SF-UI Display。這需要我們在界面設(shè)計時手動切換。
對于「NewYork」，小于20點的文本使用小號，20到35點之間的文本使用中號，36到53點之間的文本使用大號，54點或更大的文本使用特大號。
蘋方字體提供了6個字重供設(shè)計開發(fā)者使用。所以從iOS11開始，iOS使用Semibold中粗體、大字號作為界面的標題變的更為流行起來，較為明顯的有 iOS 中的一些原生APP，比如App Store、Apple Music…
知識點：
在iOS中，默認字體單位是「pt」，正文字號不應(yīng)小于11pt，建議在15-18pt之間。在使用較大的字體來獲得更好的易讀性同時，也應(yīng)該相應(yīng)地減小字體的字重，因為過重的字體會太過醒目厚重，影響其他內(nèi)容的顯示效果。
iOS更全面的文字設(shè)置
動態(tài)類型可以通過讓讀者選擇他們喜歡的文本大小來提供額外的靈活性，除了標準的動態(tài)類型大小之外，iOS系統(tǒng)還為有閱讀大字體的需求的用戶提供了許多字號上的調(diào)整（可在系統(tǒng)字體顯示大小設(shè)置）
iOS「顯示與亮度」下設(shè)置「文字大小」模式
「蘋方」和「SF-UI」字體可在iOS規(guī)范網(wǎng)站免費下載
網(wǎng)址：https://developer.apple.com/fonts/
2. Android字體規(guī)范
可用字體
在Android設(shè)備中，Android始祖Google為了更好的追求視覺效果，聯(lián)合了Adobe設(shè)計發(fā)布了「思源黑體」(Noto)來作為中文默認字體，「Roboto」為英文字體。
字體類型
思源黑體，英文名為「NotoSans CJK」。該字體不僅僅在字形上更易于在屏幕閱讀，并且擁有7種字重，充分滿足了設(shè)計的要求。
英文「Roboto」字體，只有6個字重，視覺語言與思源黑體Noto保持一致。該字體具有「現(xiàn)代的」和「平易近人」的氣質(zhì)，是「Material Design」設(shè)計風(fēng)格下的推薦字體。
字體設(shè)置
Material Design字體規(guī)范，字體類型比例支持的十三種樣式的組合。它包含可重用的文本類別，每種類別都有預(yù)期的應(yīng)用程序和含義。
注：Web瀏覽器根據(jù)根元素大小計算REM（根em大?。?。 現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認值為16px，因此轉(zhuǎn)換為SP_SIZE / 16 = rem。
△Material Design設(shè)計類型比例。（字母間距值與Sketch兼容。）
知識點：
值得注意的是，在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式是：
px = sp*ppi/160 ，sp = px / (ppi / 160)
以iPhone7為例，尺寸是750×1334，密度326ppi 來換算，那么Android的1dp = 1 * 326/160 ≈ 2px
「思源黑體」和「Roboto」字體可在GoogleFonts免費下載，并且可以商用。
網(wǎng)址：http://www.googlefonts.cn/
3. 話題擴展
值得一提的是，越來越多的手機廠商，為了能夠強化自身的品牌形象，推出了定制款的字體。
比如小米的「小米蘭亭」：
OPPO的「OPPO Sans」：
三星的「SamsungOne」：
字體基礎(chǔ)知識小結(jié)
正如開頭所說，文字是界面中最核心的元素，字體作為基本語言，是設(shè)計中體現(xiàn)品牌很重要一點，字體選擇非常重要，字體也是設(shè)計中占比（約 80%）最大的內(nèi)容，所以我們一定要熟練掌握，接下來將從文字行高、字間距、行間距等說起，圍繞字體排版繼續(xù)聊。
設(shè)計中，好的排版能讓用戶愉快地閱讀，而不好的排版則會給用戶帶來糟糕的閱讀體驗。因此排版的潛在重要性不容忽視。
無論是在西方國家還是亞洲國家，大部分人們的閱讀習(xí)慣都是從左到右。這種閱讀模式已經(jīng)延續(xù)了幾百年，因此如無特殊需求，你應(yīng)該使你的文本左對齊，這樣符合人們一貫的閱讀習(xí)慣（阿拉伯地區(qū)除外）。人缺乏耐性，在閱讀過程中更似是一種遠近不定的跳躍「掃視」。枯燥的文字如果沒有經(jīng)過任何排版處理，會讓讀者瞬間失去閱讀的興趣，除非非讀不可。所以通過改進文字內(nèi)容的結(jié)構(gòu)和排版來提高閱讀性乃至「誘讀性」，是一件十分必要的事情。
1. 字間距與字偶間距
字間距，英文名為「spacing」，即字符間的距離，事實上他是字符圖形外邊界框的尺寸和字符在方框中的位置的距離。
字偶間距，英文名為「Kerning」，也叫做「字距調(diào)整」，是在字間距的基礎(chǔ)上，為實現(xiàn)不同字偶（一對字符）可以有不同字間距的調(diào)整值。我們都知道，不同的字母外形不同，所以只有同樣的字間距是不協(xié)調(diào)的。例如，「NA」間是標準的字間距，而「WA」由于W和A的形狀可以重疊，所以需要負字偶間距才能達到協(xié)調(diào)一致的外觀。
在大段落文字排版時，我們一般不需要更改字間距和字偶間距，因為字體設(shè)計師已經(jīng)對他們做過了最優(yōu)處理。在對一組字符單獨設(shè)計時，就需要考慮字偶間距，以達到更協(xié)調(diào)的視覺效果?？偟膩碚f，字號越小，字距應(yīng)當(dāng)相對越大，行高也應(yīng)該相對越大。反之亦然。
西文字間距還分為：比例字體和等寬字體
比例字體：根據(jù)字符外形特點設(shè)置不同字寬的字體，使得字體外形協(xié)調(diào)，可讀性更好；
等寬字體：每個字符設(shè)置相同字寬的字體，字符間距較大，它們經(jīng)常被用于顯示計算機代碼示例；
2. 字間距的三種形式
標準間距：即默認的字間距，字與字之間的距離不大也不小，在設(shè)計中要根據(jù)不同的字號設(shè)置不同的字間距來排版，往往需要我們根據(jù)字號、字重的不同動態(tài)調(diào)節(jié)間距參數(shù)，避免千篇一律使用軟件默認間距。
緊湊間距：字與字之間的距離向里縮進，在字符工具里的「字間距」數(shù)值為負數(shù)，一般在-5%~-30%不等，通常用在標題中。
寬松間距：與緊湊型間距相反，字與字之間間距向外擴大，在字符工具里的「字間距」數(shù)值為正數(shù)，一般在5%~30%不等，通常用在正文中。
知識點：
提示：字間距雖然有以上三種形式，但是在實際工作中也要具體問題具體分析，例如有些中文字體本身「外邊框」的距離就比較大，如果再加大字間距，就會顯得過于分散。
3. 西文詞距
在西文閱讀時，視覺上的自然界限是「詞距」而不是「字距」。如果排版時需要進行例如「兩端對齊」的行內(nèi)間距調(diào)整，中文直接可以動「字距」，把調(diào)整量均勻地放到每個字間里；而西文卻是動「詞距」，只能把調(diào)整量加到詞距里，而單詞內(nèi)部的字距依然是保持字體設(shè)計師預(yù)設(shè)的原始字距，這是保證西文易讀性的關(guān)鍵所在。
4. 標點避頭尾
在古代，書籍排版可以做到字間距恒定，原因是古代不存在「標點」，也就沒有「標點避頭尾」導(dǎo)致的種種問題。而現(xiàn)代漢語存在標點符號，有的標點不能放在行首(如逗號、頓號、句號等)，有的不能放在行尾(引號、前括號等)。處理方式叫做「優(yōu)先推出式」標點避頭尾，通過將本行內(nèi)的標點寬度進行擠壓后，騰出了空間給本來排不到的逗號，確保了字間距的恒定（篇幅限制，本文暫不談文字編排具體調(diào)整方法）。更詳細的介紹可移步字體設(shè)計與排印網(wǎng)站 Type is Beautiful 了解。
5. 文本框
在設(shè)計軟件中，我們在添加文本時，就會創(chuàng)建一個文本區(qū)域，例如Sketch中文本區(qū)域有三種類型，自動寬度、自動高度、固定尺寸，而「固定尺寸」可配合「設(shè)置文字層垂直對齊方式」使用。
6. 對齊方式
文本的對齊方向有左、中、右三種對齊方式。文本對齊的標準是基于文本區(qū)域的邊界決定的，只有設(shè)置固定的文本區(qū)域?qū)R才有意義。
7. 行高
行高或行距是文字排版的基礎(chǔ)參數(shù)，也是排版品質(zhì)的先決要素之一。行高是一行文本垂直方向的高度，這個高度和字高無關(guān)，文字內(nèi)容水平居中，如下圖所示：
8. 英文行高
英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，基線（baseline）是英文字體結(jié)構(gòu)中的概念，在css里文字的元素都是按基線來對齊的。西文基本行高是字號的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來創(chuàng)造行間空隙。
9. 中文行高
中文的結(jié)構(gòu)屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文因為字符密實且高度一致，所以一般行高需要更大，根據(jù)不同用戶人群（兒童、年輕人、老年人）以及使用環(huán)境，可達到1.5~2倍甚至更大。
知識點：
提示：不管是標題、正文還是注釋文字，行高都不易過大或過小，會導(dǎo)致閱讀困難?？偟膩碚f，字號越大行高應(yīng)該越小，字號越小行高應(yīng)該越大。
10. 行長
在《中文排版需求》里，明確寫明了這項基本要求：
2.3.5 版心設(shè)計的注意事項：「一行的行長應(yīng)為文字尺寸的整數(shù)倍，各行的位置盡可能頭尾對齊?！?
「一行的行長應(yīng)為文字尺寸的整數(shù)倍」，這一基本的、理所應(yīng)當(dāng)?shù)男枨罂此坪唵危窃趯嶋H操作中，卻往往由于單位換算等各個原因沒有得到實現(xiàn)。對于后半句提到的「頭尾對齊」，將另文討論，但顯然也和本文相關(guān)。正因為設(shè)計師想實現(xiàn)「頭尾對齊」才會盲目地用軟件的「兩端對齊」功能，大家可以看看身邊的印刷品，注意看一下每段的最后一行間距是不是統(tǒng)一，就可以知道設(shè)計師有沒有按照這個原則排版。
中文的一個字占兩個字符，英文一個字占一個字符。正文的行長通常在40到60個字符之間。在行長較寬的區(qū)域（例如桌面）中，包含最多120個字符的較長行將需要將行高增大。行長過長易讀性就會變差，讀者閱讀時容易串行，造成閱讀困難。合理的行長使用戶在行間跳轉(zhuǎn)時感到輕快和愉悅，反之則會使閱讀成為一種負擔(dān)。
11. 行間距
行距是指臨近兩行之間的距離。合適的行距讓用戶閱讀舒服，閱讀效率也高，行距太緊湊會讓內(nèi)容擠成一團，實現(xiàn)無法正常閱讀；行距太寬松會讓內(nèi)容松散，產(chǎn)生了我們通常意義上的「河流」，阻斷了行的視線，Photoshop中默認行距是1.2倍的字號，例如字號是30px，那么將行距設(shè)為36px和默認「自動」的效果一致。1.2倍的行距對中文排版來說通常過小，合適的行間距通常為1.5～2倍之間。文本字體越小，兩行之間的行間距應(yīng)該越大，確保字與行呼吸的空間。
12. 英文行間距
英文的行間距指的是一行英文的底部線與下一行英文的頂部線之間的距離。可以簡單的理解為「行與行之間的距離」。另外英文文字底部和頂部都有對應(yīng)的專有名詞，英文頂部的那條叫「升部線」，底部那條叫「降部線」。
13. 中文行間距
中文的行間距就比較好理解了，是指一行文字的最底部與下一行文字的最頂部之間的距離。即行與行之間的距離。
14. 段間距
段間距：段落與段落之間的距離，可保持頁面節(jié)奏，與字體、行高相互關(guān)聯(lián)。
為保證文章易讀性，正文段間距，可以簡單地取一個空行（也就是一個行高），這是比較常規(guī)也比較合適的做法。舉個例子：字號12，行高設(shè)定20，段間距 = 行高 + 行間距。行間距越大，段間距就越大；行間距越小，段間距就越小，行距與段間距成正比。段落之間首尾的行之間間距應(yīng)該大于段內(nèi)的間距，這時候就應(yīng)該增加段間距，使得文本的閱讀體驗得到進一步的提升。
在任何一個設(shè)計中都需要把各個元素進行分級，分清主次，這樣才能更好地抓住重點。為了能分清各元素的主次，就需要用到CRAP原則。這四個原則分別是對比、重復(fù)、對齊、親密性。
1. 對比 Contrast （增強效果、組織信息）
對比的基本作用是突出重點，增加可讀性。附加作用是有效增強視覺效果，打破平淡，吸引讀者注意。
一些界面排版混亂，可讀性非常差，用戶的視線不知道集中在哪，導(dǎo)致這種情況的發(fā)生都是因為界面內(nèi)容對比不明顯造成。在同一個視覺區(qū)域內(nèi)的邏輯不同的元素應(yīng)該有所區(qū)別，以避免視覺上的相似，這樣就可以有效的分清主次，為了使主要元素更突出，次要元素更弱化，可以盡量使它們的顏色，字體、大小，留白不同。如果兩個元素不盡相同，那就讓他們截然不同。比如，使用「14 號字」和「15 號字」進行對比，差異就很不明顯，而使用「14號字」和「24 號字」，差異就明顯得多，一眼就能看到大號的字體。
在這點上，「微信讀書」的列表頁就做得非常好，它通過標題與描述的字體粗細、大小、顏色進行對比，把最有用的信息直觀地呈現(xiàn)在用戶面前標題是吸引用戶關(guān)注的關(guān)鍵，作者和評分只是給用戶一種參考，不起決定性作用。因此，如果沒有對比原則，標題和描述的字體同樣粗細、大小，你就會發(fā)現(xiàn)視線總是會情不自禁的被評分所干擾。
大小對比
為了區(qū)分文字、圖片、圖標等元素的重要性，通常采用尺寸的大小來做對比。例如文章的正副標題，副標題一般用來解釋主標題的內(nèi)容，因此副標題的文字應(yīng)該通過大小和顏色調(diào)整變成次級，讓用戶閱讀時分清主次。
顏色對比
在排版中，首先要產(chǎn)生對比效果的就是背景和文字。文字與背景如果在顏色上很接近，那么就不容易區(qū)分開來吸引用戶注意力，一般來說，人們習(xí)慣白紙黑字（也是因為人類有書寫需求以來形成的），即白色背景和黑色文字。也有黑紙白字，例如現(xiàn)在APP都在做的DarkMode暗色模式，但其實暗色背景搭配淺色文字并不適合大量閱讀。當(dāng)然這也是為了配合用戶使用場景，在夜晚光線較暗的環(huán)境下，深色模式或許更利于閱讀。「冷知識：暗色模式其實就是廠商為了解決電池耗電量而出的計策，只是換了個噱頭而已」總之，不管設(shè)計中使用黑白、紅綠、藍黃哪一種配色，一定要注意文字和背景的對比是否清晰便于閱讀。
2. 重復(fù) Repeated （統(tǒng)一有秩序）
重復(fù)是保持整齊的重要準則。既包括字體、字號的重復(fù)，也包括顏色、風(fēng)格的重復(fù)。對于新人來說，要時刻牢記，盡量統(tǒng)一字體、字號、顏色等一系列元素，在統(tǒng)一的基礎(chǔ)上，找出需要強調(diào)的部分，進行更改，通過對比原則進行強化。
如果相同內(nèi)容（如標題）屬于同一種邏輯關(guān)系，則應(yīng)該使他們的字體、顏色、留白盡量保持一致。這樣可以增加內(nèi)容的條理性，并加強設(shè)計的統(tǒng)一性。在重復(fù)原則下，用戶會因為視覺慣性繼續(xù)選招設(shè)計線索，根據(jù)重復(fù)性設(shè)計線索順場地瀏覽下去。
知識點：
重復(fù)不是單一的機械式的元素重復(fù)，我們可以理解為用統(tǒng)一的重復(fù)元素塑造一個新的元素。當(dāng)然這是在保留基本的元素時所塑造出來的高度統(tǒng)一性的畫面，從而增強我們所想要的設(shè)計效果。
3. 對齊 Alignment （統(tǒng)一而有條理）
在頁面設(shè)計上每一元素都應(yīng)該與頁面上的另一個元素存在某種視覺聯(lián)系，這樣才能建立清晰的結(jié)構(gòu)。任何元素內(nèi)容在在版面上都應(yīng)該盡量上下左右對齊，對于設(shè)計新人來說，最好嚴格遵循一種對齊方式，不然就會導(dǎo)致混亂，實在不行，至少保證在同一內(nèi)容版塊中遵循一種對齊方式。方法也很簡單，就是找到一條明確的對齊線，并用它來對齊。
對齊包括左對齊、居中對齊、右對齊 3 種方式。
左對齊：頁面中的元素以左基線對齊。左對齊是最常見的對齊方式，簡潔大方，利于閱讀；
居中對齊：頁面中的元素以中基線對齊。居中對齊給人一種嚴肅與正式感，不過也會有呆板的感覺；
右對齊：頁面中的元素以右基線對齊。相對少見的對齊方式，給人一種人為干預(yù)的感覺，加強了形式感，降低了閱讀效率；
4. 親密性 Proximity （實現(xiàn)組織性）
親密性是實現(xiàn)視覺邏輯化的第一步，它是指關(guān)系越近的內(nèi)容，在視覺上應(yīng)該靠得越近，反之，關(guān)系越疏遠的內(nèi)容，在視覺上應(yīng)該越遠。簡單的來講就是要把畫面中的元素分類，把每一個分類做成一個視覺單位，而不是眾多的孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。
那做好親密性有哪些方法呢，私以為有以下幾點：
留白：留白是設(shè)計中通用的萬金油原則，通過留白建立距離關(guān)系進行內(nèi)容區(qū)分；
左圖歌曲封面和歌曲名信息間隔比每首歌曲上下間距還大，導(dǎo)致用戶的視線流呈垂直方向。
分割：簡單來說就是分組，建立組合關(guān)系。常見的形式有線條分割，卡片分割等；
色相：通過顏色的對比，不同顏色的信息會暗示這是同一類。常見的日歷行程就是通過不同顏色來區(qū)分時間和具體事項。
方向：不同的排版方式也可以很好的區(qū)分信息；
「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領(lǐng)域的概念。在互聯(lián)網(wǎng)產(chǎn)品中把 「信噪比」概念借用到了用戶體驗。合理的信噪比可改善與用戶的交流。加大信號可以將有用的信息快速準確的傳達給用戶，減少噪音并使信號脫穎而出。
從人機交互角度，我們應(yīng)該刪除與任務(wù)不相關(guān)的內(nèi)容或設(shè)計元素。你甚至可以將高信噪比的目標與極簡主義聯(lián)系起來。但是「信號」和「噪音」的確切含義會有所不同，一個人的信號可能是對另一個人的干擾，因此，用戶界面的信噪比有低有高，取決于具體的用戶和具體的任務(wù)。在用戶界面中，信噪比所涉及的「信息」可以是任何內(nèi)容，包括文本內(nèi)容，視覺元素或動畫等。為了提高設(shè)計傳達信息的效率并幫助用戶完成任務(wù)，需要提高信噪比。
知識點：
用戶始終喜歡清晰、簡單、自然、好用的設(shè)計和產(chǎn)品。但需要注意的是，除了交流必要信息之外，我們還希望界面在視覺上具備吸引力，以喚起用戶的某些情感。有了額外的目標（比如品牌宣傳、業(yè)務(wù)目標等），應(yīng)該以合理的信噪比為目標，而不是以絕對的方式排除所有「無關(guān)」的信息。
例如iOS6到iOS7圖標擬物到扁平到改變，讓用戶可以更快速準確的獲取到有效信息。而這一過程，就是典型的放大「信號」。
還有蝦米音樂的駕駛模式
我們都知道，在開車的時候操作手機是非常危險的。在40km/h的速度下，看手機3秒，相當(dāng)于盲駛了35米。但有些情況下又不得不操作手機，比如緊急來電或者導(dǎo)航出錯……這時，駕駛模式的界面就顯得尤為重要了，讓用戶能夠快速準確的識別信息并進行操作，可以大大提高行車的安全性。
在界面中無論是何種分割方式(分割線、卡片陰影、分割色塊)，過于濃重的表現(xiàn)都會影響有效信息的獲取，成為界面中的「噪音」，因此我們應(yīng)該讓它們細一點、淡一點來降低表現(xiàn)，或者干脆不要(留白分割)。
圖版率就是頁面中圖片面積的所占比。在頁面設(shè)計中，除了文字之外，通常都會加入圖片或是插圖等視覺直觀性的內(nèi)容。這種文字和圖片所占的比率，對于頁面的整體效果和其內(nèi)容的易讀性會產(chǎn)生巨大的影響。當(dāng)然，除圖片本身外，我們也可以通過填充底色，圖形疊底等方式來提高界面中的圖版率。
圖版率高低的區(qū)別：同樣的設(shè)計風(fēng)格下，圖版率高的頁面會給人以熱鬧而活躍的感覺，反之圖版率低的頁面則會傳達出沉穩(wěn)、安靜的效果。提高圖版率可以活躍版面，優(yōu)化版面的視覺度。但完全沒有文字的版面也會顯得空洞，反而會削弱版面的視覺度。
在沒有圖像素材的情況下想要呈現(xiàn)出高圖版率，可以通過以下幾種方式來實現(xiàn)：
通過填充頁面底色，取得與提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出來的視覺效果；
如果素材圖像尺寸小，可以通過色塊的延伸或是圖像的重復(fù)來組織頁面結(jié)構(gòu)，同樣可以提高圖版率；
利用排版的節(jié)奏感以及跳躍率（文字和圖片的跳躍率，是指版面中最大標題和最大的圖與最小正文字體和圖片大小之間的比率）讓無趣的版面充滿活力，富有節(jié)奏的設(shè)計也能間接優(yōu)化頁面的圖版率；
增加頁面中的圖形也可以改善圖版率低的問題。無論是數(shù)字、序號、圖標，甚至是視覺處理后的標題文字，都能提高頁面的視覺度，并給用戶留下活躍生動的印象；
如果頁面中沒有圖片和插圖，那么通過對文字及其顏色的處理，也可以起到提高圖版率的作用；
上面的例子中，對于標題文字都進行了視覺加工，起到了整體頁面的裝飾效果。借助對這種文字大小、顏色、形狀的靈活運用，來突出頁面的重點，避免視覺上的單調(diào)感。
1. 文字在代碼中的實現(xiàn)
在開發(fā)落地的過程中，文字排版的開發(fā)實現(xiàn)是很重要的一個環(huán)節(jié)，也是經(jīng)常讓設(shè)計師和開發(fā)小哥哥頭疼不已的地方。字體和排版在實現(xiàn)上經(jīng)常會出現(xiàn)偏差，主要原因在于開發(fā)的標注方式和設(shè)計軟件不一致。因此理解文字開發(fā)的實現(xiàn)方式，細節(jié)問題的解決方法至關(guān)重要。在Android中，文字開發(fā)工作是通過一個叫TextView控件來實現(xiàn)的，主要承擔(dān)文本顯示的任務(wù)，任何APP都不可避免的會用到它。TextView常用屬性如下圖：
2. 字體字重對應(yīng)的font-weight值
在前文聊過，每種字體都對應(yīng)有好幾種字重（Regular、Normal、Medium、Light ），在給開發(fā)的 UI 設(shè)計稿中，我們給的字體標注通常有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不會直接給開發(fā) font-weight 的值。雖然這需要開發(fā)去熟記，但作為設(shè)計師了解它們的對應(yīng)關(guān)系，可以更順暢的和開發(fā)溝通。
在W3C Fonts節(jié)章的規(guī)范標準中有給具體數(shù)值（100至900）：
這些有序排列中的每個值，對應(yīng)字體的字重。其大致符合下列通用重量名稱：
當(dāng)然，并不是每一種字體都有這么多字重，那遇到有些字體只有2、3種字重，該怎么對應(yīng)font-weight 值呢？W3C Fonts也給出了解決方案，例如字重和400大致符合將會歸為Regular、Book、Roman；和700大致符合將會歸為Bold。若一個重量所指定的字形不存在，則應(yīng)當(dāng)使用相近重量的字形。通常，較重的重量會映射到更重的字形、較輕的重量會映射到更輕的字形。下圖所示：灰色表示該重量的字形不存在、使用的是相近重量的字形。
△ 只包含400、700和900重量字形的字體家族的對應(yīng)字重
△ 只包含300和600重量字形的字體家族的對應(yīng)字重
3. 文本框行高的問題
我們都知道在設(shè)計的時候，可能字體使用的24pt，但其實字體本身占用的距離是包含了升部及降部區(qū)域的，這樣就導(dǎo)致其占用空間大于24pt，而變成了33pt。每個字體都有相應(yīng)設(shè)定的「字高」比例，可以通過sketch選中字體后的height值來進行查看。線高越大，問題就越大。下面的示例顯示文本框之間的距離設(shè)置為32px。如你所見，即使你將所有垂直間距都設(shè)置為相同的值，它們在視覺上也遠大于32px。
△ 雖然標注出來的參數(shù)都是一樣大，但視覺上間距卻是不一樣的
4. Leading-Trim：數(shù)字排版的未來
去年六月，Microsoft Design贊助了一個新的css規(guī)范，稱為「Leading-Trim」。這個css方案能很好的解決上面這個問題。
我們常用的UI設(shè)計工具，例如Figma和Sketch，似乎已經(jīng)采用了「half-leading」模式并以此方式渲染文本。因此，我們在設(shè)計工具和瀏覽器中都遇到了這個問題。
設(shè)計方面的解決方法相對容易：你可以忽略邊界框，而直接根據(jù)文本的大寫高度和基線來測量空間。這是一個手動過程，因為大多數(shù)設(shè)計工具沒有上限高度和基線的參照目標，盡管設(shè)計師將盡一切努力使我們的設(shè)計看起來更好！但是，如果采用這種方法，開發(fā)人員仍將僅在CSS中實現(xiàn)邊界框間距。因此，它們會出現(xiàn)隨機的間距值。
為了緩解此隨機性問題，開發(fā)人員可以在CSS中以負邊距「裁剪」文本框。但是負邊距將需要手動確定，并且是特定于字體的，因此是「隨機的」。任何字體，瀏覽器，操作系統(tǒng)或語言環(huán)境的更改都將不可避免地導(dǎo)致你不小心設(shè)置邊距。此外，該技術(shù)通常不是良好的編碼實踐，并且可能導(dǎo)致意外的副作用。
Leading-Trim新規(guī)范
Leading-trim是CSS工作組正在引入的新CSS屬性。顧名思義，它就像文本框剪刀一樣工作。你只需使用兩行CSS，就可以從你選擇的參考點中修剪掉所有多余的空間。
代碼示例：
上面的示例首先使用text-edge（也是新屬性）來告訴瀏覽器，所需的文本邊緣是大寫高度和字母基線。然后，從兩側(cè)修剪多余部分。請注意，采用修剪僅會影響文本框。它不會切斷其中的文本。這兩行簡單的CSS創(chuàng)建了一個干凈的文本框。這可以幫助你獲得更準確的間距并創(chuàng)建更好的視覺層次。
使用后再來對比一下：
△使用新規(guī)范對比發(fā)現(xiàn)，右圖文字上下間距舒服多了，也更合理。
Leading-Trim修復(fù)對齊問題
借助Leading-Trim，可以解決在APP上看到的所有奇怪的對齊問題。例如，即使文字位于文本框內(nèi)，你的文本也不總是在容器中垂直居中。
默認行高中保留的多余空間會導(dǎo)致文本不總是在文本框中居中。使用Leading-Trim修剪，就可以很省心的使文本垂直居中。
知識點：
原因是每種字體的設(shè)計也不同。它具有自己的默認行高，并且其中的文本可以具有不同的大小和基線位置，并不都是水平居中對齊的。因此，有時即使字體大小，行高和文本框位置保持不變，更改字體也會改變文本的對齊方式，如下例所示，文字很明顯沒有對齊。
在第二個示例中，你可以看到Leading-Trim如何防止這種情況并使文本完美對齊。
一致性和工作流程的改進
Leading-trim修整超出了使間距和對齊更準確的范圍。它在建立的間距系統(tǒng)，為設(shè)計準確性和一致性以及的設(shè)計到開發(fā)交接鋪平道路方面發(fā)揮著關(guān)鍵作用。
擁有間距系統(tǒng)有很多好處。設(shè)計師可以更快地確定間距，開發(fā)人員可以設(shè)置相應(yīng)的間距變量以消除代碼中的隨機間距值。但是目前，即使我們設(shè)置了間距系統(tǒng)，由于文本框中的額外空間，對于文本元素來說也不是很準確。如果我們嘗試忽略設(shè)計中的邊界框并在代碼中「裁剪」文本框，則會遇到那些棘手的解決方法問題。
△應(yīng)用于文本元素且沒有Leading-trim修剪的間距系統(tǒng)
借助領(lǐng)先的文字間隔系統(tǒng)，從設(shè)計到開發(fā)的交接過程也將更加順暢，因為開發(fā)人員將能夠建立完全相同的系統(tǒng)，并且避免在布局錯誤上花費大量時間。最重要的是，領(lǐng)先的微調(diào)間距系統(tǒng)將幫助我們提供用戶信賴和喜歡的外觀更美觀的產(chǎn)品。
5. 設(shè)計中修改文字行高的方法
上面我們介紹了利用Leading-trim修剪字高的先進方法，但是這個新CSS的規(guī)范還在編寫中，還未世界范圍的推進，不過有「微軟」團隊的扶持相信國際化也不會太遠了。
在這之前，我們想要盡可能的解決字符多出的間距問題，就需要在設(shè)計軟件里手動修改了，手動把文字行高與客戶端系統(tǒng)默認行高保持一致，從而給出準確的文字間距。開發(fā)在實現(xiàn)的時候iOS使用系統(tǒng)默認行高，Android系統(tǒng)去掉文字上下padding。
這種方式雖會花費不少時間，但也最，你可以據(jù)此設(shè)置出最美觀合理的間距，而不用擔(dān)心上線稿的還原度問題，也便于我們后期的頁面校對和調(diào)整。
△在Sketch中修改文字高度
6. 什么是彈性適配
文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。這種方式可以做到較好的適配，也是做快速常用的適配方法。
7. 標注工具
設(shè)計師將設(shè)計文件交付開發(fā)之前，應(yīng)站在程序員的角度著想，做好前期溝通，提供他們開發(fā)所需要的資源。設(shè)計文件的標注可以使用Sketch插件或直接上傳「藍湖」，拿Sketch插件「Sketch Measure」為例，它是一款十分智能的標注插件，主要功能包含兩大塊：標注和規(guī)范。
工具欄匯合了Measure所有功能的快捷工具，永遠置于畫布頂層，有了它就不用再頻繁通過菜單欄去使用功能。
做好規(guī)范后，點擊「導(dǎo)出規(guī)范」一鍵自動生成Html頁面，瀏覽器打開頁面點擊其中任何元素都可以查看其屬性和間距，還包括代碼樣式，交給開發(fā)開發(fā)工程師后，不用溝通都能看明白。
△Sketch Measure導(dǎo)出標注的網(wǎng)頁界面
產(chǎn)品功能開發(fā)完成后，對產(chǎn)品對功能，視覺和交互操作進行測試和驗收，確保產(chǎn)品的可用性。一般在功能模塊驗收完成后，就可以開始具體的視覺設(shè)計驗收，這也是由主要設(shè)計師負責(zé)的模塊，主要驗收顏色、字體、圖形、間距、控件和空狀態(tài)等。
因本文主講字體與排版，就拿這部分來說，需要檢視的就有：
字體：是否用的平臺默認字體，如果是內(nèi)置字體檢查字體顯示有沒問題；
字號：導(dǎo)航欄、欄目名稱、分類頁簽、tab等字號大小是否符合規(guī)范；
字重：標題和正文字重是否正確，粗體用的是哪一種，是Medium，還是SemiBold；
字色：標題、正文、注釋、提示等文字顏色；
字間距：檢查中文間距和英文間距，段落文字標點有無避頭尾；
行間距：段落文字行間距，有沒有出現(xiàn)多余的行高 ；
……
在檢視過程中如發(fā)現(xiàn)問題，截圖標示問題所在，并出具檢視報告。
△ 視覺檢視表示例
視覺設(shè)計的驗收要追求細節(jié)上的完美，因為設(shè)計上的細節(jié)是很容易被挑錯的，同時需要耐性和細心，要有像素級的視角，只有這樣才能完美的還原設(shè)計稿。
原本只是想結(jié)合工作積累，寫一篇字體應(yīng)用知識總結(jié)，沒成想給自己挖了一坑，涉及的知識點真是超級多，很多地方都可以單獨拿出來再另寫一篇。另外其實在工作中，也建議大家對自己的經(jīng)驗進行總結(jié)，對關(guān)鍵信息進行提煉加以沉淀，一方面能讓自己的知識更加牢固，另一方面也可以幫助后來者學(xué)習(xí)成長。字體與排版基礎(chǔ)就分享到這里，希望對大家有所幫助。因為篇幅較長，幾經(jīng)修改，有細節(jié)不正確的地方，歡迎留言矯正，感謝閱讀。
參考文獻：
《W3C-CSS字體規(guī)范標準》
《從「行長為字號的整數(shù)倍」說起》
《Leading-Trim: The Future of Digital Typesetting》
《關(guān)于UI設(shè)計中字體應(yīng)用的干貨》
《字體與排版》
《深度剖析Baseline設(shè)計原理》
文章來源：優(yōu)設(shè)網(wǎng)