2012-7-1 藍(lán)藍(lán)設(shè)計的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( www.gyxygd.cn )是一家專注而深入的設(shè)計機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源：http://www.aliued.cn/2012/06/29/4973.html
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
構(gòu)建界面視覺層級的元素有顏色的顯著程度，圖片、文字的尺寸大小，還有最基礎(chǔ)的，內(nèi)容的組織結(jié)構(gòu)。
結(jié)構(gòu)設(shè)計是指對界面內(nèi)容進(jìn)行分組，對界面中的信息、數(shù)據(jù)進(jìn)行設(shè)計使之結(jié)構(gòu)化呈現(xiàn)的過程。
好的結(jié)構(gòu)設(shè)計能使界面信息傳達(dá)更加清晰、快捷。那么，如果進(jìn)行結(jié)構(gòu)設(shè)計呢？
這是最常見的分組方式，在UI設(shè)計中歷史悠久。
不管是線、框，還是背景色，都是可見的邊界，本來引入這些可見邊界的目的就是為了使信息的呈現(xiàn)更加清晰，但是這些視覺元素的加入也在一定程度上增加了界面的凌亂感。所以，現(xiàn)在越來越多的會利用空間的遠(yuǎn)近來對界面內(nèi)容進(jìn)行分組。
從XP到win7，變化很明顯。
網(wǎng)頁設(shè)計中也是一樣，越來越多的新界面采用極簡主義的思路，只保留了極少的線和背景色，更多時候是通過拉大區(qū)塊之間的距離來分組。
喜歡深究的人也許會問，為何沒有可見邊界，我們也能清楚的根據(jù)距離的遠(yuǎn)近來對信息進(jìn)行分組呢？
關(guān)于這一現(xiàn)象，在20世紀(jì)早期，一個德國的心理學(xué)家研究小組就進(jìn)行過研究，試圖解釋人類視覺的工作原理。他們觀察了許多視覺現(xiàn)象，并提出了格式塔(Gestalt)原理。針對這一現(xiàn)象，是其中的“接近性”原理。
說的是物體直接的相對距離會影響我們感知它們是否以及如何組織在一起，互相靠近的物體看起來屬于一組，而那些距離較遠(yuǎn)的則不是。
上圖中，左邊的星星在水平方向比較靠近，因此我們看到的是三行星星；右邊的星星在垂直方向更靠近，因此我們看到的是三列星星。
不知讀者是否注意到另外一個現(xiàn)象，我們很自然的就把上面的星星看做是左邊一組，右邊一組。為什么會這樣？兩組之間的距離大小和右邊一組列之間的距離大小是一樣的啊。這其實就是格式塔原理中的另外一個原理“相似性”。
相似性原理指出影響我們感知分組的另外一個因素：如果其他因素相同，那么相似的物體看起來屬于一組。在上圖中，區(qū)分組的因素就是排列的方向。
關(guān)于這一原理的應(yīng)用
上圖中，“文檔視圖”組是有著相似的圖標(biāo)，“顯示/隱藏”組是有著一樣的checkbox，兩組信息區(qū)分很明顯。
還有一個在驗證碼中的應(yīng)用
利用文字顏色來進(jìn)行分組。
上面講了結(jié)構(gòu)設(shè)計的一個層面，內(nèi)容的分組，結(jié)構(gòu)設(shè)計還有另外一個層面，信息、數(shù)據(jù)的結(jié)構(gòu)化呈現(xiàn)。
人們在瀏覽網(wǎng)頁時，往往不是仔細(xì)閱讀每一個詞，而是快速的掃描，尋找目標(biāo)信息。對于與目標(biāo)相關(guān)的信息會非常敏感，但是對于其他的信息，即使看到了也不會被注意到。所以易于瀏覽、突出重點很重要。
相同的數(shù)據(jù)，左邊就給人凌亂、難于區(qū)分的感覺。
銀行卡的卡號設(shè)計
看上圖，分別報出郵政儲蓄卡和工商銀行卡的卡號。相信郵政儲蓄卡的號碼很難一次性無誤的報出來，并且心里也沒底報的對不對。
此外，即使不是一整個數(shù)據(jù)，分隔開的字段也能提供有用的視覺結(jié)構(gòu)。
左右兩段話，右邊的結(jié)構(gòu)層次清晰明了。
在網(wǎng)頁環(huán)境中，結(jié)構(gòu)化的信息和數(shù)據(jù)非常有必要，當(dāng)用戶在快速瀏覽的過程中，能夠快速的找到需要的信息。
在界面設(shè)計的三大元素中，結(jié)構(gòu)是基礎(chǔ)，值得深入研究，再配合顏色和尺寸的運用，才能設(shè)計出友好的界面。
藍(lán)藍(lán)設(shè)計的小編 http://www.gyxygd.cn