做設(shè)計(jì)的人多少都經(jīng)歷過這種尷尬時(shí)刻——作品改來改去字也對齊了、配色也換了三版、圖標(biāo)也縮小了但整體看起來還是臟不透亮、不干凈、像蒙了一層灰。這個“臟”不是軟件不熟也不是素材不行而是一個更隱蔽的原因——你太相信自己的直覺了。直覺讓你覺得這個間距“看起來差不多”覺得這個藍(lán)色“挺搭的”覺得標(biāo)題字號“差不多就行”。這是設(shè)計(jì)新手最愛踩的坑也是很多工作幾年的設(shè)計(jì)師做東西不夠精致的主要原因。這篇文章想聊的就是這件事臟感的真正來源以及如何用一套系統(tǒng)化的方法把它徹底清掉。不管你是做平面、做UI還是日常做PPT、寫公眾號配圖這套思路都適用。1. “臟”到底是什么先給問題下個定義想解決“臟”的問題先得說清楚“臟”長什么樣。很多人只感覺作品不對勁卻說不清哪里不對勁因?yàn)椤芭K”是一個綜合感受是多個小問題疊加之后的最終結(jié)果。我平時(shí)帶新人的時(shí)候遇到最多的反饋就是“感覺不夠干凈”但具體到哪個元素出了問題又說不上來。所以我把“臟”拆成三種最典型的表現(xiàn)每一種都能單獨(dú)定位到具體的操作層面。1.1 臟感的三種典型表現(xiàn)第一種是層次混亂。畫面里所有元素都平均用力標(biāo)題、正文、按鈕、配圖彼此之間沒有明顯的主次關(guān)系。人的眼睛找不到第一個落點(diǎn)只能像沒頭蒼蠅一樣在畫面上到處掃。這種視覺疲勞感最容易讓人直觀地覺得“好臟”。比如一張海報(bào)里大標(biāo)題是40號字副標(biāo)題給了38號正文給了32號三者相差無幾讀者就會覺得整張紙都在喊、都在搶注意力。層次一旦拉不開畫面就不可能安靜下來。第二種是間距失控。元素之間的空隙忽大忽小有地方密得透不過氣有地方空得像走丟了。間距不均會讓畫面顯得散亂像是隨手排出來的而不是認(rèn)真設(shè)計(jì)過的。這里最典型的場景就是做卡片排版時(shí)卡片內(nèi)部的間距和外部的間距毫無關(guān)系一個用15像素一個用17像素肉眼看著差不多但整個版面就沒有那種“歸整”的秩序感。第三種是細(xì)節(jié)粗糙。對齊差幾個像素、圓角大小不一、線條粗細(xì)不統(tǒng)一、顏色邊界含糊。這些細(xì)節(jié)單看都不致命但放在一起就形成一種“廉價(jià)感”“粗糙感”。拿一個按鈕舉例文字垂直方向差了2像素眼睛其實(shí)能感覺到重心偏了旁邊另一個按鈕的圖標(biāo)線條是2磅這個卻是3磅兩個按鈕擺在一起就怎么看怎么別扭。1.2 為什么你意識不到自己的作品臟這里有個很關(guān)鍵的心理機(jī)制反復(fù)看自己的作品會有視覺疲勞。當(dāng)你盯著一個畫面超過幾十分鐘你會自動忽略它的缺陷。這其實(shí)不是審美差而是大腦在偷懶——它會把你看到的東西合理化自動補(bǔ)全那些不協(xié)調(diào)的部分。你以為你在憑直覺評判其實(shí)只是憑記憶接受了它。這也是為什么很多設(shè)計(jì)師第一稿挺干凈越改越臟。原因很簡單每一處修改都憑感覺來而這個“感覺”又建立在已經(jīng)疲勞的視覺記憶上結(jié)果就是越調(diào)越亂最后變成一團(tuán)說不清道不明的“混沌”。我自己早期做項(xiàng)目的時(shí)候也干過這種事一張海報(bào)改到第8版的時(shí)候反而比第2版差很多就是因?yàn)橹虚g所有的調(diào)整都靠“覺得不對勁就挪一下”沒有任何客觀的規(guī)則在兜底。2. 直覺的陷阱你以為是審美其實(shí)是經(jīng)驗(yàn)在作弊既然問題出在“太相信直覺”那咱們就認(rèn)真聊聊直覺這個東西。很多人覺得設(shè)計(jì)直覺是天生的、是天賦有就是有沒有就是沒有。我干設(shè)計(jì)這么多年越來越覺得這話不對。直覺確實(shí)存在但它不是憑空來的它的本質(zhì)是經(jīng)驗(yàn)的一種壓縮形式。2.1 直覺的本質(zhì)不是天賦而是經(jīng)驗(yàn)的快照所謂的設(shè)計(jì)直覺其實(shí)就是你過往看過的、做過的所有設(shè)計(jì)在你腦子里的一個模糊印象。它看起來是靈光一現(xiàn)本質(zhì)上是一張“經(jīng)驗(yàn)快照”。這個過程有點(diǎn)像你憑感覺炒菜你吃過很多好吃的宮保雞丁腦子里有那個味道的模糊記憶但你說不清到底放了幾克鹽、幾勺糖、什么時(shí)候下醋。如果那天手感好可能剛好復(fù)現(xiàn)了八成像如果手感不好就成了四不像。設(shè)計(jì)也一樣。你記得某張海報(bào)看起來特別高級但你記不住它的具體字號、間距和色彩數(shù)值。于是當(dāng)你憑直覺去復(fù)現(xiàn)那種“高級感”時(shí)抓到的只是一個模糊的影子——顏色好像對但又差一點(diǎn)留白好像夠但又悶了一點(diǎn)。你就在這個“差一點(diǎn)”的影子里反復(fù)調(diào)整越調(diào)越焦慮最后出來的東西當(dāng)然干凈不了。直覺還有一個更麻煩的問題它會被近期看到的東西污染。比如你最近刷手機(jī)看到很多粗野主義風(fēng)格的海報(bào)你下意識就會覺得“粗一點(diǎn)、重一點(diǎn)也挺好”然后手就不自覺往那個方向帶。這不是你的審美進(jìn)步了只是你的直覺調(diào)取了最近的經(jīng)驗(yàn)樣本。所以完全跟著直覺走你的設(shè)計(jì)風(fēng)格會極其不穩(wěn)定這周一個樣下周又一個樣而且很難沉淀出真正屬于自己的方法論。2.2 直覺設(shè)計(jì)最常見的五個失控點(diǎn)憑直覺做設(shè)計(jì)翻車率最高的位置基本固定在這五個地方我一個個說。第一間距完全憑手感拖。很多初學(xué)者特別不喜歡輸入精確數(shù)值總覺得“拖一下用眼睛看差不多就行了”。結(jié)果就是同一張畫板里有的間距是14像素有的是17像素有的是26像素彼此之間毫無倍數(shù)關(guān)系。視覺上這種無規(guī)律的間距會讓版面出現(xiàn)一種難以名狀的躁動感所有人都會覺得怪但很少有人能直接指出問題在間距上。第二字號沒有穩(wěn)定的節(jié)奏。標(biāo)題、副標(biāo)題、正文、輔助信息之間沒有一套固定的比例關(guān)系全靠“現(xiàn)在的版面看感覺得再大一點(diǎn)”來調(diào)。這樣調(diào)出來的排版很容易出現(xiàn)標(biāo)題和正文之間只差2號的情況整個頁面看不出主次內(nèi)容像被壓縮成一坨。第三顏色數(shù)量失控。今天覺得這個藍(lán)好看明天覺得那個綠不錯全都往畫面上堆。一個界面同時(shí)存在5種高飽和度的顏色每個都在爭當(dāng)主角結(jié)果就是視覺戰(zhàn)爭臟感直接被拉滿。第四只用眼睛對齊不用網(wǎng)格和參考線。2像素的偏差肉眼在盯著看的時(shí)候很難發(fā)現(xiàn)但你在整體瀏覽的時(shí)候視線會莫名地不安。在沒有網(wǎng)格約束的情況下每個元素的位置都是“大概”這種“大概”多了整個版面就變成了歪歪扭扭的集合體。第五裝飾元素過度堆砌?？傆X得畫面空總想加一個飄帶、加一個底紋、加一個小圖標(biāo)結(jié)果畫面越來越復(fù)雜信息密度越來越高用戶找不到重點(diǎn)作品就像一本貼滿貼紙的舊筆記本。記住一個粗糙的比喻臟往往是“過分用力”造成的而不是“用料不夠”造成的。3. 用系統(tǒng)代替直覺四個最有效的“去臟”手段聊完了問題下面給解法。做設(shè)計(jì)想干凈辦法不是“提高審美”而是“建立規(guī)則”。把每一個視覺決策從“憑感覺”變成“按規(guī)則”畫面自然就干凈了。下面這四個系統(tǒng)化的手段是我這些年最常用的也是帶新人時(shí)見效最快的。3.1 間距系統(tǒng)把每個空隙都變成有意識的決策第一個手段做間距系統(tǒng)。最簡單、也最實(shí)用的做法是用4點(diǎn)網(wǎng)格或8點(diǎn)網(wǎng)格作為所有間距的基準(zhǔn)。什么意思就是所有元素之間的間距、內(nèi)邊距、留白、甚至圖標(biāo)的大小都必須是4或者8的整數(shù)倍。具體到你自己的項(xiàng)目可以定義一個稀疏表和密集表。比如小間距4或8像素中間距16像素大間距24或32像素超大間距48或64像素。所有內(nèi)容的間距都從這幾個檔位里選不要出現(xiàn)14、17、26這種沒有繼承感的孤立數(shù)值。為什么這樣能變干凈因?yàn)槿搜蹖?jié)奏非常敏感。和諧的畫面本質(zhì)上是一種重復(fù)的節(jié)奏。每個空隙都落在同一個數(shù)字體系之內(nèi)版面就會自動呈現(xiàn)出一種“呼吸感”和“秩序感”即使受眾完全不懂設(shè)計(jì)也會覺得這個畫面看起來“很順眼”。我建議你把這個間距概念用中文實(shí)戰(zhàn)一遍選三個最近在做的設(shè)計(jì)稿把所有間距標(biāo)注出來凡是偏離4或8倍數(shù)的全部改成最近的整數(shù)倍。多數(shù)情況下改完的一瞬間畫面就會明顯安靜下來這個體驗(yàn)特別神奇。3.2 字體系統(tǒng)層級是排版的呼吸第二個手段字體系統(tǒng)。排版顯得“臟”“亂”很多時(shí)候不是字體選的不好而是字號比例完全沒有邏輯。一個很基礎(chǔ)的字體系統(tǒng)長這樣大標(biāo)題H1用32號二級標(biāo)題H2用24號三級標(biāo)題或小標(biāo)題H3用18號正文用14號或16號輔助信息、標(biāo)注、注釋用12號。行高方面正文行高一般是字號的1.4到1.6倍14號字配20至22號行高很舒服標(biāo)題為了收緊重心行高反而可以壓縮到1.2倍左右。有了這套數(shù)字之后矛盾就少多了。你會很清楚某段文字應(yīng)該選哪個檔位而不是每次都現(xiàn)猜。層級一旦拉開讀者的視線就有了明確的導(dǎo)航路徑先看大標(biāo)題再看小標(biāo)題需要時(shí)再讀正文。這樣的作品不干凈都難。我在實(shí)際項(xiàng)目里還有一個經(jīng)驗(yàn)寧可字號層級跨度大一些也不要模棱兩可。標(biāo)題36號、正文12號這種對比往往比標(biāo)題22號、正文16號的混沌感要好很多。干凈的設(shè)計(jì)通常敢于讓層級差異鮮明因?yàn)槊魑膶Ρ染褪切畔⒅刃虻耐饣?.3 色彩系統(tǒng)臟感最大來源是顏色失控第三個手段也是最見效的一個色彩系統(tǒng)。顏色是最容易毀掉一個作品的地方也是最容易讓人悟到“系統(tǒng)”價(jià)值的地方。我給的屏保級建議一個畫面里的顏色要克制通常不超過3個大面積用色加一組中性灰。具體做法是先確定一個主色、一個輔助色、一個強(qiáng)調(diào)色然后為主色配置色階淺色、深色最后再給文字和背景設(shè)定中性色板。這里有幾個極其容易踩的坑一定要避開第一個坑是直接用純黑當(dāng)文字色。純黑在屏幕上反差太大顯得生硬通常真正的設(shè)計(jì)師會用深灰代替純黑比如#2C2C2C或#333333再搭配一點(diǎn)其他色相傾向比如帶一點(diǎn)點(diǎn)藍(lán)的黑灰色就會顯得更高級。第二個坑是大面積使用高飽和顏色。純正的#FF0000大紅旗、飽和藍(lán)#0000FF鋪滿頁面會制造很強(qiáng)的視覺噪聲。補(bǔ)救辦法是壓低飽和度、調(diào)整明度讓顏色看起來“沉穩(wěn)”一些。比如把主紅色改成#C4543B把主藍(lán)色改成#2B5876觀感立刻不一樣。第三個坑是顏色之間沒有功能定位。主色、輔助色、強(qiáng)調(diào)色沒有各自的分工主色主要覆蓋大面積背景或頭部區(qū)域輔助色配合主色做次級信息強(qiáng)調(diào)色只用于少數(shù)關(guān)鍵操作、鏈接或重點(diǎn)數(shù)字。只要“該紅的紅、該灰的灰、該白的白”畫面的秩序感自然就起來了。你去看很多質(zhì)感很好的B端后臺系統(tǒng)走進(jìn)入眼全是灰色和留白只有幾個關(guān)鍵按鈕用藍(lán)色點(diǎn)綴這就是把顏色當(dāng)資源用、而不是當(dāng)興趣用。3.4 對齊與網(wǎng)格讓每個元素都有位置的理由第四個手段對齊與網(wǎng)格。網(wǎng)格不是限制它其實(shí)是讓你的設(shè)計(jì)“長骨頭”的隱藏系統(tǒng)。沒有骨頭的設(shè)計(jì)就是一堆軟塌塌的肉堆在一起看著自然臟。做平面設(shè)計(jì)的時(shí)候建立網(wǎng)格非常簡單在排版里拉出參考線把版面分成若干列內(nèi)容嚴(yán)格放在列上。做UI設(shè)計(jì)的話更常見的是使用12列或24列柵格系統(tǒng)并配合頁邊距與內(nèi)容寬度的統(tǒng)一設(shè)置。對齊的核心原則是不要用眼睛去測。每一個元素都應(yīng)該有它在版面中存在的位置和理由。要么跟左邊的參考線對齊要么跟右邊的參考線對齊要么跟頂部的參考線對齊。如果存在多個卡片或者多個模塊它們內(nèi)部的邊距應(yīng)該保持統(tǒng)一卡片之間的間距也應(yīng)該遵循同一個網(wǎng)格體系。這個部分做得好一個直觀的檢驗(yàn)方式是你把畫面截圖縮小到一半大小來看如果縮略圖看起來依然整齊、有骨架說明你的對齊和網(wǎng)格過關(guān)了如果縮略圖上就歪歪扭扭、參差不齊那你放大到100%時(shí)看到的臟感就基本來自這里。4. 實(shí)操記錄一個“臟”界面的修正全過程光講理論容易飄我拿一個實(shí)際遇到過的“模擬項(xiàng)目X”功能頁來實(shí)操一遍。這是一個信息展示型頁面用戶要閱讀一段產(chǎn)品介紹、查看幾個數(shù)據(jù)表格、點(diǎn)一個操作按鈕。原始設(shè)計(jì)是某位新同事的練習(xí)稿我拿到后的第一反應(yīng)就是“臟”但具體問題需要一步步拆。4.1 原始設(shè)計(jì)的問題清單先列出最關(guān)鍵的幾個問題你可以對照自己的作品排查頁面內(nèi)間距雜亂無章卡片內(nèi)部邊距是21像素卡片之間的間距卻是26像素板塊上下間距從8像素到39像素都有毫無節(jié)奏。字號幾乎沒對比標(biāo)題用了20號副標(biāo)題18號正文16號三級信息14號整個頁面像個沒有上下級關(guān)系的微信群每個字都在搶著發(fā)言。顏色過多且主次不明背景用了米白色標(biāo)題是深藍(lán)色正文是深灰色按鈕是紅色鏈接是藍(lán)色表格頭部是淺綠色加起來六種色相互相誰也不服誰。裝飾元素過度頁面右上角加了一個若隱若現(xiàn)的淡色圖形做背景裝飾底部還有一個“靜享閱讀”的裝飾印章它們跟信息內(nèi)容沒有任何關(guān)聯(lián)純屬“為了裝飾而裝飾”。對齊靠眼睛卡片內(nèi)的內(nèi)容各自為政有的靠左對齊有的居中有的跟卡片邊緣沒有固定的間距視線掃過去就是歪歪扭扭。4.2 三步修正間距、層級、顏色第一步重新定義間距系統(tǒng)。把整個頁面所有間距統(tǒng)一到以8為基準(zhǔn)的檔位里頁面上下左右的頁邊距固定為32像素卡片內(nèi)部內(nèi)邊距統(tǒng)一為24像素卡片與卡片之間的間距統(tǒng)一為24像素板塊與板塊之間的間距統(tǒng)一為48像素按鈕內(nèi)文字與邊界的內(nèi)邊距統(tǒng)一為垂直12像素、水平24像素。只需要做這一個動作頁面的散亂感就去掉了一大半。第二步重建字體層級。把標(biāo)題從20號改為28號副標(biāo)題從18號改為20號正文固定在16號輔助信息從14號改為13號并通過顏色來進(jìn)一步加強(qiáng)層級標(biāo)題用深色、正文用中等灰色、輔助信息用淺灰色。因?yàn)樽痔枡n位拉大了讀者一眼就能分清“先看什么、后看什么”眼睛不再疲勞。第三步給顏色做減法。把所有六種色相減成三個功能色加一組中性灰。主色確定為深藍(lán)色只用于頂部導(dǎo)航和主要標(biāo)題強(qiáng)調(diào)色為明黃色只用于按鈕和關(guān)鍵數(shù)據(jù)高亮輔助色是淺灰藍(lán)用于表格頭部和分組背景。文字顏色則一律使用中性色階里的深灰、中灰、淺灰。改完這一步整個頁面就不再“吵架”了每種顏色都有它唯一要完成的任務(wù)。4.3 修正前后的對比總結(jié)修正完之后這個頁面的信息更清晰了空間也有了呼吸。如果說修改前是“路邊攤傳單”修改后就是“便利店貨架”看起來東西不少但每一樣都在它該在的位置沒有一絲多余。前后對比最能說明問題的其實(shí)是縮略圖。把修改前后的頁面同時(shí)縮小到30%會明顯發(fā)現(xiàn)修改前的縮略圖灰蒙蒙地?cái)D成一團(tuán)而修改后的縮略圖層次分明、區(qū)域邊界清晰。這種從“結(jié)構(gòu)上變干凈”的效果跟你在某個字體、某個顏色上摳細(xì)節(jié)完全不同。它不是枝節(jié)的優(yōu)化而是骨架的重建。5. 新手自查清單六個問題快速定位臟感來源每次做完設(shè)計(jì)不要急著交稿先過一遍下面的自查清單。這六個問題基本上能幫你快速定位到絕大多數(shù)“臟感”的來源。5.1 自查清單詳解第一個問題所有間距是否落在同一個數(shù)字體系里如果你的間距里有13、17、21這樣的隨機(jī)值別猶豫改成最近的8的倍數(shù)8、16、24、32、48。改完立刻縮到縮略圖看一眼你會感覺到明顯的變化。第二個問題字號之間是否有明確的層級區(qū)隔標(biāo)題、正文、輔助信息之間的字號差是否足夠大如果標(biāo)題和正文只差2號那就是警示信號。試著把標(biāo)題加大兩檔把正文縮小一檔層級感會立刻被拉開。第三個問題畫面里是否有顏色在打架數(shù)一下你的頁面一共有幾種色相。超過三種大面積的彩色通常就是臟感的引爆點(diǎn)。把它們降到三種以內(nèi)并明確各自的用途。記住灰色不臟臟的是亂用的高飽和色。第四個問題所有元素是否嚴(yán)格執(zhí)行了對齊規(guī)則找出至少一條橫貫版面的垂直基準(zhǔn)線讓所有主要內(nèi)容都沿著它對齊。如果有元素孤零零地漂在中間問它一句你為什么在這里答不上來就歸位。第五個問題是否存在用途不明的裝飾元素那些為了填空白而加的陰影、飄帶、花紋、印章全部刪掉試試。你會發(fā)現(xiàn)有時(shí)候畫面空一點(diǎn)不但不臟反而清爽得像剛擦過的玻璃。第六個問題如果縮小到50%畫面依然清晰嗎這是最無情的檢驗(yàn)。很多設(shè)計(jì)在100%尺寸下看著還行縮到50%就開始糊成一團(tuán)。正常的設(shè)計(jì)應(yīng)該在縮小之后依然輪廓分明因?yàn)樗男畔蛹壓晚撁娣指钭銐蚯宄?.2 什么時(shí)候可以放棄規(guī)則相信直覺聊了這么多“不要相信直覺”最后也得說句公道話規(guī)則不是設(shè)計(jì)的全部直覺也不是永遠(yuǎn)不行。當(dāng)你已經(jīng)熟練到把間距、字體層級、色彩克制這些規(guī)則都內(nèi)化成了習(xí)慣你可以適當(dāng)相信直覺。那時(shí)候你的直覺已經(jīng)是經(jīng)過規(guī)則訓(xùn)練過的新版本而不是剛?cè)胄袝r(shí)那個憑感覺亂撞的直覺。我在做一個新項(xiàng)目或者做情緒板探索的時(shí)候反而會刻意先拋開規(guī)則大膽嘗試配色和版式。那是直覺發(fā)揮真正作用的時(shí)候——在探索階段制造驚喜。但是在把驚喜落地成可交付的成品時(shí)我一定會把規(guī)則拿回來仔細(xì)檢查每一個間距、每一個層級、每一處對齊。直覺負(fù)責(zé)打開大門系統(tǒng)負(fù)責(zé)收拾房間。最后分享一個我自己一直在用的小技巧每次改完設(shè)計(jì)把電腦屏幕旋轉(zhuǎn)90度去看它或者鏡像翻轉(zhuǎn)畫面。這個招數(shù)很土但特別有效。因?yàn)殚L時(shí)間盯著同一幅畫面你看的就是你自己的記憶而非實(shí)際內(nèi)容只有強(qiáng)行切換觀察角度才能把你從“視覺疲勞”里拽出來看見作品真正的樣子。干凈的設(shè)計(jì)往往就是這樣一遍一遍被“折騰”出來的。