@FY印跡授權(quán)MICU設(shè)計發(fā)布
米醋今天推薦一篇好文「設(shè)計師必看的字體與排版指南」，希望能幫到更多的UI設(shè)計師~
干貨提前收藏！公眾號改版后推送不會按順序展示。把咱們設(shè)為星標，每一期干貨經(jīng)驗與方法，都會被微信置頂！
↓ 點擊下方，即可關(guān)注星標 ↓超30000+大廠設(shè)計師已??星標
昨天MICU給大家推薦的一篇好文關(guān)于圖標設(shè)計分不出好壞的那些細節(jié)問題。今天我們再來學(xué)習(xí)一下關(guān)于排版的CRAP原則、信噪比及在設(shè)計中的作用、圖版率的高低對設(shè)計的等問題的進行深度的思考，希望我的這篇梳理可以給大家?guī)韼椭?/p>
排版的CRAP原則
在任何一個設(shè)計中都需要把各個元素進行分級，分清主次，這樣才能更好地抓住重點。為了能分清各元素的主次圖像處理及制版中 黑版的分類，就需要用到CRAP原則。這四個原則分別是對比、重復(fù)、對齊、親密性。
1 對比 （增強效果、組織信息）
對比的基本作用是突出重點，增加可讀性。附加作用是有效增強視覺效果，打破平淡，吸引讀者注意。
一些界面排版混亂，可讀性非常差，用戶的視線不知道集中在哪，導(dǎo)致這種情況的發(fā)生都是因為界面內(nèi)容對比不明顯造成。在同一個視覺區(qū)域內(nèi)的邏輯不同的元素應(yīng)該有所區(qū)別，以避免視覺上的相似，這樣就可以有效的分清主次，為了使主要元素更突出，次要元素更弱化，可以盡量使它們的顏色，字體、大小，留白不同。如果兩個元素不盡相同，那就讓他們截然不同。比如，使用「14 號字」和「15 號字」進行對比，差異就很不明顯，而使用「14號字」和「24 號字」，差異就明顯得多，一眼就能看到大號的字體。
在這點上，“微信讀書”的列表頁就做得非常好，它通過標題與描述的字體粗細、大小、顏色進行對比，把最有用的信息直觀地呈現(xiàn)在用戶面前標題是吸引用戶關(guān)注的關(guān)鍵，作者和評分只是給用戶一種參考，不起決定性作用。因此，如果沒有對比原則，標題和描述的字體同樣粗細、大小，你就會發(fā)現(xiàn)視線總是會情不自禁的被評分所干擾。
1.1 大小對比
為了區(qū)分文字、圖片、圖標等元素的重要性，通常采用尺寸的大小來做對比。例如文章的正副標題，副標題一般用來解釋主標題的內(nèi)容，因此副標題的文字應(yīng)該通過大小和顏色調(diào)整變成次級，讓用戶閱讀時分清主次。
1.2 顏色對比
在排版中，首先要產(chǎn)生對比效果的就是背景和文字。文字與背景如果在顏色上很接近，那么就不容易區(qū)分開來吸引用戶注意力，一般來說，人們習(xí)慣白紙黑字（也是因為人類有書寫需求以來形成的），即白色背景和黑色文字。也有黑紙白字，例如現(xiàn)在APP都在做的暗色模式，但其實暗色背景搭配淺色文字并不適合大量閱讀。當(dāng)然這也是為了配合用戶使用場景，在夜晚光線較暗的環(huán)境下，深色模式或許更利于閱讀。「冷知識：暗色模式其實就是廠商為了解決電池耗電量而出的計策，只是換了個噱頭而已」總之，不管設(shè)計中使用黑白、紅綠、藍黃哪一種配色，一定要注意文字和背景的對比是否清晰便于閱讀。
2 重復(fù) （統(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 對齊 （統(tǒng)一而有條理） 在頁面設(shè)計上每一元素都應(yīng)該與頁面上的另一個元素存在某種視覺聯(lián)系，這樣才能建立清晰的結(jié)構(gòu)。任何元素內(nèi)容在在版面上都應(yīng)該盡量上下左右對齊，對于設(shè)計新人來說，最好嚴格遵循一種對齊方式，不然就會導(dǎo)致混亂，實在不行，至少保證在同一內(nèi)容版塊中遵循一種對齊方式。方法也很簡單，就是找到一條明確的對齊線，并用它來對齊。
對齊包括左對齊、居中對齊、右對齊 3 種方式。左對齊：頁面中的元素以左基線對齊。左對齊是最常見的對齊方式，簡潔大方，利于閱讀；居中對齊：頁面中的元素以中基線對齊。居中對齊給人一種嚴肅與正式感，不過也會有呆板的感覺；右對齊：頁面中的元素以右基線對齊。相對少見的對齊方式，給人一種人為干預(yù)的感覺，加強了形式感，降低了閱讀效率；
4 親密性 （實現(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ū)分信息；
信噪比及在設(shè)計中的作用
“信噪比”（-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è)計的影響
圖版率就是頁面中圖片面積的所占比。在頁面設(shè)計中，除了文字之外，通常都會加入圖片或是插圖等視覺直觀性的內(nèi)容。這種文字和圖片所占的比率，對于頁面的整體效果和其內(nèi)容的易讀性會產(chǎn)生巨大的影響。當(dāng)然，除圖片本身外，我們也可以通過填充底色，圖形疊底等方式來提高界面中的圖版率。
圖版率高低的區(qū)別：同樣的設(shè)計風(fēng)格下，圖版率高的頁面會給人以熱鬧而活躍的感覺，反之圖版率低的頁面則會傳達出沉穩(wěn)、安靜的效果。提高圖版率可以活躍版面，優(yōu)化版面的視覺度。但完全沒有文字的版面也會顯得空洞，反而會削弱版面的視覺度。
在沒有圖像素材的情況下想要呈現(xiàn)出高圖版率，可以通過以下幾種方式來實現(xiàn)：1、通過填充頁面底色，取得與提高圖版率相似的效果，從而改變頁面所呈現(xiàn)出來的視覺效果；2、如果素材圖像尺寸小，可以通過色塊的延伸或是圖像的重復(fù)來組織頁面結(jié)構(gòu)，同樣可以提高圖版率；3、利用排版的節(jié)奏感以及跳躍率（文字和圖片的跳躍率，是指版面中最大標題和最大的圖與最小正文字體和圖片大小之間的比率）讓無趣的版面充滿活力，富有節(jié)奏的設(shè)計也能間接優(yōu)化頁面的圖版率；4、增加頁面中的圖形也可以改善圖版率低的問題。無論是數(shù)字、序號、圖標，甚至是視覺處理后的標題文字，都能提高頁面的視覺度，并給用戶留下活躍生動的印象；5、如果頁面中沒有圖片和插圖，那么通過對文字及其顏色的處理，也可以起到提高圖版率的作用；
上面的例子中，對于標題文字都進行了視覺加工，起到了整體頁面的裝飾效果。借助對這種文字大小、顏色、形狀的靈活運用，來突出頁面的重點，避免視覺上的單調(diào)感。
寫在最后原本只是想結(jié)合工作積累，寫一篇字體應(yīng)用知識總結(jié)，沒成想給自己挖了一坑，涉及的知識點真是超級多，很多地方都可以單獨拿出來再另寫一篇。另外其實在工作中，也建議大家對自己的經(jīng)驗進行總結(jié)，對關(guān)鍵信息進行提煉加以沉淀，一方面能讓自己的知識更加牢固，另一方面也可以幫助后來者學(xué)習(xí)成長。字體與排版基礎(chǔ)就分享到這里，希望對大家有所幫助。因為篇幅較長，幾經(jīng)修改，有細節(jié)不正確的地方，歡迎斧正，感謝閱讀。
彩蛋福利：贈送大家“高級作品包裝素材”感興趣的小伙伴可以都拿去！
領(lǐng)取方式如下：
1.文章底部點個在看
2.添加小編微信，備注作品包裝，小編會將下載地址發(fā)給你。
已有小編微信的，無需重復(fù)添加
提前加好友，領(lǐng)福利更快捷
今日推薦：微軟的新短片
#進設(shè)計學(xué)習(xí)群#轉(zhuǎn)發(fā)文章到朋友圈，加微信【】即可加入。群純粹是為了幫助讀者朋友們鏈接合適的招聘方，無廣告、不付費。有新的招聘信息會第一時間同步到群里，同時會不定期分享求職相關(guān)的資料，也有大廠的朋友在里面幫助大家內(nèi)推。