在設(shè)計(jì)環(huán)節(jié)中,對(duì)于視覺層次的營(yíng)造是最重要的環(huán)節(jié)之一,理清主次之分,這樣在視覺上的變化才能更富有層次感。

2019-02-07 3515 0

在設(shè)計(jì)環(huán)節(jié)中,對(duì)于視覺層次的營(yíng)造是最重要的環(huán)節(jié)之一,也是每個(gè)設(shè)計(jì)師所要精通和了解的,無論是海報(bào)設(shè)計(jì)還是頁(yè)面設(shè)計(jì),都要能夠?qū)哟畏置?,理清主次之分,這樣在視覺上的變化才能更富有層次感。

 

在最近這段工作中,有很多同學(xué)向米醋反應(yīng),自己在視覺內(nèi)容層次化的設(shè)計(jì)中無法處理好其中的關(guān)系,導(dǎo)致設(shè)計(jì)經(jīng)不起推敲。所以今天米醋就針對(duì)視覺層次來進(jìn)行一下分析,以此來幫助大家解決這其中的難題。
 


 


 

那么問題來了!

什么是視覺層次?


 

視覺層次是從視覺上認(rèn)知的一種空間關(guān)系,也就是我們經(jīng)常說的前后關(guān)系。以閱讀和購(gòu)物為主的界面,內(nèi)容信息量一般都很大,用戶在查看的時(shí)候需要花大量的時(shí)間進(jìn)行信息處理,所以在設(shè)計(jì)時(shí)需要從視覺上進(jìn)行區(qū)分,讓用戶找打自己的感興趣的點(diǎn)和內(nèi)容,這樣才能留住用戶。


 

undefined


 

有層級(jí)的設(shè)計(jì)不僅能提高使用效率,還能引導(dǎo)用戶激發(fā)使用興趣, 所以視覺層次的處理在版面布局設(shè)計(jì)中非常重要。為了提高信息前后的關(guān)系,設(shè)計(jì)師可以利用大小對(duì)比、冷暖對(duì)比、明暗度、視線規(guī)則和中心點(diǎn)引導(dǎo)等方式來進(jìn)行區(qū)分。

 

舉幾個(gè)栗子


 

undefined

通過大小區(qū)分


 

在設(shè)計(jì)中,同樣的顏色元素,面積越大的層級(jí)應(yīng)該越靠前。在地圖展示中,當(dāng)用戶搜索到建筑的位置或選擇大頭針時(shí),會(huì)彈出大圓展示詳細(xì)的信息和功能按鈕。通過按鈕的大小來區(qū)分詳情的主要信息和輔助功能,有利于用戶快速找到自己的需求。

 

undefined

通過大小區(qū)分視覺層次


 


 

通過冷暖區(qū)分


 

這種設(shè)計(jì)一般暖色靠前,冷色靠后。


 

undefined
 

通過冷暖區(qū)分視覺層次


 

在設(shè)計(jì)中經(jīng)常將主視覺或需要突出的按鈕用相對(duì)暖一點(diǎn)的顏色,同時(shí)還可以用暖色突出主標(biāo)題和主插圖,從而將重要的信息快速傳達(dá)給用戶,而次要的信息用相對(duì)冷一些的顏色即可。


 

undefined
 

undefined

通過冷暖區(qū)分視覺層次


 

undefined


 

通過明暗程度和顏色飽和度區(qū)分


 

這種方式可以區(qū)分信息的關(guān)系,最常見的例子就是利用透明度來區(qū)分可操作和不可操作。
 

 

undefined

 


 


 

undefined

通過視線規(guī)則區(qū)分



 

從左到右,從上而下的閱讀順序決定了內(nèi)容信息的排布,圖標(biāo)一般位于左側(cè),描述文字一般位于右側(cè),而排列順序則遵循從上到下的規(guī)律。

 

undefined


 

 通過中心引導(dǎo)區(qū)分


 

在通常情況下,中心位置是最先被看到的。


 

一般閃屏和引導(dǎo)頁(yè)就幾秒鐘,為了突出品牌或產(chǎn)品介紹等重要信息,經(jīng)常會(huì)將元素放在中心位置,通過這種方式可以在最短的時(shí)間內(nèi)將重要信息傳遞給用戶。

 

undefined

 
 

視覺層次的目的就是為了讓用戶的視線集中在主要的目標(biāo)上。這里總結(jié)一下,從視覺上劃分層次關(guān)系有以下5 種方式。


 

大?。?/strong>占有面積大的圖或元素能覆蓋用戶的大量視線。

冷暖:利用相對(duì)的冷暖顏色,通過暖色來凸顯出重要的內(nèi)容,可以有效的引導(dǎo)操作。

明暗:通過明暗透明可以區(qū)分可操作和不可操作性。

視線:利用閱讀視線來排布圖標(biāo)及文字。

中心:將想突出的品牌或信息放置于中心,能以最快的速度傳達(dá)到用戶眼前。

 

undefined


 

視覺層次是提升整體設(shè)計(jì)感很重要的一種形式,在設(shè)計(jì)中如何靈活的進(jìn)行使用,對(duì)于畫面的視覺效果有著至關(guān)重要的作用,即使在設(shè)計(jì)手法中有很多的共通性,只要在形式上學(xué)會(huì)創(chuàng)新,打破傳統(tǒng)束縛,那么設(shè)計(jì)作品就不會(huì)顯得平庸無常。
 


 

此次米醋通過不同的界面設(shè)計(jì),從大小、顏色、元素、明暗。視覺規(guī)劃等五個(gè)方面結(jié)合案例進(jìn)行簡(jiǎn)單的分析,希望大家在設(shè)計(jì)過程中多去嘗試和對(duì)比,一定能設(shè)計(jì)出需求最合理的層次視覺設(shè)計(jì)方案。


 


 


32
評(píng)論區(qū)(0)
正在加載評(píng)論...