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