在設(shè)計環(huán)節(jié)中，對于視覺層次的營造是最重要的環(huán)節(jié)之一，也是每個設(shè)計師所要精通和了解的，無論是海報設(shè)計還是頁面設(shè)計，都要能夠?qū)哟畏置?，理清主次之分，這樣在視覺上的變化才能更富有層次感。
在最近這段工作中，有很多同學(xué)向米醋反應(yīng)，自己在視覺內(nèi)容層次化的設(shè)計中無法處理好其中的關(guān)系，導(dǎo)致設(shè)計經(jīng)不起推敲。所以今天米醋就針對視覺層次來進行一下分析，以此來幫助大家解決這其中的難題。
那么問題來了！
什么是視覺層次？
視覺層次是從視覺上認(rèn)知的一種空間關(guān)系，也就是我們經(jīng)常說的前后關(guān)系。以閱讀和購物為主的界面，內(nèi)容信息量一般都很大，用戶在查看的時候需要花大量的時間進行信息處理，所以在設(shè)計時需要從視覺上進行區(qū)分，讓用戶找打自己的感興趣的點和內(nèi)容，這樣才能留住用戶。
有層級的設(shè)計不僅能提高使用效率，還能引導(dǎo)用戶激發(fā)使用興趣， 所以視覺層次的處理在版面布局設(shè)計中非常重要。為了提高信息前后的關(guān)系，設(shè)計師可以利用大小對比、冷暖對比、明暗度、視線規(guī)則和中心點引導(dǎo)等方式來進行區(qū)分。
舉幾個栗子
通過大小區(qū)分
在設(shè)計中，同樣的顏色元素，面積越大的層級應(yīng)該越靠前。在地圖展示中，當(dāng)用戶搜索到建筑的位置或選擇大頭針時，會彈出大圓展示詳細(xì)的信息和功能按鈕。通過按鈕的大小來區(qū)分詳情的主要信息和輔助功能，有利于用戶快速找到自己的需求。
通過大小區(qū)分視覺層次
通過冷暖區(qū)分
這種設(shè)計一般暖色靠前，冷色靠后。
通過冷暖區(qū)分視覺層次
在設(shè)計中經(jīng)常將主視覺或需要突出的按鈕用相對暖一點的顏色，同時還可以用暖色突出主標(biāo)題和主插圖，從而將重要的信息快速傳達給用戶，而次要的信息用相對冷一些的顏色即可。
通過冷暖區(qū)分視覺層次
通過明暗程度和顏色飽和度區(qū)分
這種方式可以區(qū)分信息的關(guān)系，最常見的例子就是利用透明度來區(qū)分可操作和不可操作。
通過視線規(guī)則區(qū)分
從左到右，從上而下的閱讀順序決定了內(nèi)容信息的排布，圖標(biāo)一般位于左側(cè)，描述文字一般位于右側(cè)，而排列順序則遵循從上到下的規(guī)律。
通過中心引導(dǎo)區(qū)分
在通常情況下，中心位置是最先被看到的。
一般閃屏和引導(dǎo)頁就幾秒鐘，為了突出品牌或產(chǎn)品介紹等重要信息，經(jīng)常會將元素放在中心位置，通過這種方式可以在最短的時間內(nèi)將重要信息傳遞給用戶。
視覺層次的目的就是為了讓用戶的視線集中在主要的目標(biāo)上。這里總結(jié)一下，從視覺上劃分層次關(guān)系有以下5 種方式。
大?。?/strong>占有面積大的圖或元素能覆蓋用戶的大量視線。
冷暖：利用相對的冷暖顏色，通過暖色來凸顯出重要的內(nèi)容，可以有效的引導(dǎo)操作。
明暗：通過明暗透明可以區(qū)分可操作和不可操作性。
視線：利用閱讀視線來排布圖標(biāo)及文字。
中心：將想突出的品牌或信息放置于中心，能以最快的速度傳達到用戶眼前。
視覺層次是提升整體設(shè)計感很重要的一種形式，在設(shè)計中如何靈活的進行使用，對于畫面的視覺效果有著至關(guān)重要的作用，即使在設(shè)計手法中有很多的共通性，只要在形式上學(xué)會創(chuàng)新，打破傳統(tǒng)束縛，那么設(shè)計作品就不會顯得平庸無常。
此次米醋通過不同的界面設(shè)計，從大小、顏色、元素、明暗。視覺規(guī)劃等五個方面結(jié)合案例進行簡單的分析，希望大家在設(shè)計過程中多去嘗試和對比，一定能設(shè)計出需求最合理的層次視覺設(shè)計方案。
