界面設(shè)計(jì)中的結(jié)構(gòu)化設(shè)計(jì)趨勢(shì)

構(gòu)建界面視覺(jué)層級(jí)的元素有顏色的顯著程度，圖片、文字的尺寸大小，還有最基礎(chǔ)的，內(nèi)容的組織結(jié)構(gòu)。

結(jié)構(gòu)設(shè)計(jì)是指對(duì)界面內(nèi)容進(jìn)行分組，對(duì)界面中的信息、數(shù)據(jù)進(jìn)行設(shè)計(jì)使之結(jié)構(gòu)化呈現(xiàn)的過(guò)程。

好的結(jié)構(gòu)設(shè)計(jì)能使界面信息傳達(dá)更加清晰、快捷。那么，如果進(jìn)行結(jié)構(gòu)設(shè)計(jì)呢？

結(jié)構(gòu)設(shè)計(jì)———內(nèi)容的分組

使用線(xiàn)、框、背景色來(lái)分組

這是最常見(jiàn)的分組方式，在UI設(shè)計(jì)中歷史悠久。

使用線(xiàn)來(lái)分組

使用框來(lái)分組

使用背景色分組

不管是線(xiàn)、框，還是背景色，都是可見(jiàn)的邊界，本來(lái)引入這些可見(jiàn)邊界的目的就是為了使信息的呈現(xiàn)更加清晰，但是這些視覺(jué)元素的加入也在一定程度上增加了界面的凌亂感。所以，現(xiàn)在越來(lái)越多的會(huì)利用空間的遠(yuǎn)近來(lái)對(duì)界面內(nèi)容進(jìn)行分組。

利用空間的遠(yuǎn)近來(lái)對(duì)界面內(nèi)容進(jìn)行分組

從XP到win7，變化很明顯。

網(wǎng)頁(yè)設(shè)計(jì)中也是一樣，越來(lái)越多的新界面采用極簡(jiǎn)主義的思路，只保留了極少的線(xiàn)和背景色，更多時(shí)候是通過(guò)拉大區(qū)塊之間的距離來(lái)分組。

喜歡深究的人也許會(huì)問(wèn)，為何沒(méi)有可見(jiàn)邊界，我們也能清楚的根據(jù)距離的遠(yuǎn)近來(lái)對(duì)信息進(jìn)行分組呢？

關(guān)于這一現(xiàn)象，在20世紀(jì)早期，一個(gè)德國(guó)的心理學(xué)家研究小組就進(jìn)行過(guò)研究，試圖解釋人類(lèi)視覺(jué)的工作原理。

他們觀(guān)察了許多視覺(jué)現(xiàn)象，并提出了格式塔(Gestalt)原理。針對(duì)這一現(xiàn)象，是其中的“接近性”原理。

格式塔原理：接近性

說(shuō)的是物體直接的相對(duì)距離會(huì)影響我們感知它們是否以及如何組織在一起，互相靠近的物體看起來(lái)屬于一組，而那些距離較遠(yuǎn)的則不是。

上圖中，左邊的星星在水平方向比較靠近，因此我們看到的是三行星星；右邊的星星在垂直方向更靠近，因此我們看到的是三列星星。

不知讀者是否注意到另外一個(gè)現(xiàn)象，我們很自然的就把上面的星星看做是左邊一組，右邊一組。為什么會(huì)這樣？?jī)山M之間的距離大小和右邊一組列之間的距離大小是一樣的啊。這其實(shí)就是格式塔原理中的另外一個(gè)原理“相似性”。

格式塔原理：相似性

相似性原理指出影響我們感知分組的另外一個(gè)因素：如果其他因素相同，那么相似的物體看起來(lái)屬于一組。在上圖中，區(qū)分組的因素就是排列的方向。

利用元素的相似性來(lái)對(duì)界面內(nèi)容進(jìn)行分組

關(guān)于這一原理的應(yīng)用

上圖中，“文檔視圖”組是有著相似的圖標(biāo)，“顯示/隱藏”組是有著一樣的checkbox，兩組信息區(qū)分很明顯。

還有一個(gè)在驗(yàn)證碼中的應(yīng)用

利用文字顏色來(lái)進(jìn)行分組。

上面講了結(jié)構(gòu)設(shè)計(jì)的一個(gè)層面，內(nèi)容的分組，結(jié)構(gòu)設(shè)計(jì)還有另外一個(gè)層面，信息、數(shù)據(jù)的結(jié)構(gòu)化呈現(xiàn)。

結(jié)構(gòu)設(shè)計(jì)——信息、數(shù)據(jù)的結(jié)構(gòu)化呈現(xiàn)

人們?cè)跒g覽網(wǎng)頁(yè)時(shí)，往往不是仔細(xì)閱讀每一個(gè)詞，而是快速的掃描，尋找目標(biāo)信息。對(duì)于與目標(biāo)相關(guān)的信息會(huì)非常敏感，但是對(duì)于其他的信息，即使看到了也不會(huì)被注意到。所以易于瀏覽、突出重點(diǎn)很重要。

結(jié)構(gòu)化的數(shù)據(jù)能更快瀏覽和理解

相同的數(shù)據(jù)，左邊就給人凌亂、難于區(qū)分的感覺(jué)。

結(jié)構(gòu)化的數(shù)字更容易閱讀和記憶

銀行卡的卡號(hào)設(shè)計(jì)

看上圖，分別報(bào)出郵政儲(chǔ)蓄卡和工商銀行卡的卡號(hào)。相信郵政儲(chǔ)蓄卡的號(hào)碼很難一次性無(wú)誤的報(bào)出來(lái)，并且心里也沒(méi)底報(bào)的對(duì)不對(duì)。

此外，即使不是一整個(gè)數(shù)據(jù)，分隔開(kāi)的字段也能提供有用的視覺(jué)結(jié)構(gòu)。

視覺(jué)層次易于理解信息的結(jié)構(gòu)

左右兩段話(huà)，右邊的結(jié)構(gòu)層次清晰明了。

在網(wǎng)頁(yè)環(huán)境中，結(jié)構(gòu)化的信息和數(shù)據(jù)非常有必要，當(dāng)用戶(hù)在快速瀏覽的過(guò)程中，能夠快速的找到需要的信息。

在界面設(shè)計(jì)的三大元素中，結(jié)構(gòu)是基礎(chǔ)，值得深入研究，再配合顏色和尺寸的運(yùn)用，才能設(shè)計(jì)出友好的界面。