交互網(wǎng)頁(yè)設(shè)計(jì)原則:整潔清晰明確
在網(wǎng)頁(yè)交互設(shè)計(jì)中,我們提出:信息獲取和傳達(dá)的過(guò)程必須是簡(jiǎn)潔清晰,自然易懂。這樣用戶(hù)才能夠有效的獲取這些信息,并迅速作出決定。
1.什么是“簡(jiǎn)潔自然,清晰易懂”?
簡(jiǎn)潔清晰:使信息最簡(jiǎn)化
“少即是多”。提倡使用最少的元素來(lái)表達(dá)最多的信息。如果信息繁雜,將使用戶(hù)承擔(dān)大量的信息負(fù)擔(dān),造成信息過(guò)載,影響效率,不能幫助用戶(hù)解決問(wèn)題。
自然易懂:使用用戶(hù)語(yǔ)言
用戶(hù)獲取信息的方式多樣,并且對(duì)信息的理解程度也各有不同,所以使用用戶(hù)平時(shí)使用和理解的表達(dá)方式去傳遞信息,更可以被用戶(hù)所接受。
2.信息表述的種類(lèi)與設(shè)計(jì)原則
在網(wǎng)頁(yè)交互設(shè)計(jì)中,用于傳達(dá)給用戶(hù)以有效信息的方式有多種,其中包括:頁(yè)面布局,交互文本,界面色彩,圖像與圖標(biāo),聲音等。
1)頁(yè)面布局
界面中的信息布局,會(huì)直接影響用戶(hù)獲取信息的效率。所以,一般界面的布局因功能不同考慮的側(cè)重點(diǎn)不同,并且會(huì)讓用戶(hù)有一種“區(qū)塊感”,方便用戶(hù)對(duì)信息的掃描性瀏覽。
①界面布局盡量有秩序,排列整齊,防止過(guò)緊或過(guò)松,有明顯的“區(qū)塊感”。切忌混亂。
②布局要充分表現(xiàn)其功能性,對(duì)于每個(gè)區(qū)域所代表的功能應(yīng)有所區(qū)別。如:標(biāo)題區(qū),工作區(qū),提示/幫助區(qū)等
③頁(yè)面中最重要的信息所在的模塊將是在屏幕中最明顯的位置上。并且,應(yīng)該是最大的。
④布局中的信息需要有明顯的標(biāo)志和簡(jiǎn)單介紹,比如標(biāo)題欄和標(biāo)題等。
⑤信息的位置保證一致性,讓用戶(hù)可以無(wú)需重新建立對(duì)頁(yè)面信息分布的理解。
2)交互文本
交互文本指產(chǎn)品界面涉及交互操作中需要用戶(hù)理解并反饋的所有的文字:包括標(biāo)題、按鈕文字、鏈接文字,對(duì)話(huà)框提示、各種提示信息、幫助等。這些文字直接影響用戶(hù)在交互過(guò)程中對(duì)預(yù)期的理解,好的交互文本設(shè)計(jì),可以提高用戶(hù)完成任務(wù)的效率。
①表述的信息盡量口語(yǔ)化,不用或少用專(zhuān)業(yè)術(shù)語(yǔ);
②表述語(yǔ)氣柔和、禮貌,避免使用被動(dòng)語(yǔ)態(tài),否定句等;
③簡(jiǎn)潔、清楚的表達(dá),文字較多要適當(dāng)斷句,盡量避免左右滾屏,折行。
④對(duì)于同種操作的交互文本,操作行文字保持統(tǒng)一性。
⑤字體使用默認(rèn)/標(biāo)準(zhǔn)的字體,大小以用戶(hù)的視覺(jué)清晰分辨為主;
3)界面色彩
人眼一共約能區(qū)分一千萬(wàn)種顏色,所以用戶(hù)與界面中顏色的關(guān)注度非常的高,有效的使用色彩區(qū)分信息的級(jí)別,分類(lèi)等,有助于用戶(hù)對(duì)信息和操作產(chǎn)生關(guān)聯(lián),有效減少用戶(hù)的記憶負(fù)擔(dān)。
①根據(jù)不同的產(chǎn)品使用“場(chǎng)景”,選擇其合適的顏色。如,管理界面經(jīng)常使用藍(lán)色。
②考慮顏色對(duì)用戶(hù)的心理和文化的影響。比如,黃色代表警告,綠色代表成功等。
③避免界面中同時(shí)出現(xiàn)3種以上的顏色。
④顏色的對(duì)比度明顯,如在深色的背景中使用淺色的文字。
⑤使用顏色指導(dǎo)用戶(hù)關(guān)注到到最重要的信息。
4)圖像圖標(biāo)
相對(duì)于單純的文本,圖像以及符號(hào)化的圖標(biāo)更加符合用戶(hù)的認(rèn)識(shí)習(xí)慣。往往表述一種信息,一張圖片或者一個(gè)標(biāo)識(shí)更能讓不同用戶(hù)理解與接受。適當(dāng)?shù)氖褂脠D片與符號(hào)化的圖標(biāo),會(huì)讓用戶(hù)很自然的建立起認(rèn)知習(xí)慣。
①表意清晰,明確,有高度的概括性與指向性,讓用戶(hù)能夠快速的聯(lián)想到對(duì)應(yīng)的功能和操作。
②同類(lèi)或同一緯度的信息,在形式和色彩風(fēng)格上盡量保持一致性;
③僅在突出重要信息,用戶(hù)可能產(chǎn)生理解偏差的情況下使用。避免濫用。
④盡量與交互文本結(jié)合使用。
5)聲音
在網(wǎng)頁(yè)的交互設(shè)計(jì)中,用于聲音的信息表述方式相對(duì)與視覺(jué)來(lái)說(shuō)不是很多。一般應(yīng)用于提示,提醒,幫助等信息的表述。此類(lèi)信息表述讓用戶(hù)通過(guò)聽(tīng)覺(jué)獲取反饋,更加的直接與有效。
①表述清晰,語(yǔ)氣親切,不生硬,有禮貌。
②使用符合用戶(hù)認(rèn)知習(xí)慣的聲音。如,使用敲門(mén)聲提示好友來(lái)訪信息等。
③使用不讓用戶(hù)反感(如:恐怖,惡心,煩躁)的聲音。
④在用戶(hù)可預(yù)知的情況下發(fā)出聲音。
3.小結(jié)
對(duì)于不同的信息表述方式,我們都要求設(shè)計(jì)師在表達(dá)信息的時(shí)候做到簡(jiǎn)潔清晰,自然易懂,盡量讓用戶(hù)覺(jué)得這是自然而然,而且又是清晰明了的信息。就像小溪流水一樣自然,就像軍人命令一樣明確。這樣才會(huì)讓用戶(hù)快速,準(zhǔn)確的完成任務(wù)。(青云)
本文地址:http://irelandcustomcontracting.com/tutorial/id1063.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏