網(wǎng)頁(yè)交互設(shè)計(jì)基礎(chǔ)

“以用戶為中心，提高產(chǎn)品的易用性及用戶滿意度！”做為交互設(shè)計(jì)的目標(biāo)，如何應(yīng)用到實(shí)際工作中？如何評(píng)價(jià)產(chǎn)品是否以用戶為中心？避免因?yàn)轫?xiàng)目時(shí)間緊、任務(wù)重、人員不足等因素，而犧牲用戶利益，降低產(chǎn)品體驗(yàn)，進(jìn)而降低產(chǎn)品競(jìng)爭(zhēng)力。以下交互設(shè)計(jì)原則就像茫茫大海中的燈塔，指引著我們前進(jìn)的方向…

文不如表，表不如圖。

文字傳遞信息相對(duì)不夠直觀，特別是邏輯、流程表達(dá)，表格相對(duì)條理性清晰一些，但仍不如圖片表達(dá)清晰，例如流程圖、趨勢(shì)圖、柱狀圖、天氣預(yù)報(bào)、路況圖等。
例一：天氣預(yù)報(bào)

例二：實(shí)時(shí)路況

關(guān)注用戶目標(biāo)，而非任務(wù)。

讓用戶成功，產(chǎn)品才會(huì)成功，也是產(chǎn)品設(shè)計(jì)的目標(biāo)，但完成目標(biāo)的途徑很多，抓住用戶的目標(biāo)，進(jìn)行產(chǎn)品設(shè)計(jì)，經(jīng)常事半功倍。
例一：家用溫/濕度計(jì)
用戶的任務(wù)是想知道房間內(nèi)的溫度及溫度，而目的想了解房間內(nèi)的溫度及濕度是否合適，所以給用戶提供準(zhǔn)確的溫度、濕度值，并不是用戶真正想要的，所以需要顯示舒服溫度及濕度對(duì)應(yīng)的區(qū)間值，對(duì)用戶更有幫助。

例二：搜索“天氣預(yù)報(bào)”
用戶希望看天氣情況，搜索“天氣預(yù)報(bào)”，用戶的任務(wù)包括：輸入搜索關(guān)鍵字，在搜索結(jié)果中點(diǎn)擊文字鏈接；關(guān)注用戶的目標(biāo)，就應(yīng)該直接顯示天氣情況，給予用戶超越預(yù)期的結(jié)果。

減少用戶的記憶負(fù)擔(dān)，盡量讓用戶識(shí)別，而不是回憶

人類與電腦相比，人類擅長(zhǎng)的是識(shí)別及思考，電腦擅長(zhǎng)的是記憶，因此，盡量減少用戶的記憶負(fù)擔(dān)，讓電腦做它擅長(zhǎng)的事情。
例一：交互優(yōu)化“設(shè)置界面”
原始界面的設(shè)置項(xiàng)很多，且以文字為主，增加了用戶的理解及操作負(fù)擔(dān)；優(yōu)化后增加了對(duì)應(yīng)的圖標(biāo)，提高可識(shí)別性，減少用戶的記憶負(fù)擔(dān)，另外使用滑動(dòng)條代替手工輸入，減輕操作負(fù)擔(dān)；最后刪除了“設(shè)置兒童鎖”的設(shè)置項(xiàng)，降低了用戶的設(shè)置負(fù)擔(dān)，符合“滿意用戶需求的前提下，界面的信息及功能越少越好！”的原則。
原始設(shè)置界面：（待優(yōu)化）

優(yōu)化后設(shè)置界面：

操作前可預(yù)知；操作中有反饋；操作后可撤消

操作前可預(yù)知：人類對(duì)未知事物會(huì)產(chǎn)生恐懼感、焦慮感，如果你在執(zhí)行一項(xiàng)操作之前，如果不能夠準(zhǔn)備判斷出后果，便會(huì)感到恐懼，不會(huì)輕易操作，如果操作之后的后果與預(yù)期不一致，便會(huì)產(chǎn)生挫敗感，進(jìn)而中斷任務(wù)流，打破沉浸狀態(tài)，進(jìn)而影響效率，甚至用戶離開該界面，不再繼續(xù)操作，因此，軟件界面滿足用戶的心智模型，將會(huì)更大程度的滿足用戶的操作預(yù)期。

操作中有反饋：反饋意味著操作的有效性，盡量所見(jiàn)即所得的方式，直觀顯示操作效果。
例二：改變文字的字符、大小、樣式、進(jìn)度條等。

操作后可撤銷：“撤銷”可以給用戶一定的安全感，允許用戶犯錯(cuò)誤，滿足用戶的嘗試心理，不必?fù)?dān)心誤操作的發(fā)生，降低用戶的心理負(fù)擔(dān)。
例三：回收站、“取消”按鈕、Ctrl+Z。

充分利用隱喻設(shè)計(jì)、擬物設(shè)計(jì)。

根據(jù)用戶對(duì)已知事物的認(rèn)知，抓住軟件功能與現(xiàn)實(shí)事物的共性特點(diǎn)，進(jìn)行擬物化設(shè)計(jì)，降低用戶的學(xué)習(xí)成本，提高產(chǎn)品的易用性、趣味性：
例一：回收站：結(jié)合用戶對(duì)日常垃圾箱的認(rèn)識(shí)，設(shè)計(jì)文件回收站

例二：圖書軟件：瀏覽圖書界面布局采用書柜的視覺(jué)設(shè)計(jì)，趣味性更高。

做對(duì)容易，做錯(cuò)難

是人就會(huì)犯錯(cuò)誤，從設(shè)計(jì)的角度考慮避免錯(cuò)誤的發(fā)生，將是產(chǎn)品設(shè)計(jì)的原則之一，常見(jiàn)的處理方式有：禁用狀態(tài)、隱藏處理、默認(rèn)值等。“禁用、隱藏”不僅可以避免錯(cuò)誤操作，而且也會(huì)降低信息干擾。
例一：確認(rèn)按鈕的點(diǎn)擊幾率遠(yuǎn)遠(yuǎn)大于取消按鈕，所以放大醒目顯示該按鈕，將盡量避免用戶的誤操作。

例二：如果該手機(jī)不支持SIM熱插拔，則采用該限制性條件設(shè)計(jì)，將有效避免誤操作。

例三：選擇某條信息，對(duì)應(yīng)的操作按鈕：修改、刪除、禁用、啟用、排序等按鈕變?yōu)榭捎脿顟B(tài)。

操作方式一目了然，不需要說(shuō)明書

利用日常生活中養(yǎng)成的習(xí)慣，從外觀上給用戶操作暗示，降低用戶的學(xué)習(xí)成本。
例如：微波爐門使用門把手的設(shè)計(jì)，其操作方式更加一目了然。

讓產(chǎn)品適應(yīng)用戶，而非用戶適應(yīng)產(chǎn)品；

尊重用戶，讓我們的產(chǎn)品具有情感，更懂用戶，降低用戶的思考與行為！
例如：
1.檢查更新：有最新版本時(shí)，直接顯示出來(lái)，避免手動(dòng)檢測(cè)是否有最新版本；
2.意見(jiàn)反饋：打開意見(jiàn)反饋界面，默認(rèn)光標(biāo)在意見(jiàn)輸入框，且顯示常用中英文鍵盤；
3.聯(lián)系方式：軟件判斷輸入的聯(lián)系方式是郵箱、QQ，還是手機(jī)號(hào)，避免用戶去選擇；

產(chǎn)品符合用戶心智模型，避免實(shí)現(xiàn)模型

心智模型是用戶根據(jù)習(xí)慣思維，對(duì)事物的理解；實(shí)現(xiàn)模型是產(chǎn)品的實(shí)際工作原理及表現(xiàn)形式。產(chǎn)品符合用戶的預(yù)期，用戶則認(rèn)為該產(chǎn)品易用。
例如：企業(yè)OA論壇及考勤需要兩個(gè)不同的登錄窗口，且為不同的登錄帳號(hào)，該設(shè)計(jì)從技術(shù)實(shí)現(xiàn)的角度考慮是合理的，但從用戶的角度考慮，增加了用戶的操作成本及記憶負(fù)擔(dān)。

綜上所述，易用的產(chǎn)品是相似的，難用的產(chǎn)品各有各的難用！以上為交互設(shè)計(jì)基本原則，且遠(yuǎn)不止這幾條，將在以后的工作中，陸續(xù)總結(jié)分享更多的交互原則…