如何在UI設(shè)計中體現(xiàn)細(xì)節(jié)？

2022-02-18 點擊量：

不知道大家是否工作中經(jīng)常聽到有人點評某個作品說：這個設(shè)計缺乏細(xì)節(jié)？過去在擬物化時期，設(shè)計師細(xì)節(jié)能很好的在質(zhì)感，圖標(biāo)，光影處理等方面去體現(xiàn)，但是現(xiàn)在越來越扁平的設(shè)計風(fēng)格，色彩、規(guī)范都千篇一律，仿佛設(shè)計都能被AI智能取代，今天就來聊聊UI設(shè)計師該如何在設(shè)計中體現(xiàn)細(xì)節(jié)！

 UI的組成元素？

界面大多都是由字體，圖形，色彩構(gòu)成的，這也是設(shè)計三大要素。那么在設(shè)計中，我們?nèi)绾稳ヌ幚砗美锩娴年P(guān)系呢，今天和大家分享一些常用的設(shè)計技巧，幫助大家在做設(shè)計時候更好去排版，英文示例只說明技巧中文同樣適用。

▲我們嘗試把上圖這個UI界面拆分一下，可以看到界面基本都是由字體、色彩、圖形三大板塊組成的。

▲同理：上圖我們按照同樣的方式去拆分，依然可以獲得三部分的內(nèi)容

 字重創(chuàng)建層級

▲我們都知道字體是有重量的，不同的字重可以體現(xiàn)界面層級，特別是現(xiàn)在的iOS風(fēng)格中，更強調(diào)通過字重對比來提升視覺層次，但是很多設(shè)計師只知道運用字體大小去做對比，卻忽略了：運用字重和顏色去做層級區(qū)分同樣適用。

▲這段文字比較重要，就加大，這個文字次要就縮小,這是大多數(shù)設(shè)計師做設(shè)計的習(xí)慣，但是不要過多依賴大小對比去區(qū)分層級

▲我們可以嘗試通過加大字重，同樣可以達到效果

▲可以感受一下當(dāng)視覺字重變化時，淮安專業(yè)廣告公司，整體版面的層級區(qū)分

▲字重的對比在平面設(shè)計，版式設(shè)計運用比較多

▲品牌設(shè)計中，不同字重帶來視覺感受和舒適度是截然不同的

▲商品卡片設(shè)計中，通過字重區(qū)分層級的視覺效果，信息捕捉效率顯然要比整個版面都用統(tǒng)一字重要更快。

 顏色創(chuàng)建層級

在UI排版中，除了字體層級，嘉瑞廣告，顏色也是很重要排版手法之一，做界面時候不要只用一種顏色，主要內(nèi)容黑色，次要內(nèi)容灰色（文章日期等）輔助內(nèi)容淺灰色，然后結(jié)合前面所說字重運用，能很好的和信息組成視覺節(jié)奏。

▲界面中的線條和色塊都是區(qū)分層級的輔助手段，按照界面調(diào)性去實際調(diào)整

▲錯誤做法：讓文字變成淺色比較適合在白色背景下，如果不彩色背景上面使用灰色，因為帶色彩背景和灰色如果一起使用，會顯得界面特別臟，識別度還低

▲通過對圖片，彩色背景通過降低透明度的效果會更加好

▲通過降低文字透明度也能拉開視覺層級

▲選擇與背景相同的色相，直到飽和度合適為止

 投影運用創(chuàng)建層級