如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

為什么你的設(shè)計(jì)看起來(lái)很亂？在此之前我們先了解一個(gè)概念，我們?cè)鯓涌催@個(gè)世界？

我們通過(guò)眼睛看世界，眼（又稱眼睛，目）是一個(gè)可以感知光線的器官。那么結(jié)論來(lái)了，我們看到這個(gè)世界，其實(shí)本質(zhì)就是看到了光。舉個(gè)例子，晴空萬(wàn)里時(shí)我們可以看到很遠(yuǎn)很遠(yuǎn)的距離，反之在漆黑的屋子里，我們什么都看不見。

我們?cè)賮?lái)了解第二個(gè)問(wèn)題，眼睛是怎樣成像的？眼睛通過(guò)調(diào)節(jié)晶狀體的彎曲程度（屈光）來(lái)改變晶狀體焦距獲得倒立的、縮小的實(shí)像。簡(jiǎn)單來(lái)說(shuō)，成像原理就是晶狀體來(lái)改變焦距，簡(jiǎn)單一點(diǎn)解釋決定成像的重要因素是焦距。

你的設(shè)計(jì)看起來(lái)很亂，往往在這幾個(gè)方面出了問(wèn)題：

• 明暗關(guān)系紊亂；
• 視覺(jué)焦點(diǎn)不明確，畫面沒(méi)有重點(diǎn)；
• 顏色雜亂，毫無(wú)章法。

明暗

明暗是指畫中物體受光、背光和反光部分的明暗度變化以及對(duì)這種變化的表現(xiàn)方法。明暗分亮面，灰面，暗面，以及明暗交界線，反光五大調(diào)子。單個(gè)物體明暗關(guān)系，暗部（反光，投影）＞灰面＞亮面。整體關(guān)系，靠近光源暗部＞遠(yuǎn)離光源……畫畫核心畫的是光，遵循光照的自然規(guī)律即可。

去色檢查畫面明暗關(guān)系

從上至下三張圖依次是去色之后的黑白圖；運(yùn)用色相和飽和度給畫面賦予一個(gè)顏色的單色圖；原圖。

從下圖可以粗略得出結(jié)論，明暗（光源色）+固有色=色彩。調(diào)色之前先處理明暗，畫面顏色處理起來(lái)就非常簡(jiǎn)單了。

最近火爆的國(guó)產(chǎn)硬核科幻片海報(bào)，即使去掉顏色，黑白關(guān)系依舊明確清楚。好的設(shè)計(jì)即使沒(méi)有任何顏色，依舊是一副好的素描畫。我所理解的明暗關(guān)系與色彩的關(guān)系相當(dāng)于人體與衣服妝容的關(guān)系，對(duì)于一個(gè)美女是否漂亮，衣服妝容的搭配是你能達(dá)到漂亮的上限，然而你的臉型，身高，氣質(zhì)，皮膚才是你能達(dá)到的驚為天人的基礎(chǔ)。

視覺(jué)焦點(diǎn)

視覺(jué)焦點(diǎn)究其概念，是讓我們的視線多停留幾秒的視覺(jué)元素，我們?cè)诋嬅嬷械谝谎劬湍芸吹降脑兀嬅嬷械摹钢鹘恰埂?

對(duì)畫面的視覺(jué)漏斗進(jìn)行分類：

• 視覺(jué)焦點(diǎn)：想看不見都很難，表現(xiàn)突出；
• 重要元素：不經(jīng)意就能看見；
• 輔助元素：仔細(xì)看看也能看見（類似買理財(cái)產(chǎn)品的最右下角的小標(biāo)注，「投資有風(fēng)險(xiǎn)，理財(cái)需謹(jǐn)慎」）

高斯模糊法看視覺(jué)焦點(diǎn)

瞇著眼睛看形，睜著眼睛看細(xì)節(jié)。把畫面模糊調(diào)到一定程度，然后看畫面，如果畫面仍然能看清楚「主角」，那么畫面的視覺(jué)中心就是可以的。下圖畫面即使模糊了，我們依然能看清「男主角」沈騰以及飛馳人生四個(gè)大字，雖然原圖背景復(fù)雜以及其他裝飾物很多，依然不影響畫面的整體協(xié)調(diào)感，元素多且雜而不亂。

這上面的兩個(gè)例子看出，即使畫面模糊了，還是能清晰看到畫面表達(dá)的主題。那么模糊度多少合適呢，一般調(diào)整到上面所說(shuō)的視覺(jué)漏斗中重要元素看起來(lái)剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產(chǎn)品漫反射的顏色，可以粗略按色彩元素分為光源色，固有色和漫反射產(chǎn)生的環(huán)境色。按照長(zhǎng)期的實(shí)踐經(jīng)驗(yàn)來(lái)看，通常比較和諧的配色方式是除了產(chǎn)品的固有色之外，盡量把光源色和環(huán)境色統(tǒng)一在三種顏色（黑白灰不算顏色）之內(nèi)，顏色比例盡量類光源色的主色調(diào)占據(jù)畫面百分之八十的面積，其他環(huán)境色作為補(bǔ)充。

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫面顏色的狀態(tài)以及畫面中幾種主要的顏色，借助這個(gè)插件能很輕松檢查畫面是否超過(guò)了3種顏色（黑白灰不算顏色），如果超過(guò)三種顏色，那么頁(yè)面就需要做減法，或者將顏色統(tǒng)一在一個(gè)色系里，用明度以及飽和度區(qū)分。

插件的使用方法：可以直接使用瀏覽器下載，然后也可以在瀏覽器中選擇一張圖片，右鍵「在新標(biāo)簽中打開圖片」，然后再「點(diǎn)擊右上角的插件按鈕」分析顏色狀態(tài)。

從上面的兩個(gè)案例中可以看出，兩個(gè) banner 的顏色分析基本都在三種顏色以內(nèi)，特別是下面的看起來(lái)比較復(fù)雜的顏色，總共分析的顏色也就紅黃藍(lán)，其中藍(lán)色還是點(diǎn)綴色的存在。

今天的內(nèi)容就說(shuō)到這里了，我們回顧一下重點(diǎn)內(nèi)容，解決畫面看起來(lái)很亂可以有以下方法：

• 去色檢查畫面明暗關(guān)系
• 高斯模糊法看視覺(jué)焦點(diǎn)
• 色彩插件檢查配色

設(shè)計(jì)雖沒(méi)有近路，但可以少走彎路。

藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。