【干貨】設(shè)計(jì)應(yīng)以人為本!淺談APP交互設(shè)計(jì)原則

0 評(píng)論 14637 瀏覽 20 收藏 10 分鐘

為什么需要計(jì)原則?設(shè)計(jì)原則其實(shí)就是對(duì)一些設(shè)計(jì)過(guò)程中基于人類的認(rèn)知規(guī)律對(duì)設(shè)計(jì)做出的一些指導(dǎo)性原則,并且對(duì)已經(jīng)成為行業(yè)共識(shí)的設(shè)計(jì)經(jīng)驗(yàn)做個(gè)總結(jié),用來(lái)指導(dǎo)設(shè)計(jì)師界定問(wèn)題、提高效率。
先來(lái)拋一個(gè)老D在早年剛接觸交互設(shè)計(jì)的時(shí)候最為大家所認(rèn)可的幾條設(shè)計(jì)原則:可學(xué)習(xí)性、一致性、簡(jiǎn)潔性、流暢性、及時(shí)反饋。除了這么六個(gè)?還有其他的嗎?你放心,如果需要還有更多。

一、經(jīng)常用的設(shè)計(jì)原則有哪些?

1.可學(xué)習(xí)性

目標(biāo)用戶在已有的知識(shí)和經(jīng)驗(yàn)基礎(chǔ)上,能正確理解產(chǎn)品界面,無(wú)需要思考而一目了然;或者是用戶通過(guò)自己的學(xué)習(xí),借助提示或幫助說(shuō)明,能夠理解產(chǎn)品界面。則界面具有了可學(xué)習(xí)性。
可學(xué)習(xí)的內(nèi)容包括:明確當(dāng)前所在位置,知道當(dāng)前能干什么、接下來(lái)要干什么,能快速辨別界面中的元素并明白其功能。在設(shè)計(jì)時(shí)可采用合理的隱喻、習(xí)慣用法、有效的啟示。例如手機(jī)中收音機(jī)的調(diào)頻顯示和音量大小控制,模擬真實(shí)收音機(jī),一目了然。其實(shí)這是隱喻的手法,隱喻是非常利于新用戶學(xué)習(xí)的,從現(xiàn)實(shí)世界中直接映射過(guò)來(lái)。

2.一致性

在相似的情景下,應(yīng)在幾個(gè)方面保持一致性:視覺(jué)表現(xiàn)、交互行為、操作結(jié)果。良好的一致性,可以減少用戶學(xué)習(xí)成本培養(yǎng)用戶習(xí)慣,也可體現(xiàn)產(chǎn)品設(shè)計(jì)的嚴(yán)謹(jǐn)。如果有不同,應(yīng)作相應(yīng)的區(qū)別處理,特別是視覺(jué)表現(xiàn)上要予以區(qū)分。

3.簡(jiǎn)潔性

少即是多,盡可能精簡(jiǎn)界面上的元素。當(dāng)設(shè)計(jì)出原型,先將元素減半,然后再看能否再簡(jiǎn)化。生活其實(shí)很簡(jiǎn)單,但很多時(shí)候我們?nèi)藶閷⑵鋸?fù)雜化了。保證主要任務(wù)流程順利完成,消減其余不相關(guān)元素的干擾。

簡(jiǎn)潔體現(xiàn)在三個(gè)方面:

  • 減輕視覺(jué)干擾;
  • 精簡(jiǎn)文字表述;
  • 簡(jiǎn)化操作步驟。

4.流暢性

用戶操作連貫,任務(wù)完成順暢,避免干擾或打斷。明確最基本的核心任務(wù),并保證它的順利執(zhí)行,輔助操作應(yīng)在不影響核心任務(wù)的基礎(chǔ)上展開。

避免干擾,讓用戶明確在特定界面中的首要任務(wù)和目標(biāo),盡可能避免界面上的視覺(jué)噪音和其他干擾;避免打斷,讓用戶的操作保持連貫性,模態(tài)框的使用要謹(jǐn)慎。Gmail在把郵件刪除后,會(huì)將刪除的彈框設(shè)計(jì)成List Notification非模態(tài)這種方式,提醒用戶撤銷剛才的刪除操作,這種的處理,讓刪除的流程更加順暢和輕松自如。

5.及時(shí)反饋

界面中任何可操作的地方,當(dāng)用戶發(fā)生操作時(shí),都應(yīng)該及時(shí)給予反饋。讓用戶了解操作已經(jīng)生效,界面還在用戶的控制之下。反饋內(nèi)容包括:用戶操作反饋和產(chǎn)品狀態(tài)反饋。

操作反饋,指的是界面元素在用戶進(jìn)行滑過(guò)、點(diǎn)擊、移開等操作時(shí),元素的反饋?zhàn)兓?。狀態(tài)反饋,指的是產(chǎn)品在運(yùn)行需要用戶等待或者系統(tǒng)出錯(cuò)時(shí)的反饋,讓用戶明白狀況。迅雷每次下載完成都有聲音提醒音樂(lè)播放時(shí)的進(jìn)度條顯示就是這類反饋。

6.可探索性

用戶在使用產(chǎn)品過(guò)程也是一個(gè)探索過(guò)程,產(chǎn)品應(yīng)該允許用戶犯錯(cuò),即使犯錯(cuò)了也不能埋怨用戶,而且必須給用戶重新嘗試的機(jī)會(huì),讓用戶處于放松的心態(tài)。

設(shè)計(jì)過(guò)程中,首先要幫助用戶避免出錯(cuò),比如采用合適的控件(相同情況下選擇控件比輸入控件出錯(cuò)機(jī)會(huì)更小),給予輸入幫助或啟示。在登陸郵箱的過(guò)程中如果忘記密碼,在登陸圖標(biāo)的旁邊會(huì)有一個(gè)”忘記密碼?”的提示圖標(biāo),來(lái)提醒用戶不用擔(dān)心,點(diǎn)擊進(jìn)入來(lái)解決問(wèn)題。

用戶出錯(cuò)后,需要提供撤銷或返回功能,使用戶返回到上一步操作重新探索。出錯(cuò)反饋要親和,避免責(zé)備用戶或魯莽的打斷或推出產(chǎn)品,要禮貌的指出錯(cuò)誤所在并提供有用的補(bǔ)救建議。

除了這么六個(gè)?還有其他的嗎?你放心,如果需要還有更多。

1. 一個(gè)界面為主要角色設(shè)計(jì),而不是為所有人設(shè)計(jì)。

2. 為日常場(chǎng)景設(shè)計(jì),不要讓邊緣場(chǎng)景主導(dǎo)你的設(shè)計(jì)。

3. 所有的習(xí)慣行為都需要學(xué)習(xí),好的習(xí)慣行為只需學(xué)習(xí)一次。

4. 除了輸入所有的行為支持鼠標(biāo)操作;除了繪圖所有的行為支持鍵盤操作。

5. 在滿足需求的前進(jìn)下,界面的信息越少越好。

6. 在滿足需求的前進(jìn)下,界面的功能越少越好。

7. 在滿足需求的前進(jìn)下,界面的交互次數(shù)越少越好。

8. ?界面的操作方式最好一目了然,不需要幫助。

9. 操作前可預(yù)知;操作中有反饋;操作后可撤消。

10. 充分利用隱喻設(shè)計(jì)。

11. 讓用戶知道身在何處。

12. 界面結(jié)構(gòu)合理、功能布局、措詞統(tǒng)一,突出重點(diǎn)。

13. 日常場(chǎng)景使用的界面應(yīng)放在主要位置,且盡量的大。

14. 一般界面的顏色不超過(guò)3種,且避免大面積使用刺眼的顏色。

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

16. 尊重用戶的習(xí)慣思維和行為,除非你有更好的設(shè)計(jì)。

17. 關(guān)注用戶的目標(biāo),而不是任務(wù)。

18. 盡量避免對(duì)話框,且對(duì)話框深度最多不應(yīng)超過(guò)3級(jí)。

19 …

現(xiàn)在是不是已經(jīng)看到快吐了?

二、設(shè)計(jì)原則這么多,到底該怎么用啊?

老D深切的感受到如果每次做設(shè)計(jì)都按照這些原則一條條的去比對(duì),那么就會(huì)“一條復(fù)一條,原則何其多”,于是老D就簡(jiǎn)化總結(jié)了一下,交互就是設(shè)計(jì)行為,行為就是一連串的動(dòng)作,具體到動(dòng)作中的每一個(gè)環(huán)節(jié)都會(huì)有一個(gè)受動(dòng)的對(duì)象,比如點(diǎn)擊按鈕、彈出窗口、閱讀彈窗內(nèi)容、關(guān)閉彈窗等等,截取整個(gè)一連串動(dòng)作中的一個(gè)對(duì)象——按鈕來(lái)看,分為前、中、后三個(gè)階段:

● 前期:用戶在點(diǎn)擊前對(duì)于點(diǎn)擊后的結(jié)果心理是有個(gè)預(yù)期的,是由之前頁(yè)面的上下文和按鈕本身信息(文案、形狀等)來(lái)決定的;

● 中期:點(diǎn)擊的每一步動(dòng)作都需要按鈕有個(gè)反饋,鼠標(biāo)進(jìn)入按鈕的感應(yīng)區(qū)域、懸浮(hover)在按鈕上,按鈕應(yīng)該自身有個(gè)狀態(tài)的的變化,比如顏色,點(diǎn)擊中也應(yīng)該有個(gè)變化;

● 后期:手動(dòng)點(diǎn)擊后彈出的對(duì)話框是否符合用戶的心理預(yù)期,比如按鈕上邊的文字是“下載”,預(yù)期其實(shí)就是下載文檔,結(jié)果彈出一個(gè)對(duì)話框告訴你積分不夠,這樣做的體驗(yàn)就是不好的。

簡(jiǎn)單的按鈕是這樣,復(fù)雜的登錄注冊(cè)流程甚至是時(shí)間間隔好幾天的流程也是這樣,都適合用這個(gè)三個(gè)階段來(lái)劃分,只是量的大小問(wèn)題。

雖然設(shè)計(jì)原則眾多,但是可以分為四類:

1. 設(shè)計(jì)價(jià)值

這個(gè)是設(shè)計(jì)工作是否有效的必要條件,決定了一下幾個(gè)層次的次級(jí)原則其實(shí)就是這個(gè)設(shè)計(jì)是否符合用戶的需求,是否滿足用戶的目標(biāo),交互設(shè)計(jì)在這一層次能夠?yàn)橛脩糇鍪裁?。這一層做不好,后邊的都免談。

2. 概念設(shè)計(jì)

用來(lái)界定產(chǎn)品定義,產(chǎn)品如何融入廣泛的使用場(chǎng)景,產(chǎn)品是怎么使用的?以什么形式呈現(xiàn)給用戶?是Web還是App?是為新手做引導(dǎo)還是為中間用戶提供方便等等。

3. 行為原則

描述產(chǎn)品在一般情景和特殊情景應(yīng)有的行為,這個(gè)才是我們上邊提到的一堆設(shè)計(jì)原則,什么及時(shí)反饋啦、可學(xué)習(xí)啦。

4. 界面原則

描述行為及信息有效的視覺(jué)傳達(dá),這個(gè)就是“布局要突出重點(diǎn)”啦、“一個(gè)界面同時(shí)最好完成一個(gè)任務(wù)啦”等等。

三、符合設(shè)計(jì)原則與滿足用戶目標(biāo)有沖突時(shí)如何權(quán)衡?

設(shè)計(jì)是的本質(zhì)就是為用戶解決問(wèn)題提供價(jià)值,設(shè)計(jì)以人為本,用戶目標(biāo)是最重要的。

SOURCE:APP營(yíng)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!