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

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

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

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

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

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

明暗

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

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

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

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

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

視覺焦點(diǎn)

視覺焦點(diǎn)究其概念，是讓我們的視線多停留幾秒的視覺元素，我們?cè)诋嬅嬷械谝谎劬湍芸吹降脑?，畫面中的「主角」?

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

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

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

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

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

色彩

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

色彩插件檢查配色

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(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ù)。