<b>用戶體驗分析:界面設(shè)計中的結(jié)構(gòu)設(shè)計</b>

作者: 來源:未知 2012-06-29 23:31:07 閱讀 我要評論 直達(dá)商品

  

 

  構(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è)計呢?

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

  使用線、框、背景色來分組

  這是最常見的分組方式,在UI設(shè)計中歷史悠久。

  使用線來分組

  

 

  使用框來分組

  

 

  使用背景色分組

  

 

  不管是線、框,還是背景色,都是可見的邊界,本來引入這些可見邊界的目的就是為了使信息的呈現(xiàn)更加清晰,但是這些視覺元素的加入也在一定程度上增加了界面的凌亂感。所以,現(xiàn)在越來越多的會利用空間的遠(yuǎn)近來對界面內(nèi)容進(jì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ū)分組的因素就是排列的方向。

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

  關(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)。

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

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

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

  

 

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

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

  銀行卡的卡號設(shè)計

  

 

  看上圖,分別報出郵政儲蓄卡和工商銀行卡的卡號。相信郵政儲蓄卡的號碼很難一次性無誤的報出來,并且心里也沒底報的對不對。

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

  

 

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

  

 

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

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

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


  推薦閱讀

  淺析網(wǎng)絡(luò)時代的客戶關(guān)系管理

隨著互聯(lián)網(wǎng)絡(luò)的迅猛發(fā)展、市場的不斷成熟,世界經(jīng)濟(jì)進(jìn)入了電子商務(wù)時代。產(chǎn)品和服務(wù)的差異越來越>>>詳細(xì)閱讀


本文標(biāo)題:<b>用戶體驗分析:界面設(shè)計中的結(jié)構(gòu)設(shè)計</b>

地址:http://www.sdlzkt.com/a/22/20120629/72020.html

樂購科技部分新聞及文章轉(zhuǎn)載自互聯(lián)網(wǎng),供讀者交流和學(xué)習(xí),若有涉及作者版權(quán)等問題請及時與我們聯(lián)系,以便更正、刪除或按規(guī)定辦理。感謝所有提供資訊的網(wǎng)站,歡迎各類媒體與樂購科技進(jìn)行文章共享合作。

網(wǎng)友點評
我的評論: 人參與評論
驗證碼: 匿名回答
網(wǎng)友評論(點擊查看更多條評論)
友情提示: 登錄后發(fā)表評論,可以直接從評論中的用戶名進(jìn)入您的個人空間,讓更多網(wǎng)友認(rèn)識您。
自媒體專欄

評論

熱度

主站蜘蛛池模板: 国产成人精品福利网站在线| 国产成人免费a在线视频色戒| 成人永久免费福利视频app | 成人爽a毛片在线视频| 无码国产成人av在线播放| 成人人免费夜夜视频观看| 国产成人无码午夜视频在线观看| 国产成人av在线影院| 最新69堂国产成人精品视频| 成人a在线观看| 亚洲欧美成人中文日韩电影| 欧美成人午夜做受视频| 国内一级毛片成人七仙女| 亚洲国产成人va在线观看| 成人免费乱码大片a毛片| 久久久久成人精品| 国产69久久精品成人看| 成人一级片在线观看| 91成人免费版| 国产成人一区二区三区| 成人免费视频网站www| 成人试看120秒体验区| 中文字幕在线看片成人| 国产成人a毛片在线| 成人免费毛片视频| 成人毛片18女人毛片| 成人精品一区二区户外勾搭野战| 久久亚洲国产精品成人AV秋霞| 国产成人久久精品亚洲小说 | 国产成人无码AⅤ片在线观看 | 国产成人精品视频一区二区不卡 | 四虎成人永久影院| 国产精品成人网站| 成人无码精品1区2区3区免费看| 亚洲人成人77777网站| 国产成人亚洲综合| 国产成人精品123区免费视频| 国产成人无码A区在线观看导航 | 羞羞漫画在线成人漫画阅读免费| 91亚洲国产成人精品下载| 四虎成人精品无码永久在线|