排版是網頁設計中最基本的知識,作為專業的網頁設計師,如果沒有很好地掌握排版設計技巧,你的界面設計可能就會經常出現時好時壞的情況。排版設計需要注意什麼?留意以下排版設計的四大黃金原則,你也能讓排版能力長期達到穩定水平!
排版設計的四大黃金原則
原則一:視覺焦點
視覺焦點是界面中佔主導地位的視覺元素,也是用戶進入網站時第一眼就能看到的設計元素。若網頁信息層次感不強,沒有主次之分,用戶會對網站存在疑惑,甚至誤解。因此,必須確保關鍵元素清晰直接,才能讓整個用戶操作過程更加流暢。
正面例子:界面通過黑色Button強調重要的信息,關鍵元素則採用高亮小圖標顯示,直接吸引用戶的注意力。
反面例子:左面界面的所有元素採用同一色系,看起來所有信息都很重要,沒有明確的視覺指引;右面整個界面的顏色太多,顯得非常輕浮。
原則二:層次結構
建立視覺層次結構,能讓用戶明確知道頁面的關鍵要素和其他元素之間的關係,並且能快速完成當前任務,同時也符合用戶的閱讀習慣。所以突出界面的層級關係,可通過顏色、大小,明暗對比。
正面例子:頁面的圖片是吸引用戶注意力的關鍵,因此視覺重量會比其他 元素要大,裏面的文字則利用明暗區分層級關係。
原則三:視覺重量
要衡量頁面的重量,可通過大小、對比、顏色、留白、形狀、位置等方式進行調整。那麼在界面中如何把握視覺重量的比例?看看以下的例子。
雖然與白色相比,藍紫色會更具吸引力,但在左圖中,我們卻發現中間白色的logo更為吸引,這是因為留白,周圍沒有任何元素干擾。再看看右圖,界面雖然有很多元素,但最吸引人的依然是藍紫色的按鈕,這是因為與界面的其他顏色相比,藍紫色更為搶眼,因而成為視覺焦點。
原則四:視覺方向
如果說視覺重量能第一時間將用戶的視線帶到特定重要的位置,那麼視覺方向其實引導用戶快速完成任務和達到預期目標。
正面例子:左邊圖標和右邊列表形成一個Z字結構,引導用戶將視線從左到右移動,非常符合用戶的傳統閱讀習慣。
要形成視覺方向就需要「線」,這條線是無形的,但可通過對齊、相同形狀元素等形成軸來進行。
簡單來說,用戶能否順利在頁面中完成操作,靠的就是視覺方向的指引,這就需要我們通過對視覺焦點、層次結構、視覺重量這三方面的調整才能實現。