1. 先別急著罵自己那種說(shuō)不清的臟到底從哪來(lái)的做了幾年設(shè)計(jì)最怕聽(tīng)到的反饋不是不好看而是有點(diǎn)臟。客戶(hù)說(shuō)不清哪里不對(duì)你也看不出來(lái)哪里有大毛病但整個(gè)畫(huà)面就是透著一股廉價(jià)感、凌亂感像沒(méi)擦干凈的白板。你反復(fù)調(diào)顏色、挪元素、換字體折騰一下午發(fā)過(guò)去對(duì)方還是那句感覺(jué)還是有點(diǎn)亂。我經(jīng)歷過(guò)太多這種時(shí)刻后來(lái)才慢慢想明白一個(gè)扎心的事實(shí)稿子顯臟通常不是因?yàn)槟愕膶徝啦恍卸且驗(yàn)槟愕拿恳徊經(jīng)Q策都太相信那一刻的直覺(jué)了。什么叫相信直覺(jué)就是你覺(jué)得藍(lán)色和灰色搭起來(lái)挺舒服就用了你覺(jué)得標(biāo)題放右邊更好看就拖過(guò)去了你覺(jué)得留白有點(diǎn)多就硬塞了個(gè)裝飾元素填上。這些選擇單拎出來(lái)都說(shuō)得通但堆在一起問(wèn)題就來(lái)了——它們之間沒(méi)有一套可以追查的底層邏輯在約束。這就像做飯。老手炒菜憑手感但他心里其實(shí)有一套穩(wěn)定的框架什么時(shí)候下蔥姜蒜、大火還是小火、什么時(shí)候該收汁。新手也在憑感覺(jué)但這個(gè)感覺(jué)是散的、隨機(jī)的今天咸了明天淡了全看心情。設(shè)計(jì)也一樣直覺(jué)派設(shè)計(jì)師的問(wèn)題不是感覺(jué)錯(cuò)了而是每次的感覺(jué)都來(lái)自不同的地方——所以每張圖都在隨機(jī)組合臟是必然的干凈才是運(yùn)氣。這篇文章不是要教你怎么提升審美那是慢功夫遠(yuǎn)水救不了近渴。我要說(shuō)的是一個(gè)更快、更可操作、更接近底層原理的方向把你腦子里的那些模糊感覺(jué)置換成一整套可以被解釋、被檢查、被復(fù)現(xiàn)的設(shè)計(jì)決策系統(tǒng)。適合誰(shuí)看被臟困擾的新手帶團(tuán)隊(duì)覺(jué)得組員總出低質(zhì)稿的人以及自由職業(yè)者——因?yàn)槟愕目蛻?hù)判斷你的專(zhuān)業(yè)度第一個(gè)標(biāo)準(zhǔn)永遠(yuǎn)是畫(huà)面干不干凈。2. 為什么你覺(jué)得看起來(lái)沒(méi)問(wèn)題別人卻一眼看出臟臟不是一種氛圍而是一種可以被拆解的信號(hào)集合。你不能跟客戶(hù)說(shuō)我覺(jué)得有點(diǎn)臟你得能指出來(lái)是哪里臟、為什么臟、改了之后能干凈多少。要做到這一點(diǎn)先得把臟這個(gè)詞翻譯成可檢查的東西。2.1 視覺(jué)信息的密度畫(huà)面在跟你大聲說(shuō)話想象一個(gè)房間里只有一個(gè)人安靜地站著你的注意力很放松?，F(xiàn)在房間里站滿(mǎn)了人每個(gè)人都張開(kāi)嘴大喊你就很難受。設(shè)計(jì)是一個(gè)道理。當(dāng)一個(gè)畫(huà)面里同時(shí)出現(xiàn)了太多高吸引要素——亮色塊、粗字體、強(qiáng)對(duì)比、動(dòng)畫(huà)效果、高飽和圖片——你的視覺(jué)系統(tǒng)就超載了大腦給出的反饋就是亂和臟。我做過(guò)一個(gè)實(shí)驗(yàn)同一張海報(bào)唯一的區(qū)別是右上角多了一個(gè)漸變的小圓標(biāo)。主觀上看加了圓標(biāo)的版本確實(shí)更豐富但放在縮略圖里整個(gè)畫(huà)面重心瞬間被拉偏。那個(gè)小小的圓標(biāo)成了一個(gè)不該存在的視覺(jué)尖叫。這就是關(guān)鍵臟感的第一大來(lái)源是信息密度超過(guò)了觀看者愿意支付的處理成本。人的視覺(jué)系統(tǒng)是偷懶的它喜歡能被快速理解的東西。一旦畫(huà)面需要多花時(shí)間去解碼大腦就會(huì)給你一個(gè)差評(píng)。而且注意信息密度高不等于細(xì)節(jié)多。細(xì)節(jié)可以被有序組織但密度高意味著彼此之間沒(méi)有主次、沒(méi)有隔斷、互相爭(zhēng)搶。就像一群人說(shuō)話不是每句話都錯(cuò)而是所有人都同時(shí)開(kāi)口了你一句也聽(tīng)不清楚。排版里常見(jiàn)的情況是又想要大標(biāo)題、又想要副標(biāo)題、又想要說(shuō)明文字、又想要裝飾元素全是中權(quán)重最后誰(shuí)也沒(méi)有被看見(jiàn)只剩下一片嗡嗡作響的視覺(jué)噪音。2.2 判斷標(biāo)準(zhǔn)的來(lái)源你在用喜好代替目標(biāo)再說(shuō)一個(gè)更隱蔽的認(rèn)知偏差。當(dāng)你直視自己的設(shè)計(jì)稿問(wèn)好不好看的時(shí)候你其實(shí)在用一個(gè)很模糊的私人維度做判斷。這個(gè)維度受你的心情、你最近看的參考圖、你偏愛(ài)的藝術(shù)風(fēng)格影響可能每一天都在變化。你今天喜歡性冷淡風(fēng)明天看了幾篇教程又開(kāi)始堆玻璃擬態(tài)你的直覺(jué)標(biāo)準(zhǔn)本身就在漂移。但一張?jiān)O(shè)計(jì)稿的目的是確定的它要給誰(shuí)看、傳達(dá)什么、引導(dǎo)什么動(dòng)作。設(shè)計(jì)不是自我表達(dá)而是功能調(diào)度。當(dāng)你用我的喜好好不好看來(lái)指導(dǎo)布局你不是在設(shè)計(jì)你是在選衣服——今天穿這套明天穿那套全看鏡子里的心情。于是畫(huà)面的穩(wěn)定性就沒(méi)了每次改稿都像換了個(gè)設(shè)計(jì)師臟感就是這么被改出來(lái)的。所以我一直跟合作的年輕設(shè)計(jì)師說(shuō)不要把感覺(jué)好不好當(dāng)決策依據(jù)把它是不是完成了任務(wù)當(dāng)依據(jù)。這不是冷冰冰的教條反而是幫你的直覺(jué)松綁——當(dāng)你知道這個(gè)位置的元素是來(lái)干什么的你的直覺(jué)反而會(huì)在正確的軌道上幫你做更細(xì)膩的判斷。2.3 隱性層級(jí)缺失眼睛找不到落腳點(diǎn)還有一種臟是看著不難看就是累。這種作品你逐項(xiàng)看每個(gè)元素都還行但整體就是沒(méi)精神。原因是視覺(jué)層級(jí)失衡——你沒(méi)有一個(gè)明確的第一眼看哪里的規(guī)劃。想象你走進(jìn)一家餐廳菜單上有兩百道菜沒(méi)有招牌、沒(méi)有推薦、沒(méi)有分類(lèi)字還一樣大你怎么點(diǎn)菜你只會(huì)感到焦慮然后關(guān)上菜單。設(shè)計(jì)也是。一個(gè)作品必須給觀看者明確的閱讀順序先看到什么、然后看到什么、最后看到什么。層級(jí)一亂眼睛就四處亂跑來(lái)回跳躍跳躍的過(guò)程就是凌亂感產(chǎn)生的過(guò)程。層級(jí)感缺失的典型表現(xiàn)就是全畫(huà)面使用幾乎相同的字號(hào)、相同字重、相同顏色或者反過(guò)來(lái)把標(biāo)題做得巨大無(wú)比而正文細(xì)如蚊蠅。這兩種都叫沒(méi)有梯度看起來(lái)就是不專(zhuān)業(yè)、不干凈。3. 不靠感覺(jué)靠什么拆解一套可執(zhí)行的設(shè)計(jì)決策框架好如果你認(rèn)同了直覺(jué)不可靠那下一個(gè)問(wèn)題就是用什么替代直覺(jué)我的答案是用一套固定的、可檢查的、可量化的框架來(lái)收束你的每一個(gè)選擇。這套框架不玄學(xué)它由五個(gè)維度組成網(wǎng)格系統(tǒng)、視覺(jué)權(quán)重、色彩秩序、字體紀(jì)律、留白策略。你在做任何設(shè)計(jì)決策的時(shí)候都從這五個(gè)角度推演一遍臟感至少能去掉一半。這五樣不是我的發(fā)明它們是平面設(shè)計(jì)這個(gè)學(xué)科一百年來(lái)沉淀下來(lái)的公共基礎(chǔ)設(shè)施只是很多人沒(méi)有系統(tǒng)學(xué)過(guò)或者學(xué)過(guò)但沒(méi)把它們當(dāng)成決策工具。3.1 網(wǎng)格不是畫(huà)框是你的隱形骨架先看網(wǎng)格。你會(huì)發(fā)現(xiàn)很多臟稿子問(wèn)題不出在元素本身而出在元素之間的位置關(guān)系上——有的左邊有的偏右有的居中有的貼底。每一處挪動(dòng)單看都有理由但放在一起就是七零八落。這種情況幾乎都是因?yàn)闆](méi)有網(wǎng)格或者沒(méi)按網(wǎng)格走。網(wǎng)格的本質(zhì)是什么是給畫(huà)面建立一套坐標(biāo)。所有元素都可以在坐標(biāo)系里找到自己所在的區(qū)域以及跟其他元素的相對(duì)位置關(guān)系。它不是限制自由恰恰相反它是幫你擺脫每次都要糾結(jié)放哪的尷尬——你只需要從網(wǎng)格預(yù)設(shè)的幾個(gè)位置里做選擇而不是從無(wú)限的平面里做選擇決策成本大幅降低。實(shí)操上你不用學(xué)很復(fù)雜的柵格體系先掌握兩件套就夠一是建立至少三到四條的隱形對(duì)齊線讓所有文本和關(guān)鍵圖形都貼在這些線上二是維持一致的邊距節(jié)奏比如頁(yè)面四邊留白統(tǒng)一為一個(gè)基準(zhǔn)值內(nèi)容區(qū)塊之間的間距是這個(gè)基準(zhǔn)值的整數(shù)倍。這么做之后畫(huà)面立刻就有了一種矩陣感元素之間開(kāi)始產(chǎn)生對(duì)話而不是各自為政。很多人有個(gè)誤區(qū)覺(jué)得網(wǎng)格會(huì)讓畫(huà)面死板。這是把秩序和單調(diào)混為一談了。網(wǎng)格管理的是位置不是表現(xiàn)力。你的圖形可以生動(dòng)你的圖片可以自由裁切但承載它們的框架是一致的。就像一座城市的道路系統(tǒng)是規(guī)整的但不妨礙每個(gè)建筑長(zhǎng)得千奇百怪。3.2 視覺(jué)權(quán)重一場(chǎng)有劇本的注意力分配視覺(jué)權(quán)重說(shuō)得直白一點(diǎn)就是你給觀看者分配注意力的順序和比例。一個(gè)畫(huà)面里必須有主角有配角有群演。如果每個(gè)人都想當(dāng)主角這個(gè)畫(huà)面就是菜市場(chǎng)就是臟。我用一個(gè)很實(shí)用的模型來(lái)幫大家理解權(quán)重分層——10-5-3-1法則。如果把畫(huà)面中最需要被看到的元素定為權(quán)重10那第二梯隊(duì)的元素應(yīng)該控制在5左右第三梯隊(duì)是3最低層級(jí)是1。這個(gè)法則不一定是精確的數(shù)字但它強(qiáng)制你去思考不同信息之間的優(yōu)先級(jí)差距是不是被清楚地翻譯成了視覺(jué)差異。舉個(gè)例子。一張活動(dòng)海報(bào)活動(dòng)名稱(chēng)是主角權(quán)重10字號(hào)大、字重粗、顏色最突出時(shí)間和地點(diǎn)是配角權(quán)重5字號(hào)縮小、顏色變灰主辦方信息是背景板權(quán)重3做一個(gè)角落的弱化處理裝飾紋理權(quán)重1只用極淡的顏色輕輕鋪一層。當(dāng)這四個(gè)層級(jí)被清晰地拉開(kāi)畫(huà)面怎么排都是整齊的。反之如果你的活動(dòng)名跟時(shí)間字號(hào)差不了太多顏色也都帶飽和度那這個(gè)畫(huà)面就開(kāi)始亂了。判斷權(quán)重設(shè)得對(duì)不對(duì)有個(gè)簡(jiǎn)單的檢驗(yàn)方法把圖縮到很小瞇起眼睛看。如果第一眼還是能看到主角并且視線有明確的移動(dòng)路徑那權(quán)重就對(duì)了。如果縮略圖里一片灰、一片糊或者主角和配角糾纏在一起那還不趕緊拉開(kāi)差距。3.3 色彩秩序不是用什么色而是每種色用多少顏色是顯臟的重災(zāi)區(qū)。很多設(shè)計(jì)新手喜歡用四五種顏色或者選顏色靠感覺(jué)好看完全不顧色彩的明度、飽和度、冷暖這三維屬性是否協(xié)調(diào)。結(jié)果就是畫(huà)面顏色打架像沒(méi)用濾鏡的手機(jī)原圖。我從自己的實(shí)踐中總結(jié)了一套比較好用的色彩紀(jì)律第一主色不超過(guò)三種輔助色是主色的漸變或明度變化。一套干凈的配色方案通常不是由五個(gè)完全不同的顏色組成的而是由一兩個(gè)核心色相展開(kāi)出來(lái)的色系。就像穿衣服全身主色調(diào)統(tǒng)一最多加一個(gè)點(diǎn)綴色整體就協(xié)調(diào)。設(shè)計(jì)的底層原理跟穿衣一樣。第二大面積用低飽和色高飽和色只做點(diǎn)綴。這個(gè)規(guī)律幾乎適用于所有非純裝飾性的商業(yè)設(shè)計(jì)。高飽和色一多畫(huà)面立刻躁動(dòng)起來(lái)大面積低飽和則給畫(huà)面帶來(lái)靜音感反而襯得高飽和的點(diǎn)綴色更醒目。比如你要做一張促銷(xiāo)海報(bào)現(xiàn)在很多人習(xí)慣把所有賣(mài)點(diǎn)文字都做成紅底白字、黃底黑字滿(mǎn)屏都是警示色結(jié)果就是沒(méi)有任何一個(gè)賣(mài)點(diǎn)被記住。反過(guò)來(lái)用大面積淺灰底、白色卡面只在立即購(gòu)買(mǎi)按鈕上放一個(gè)高飽和的亮色視覺(jué)焦點(diǎn)瞬間就清晰了。第三黑白灰不算顏色它們是你的底色和呼吸空間。這句話是我從一個(gè)老前輩那聽(tīng)來(lái)的說(shuō)得特別明白當(dāng)你覺(jué)得畫(huà)面顏色多的時(shí)候不是去加顏色覆蓋而是增加黑白灰的面積去中和。許多臟其實(shí)是密度問(wèn)題不是顏色問(wèn)題而黑白灰是稀釋密度最好的溶劑。3.4 字體紀(jì)律少即是干凈混排要有理由字體這塊更容易被忽視因?yàn)榇蠖鄶?shù)軟件默認(rèn)字體看著都還行。但恰恰是正在還行的默認(rèn)字體讓很多稿子顯得沒(méi)有設(shè)計(jì)感。字體選擇的混亂是不夠?qū)I(yè)的最直接信號(hào)。我的建議是最多兩種字體原則一個(gè)標(biāo)題字體、一個(gè)正文字體這是底線。如果兩種字體都不想要那就用同一個(gè)字體家族里的不同字重和大小來(lái)區(qū)分層級(jí)——同字族的做法更保守也更不容易出錯(cuò)。你去看很多高質(zhì)量設(shè)計(jì)作品字體種類(lèi)極少但通過(guò)字重、字號(hào)、字間距的反復(fù)變化畫(huà)面依然非常有層次。層次感來(lái)自對(duì)比不來(lái)自數(shù)量跟顏色是一個(gè)道理。另外還要注意字體的氣質(zhì)匹配。比如你做嬰兒用品選一款硬朗的工業(yè)風(fēng)襯線體畫(huà)面再干凈也透著說(shuō)不清的別扭這種別扭也會(huì)被感知為臟。字體的氣質(zhì)是畫(huà)面的隱性情緒把情緒調(diào)成一致畫(huà)面才會(huì)順。還有一個(gè)我見(jiàn)過(guò)大量新手踩坑的細(xì)節(jié)——中文字體的行間距和字間距設(shè)置。中文不像英文天生自帶節(jié)奏中文字塊一大段堆上去如果沒(méi)有調(diào)整行高就像一段密不透風(fēng)的墻視覺(jué)上直接窒息。普通正文的行高建議設(shè)為字號(hào)的1.6到1.8倍標(biāo)題字間距可以適當(dāng)放松營(yíng)造呼吸感。別小看這兩個(gè)參數(shù)它們對(duì)清爽感的貢獻(xiàn)常常大過(guò)你換一個(gè)花哨的背景圖。3.5 留白不是浪費(fèi)是你畫(huà)面的呼吸和信用很多設(shè)計(jì)師一看到空白就想填滿(mǎn)覺(jué)得這么多空著客戶(hù)會(huì)以為我沒(méi)干活。這個(gè)是心態(tài)問(wèn)題不是設(shè)計(jì)問(wèn)題。留白在視覺(jué)語(yǔ)言里有一個(gè)很重要的功能它是在告訴觀看者這里有一個(gè)停頓以及這個(gè)元素很重要所以周?chē)话才艝|西打擾它。這就像演講——大佬說(shuō)完一句關(guān)鍵的話會(huì)停下來(lái)等所有人消化。不是他沒(méi)話說(shuō)了而是他在用沉默強(qiáng)調(diào)內(nèi)容。設(shè)計(jì)里的留白就是這種沉默。你把留白當(dāng)成什么都沒(méi)做的那一版去解釋給客戶(hù)聽(tīng)。真正理解了留白的價(jià)值之后你的畫(huà)面會(huì)立刻松弛下來(lái)不再緊繃著那種局促感和臟感同時(shí)都會(huì)下降。有個(gè)很實(shí)用的留白策略檢查你的畫(huà)面找出所有挨得太近但又沒(méi)關(guān)系的元素之間的距離。留白不是均勻地鋪開(kāi)而是在元素之間建立不同層級(jí)的間隔關(guān)系。兩組內(nèi)容的相對(duì)獨(dú)立用大的間距表達(dá)一組的內(nèi)容內(nèi)部用小的間距表達(dá)。當(dāng)這種間距關(guān)系成立畫(huà)面就有了節(jié)奏。4. 從看著還行到經(jīng)得起檢查一套去臟自查流程實(shí)錄理論講了一堆落到實(shí)操上你要在每次做完設(shè)計(jì)之后用一個(gè)固定的流程來(lái)給自己驗(yàn)尸。這套流程我用了很多年具體到每一步干什么、檢查什么都寫(xiě)下來(lái)你可以直接抄作業(yè)。4.1 第一步縮略圖檢視——畫(huà)面第一眼在說(shuō)什么先把設(shè)計(jì)稿縮放到一個(gè)很小的比例大概占屏幕面積的10%不到然后瞇起眼睛。這時(shí)候你看到的是畫(huà)面的黑白剪影和整體結(jié)構(gòu)。你在這一眼應(yīng)該能立刻判斷出三件事主體是否明確視線是否有一個(gè)明確的中心整體感覺(jué)是均衡還是歪向一邊如果縮略圖里看到一團(tuán)亂麻那你應(yīng)該立刻意識(shí)到問(wèn)題不是細(xì)節(jié)用的功夫不夠而是大結(jié)構(gòu)已經(jīng)失衡了。這時(shí)候不要去摳細(xì)節(jié)先把布局重做一遍。很多設(shè)計(jì)師喜歡放大了一寸一寸地修細(xì)節(jié)但這個(gè)時(shí)間如果是花在一個(gè)結(jié)構(gòu)錯(cuò)誤的稿子上是徹頭徹尾的浪費(fèi)。順手多做一步把稿子轉(zhuǎn)成灰度再看一眼。顏色可能會(huì)騙你但明度不會(huì)。如果灰度模式下畫(huà)面依然有清晰的層次過(guò)渡那這個(gè)稿子的骨架是穩(wěn)的。如果灰度下一片糊或者有些區(qū)域亮度沖出畫(huà)面那你需要重新檢查那些區(qū)域的色彩和明度安排。4.2 第二步強(qiáng)制我問(wèn)三句話——每個(gè)元素是否都有存在理由這三句話是指向信息密度的這個(gè)元素是必須存在的嗎刪掉它內(nèi)容會(huì)缺失或者用戶(hù)會(huì)迷茫嗎 如果必須存在它現(xiàn)在的視覺(jué)權(quán)重符合它在信息層級(jí)里的地位嗎 它跟旁邊的元素是對(duì)話關(guān)系還是各自喊各自的這三問(wèn)特別厲害的地方在于它能逼你把審美決策轉(zhuǎn)換成功能決策。你不需要憑空判斷這個(gè)裝飾元素好不好看你只需要判斷它在這張圖里起到什么作用。回答不了這三問(wèn)的元素十有八九就是后來(lái)造成畫(huà)面臃腫和凌亂的真兇。有一類(lèi)元素最容易通過(guò)這三問(wèn)的淘汰賽——預(yù)設(shè)裝飾。比如有些設(shè)計(jì)師做海報(bào)習(xí)慣性地在四角加一些三角形、圓點(diǎn)、折線覺(jué)得不加點(diǎn)東西太空了。但這些裝飾物跟內(nèi)容毫無(wú)關(guān)系它們就是視覺(jué)垃圾。刪除它們之后畫(huà)面不僅干凈了甚至還能更有聚焦感。我在實(shí)際項(xiàng)目中經(jīng)常遇到刪掉一堆為了裝飾而裝飾的元素后畫(huà)面反而比之前更完整的案例。4.3 第三步距離和空間測(cè)量值——靈感主義者的藏身之處這一步很機(jī)械但非常有效。把設(shè)計(jì)稿打開(kāi)顯示標(biāo)尺然后逐一檢查元素之間的間距頁(yè)面頂部的邊距是多少主標(biāo)題離左邊對(duì)齊線的距離是多少正文區(qū)塊之間的距離是統(tǒng)一還是時(shí)大時(shí)小我在改稿的時(shí)候經(jīng)常抓到這種情況一個(gè)設(shè)計(jì)師花了很多心思設(shè)計(jì)漂亮的卡片和圖標(biāo)但卡片和卡片之間的間距忽大忽小貼著上面的卡片但離下面特別遠(yuǎn)。這種間距不一致就是臟感的核心源頭之一而且如果沒(méi)有人主動(dòng)提出來(lái)連設(shè)計(jì)師自己都不會(huì)發(fā)現(xiàn)。所以建立一套基于倍率的間距系統(tǒng)非常值得。比如你規(guī)定基礎(chǔ)間距為8像素那么所有間距必須是8、16、24、32、40這些數(shù)值。這樣做的好處是什么首先決策成本瞬間降低你不需要每一次都糾結(jié)再遠(yuǎn)一點(diǎn)還是再近一點(diǎn)其次畫(huà)面會(huì)自發(fā)產(chǎn)生一種數(shù)學(xué)般的整齊感間距之間的比例關(guān)系會(huì)被潛意識(shí)感知為協(xié)調(diào)。這套間距系統(tǒng)的邊界其實(shí)很寬8像素不夠就用16當(dāng)基數(shù)做中英文混排較大的版面甚至可以用24或32當(dāng)基數(shù)關(guān)鍵是一致。4.4 第四步顏色分配的審計(jì)——誰(shuí)占的面積最多打開(kāi)你的設(shè)計(jì)稿分析一下每種顏色占畫(huà)面的面積和比例。然后問(wèn)自己一個(gè)問(wèn)題畫(huà)面里面積最大的那個(gè)顏色是你希望被感知為主體情緒的那個(gè)顏色嗎很多稿子顯臟就是因?yàn)榇竺娣e色塊的權(quán)重跟視覺(jué)焦點(diǎn)的權(quán)重是矛盾的。比如你想突出干凈、科技感結(jié)果大面積用了高飽和紫紅色而你想要突出的文字卻是黑色。畫(huà)面被大色塊的紫色搶走了全部注意力你的主體文字反而淪為配角。這種色彩面積和信息優(yōu)先級(jí)的錯(cuò)配是特別多的設(shè)計(jì)會(huì)讓用戶(hù)感到說(shuō)不出的亂的原因。我的建議是畫(huà)一個(gè)簡(jiǎn)單的餅圖——不用軟件畫(huà)在紙上或者腦子里大概算一下。把顏色按占用面積排個(gè)序正常情況下應(yīng)該呈現(xiàn)一個(gè)主導(dǎo)色 兩個(gè)輔助色 若干點(diǎn)綴色的遞減結(jié)構(gòu)。如果出現(xiàn)兩個(gè)顏色面積差不多大或者點(diǎn)綴色面積反超輔助色了那你一定要?jiǎng)邮终{(diào)整。這個(gè)結(jié)構(gòu)一旦失衡無(wú)論你的形狀、排版多精妙畫(huà)面的秩序感都會(huì)崩掉。4.5 第五步把時(shí)間隔開(kāi)再看——直覺(jué)警察最怕的就是冷卻期最后一步最有意思也最反直覺(jué)做完初稿之后別急著發(fā)放幾個(gè)小時(shí)或者放一晚上第二天再打開(kāi)看。你做稿子的時(shí)候?qū)徝酪呀?jīng)疲勞了你的眼睛和大腦被同一幅畫(huà)面轟炸了一下午已經(jīng)無(wú)法客觀了。這時(shí)候你滿(mǎn)腦子都是這個(gè)土地的顏色換成紅色會(huì)不會(huì)更配這張照片這種細(xì)節(jié)你根本失去了對(duì)整體的判斷能力。當(dāng)你隔一段時(shí)間再打開(kāi)就像換了一個(gè)人來(lái)看你會(huì)瞬間發(fā)現(xiàn)哦原來(lái)標(biāo)題太大、原來(lái)那個(gè)藍(lán)色跟整體完全不搭、原來(lái)左下角那塊完全沒(méi)人看。這個(gè)方法在心理學(xué)上很好解釋你的記憶對(duì)畫(huà)面有自己的重建再看時(shí)會(huì)跟你記憶中的干凈版本對(duì)比。任何偏差都會(huì)變得極其刺眼。所以它比任何同事評(píng)審都更能一針見(jiàn)血地找出問(wèn)題。我個(gè)人的冷卻時(shí)間習(xí)慣是不超過(guò)24小時(shí)。太短了你的腦子還沒(méi)放下那份稿子太長(zhǎng)了你又容易反反復(fù)復(fù)改到僵。一天恰好改完一版再放一天一般兩次冷卻初稿的臟感就被收拾得七七八八了。5. 我在真實(shí)項(xiàng)目里聽(tīng)到的最常見(jiàn)的三個(gè)追問(wèn)這些年在帶新人、跟同行交流的過(guò)程中關(guān)于顯臟這個(gè)問(wèn)題有幾個(gè)高頻追問(wèn)。我把它們單獨(dú)拎出來(lái)給出我的切實(shí)回應(yīng)希望對(duì)你們也有用。5.1 客戶(hù)就喜歡花里胡哨怎么辦很多人說(shuō)我知道要留白要克制但客戶(hù)就是要大而全、要滿(mǎn)、要五彩斑斕的黑。我理解這個(gè)處境但我不完全認(rèn)同這個(gè)妥協(xié)論?？蛻?hù)要的不是花里胡哨客戶(hù)要的是穩(wěn)定感、信息量、安全感。他只是用了錯(cuò)誤的詞語(yǔ)表達(dá)他的需求。這時(shí)候你作為設(shè)計(jì)師的進(jìn)階動(dòng)作不是把客戶(hù)的要求照單全收而是把你學(xué)到的框架翻譯成客戶(hù)能聽(tīng)懂的語(yǔ)言。比如客戶(hù)說(shuō)畫(huà)面太空你不該直接加元素而應(yīng)該告訴他我們把這塊信息做成一個(gè)信息卡片既豐富了視覺(jué)又不破壞版式結(jié)構(gòu)。再比如客戶(hù)說(shuō)顏色太少你不該加全新顏色而應(yīng)該說(shuō)我把主色的明度層次再拉開(kāi)一些從深到淺做一套漸變視覺(jué)上色彩會(huì)更豐富。你看需求被翻譯了專(zhuān)業(yè)度也被守住了。時(shí)間久了你會(huì)發(fā)現(xiàn)客戶(hù)其實(shí)不是討厭簡(jiǎn)潔他討厭的是簡(jiǎn)單得像沒(méi)做過(guò)。設(shè)計(jì)師的功力就是用復(fù)雜的思考去支撐一個(gè)看起來(lái)簡(jiǎn)潔但信息量依然充分的方案。如果你被客戶(hù)一逼就亂加?xùn)|西那你只是在用堆料掩飾自己的失控那不是專(zhuān)業(yè)。5.2 別人也用這套框架為什么風(fēng)格差異還很大這恰恰是我要強(qiáng)調(diào)的框架的目的是保證穩(wěn)定性不是消滅個(gè)性。就像所有寫(xiě)作者都遵循語(yǔ)法但他們寫(xiě)出來(lái)的文字可以截然不同。網(wǎng)格、權(quán)重、色彩、字體、留白這些是你跟混亂戰(zhàn)斗的武器不是你的風(fēng)格鐐銬。每一套框架留出來(lái)的彈性空間其實(shí)都巨大——你可以用A色系營(yíng)造復(fù)古的調(diào)性也可以用B色系構(gòu)筑冷峻的未來(lái)感你可以把留白做到極致簡(jiǎn)約也可以在留白基礎(chǔ)上鋪陳密集的插畫(huà)紋理?？蚣芗s束的是關(guān)系不約束表情。這就是為什么同樣的干凈有的作品干凈得像一線大牌有的干凈得像極客工具各有各的味道。5.3 那直覺(jué)到底還有沒(méi)有用有用但它的角色需要被重新定義。我的理解里直覺(jué)不是你的第一決定而是你的最終裁決。當(dāng)你掌握了一套框架有了扎實(shí)的基本功和大量的審稿經(jīng)驗(yàn)之后你的直覺(jué)會(huì)變成一個(gè)極其敏銳的探測(cè)器——你一看就覺(jué)得哪里不對(duì)勁然后你用框架去定位那個(gè)不對(duì)勁找到原因快速修復(fù)。新手跟老手的區(qū)別就在這個(gè)位置上。新手覺(jué)得不對(duì)但不知道為什么老手覺(jué)得不對(duì)之后立刻能定位到具體是哪個(gè)間距、哪個(gè)顏色、哪個(gè)層級(jí)出了問(wèn)題。所以不是不要直覺(jué)而是讓直覺(jué)從決策者降級(jí)為預(yù)警器讓框架從輔助升級(jí)為決策者。這一步重排才是從偶然干凈到持續(xù)干凈的分水嶺。6. 從去掉臟感到建立手感給不同階段讀者的動(dòng)手建議最后這一部分我把適用范圍再切細(xì)一點(diǎn)你是剛?cè)胄械男率诌€是已經(jīng)做了一段時(shí)間但總被說(shuō)不干凈的老手你們的訓(xùn)練路徑不太一樣。如果是新手建議你使勁練網(wǎng)格權(quán)重這兩塊。別想著一口氣學(xué)會(huì)所有高級(jí)技巧先把布局的骨架打穩(wěn)。你找三張你們行業(yè)里的優(yōu)秀作品用網(wǎng)格去拆解它畫(huà)出其中的分欄、對(duì)齊線、間距比例你會(huì)發(fā)現(xiàn)那些大師作品幾乎都嚴(yán)格遵循著某個(gè)簡(jiǎn)單而穩(wěn)定的骨架結(jié)構(gòu)。挨個(gè)拆解拆完自己照著重做一遍。這個(gè)過(guò)程的重點(diǎn)是照著重做而不是自由發(fā)揮——先學(xué)會(huì)忠實(shí)復(fù)刻秩序再談自我表達(dá)。如果是做了一兩年但總覺(jué)得作品差口氣的老手我建議你把重心放在色彩面積和冷卻期上。你的結(jié)構(gòu)大概率沒(méi)問(wèn)題但容易在配色和細(xì)節(jié)修改上走火入魔。這時(shí)候多停頓一下多回頭看一下多把稿子縮成縮略圖看一遍。具體的做法是選一個(gè)你自己剛做完、覺(jué)得還不錯(cuò)但總有點(diǎn)不滿(mǎn)意或客戶(hù)反饋有點(diǎn)說(shuō)不清的作品按照上面五個(gè)維度逐個(gè)檢查把不合格的篩選出來(lái)改完再冷卻一天你會(huì)明顯感覺(jué)到那口氣被順平了。有一條我做設(shè)計(jì)以來(lái)的核心經(jīng)驗(yàn)想專(zhuān)門(mén)拿出來(lái)強(qiáng)調(diào)干凈不是一種風(fēng)格偏好而是一種專(zhuān)業(yè)底線。很多設(shè)計(jì)師把極簡(jiǎn)當(dāng)成風(fēng)格把雜亂也當(dāng)成風(fēng)格覺(jué)得反正都是審美問(wèn)題。但這種想法漏了一個(gè)關(guān)鍵事實(shí)雜亂讓你無(wú)法閱讀信息而設(shè)計(jì)的本質(zhì)是傳遞信息。當(dāng)一個(gè)畫(huà)面?zhèn)鬟f信息受阻的時(shí)候它已經(jīng)不是風(fēng)格丑的問(wèn)題了而是功能性失效的問(wèn)題。所以去掉臟感不只是在做美工是在給內(nèi)容注入可讀性和可信度。最后再給設(shè)計(jì)師群體一個(gè)額外建議把去臟的自我檢查流程做成一個(gè)模板。我現(xiàn)在每做一個(gè)項(xiàng)目都有一份自己的checklist包含上面提到的縮略圖檢視、三問(wèn)、間距復(fù)核、顏色面積統(tǒng)計(jì)、冷卻期巡查每次提交稿件之前照著走一遍。這不是流程化刻板而是你把專(zhuān)業(yè)判斷力變成了一支穩(wěn)定輸出的部隊(duì)。做設(shè)計(jì)這行真正拉開(kāi)差距的從來(lái)不是某一次的靈光乍現(xiàn)而是你能否穩(wěn)定地交付不臟的稿子。穩(wěn)定是設(shè)計(jì)師最容易被低估、但最值錢(qián)的能力。而通往穩(wěn)定的路恰恰要從你不再那么相信自己的直覺(jué)開(kāi)始。