2019-2-25 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
為什么你的設(shè)計(jì)看起來(lái)很亂？在此之前我們先了解一個(gè)概念，我們?cè)鯓涌催@個(gè)世界？
我們通過(guò)眼睛看世界，眼（又稱(chēng)眼睛，目）是一個(gè)可以感知光線的器官。那么結(jié)論來(lái)了，我們看到這個(gè)世界，其實(shí)本質(zhì)就是看到了光。舉個(gè)例子，晴空萬(wàn)里時(shí)我們可以看到很遠(yuǎn)很遠(yuǎn)的距離，反之在漆黑的屋子里，我們什么都看不見(jià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)題：
明暗是指畫(huà)中物體受光、背光和反光部分的明暗度變化以及對(duì)這種變化的表現(xiàn)方法。明暗分亮面，灰面，暗面，以及明暗交界線，反光五大調(diào)子。單個(gè)物體明暗關(guān)系，暗部（反光，投影）＞灰面＞亮面。整體關(guān)系，靠近光源暗部＞遠(yuǎn)離光源……畫(huà)畫(huà)核心畫(huà)的是光，遵循光照的自然規(guī)律即可。
去色檢查畫(huà)面明暗關(guān)系
從上至下三張圖依次是去色之后的黑白圖；運(yùn)用色相和飽和度給畫(huà)面賦予一個(gè)顏色的單色圖；原圖。
從下圖可以粗略得出結(jié)論，明暗（光源色）+固有色=色彩。調(diào)色之前先處理明暗，畫(huà)面顏色處理起來(lái)就非常簡(jiǎn)單了。
最近火爆的國(guó)產(chǎn)硬核科幻片海報(bào)，即使去掉顏色，黑白關(guān)系依舊明確清楚。好的設(shè)計(jì)即使沒(méi)有任何顏色，依舊是一副好的素描畫(huà)。我所理解的明暗關(guān)系與色彩的關(guān)系相當(dāng)于人體與衣服妝容的關(guān)系，對(duì)于一個(gè)美女是否漂亮，衣服妝容的搭配是你能達(dá)到漂亮的上限，然而你的臉型，身高，氣質(zhì)，皮膚才是你能達(dá)到的驚為天人的基礎(chǔ)。
視覺(jué)焦點(diǎn)究其概念，是讓我們的視線多停留幾秒的視覺(jué)元素，我們?cè)诋?huà)面中第一眼就能看到的元素，畫(huà)面中的「主角」。
對(duì)畫(huà)面的視覺(jué)漏斗進(jìn)行分類(lèi)：
高斯模糊法看視覺(jué)焦點(diǎn)
瞇著眼睛看形，睜著眼睛看細(xì)節(jié)。把畫(huà)面模糊調(diào)到一定程度，然后看畫(huà)面，如果畫(huà)面仍然能看清楚「主角」，那么畫(huà)面的視覺(jué)中心就是可以的。下圖畫(huà)面即使模糊了，我們依然能看清「男主角」沈騰以及飛馳人生四個(gè)大字，雖然原圖背景復(fù)雜以及其他裝飾物很多，依然不影響畫(huà)面的整體協(xié)調(diào)感，元素多且雜而不亂。
這上面的兩個(gè)例子看出，即使畫(huà)面模糊了，還是能清晰看到畫(huà)面表達(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)，顏色比例盡量類(lèi)光源色的主色調(diào)占據(jù)畫(huà)面百分之八十的面積，其他環(huán)境色作為補(bǔ)充。
色彩插件檢查配色
谷歌插件 palette.site 能分析出畫(huà)面顏色的狀態(tài)以及畫(huà)面中幾種主要的顏色，借助這個(gè)插件能很輕松檢查畫(huà)面是否超過(guò)了3種顏色（黑白灰不算顏色），如果超過(guò)三種顏色，那么頁(yè)面就需要做減法，或者將顏色統(tǒng)一在一個(gè)色系里，用明度以及飽和度區(qū)分。
插件的使用方法：可以直接使用瀏覽器下載，然后也可以在瀏覽器中選擇一張圖片，右鍵「在新標(biāo)簽中打開(kāi)圖片」，然后再「點(diǎn)擊右上角的插件按鈕」分析顏色狀態(tài)。
從上面的兩個(gè)案例中可以看出，兩個(gè) banner 的顏色分析基本都在三種顏色以?xún)?nèi)，特別是下面的看起來(lái)比較復(fù)雜的顏色，總共分析的顏色也就紅黃藍(lán)，其中藍(lán)色還是點(diǎn)綴色的存在。
今天的內(nèi)容就說(shuō)到這里了，我們回顧一下重點(diǎn)內(nèi)容，解決畫(huà)面看起來(lái)很亂可以有以下方法：
設(shè)計(jì)雖沒(méi)有近路，但可以少走彎路。
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn