構建界面視覺層級的元素有顏色的顯著程度,圖片、文字的尺寸大小,還有最基礎的,(上海UI界面培訓)內容的組織結構。
結構設計是指對界面內容進行分組,對界面中的信息、數據進行設計使之結構化呈現的過程。
好的結構設計能使界面信息傳達更加清晰、快捷。那么,如果進行結構設計呢?
結構設計———內容的分組
使用線、框、背景色來分組
這是最常見的分組方式,在
UI設計中歷史悠久。
使用線來分組
使用框來分組
使用背景色分組
不管是線、框,還是背景色,都是可見的邊界,本來引入這些可見邊界的目的就是為了使信息的呈現更加清晰,但是這些視覺元素的加入也在一定程度上增加了界面的凌亂感。所以,現在越來越多的會利用空間的遠近來對界面內容進行分組。(上海電腦培訓學校)
利用空間的遠近來對界面內容進行分組
從XP到win7,變化很明顯。
網頁設計中也是一樣,越來越多的新界面采用極簡主義的思路,只保留了極少的線和背景色,更多時候是通過拉大區(qū)塊之間的距離來分組。
喜歡深究的人也許會問,為何沒有可見邊界,我們也能清楚的根據距離的遠近來對信息進行分組呢?(上海平面軟件訓)
關于這一現象,在20世紀早期,一個德國的心理學家研究小組就進行過研究,試圖解釋人類視覺的工作原理。他們觀察了許多視覺現象,并提出了格式塔(Gestalt)原理。針對這一現象,是其中的“接近性”原理。
格式塔原理:接近性
說的是物體直接的相對距離會影響我們感知它們是否以及如何組織在一起,互相靠近的物體看起來屬于一組,而那些距離較遠的則不是。
上圖中,左邊的星星在水平方向比較靠近,因此我們看到的是三行星星;右邊的星星在垂直方向更靠近,因此我們看到的是三列星星。
不知讀者是否注意到另外一個現象,我們很自然的就把上面的星星看做是左邊一組,右邊一組。為什么會這樣?兩組之間的距離大小和右邊一組列之間的距離大小是一樣的啊。這其實就是格式塔原理中的另外一個原理“相似性”。(上海計算機培訓)
格式塔原理:相似性
相似性原理指出影響我們感知分組的另外一個因素:如果其他因素相同,那么相似的物體看起來屬于一組。在上圖中,區(qū)分組的因素就是排列的方向。
利用元素的相似性來對界面內容進行分組
關于這一原理的應用
上圖中,“文檔視圖”組是有著相似的圖標,“顯示/隱藏”組是有著一樣的checkbox,兩組信息區(qū)分很明顯。
還有一個在驗證碼中的應用
利用文字顏色來進行分組。
上面講了結構設計的一個層面,內容的分組,結構設計還有另外一個層面,信息、數據的結構化呈現。(上海界面設計培訓)