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