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