不知道大家是否工作中經(jīng)常聽(tīng)到有人點(diǎn)評(píng)某個(gè)作品說(shuō):這個(gè)設(shè)計(jì)缺乏細(xì)節(jié)?過(guò)去在擬物化時(shí)期,設(shè)計(jì)師細(xì)節(jié)能很好的在質(zhì)感,圖標(biāo),光影處理等方面去體現(xiàn),但是現(xiàn)在越來(lái)越扁平的設(shè)計(jì)風(fēng)格,色彩、規(guī)范都千篇一律,仿佛設(shè)計(jì)都能被AI智能取代,今天就來(lái)聊聊UI設(shè)計(jì)師該如何在設(shè)計(jì)中體現(xiàn)細(xì)節(jié)!
UI的組成元素?
界面大多都是由字體,圖形,色彩構(gòu)成的,這也是設(shè)計(jì)三大要素。那么在設(shè)計(jì)中,我們?nèi)绾稳ヌ幚砗美锩娴年P(guān)系呢,今天和大家分享一些常用的設(shè)計(jì)技巧,幫助大家在做設(shè)計(jì)時(shí)候更好去排版,英文示例只說(shuō)明技巧中文同樣適用。
▲我們嘗試把上圖這個(gè)UI界面拆分一下,可以看到界面基本都是由字體、色彩、圖形三大板塊組成的。
▲同理:上圖我們按照同樣的方式去拆分,依然可以獲得三部分的內(nèi)容
字重創(chuàng)建層級(jí)
▲我們都知道字體是有重量的,不同的字重可以體現(xiàn)界面層級(jí),特別是現(xiàn)在的iOS風(fēng)格中,更強(qiáng)調(diào)通過(guò)字重對(duì)比來(lái)提升視覺(jué)層次,但是很多設(shè)計(jì)師只知道運(yùn)用字體大小去做對(duì)比,卻忽略了:運(yùn)用字重和顏色去做層級(jí)區(qū)分同樣適用。
▲這段文字比較重要,就加大,這個(gè)文字次要就縮小,這是大多數(shù)設(shè)計(jì)師做設(shè)計(jì)的習(xí)慣,但是不要過(guò)多依賴(lài)大小對(duì)比去區(qū)分層級(jí)
▲我們可以嘗試通過(guò)加大字重,同樣可以達(dá)到效果
▲可以感受一下當(dāng)視覺(jué)字重變化時(shí),整體版面的層級(jí)區(qū)分
▲字重的對(duì)比在平面設(shè)計(jì),版式設(shè)計(jì)運(yùn)用比較多
▲品牌設(shè)計(jì)中,不同字重帶來(lái)視覺(jué)感受和舒適度是截然不同的
▲商品卡片設(shè)計(jì)中,通過(guò)字重區(qū)分層級(jí)的視覺(jué)效果,信息捕捉效率顯然要比整個(gè)版面都用統(tǒng)一字重要更快。
顏色創(chuàng)建層級(jí)
在UI排版中,除了字體層級(jí),顏色也是很重要排版手法之一,做界面時(shí)候不要只用一種顏色,主要內(nèi)容黑色,次要內(nèi)容灰色(文章日期等)輔助內(nèi)容淺灰色,然后結(jié)合前面所說(shuō)字重運(yùn)用,能很好的和信息組成視覺(jué)節(jié)奏。
▲界面中的線條和色塊都是區(qū)分層級(jí)的輔助手段,按照界面調(diào)性去實(shí)際調(diào)整
▲錯(cuò)誤做法:讓文字變成淺色比較適合在白色背景下,如果不彩色背景上面使用灰色,因?yàn)閹时尘昂突疑绻黄鹗褂?,?huì)顯得界面特別臟,識(shí)別度還低
▲通過(guò)對(duì)圖片,彩色背景通過(guò)降低透明度的效果會(huì)更加好
▲通過(guò)降低文字透明度也能拉開(kāi)視覺(jué)層級(jí)
▲選擇與背景相同的色相,直到飽和度合適為止
投影運(yùn)用創(chuàng)建層級(jí)
市面流行風(fēng)格里面,投影運(yùn)用大都比較多,但是在用投影的時(shí)候,我們需要盡量保持它的干凈和利索,不要使用過(guò)大的投影值和擴(kuò)散范圍,盡量使用柔和投影或者垂直投影。
間距創(chuàng)建層級(jí)
▲我們?cè)谧龊芏嘣O(shè)計(jì)的時(shí)候,容易用到很多分割,什么時(shí)候用線什么時(shí)候用投影,如何讓界面更加干凈,有時(shí)候通過(guò)留白來(lái)區(qū)分層級(jí),效果會(huì)比線更加干凈清爽。
中心軸創(chuàng)建層級(jí)
▲這個(gè)頁(yè)面中,很明顯左邊比右邊好,右邊信息缺少對(duì)齊和呼吸感,左邊有一條明顯中心軸讓頁(yè)面更加的清晰。
總結(jié)
今天和大家分享的只是UI界面中一部分經(jīng)典區(qū)分層級(jí)的要素特點(diǎn),希望大家都能舉一反三,運(yùn)用到自己的作品中去,做出更多具備細(xì)節(jié)感受的作品!
全站高品質(zhì)素材免費(fèi)下載!