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