為什么需要計原則? 設(shè)計原則其實就是對一些設(shè)計過程中基于人類的認知規(guī)律對設(shè)計做出的一些指導(dǎo)性原則,,并且對已經(jīng)成為行業(yè)共識的設(shè)計經(jīng)驗做個總結(jié),用來指導(dǎo)設(shè)計師界定問題,、提高效率,。 經(jīng)常用的設(shè)計原則有哪些? 先來拋一個老D在早年剛接觸交互設(shè)計的時候最為大家所認可的幾條設(shè)計原則: 1.可學(xué)習(xí)性 目標用戶在已有的知識和經(jīng)驗基礎(chǔ)上,能正確理解產(chǎn)品界面,,無需要思考而一目了然;或者是用戶通過自己的學(xué)習(xí),,借助提示或幫助說明,能夠理解產(chǎn)品界面,。則界面具有了可學(xué)習(xí)性,。 可學(xué)習(xí)的內(nèi)容包括:明確當前所在位置,知道當前能干什么,、接下來要干什么,能快速辨別界面中的元素并明白其功能,。在設(shè)計時可采用合理的隱喻,、習(xí)慣用法,、有效的啟示。例如手機中收音機的調(diào)頻顯示和音量大小控制,,模擬真實收音機,,一目了然。其實這是隱喻的手法,,隱喻是非常利于新用戶學(xué)習(xí)的,,從現(xiàn)實世界中直接映射過來。 2.一致性 在相似的情景下,,應(yīng)在幾個方面保持一致性:視覺表現(xiàn),、交互行為、操作結(jié)果,。良好的一致性,,可以減少用戶學(xué)習(xí)成本培養(yǎng)用戶習(xí)慣,也可體現(xiàn)產(chǎn)品設(shè)計的嚴謹,。如果有不同,,應(yīng)作相應(yīng)的區(qū)別處理,特別是視覺表現(xiàn)上要予以區(qū)分,。淘寶,、當當、唯品會等網(wǎng)購類型的網(wǎng)站,,無論你以什么形式搜索商品,,到最后出現(xiàn)的商品都是以表格形式呈現(xiàn)。到你選擇商品進入詳細頁面,,對應(yīng)位置都有相關(guān)商品的詳細信息,、商品評價。再到添加到購物車或直接購買,,一系列的交互行為都有一致性,。 3.簡潔性 少即是多,盡可能精簡界面上的元素,。當設(shè)計出原型,,先將元素減半,然后再看能否再簡化,。生活其實很簡單,,但很多時候我們?nèi)藶閷⑵鋸?fù)雜化了。保證主要任務(wù)流程順利完成,,消減其余不相關(guān)元素的干擾。 簡潔體現(xiàn)在四個方面:減輕視覺干擾、精簡文字表述,、簡化操作步驟,。孢子社區(qū)的新用戶注冊是我見過在操作步驟和文字描述上最簡潔的,略去了常見的驗證碼,、動態(tài)碼,、重復(fù)輸入密碼的操作。 4.流暢性 用戶操作連貫,,任務(wù)完成順暢,避免干擾或打斷,。明確最基本的核心任務(wù),,并保證它的順利執(zhí)行,輔助操作應(yīng)在不影響核心任務(wù)的基礎(chǔ)上展開,。 避免干擾,讓用戶明確在特定界面中的首要任務(wù)和目標,,盡可能避免界面上的視覺噪音和其他干擾;避免打斷,,讓用戶的操作保持連貫性,,模態(tài)框的使用要謹慎,。Gmail在把郵件刪除后,,會將刪除的彈框設(shè)計成List Notification非模態(tài)這種方式,,提醒用戶撤銷剛才的刪除操作,,這種的處理,讓刪除的流程更加順暢和輕松自如,。5.及時反饋 界面中任何可操作的地方,當用戶發(fā)生操作時,,都應(yīng)該及時給予反饋,。讓用戶了解操作已經(jīng)生效,,界面還在用戶的控制之下,。反饋內(nèi)容包括:用戶操作反饋和產(chǎn)品狀態(tài)反饋。 操作反饋,,指的是界面元素在用戶進行滑過,、點擊,、移開等操作時,元素的反饋變化,。狀態(tài)反饋,,指的是產(chǎn)品在運行需要用戶等待或者系統(tǒng)出錯時的反饋,讓用戶明白狀況,。迅雷每次下載完成都有聲音提醒音樂播放時的進度條顯示就是這類反饋。 6.可探索性 用戶在使用產(chǎn)品過程也是一個探索過程,,產(chǎn)品應(yīng)該允許用戶犯錯,,即使犯錯了也不能埋怨用戶,而且必須給用戶重新嘗試的機會,,讓用戶處于放松的心態(tài),。 設(shè)計過程中,首先要幫助用戶避免出錯,,比如采用合適的控件(相同情況下選擇控件比輸入控件出錯機會更小),,給予輸入幫助或啟示。在登陸郵箱的過程中如果忘記密碼,,在登陸圖標的旁邊會有一個”忘記密碼?”的提示圖標,,來提醒用戶不用擔(dān)心,點擊進入來解決問題,。用戶出錯后,,需要提供撤銷或返回功能,使用戶返回到上一步操作重新探索,。出錯反饋要親和,,避免責(zé)備用戶或魯莽的打斷或推出產(chǎn)品,要禮貌的指出錯誤所在并提供有用的補救建議,。 這幾個條真的是比較經(jīng)典,,不斷體會并運用這幾條設(shè)計原則就讓當時不少設(shè)計師在當時的情形下做起了交互設(shè)計,當時國內(nèi)市面上靠譜交互設(shè)計書的數(shù)量一把手就能數(shù)完了,。 就這么六個?還有其他的嗎?你放心,,如果需要還有更多 1.一個界面為主要角色設(shè)計,而不是為所有人設(shè)計,。 2 .為日常場景設(shè)計,,不要讓邊緣場景主導(dǎo)你的設(shè)計。 3 .所有的習(xí)慣行為都需要學(xué)習(xí),,好的習(xí)慣行為只需學(xué)習(xí)一次。 4 .除了輸入所有的行為支持鼠標操作;除了繪圖所有的行為支持鍵盤操作,。 5 .在滿足需求的前進下,,界面的信息越少越好,。 6. 在滿足需求的前進下,界面的功能越少越好,。 7 .在滿足需求的前進下,,界面的交互次數(shù)越少越好。 8. 界面的操作方式最好一目了然,,不需要幫助,。 9 .操作前可預(yù)知;操作中有反饋;操作后可撤消。 10 .充分利用隱喻設(shè)計,。 11 .讓用戶知道身在何處,。 12 .界面結(jié)構(gòu)合理、功能布局,、措詞統(tǒng)一,,突出重點,。 13. 日常場景使用的界面應(yīng)放在主要位置,,且盡量的大,。 14 .一般界面的顏色不超過3種,且避免大面積使用刺眼的顏色,。 15 .減少用戶的記憶負擔(dān),盡量讓用戶識別,,而不是回憶。 16. 尊重用戶的習(xí)慣思維和行為,,除非你有更好的設(shè)計,。 17 .關(guān)注用戶的目標,而不是任務(wù),。 18. 盡量避免對話框,,且對話框深度最多不應(yīng)超過3級。 19 ... 現(xiàn)在是不是已經(jīng)看到快吐了?嘿嘿 設(shè)計原則這么多,,到底該怎么用啊? 老D深切的感受到如果每次做設(shè)計都按照這些原則一條條的去比對,,那么就會“一條復(fù)一條,原則何其多”,,于是老D就簡化總結(jié)了一下,,交互就是設(shè)計行為,,行為就是一連串的動作,,具體到動作中的每一個環(huán)節(jié)都會有一個受動的對象,,比如點擊按鈕,、彈出窗口,、閱讀彈窗內(nèi)容,、關(guān)閉彈窗等等,,截取整個一連串動作中的一個對象--按鈕來看,分為前,、中,、后三個階段: 前期-用戶在點擊前對于點擊后的結(jié)果心理是有個預(yù)期的,,是由之前頁面的上下文和按鈕本身信息(文案,、形狀等)來決定的; 中期-點擊的每一步動作都需要按鈕有個反饋,,鼠標進入按鈕的感應(yīng)區(qū)域、懸浮(hover)在按鈕上,,按鈕應(yīng)該自身有個狀態(tài)的的變化,比如顏色,,點擊中也應(yīng)該有個變化; 后期-手動點擊后彈出的對話框是否符合用戶的心理預(yù)期,,比如按鈕上邊的文字是“下載”,預(yù)期其實就是下載文檔,,結(jié)果彈出一個對話框告訴你積分不夠,,這樣做的體驗就是不好的。 簡單的按鈕是這樣,,復(fù)雜的登錄注冊流程甚至是時間間隔好幾天的流程也是這樣,,都適合用這個三個階段來劃分,只是量的大小問題,。 其實還有一個更為專業(yè)的劃分方法(交互設(shè)計精髓里邊說的),,老D說一下看小伙伴們是否能搞的懂哈 雖然設(shè)計原則眾多,但是可以分為四類: 一,、設(shè)計價值:這個是設(shè)計工作是否有效的必要條件,,決定了一下幾個層次的次級原則 二、概念設(shè)計:用來界定產(chǎn)品定義,,產(chǎn)品如何融入廣泛的使用場景 三,、行為原則:描述產(chǎn)品在一般情景和特殊情景應(yīng)有的行為 四、界面原則:描述行為及信息有效的視覺傳達 親愛的小伙伴,,看不太懂吧?嘿嘿,,老D來解讀一下吧! 設(shè)計價值:其實就是這個設(shè)計是否符合用戶的需求,是否滿足用戶的目標,,交互設(shè)計在這一層次能夠為用戶做什么,。這一層做不好,后邊的都免談 概念設(shè)計:產(chǎn)品是怎么使用的?以什么形式呈現(xiàn)給用戶?是Web還是App?是為新手做引導(dǎo)還是為中間用戶提供方便等等 行為原則:這個才是我們上邊提到的一堆設(shè)計原則,,什么及時反饋啦,、可學(xué)習(xí)啦,。 界面原則:這個就是“布局要突出重點”啦、“一個界面同時最好完成一個任務(wù)啦”等等 Alan Cooper不愧是大師,,提出的四個層次一下就把那么多零七碎八的設(shè)計原則統(tǒng)統(tǒng)收在自己的框架之下了,。 符合設(shè)計原則與滿足用戶目標有沖突時如何權(quán)衡? 設(shè)計是的本質(zhì)就是為用戶解決問題提供價值,設(shè)計以人為本,,用戶目標是最重要的,。 關(guān)注 互聯(lián)網(wǎng)的一些事 官方微信,回復(fù)" 18342 " 即可在微信里閱讀本篇內(nèi)容,。 在查找公眾號中搜索:imyixieshi,,或者掃描下方二維碼快速關(guān)注。 |
|