1. 經(jīng)典交互設(shè)計原則圖文解析

        共 4059字,需瀏覽 9分鐘

         ·

        2021-07-16 13:06


        作者 | 薛老板

        排版 | 薛小助


        所謂的“用戶體驗”,其實用戶可感知的就是前端的交互設(shè)計,所以交互設(shè)計一定是互聯(lián)網(wǎng)人的必備技能。


        總結(jié)的比較系統(tǒng),互聯(lián)網(wǎng)產(chǎn)品設(shè)計參考最多的是:尼爾森可用性原則。


        尼爾森的十大可用性原則是我們秋招筆試出題過程中經(jīng)常考察的知識點,也是做產(chǎn)品經(jīng)理之后做產(chǎn)品設(shè)計與提升用戶體驗設(shè)計的重要參考標(biāo)準(zhǔn),值得深入研究與運(yùn)用。


        尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根,丹麥技術(shù)大學(xué)的人機(jī)交互博士 ,于1995年1月1日發(fā)表了「十大可用性原則」。同時, 他擁有79項美國專利,專利主要涉及讓互聯(lián)網(wǎng)更容易使用的方法。尼爾森在2006年4月,并被納入美國計算機(jī)學(xué)會人機(jī)交互學(xué)院,被賦予人機(jī)交互實踐的終身成就獎 ??梢钥闯鰜磉€是很牛的。


        接下來我們就來看看這十大原則分別是什么:





        1

        狀態(tài)可見原則

        首先,系統(tǒng)應(yīng)該讓用戶知道發(fā)生了什么,在適當(dāng)?shù)臅r間內(nèi)做出適當(dāng)?shù)姆答?/span>。這條很簡單,就是指用戶的每次操作,你都得給他個反饋,成功了就告訴他成功了,失敗了就告訴他失敗了。
        比如京東領(lǐng)優(yōu)惠,如果成功了會彈個提示“領(lǐng)取成功,感謝您的參與”,當(dāng)然如果領(lǐng)取失敗也會彈一個類似的提示

        還比如今日頭條的下拉刷新功能:頭條頁面的刷新功能使用的是下拉刷新的交互方式,當(dāng)用戶下拉頁面時,頁面狀態(tài)欄跟內(nèi)容區(qū)中間會出現(xiàn)“推薦中”的動態(tài)提示,加載完畢之后中間出現(xiàn)一條“今日頭條推薦引擎有18條更新”的文字提示;這一系列的提示就是我們所說的狀態(tài)可見原則,如下圖:


        其次,狀態(tài)可見原則還指用戶在產(chǎn)品上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應(yīng)即時給出反饋?!凹磿r”是指,頁面響應(yīng)時間小于用戶能忍受的等待時間。

        如果反應(yīng)時間有點慢,也請用進(jìn)度條or等待or下載等動效或其他形式告訴用戶當(dāng)下的情況;千萬別讓用戶在懵逼的一直等,不知道發(fā)生了什么。

        比如我就見過一個產(chǎn)品的加載頁面是兩個卡通動物聊天的形式,還挺有意思的,不知不覺就加載完了,這樣讓等待過程變的可以忍受。

        這都屬于狀態(tài)可見原則的范疇。



        2

        環(huán)境貼切原則


        環(huán)境貼切原則是指:系統(tǒng)的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境(包括:年齡、學(xué)歷、文化、時代背景)。
        《iPhone人機(jī)交互指南》里提到的隱喻與擬物化就是對這一個原則很好的實踐,比如下面這些圖標(biāo)的設(shè)計就是很好的擬物化。

        還比如電商里的購物車,在電商出現(xiàn)之前,我們?nèi)コ匈I東西就會進(jìn)門推一個購物車,然后把想要的東西都放進(jìn)去,然后一起結(jié)賬。電商出現(xiàn)之后,大家看到購物車圖標(biāo)會感覺很親切,不用思考也知道這個購物車是什么意思。

        此外,文字?jǐn)⑹霾糠诌€應(yīng)該使用易懂和約定俗成的表達(dá)。說的直白一些,就是3個字:說人話。
        比如你們的目標(biāo)用戶群體是老年人,那你的表述要按照他們的常用語去敘述;如果你的目標(biāo)用戶群體是小學(xué)生,那你就要換一套表述方法了。



        3

        用戶可控原則


        用戶可控原則是指:為了避免用戶的誤操作,系統(tǒng)應(yīng)提供撤銷和重做功能。這種針對的就是那種容易發(fā)生誤操作的場景。
        比如我們正在word里寫PRD,這時候你的貓?zhí)芥I盤上,噼里啪啦打了一堆火星文,這時候撤銷功能就很好用了;
        還比如微信聊天中的撤回功能:兩個人在微信中聊天的時候,我發(fā)了一條消息或者表情,突然覺得不合適,我可以在長按這條消息或者表情,在出現(xiàn)的選擇框中選擇撤回,然后重新編輯發(fā)送,來避免一時沒想好而錯發(fā)消息可能給對方或者自己造成困擾。

        還比如一些機(jī)器設(shè)備的reset按鈕,重啟按鈕等等。

        這都是遵循用戶可控原則做的設(shè)計。




        4

        一致性原則


        對于用戶的預(yù)期來說,同樣的文字、狀態(tài)、按鈕,都應(yīng)該觸發(fā)相同的事情;這就是一致性原則,也就是,同一用語、功能、操作保持一致。
        軟件產(chǎn)品的一致性包括以下五個方面。
        結(jié)構(gòu)一致性:保持一種類似的結(jié)構(gòu),新的結(jié)構(gòu)變化會讓用戶思考,規(guī)則的排列順序能減輕用戶的思考負(fù)擔(dān);
        例如微信每個模塊的條目布局:微信中每個模塊的條目都有統(tǒng)一的“圖標(biāo)+文字信息”的結(jié)構(gòu)樣式,能讓用戶快速了解朋友圈、掃一掃、搖一搖、看一看、搜一搜、附近的人、漂流瓶、購物、游戲及小程序等功能都是做什么的,這就是結(jié)構(gòu)一致性的體現(xiàn)。

        色彩一致性:產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的,而不是同一個產(chǎn)品使用多種色調(diào);
        例如網(wǎng)易云音樂的顏色:網(wǎng)易云音樂的圖標(biāo)顏色與界面的主色均為紅色,也包括其中一些標(biāo)簽和強(qiáng)調(diào)的文字顏色都是紅色,整個界面除了圖片的有效信息外,都通過灰、白、紅色來呈現(xiàn),界面保持了很好的一致性,這就是色彩一致性原則,如下圖: 

        操作一致性:能讓產(chǎn)品更新?lián)Q代時仍然讓用戶保持對原產(chǎn)品的認(rèn)知,減小用戶的學(xué)習(xí)成本;
        比如知乎的關(guān)注功能,關(guān)注分為關(guān)注個人和關(guān)注專欄,但本質(zhì)上都是關(guān)注功能,所以知乎按照操作一致性原理設(shè)計了這個功能。關(guān)注前都是藍(lán)色背景白色文案,點擊之后文案變?yōu)椤耙殃P(guān)注”,同時背景色變?yōu)榛疑?/span>
        這就是操作一致性的體現(xiàn),如下圖:

        反饋一致性:用戶在操作按鈕或者條目的時候,點擊的反饋效果應(yīng)該是一致的;
        比如手機(jī)QQ信息列表的打開方式:它的信息都是列表式結(jié)構(gòu),不管你點擊哪一行條目,下一級界面都是由右往左滑出,點擊頂部左上角的返回按鈕會從左往右滑回,體驗相當(dāng)一致;這就是反饋一致性的體現(xiàn),如下動圖:

        文字一致性:產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局等都應(yīng)該是一致的;
        例如微信幾個關(guān)鍵界面的字體:下圖我用紅色框框起來的條目部分的文字,三個主界面不盡相同,但是,字體大小、顏色、布局的樣式都一樣,這樣讓整個APP視覺上看起來很舒服,這就是字體一致性,因此,我們在做視覺設(shè)計的時候盡量使用統(tǒng)一風(fēng)格的文字。 





        5

        防錯原則

        防錯原則的定義是:通過系統(tǒng)的設(shè)計、重組或特別安排,防止用戶出錯。
        首先,如果某些操作不能進(jìn)行,那就置灰或隱藏,不要在用戶點擊后才提醒不能操作。
        比如在手機(jī)號登錄過程中,手機(jī)號沒有輸入完成,獲取驗證碼按鈕是置灰的;如果輸入的11位不是手機(jī)號,比如567 8123 5678,也是置灰的。
        只有當(dāng)11位手機(jī)號輸入完成,并且符合手機(jī)號規(guī)則時,獲取驗證碼按鈕才會變?yōu)榭牲c擊狀態(tài)。


        其次,如果有某些內(nèi)容不能選擇,就置灰或者隱藏,不要等用戶點擊完成時才告知不能使用。
        比如淘寶這個我想買個手機(jī),選擇了5.5寸,套餐選擇官方標(biāo)配,版本選擇美國之后,存儲容量就只有128G可以選擇了,32G的是沒有的,所以置灰了,變?yōu)椴豢牲c擊狀態(tài)。

        這就是防錯原則。




        6

        易取原則


        易取原則是指:通過把組件、按鈕及選項可見化,來降低用戶的記憶負(fù)荷。軟件的使用指南應(yīng)該是可見的,且在合適的時候可以再次查看,不需要讓用戶記憶才可以正確操作。
        比如騰訊視頻的鎖定功能引導(dǎo):當(dāng)你切換橫屏和豎屏的時候,在屏幕中間會提示“點擊鎖定”,還包含新推出的播放中長按快進(jìn)快退功能,這些提示告訴用戶功能所在的地方以及操作方法,不需要用戶憑記憶來操作;這就是易取原則的一種體現(xiàn),看下圖:



        7

        靈活高效原則


        產(chǎn)品的用戶總是會分為新手小白用戶、熟練用戶,靈活高效原則就是指通過一定的設(shè)計來滿足不同水平的用戶需求,允許用戶定制常用功能。

        比如絕大多數(shù)產(chǎn)品都有新手引導(dǎo)功能,對于新用戶來說是需要通過這些信息來了解一個產(chǎn)品的,但是對于老用戶來說可能就不需要了,所以在新手引導(dǎo)中提供一個跳過功能,對老用戶是比較友好的。
        還比如支付寶中的編輯應(yīng)用功能:支付寶首頁的應(yīng)用是可以根據(jù)自身喜好自定義的,包括定義常用應(yīng)用、排序、刪除、新增等等;這樣用戶可以根據(jù)自己的個人興趣定制自己適合的應(yīng)用分布方式,這就叫做用戶定制常用功能,也就是靈活高效原則的一種體現(xiàn),如下圖:




        8

        易掃原則

        互聯(lián)網(wǎng)用戶瀏覽頁面的動作不是讀,不是看,而是掃。如果大家做過眼動實驗,也就是通過眼動儀觀察大家在頁面的視線軌跡,大概類似于一個F型,這同樣也是尼爾森F模型提到的理論。

        易掃,意味著突出重點,任何不相關(guān)的信息都會讓原本重要的信息更難被用戶察覺,所以要弱化和剔除無關(guān)信息。
        蘋果手機(jī)中自帶的軟件(IOS11設(shè)計規(guī)范):在新版本的蘋果手機(jī)中自帶的軟件中標(biāo)題都屬于字體放大,界面簡潔的設(shè)計風(fēng)格;還有蘋果自帶的音樂軟件中,段落中的標(biāo)題和正文區(qū)別是很明顯的,標(biāo)題明顯很大,而正文部分相對較小,這就是優(yōu)美簡約原則的體現(xiàn),如下圖:




        9

        容錯原則

        容錯原則是指:要幫助用戶從錯誤中恢復(fù),將損失降到最低,例如頁面的自動保存,現(xiàn)在word和石墨文檔等工具做的都不錯。
        如果錯誤無法自動挽回,則提供詳盡的說明文字和指導(dǎo)方向,幫助用戶識別出錯誤,分析出錯誤的原因再幫助用戶回到正確的道路上
        比如網(wǎng)易郵箱PC端的注冊界面:用戶在網(wǎng)易163電腦端注冊郵箱時,在輸入出錯時不但會出現(xiàn)錯誤的提示,還會給出相應(yīng)的建議,幫助用戶進(jìn)行正確的抉擇,這樣就避免用戶出現(xiàn)更大的失誤并且提高了注冊的效率,這是一種相當(dāng)好的用戶體驗,也是容錯原則的一種體現(xiàn),如下圖:




        10

        人性化幫助原則


        幫助原則是指:當(dāng)用戶需要幫助的時候,適當(dāng)?shù)慕o于幫助入口,不要讓用戶遇到問題不知道怎么辦。

        當(dāng)然,最好的系統(tǒng)設(shè)計是不需要提示用戶就能知道怎么操作,但是在一些比較重要的入口還是需要提供必要的幫助入口的。
        例如淘寶APP和知乎APP登錄頁面的幫助入口:這個場景下用戶可能忘記密碼了,或者賬號出現(xiàn)問題了需要找客服申訴等等,這時候提供一個幫助入口可以避免用戶遇到問題后手足無措。

        以上,就是對尼爾森十大原則根據(jù)我自己的理解的解析,希望對你有所幫助。

        訓(xùn)練交互能力的一個超級實用辦法是:用尼爾森十大交互原則進(jìn)行案例分析,例如把應(yīng)用商店排名前100的APP下載安裝,進(jìn)行尼爾森十大交互原則的分析。

        哪些做的好,哪些交互還有問題,如果是你來設(shè)計,你會如何優(yōu)化,可以拿自己的分析案例和產(chǎn)品同事、設(shè)計師同事進(jìn)行探討,在交流中互相學(xué)習(xí)提升。
        以上就是我們在做交互設(shè)計的時候需要時刻考慮的交互規(guī)范。

        瀏覽 123
        點贊
        評論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報
        評論
        圖片
        表情
        推薦
        點贊
        評論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報
          
          

            1. 国产日韩一区二区三免费高清 | 久操视频网| 极品少妇XXXX精品少妇偷拍 | 新加坡毛片| 色欲网站在线网页 |