互動設計原則分析

韓冰雪發表於2019-02-28

互動設計原則分析

尼爾森十大互動原則

1.狀態可見原則(Visibility of system status )

系統應該讓使用者時刻清楚當前發生了什麼事情,也就是快速的讓使用者瞭解自己處於何種狀態、對過去發生、當前目標、以及對未來去向有所瞭解,一般的方法是在合適的時間給使用者適當的反饋,防止使用者使用出現錯誤。

例一: 當使用者點選按鈕後,由於網路速度等因素載入過慢時,給使用者明確展示出按鈕處於載入的狀態,如果不這樣做,使用者就會迷茫、不知所措,自己明明點選了按鈕卻沒有反應,這樣就會出現反覆點選的情況,從而降低使用者的好感度。

互動設計原則分析

例二: 該介面中的日期選擇,選定的日期底色為綠色高亮顯示,讓使用者清晰明瞭的知曉當下選擇的日期,與此同時當天的日期運用綠色的描邊圓來顯示,提示使用者當前日期。以及其標籤欄的中當前頁面圖示高亮,其他圖示熄滅,是告訴用當前所在頁面,也是運用了狀態可見原則。

互動設計原則分析

2:環境貼切原則(Match between system and the real world)

軟體系統應該使用使用者熟悉的語言、文字、語句,或者其他使用者熟悉的概念,而非系統語言。軟體中的資訊應該儘量貼近真實世界,讓資訊更自然,邏輯上也更容易被使用者理解。

例: 依然以這個頁面為例,在給改按鈕定欄位時它完全可以定為“簽到”,但實際運用中是通過掃二維碼來簽到的,故運用“掃碼簽到”更貼合實際運用場景;且簽到是該應用的核心功能,故該按鈕重量級相對其他元素要大;對使用者而言這種設計是非常友好的,首先他可以一眼找到核心功能,其次通過字面意思就可以知曉該如何操作。

互動設計原則分析

3:使用者可控原則(User control and freedom)

使用者常常會誤觸到某些功能,我們應該讓使用者可以方便的退出。這種情況下,我們應該把“緊急出口”按鈕做的明顯一點,而且不要在退出時彈出額外的對話方塊。很多使用者傳送一條訊息、總會有他忽然意識到自己不對的地方,這個叫做臨界效應;所以最好支援撤銷/重做功能。

例一: 該頁面中關注房源的圖示按鈕就是可以使用者自行操作,如果誤操作關注了自己不想關注的房源,使用者就可以再次點選圖示按鈕取消關注。

互動設計原則分析

例二: 釘釘支援撤回所發的資訊。這一功能對於經常手誤的使用者比較實用,給他們提供了補救的辦法。這就是使用者可控原則。

互動設計原則分析

4:一致性原則(Consistency and standards)

對於使用者來說,同樣的文字、狀態、按鈕,都應該觸發相同的事情,遵從通用的平臺慣例;也就是,同一用語、功能、操作保持一致。軟體產品的一致性包括以下五個方面:

(1)結構一致性: 保持一種類似的結構,新的結構變化會讓使用者思考,規則的排列順序能減輕使用者的思考負擔;

例: 下圖所示功能項的展示方式均為輔助圖示加功能文字描述,統一的結構、統一的佈局方式,讓使用者在始終熟悉的感覺下體驗著產品的不同功能點。

互動設計原則分析
(2)色彩一致性: 產品所使用的主要色調應該是統一的,而不是換一個頁面顏色就不同; 例: 該產品主色調是綠色的,因而不同頁面的圖示顏色與介面的主色均為綠色,也包括其中一些標籤和強調的文字顏色都是綠色,整個介面除了圖片外,都通過灰、白、綠色來呈現,介面保持了很好的一致性,這就是色彩一致性原則。
互動設計原則分析
(3)操作一致性: 能讓產品更新換代時仍然讓使用者保持對原產品的認知,減小使用者的學習成本;

例: 各個app中返回上一級的返回按鈕都在左上角,點選這個箭頭進行返回操作。這一標識在使用者群中已經達成了共識。

互動設計原則分析
(4)反饋一致性: 使用者在操作按鈕或者條目的時候,點選的反饋效果應該是一致的;

例: 大多數app中一般情況下,下拉都是重新整理的反饋,都會出現重新整理loading,體驗相當一致

互動設計原則分析
(5) 文字一致性:產品中呈現給使用者閱讀的文字大小、樣式、顏色、佈局等都應該是一致的;

例: 該頁面中框選的文字大小、顏色、佈局的樣式都一樣,就連欄位長度都一致。這樣使用者在運用過程中就會有一定的熟悉感,降低學習成本。

互動設計原則分析

5:防錯原則(Error prevention)

比一個優秀錯誤提醒彈窗更好的設計方式,是在這個錯誤發生之前就避免它。可以幫助使用者排除一些容易出錯的情況,或在使用者提交之前給他一個確認的選項。在此,特別要注意在使用者操作具有毀滅性效果的功能時要有提示,防止使用者犯不可挽回的錯誤。

例一: 當使用者刪除某些資訊時,給出再次確認的彈窗,防止他誤操作刪除某些重要資訊。

互動設計原則分析

例二: 很多應用上都會在使用者退出登入時彈出確認彈窗,以此來防止使用者誤操作退出應用造成的一系列麻煩。

互動設計原則分析

6、易取原則(Recognition rather than recall)

通過把元件、按鈕及選項可見化,來降低使用者的記憶負荷。使用者不需要記住各個對話方塊中的資訊。軟體的使用指南應該是可見的,且在合適的時候可以再次檢視。

例: 該介面展示的為會務的訊息列表,每天會受到很多回復發布或更改的訊息,使用者當然不想每次都進入會務詳情頁才能看到會務的核心內容了,因而在展示新發布的會務時,列出來名稱、時間、地點這上核心內容;而更改的會務將更新的項標紅顯示,其實這裡是有問題的,被更改的會務在列表裡總有一項使用者想知道核心內容看不到(要麼是時間要麼是地點),這點體驗不太好。

互動設計原則分析

7、靈活高效原則

這個原則就是告訴我們每個產品針對的使用者不可能是所有使用者,都會有自己的適用人群,我們需要針對主要的使用者去設計,而不能僅僅為了一小部分使用者進行極端設計,滿足大部分使用者的使用需求才是最重要。中級使用者的數量遠高於初級和高階使用者數。為大多數使用者設計,不要低估,也不可輕視,保持靈活高效,為大多數使用者設計,相容少部分特殊使用者。汽車油門—新手使用者常常看不見,而且對於高手來說可以通過它快速與汽車互動。這樣的系統可以同時滿足有經驗和無經驗的使用者。允許使用者定製常用功能。

例: 像該頁面中房源資訊預設所型別的都顯示,如果使用者只想看帶視訊的,那麼其他的對使用者而言就是無用的,同時這些無用的還會佔用使用者大量的瀏覽時間,這是一種浪費,像現在的這種設計就可以讓使用者快速高效的獲取他想要的有效資訊。

互動設計原則分析

8、優美且簡約原則(Aesthetic and minimalist design)

對話中的內容應該去除不相關的資訊或幾乎不需要的資訊。任何不相關的資訊都會讓原本重要的資訊更難被使用者察覺。

例: 像這個退出登入確認彈框,沒有任何廢話,言簡意賅,讓使用者一目瞭然。

互動設計原則分析

9、容錯原則(Help users recognize, diagnose, and recover from errors)

錯誤資訊應該使用簡潔的文字(不要用程式碼),指出錯誤是什麼,並給出解決建議。也就是在使用者出錯時如何為出錯的使用者提供及時正確的幫助呢?即要幫助使用者識別出錯誤,分析出錯誤的原因再幫助使用者回到正確的道路上。如果真的不能幫助使用者從錯誤中恢復,也要儘量為使用者提供幫助讓使用者損失降到最低。

例: 這個登入頁面的填寫項是允許使用者出錯的而且它會提示使用者怎麼錯了,讓使用者很清晰如何糾正,避開誤區,像“驗證碼已失效”,就明確的告訴了使用者之前的驗證碼已經失效了,不要再重複填寫了,獲取新的驗證碼再填。

互動設計原則分析

(10)人性化幫助原則(Help and documentation)

即使系統不使用幫助文件是最好的,但我們也應該提供一份幫助文件。任何幫助資訊都應該可以方便地搜尋到,以使用者的任務為核心,列出相應的步驟,但文字不要太多。 例: 如圖所示,登入頁的“記住使用者名稱及密碼”的幫助項實時可見,只要在登入頁就可見此功能,你用或不用,他都在那裡。

互動設計原則分析

相關文章