《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》(第二版)筆記三

Chapter Three?我們探索和利用視覺結(jié)構(gòu)

組織精練、具有結(jié)構(gòu)化特點(diǎn)并遵從圖形設(shè)計(jì)規(guī)則的信息,人們更容易理解和瀏覽。

1.結(jié)構(gòu)化優(yōu)于松散結(jié)構(gòu)

下面的機(jī)票預(yù)訂信息展示明顯更加利于瀏覽、理解

2. 精煉的重要性

不要讓重要信息淹沒在散亂重復(fù)的文字之中

3.?遵從圖形設(shè)計(jì)的規(guī)則

成功的設(shè)計(jì)要求用戶不必依靠主動(dòng)思考就能明白標(biāo)簽的值和值之間的對(duì)應(yīng)關(guān)系

??長(zhǎng)數(shù)字分段

分隔字段是信息更具有可讀性,還能防止輸入錯(cuò)誤,可參考的方法有:用戶界面明確地為不同部分提供獨(dú)立字段;界面提供一個(gè)字段,但允許用戶輸入時(shí)將號(hào)碼用空格或者其他符合分隔開。

??控件優(yōu)化結(jié)構(gòu)

用適合的控件來顯示某個(gè)具體類型的數(shù)據(jù)的值和接收輸入,這比(不論是分割還是不分割的)文本輸入框要更便于用戶輸入信息。也可將二者(文本框和控件)合并起來使用。

??視覺層次優(yōu)化

當(dāng)用戶查看信息時(shí),視覺層次能夠讓人從與其目標(biāo)不想管的內(nèi)容中立刻區(qū)分出與其目標(biāo)更相關(guān)的內(nèi)容,并將注意力放在他們所關(guān)心的信息上。因?yàn)樗麄兡軌蜉p松地跳過不相關(guān)的信息,所以能更快地找到要找的內(nèi)容。

方法

a. 信息分段,大塊整段的信息分割為各個(gè)小段

b. 顯著標(biāo)記每個(gè)信息段和子段

c. 以一個(gè)層次結(jié)構(gòu)來展現(xiàn)各段及其子段,使得上層的段能夠比下層更重點(diǎn)地被展示

視覺層次優(yōu)化例子
Remember me

注:總結(jié)都是根據(jù)個(gè)人理解整理記錄,若有疑問或異議,請(qǐng)參考原著~另外期待各位大大們的指正和討論!~(@^_^@)~

《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》(第二版)筆記四

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容