什么是設(shè)計中的對比?

對比是設(shè)計中的一個重要設(shè)計原則,因為對比能夠有效組織界面信息,并構(gòu)建設(shè)計層次,通過這樣來向用戶傳遞關(guān)鍵重要信息。
合理準(zhǔn)確的運用對比原則可以有效的提高設(shè)計質(zhì)感,當(dāng)然如果過渡使用對比有時候也會適得其反,比如顏色對比過于強烈,反而影響了視覺閱讀。

#O1.顏色對比


色相環(huán)
如上圖,在色相環(huán)上,色相之間的角度大小就決定了對比的強烈程度,因此我們在選擇色彩對比時候需要注意。
例如,下面這張設(shè)計圖就是青綠色與紫色之間的對比,屬于色相對比



上圖配色色板中,分別應(yīng)用色相和明度之間的對比。
#O2.形狀對比

形狀對比一般是有規(guī)則和無規(guī)則形狀,比如上面的圓形和液態(tài)的有機圖形進行組合,前者較為規(guī)整,后者往往彎曲且不對稱,二者搭配使用可形成良好的對比。
那么在UI設(shè)計中的形狀對比一般都是在棱角之間出現(xiàn)較多或者圖標(biāo)符號。




Google的Materials you Android 12設(shè)計語言的出現(xiàn),將不同形狀容器的組合在設(shè)計中,演變出多種組件容器,這樣的思路,值得我們深入思考與學(xué)習(xí),為什么我們之前就想不到這樣的思路?
形狀對比在產(chǎn)品設(shè)計中的應(yīng)用有更多無限可能,現(xiàn)在最難的還是大家的思維限制,希望以一種開放的心態(tài)去挑戰(zhàn)設(shè)計更多可能性。


#O3.大小對比

在UI設(shè)計中對比其實就是差異化,實現(xiàn)信息層次的一種方式。在使用大小對比時候,大的元素就需要更大,小的就讓它更小,不能拖泥帶水,不大不小。

當(dāng)遇到顏色相同的版式設(shè)計,可以通過大小來做層級區(qū)分。

上圖界面設(shè)計中,標(biāo)題文字最大,周邊運用留白,使得信息層級區(qū)分更明顯。

定位圖標(biāo)最大化顯示在地圖中心區(qū)域,聚焦,引起用戶的關(guān)注和留意。
好了,今天文章差不多到這,我個人覺得圖形的對比用好后將是構(gòu)建競爭力最有效的設(shè)計手段,突破同質(zhì)化壁壘,大家下去可以多去練練,找到設(shè)計的感覺。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)