交互設計原則

一. 尼爾森十大交互設計原則

1. 狀態可見原則

系統應該讓用戶時刻清楚當前發生了什麼事情，也就是快速的讓用戶瞭解本身處於何種狀態、對過去發生、當前目標、以及對將來去向有所瞭解，通常的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。
案例二：
好比安心記加班中關注和取消圈子功能：當用戶點擊關注按鈕以後，頁面中間會出現一個「關注成功」的提示，停留2S以後消失。相似這種，操做以後的提示也是狀態可見原則的一種，以下圖：

2. 環境貼切原則

網頁的一切表現和表述，應該儘量貼近用戶所在的環境（年齡、學歷、文化、時代背景），而不要使用第二世界的語言。《iPhone人機交互指南》裏提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。

△ 使用用戶熟悉的表述和名詞

3. 用戶可控原則

爲了不用戶的誤用和誤擊，網頁應提供撤銷和重作功能。

撤銷也要保存用戶曾經的信息

3. 一致性原則

對於用戶來講，一樣的文字、狀態、按鈕，都應該觸發相同的事情，聽從通用的平臺慣例。也就是，同一用語、功能、操做保持一致。

1.結構一致性

保持一種相似的結構，新的結構變化會讓用戶思考，規則的排列順序能減輕用戶的思考負擔。

案例：

例如微信每一個模塊的條目佈局：微信中每一個模塊的條目都有統一的「圖標+文字信息」的結構樣式，能讓用戶快速瞭解朋友圈、掃一掃、搖一搖、看一看、搜一搜、附近的人、漂流瓶、購物、遊戲及小程序等功能都是作什麼的，這就是結構一致性的體現，以下圖：

2.色彩一致性

產品所使用的主要色調應該是統一的，而不是換一個頁面，顏色就不一樣。

案例：

例如網易雲音樂的顏色：網易雲音樂的圖標顏色與界面的主色均爲紅色，也包括其中一些標籤和強調的文字顏色都是紅色。整個界面除了圖片的有效信息外，都經過灰、白、紅色來呈現，界面保持了很好的一致性，這就是色彩一致性原則，以下圖：

3c.操做一致性

能在產品更新換代時仍然讓用戶保持對原產品的認知，減少用戶的學習成本。

案例：

好比安卓版微信、支付寶和釘釘APP中左上角的返回操做：它們三個安卓版的應用內返回上一級操做，都是經過頂部左側的返回按鈕進行的，固然也能夠經過安卓的物理返回鍵，這就是操做一致性的體現，以下圖：

4.反饋一致性

用戶在操做按鈕或者條目的時候，點擊的反饋效果應該是一致的。

案例：

好比安卓版手機QQ信息列表的打開方式：它的信息都是列表式結構，無論你點擊哪一行條目，下一級界面都是由右往左滑出，點擊頂部左上角的返回按鈕會從左往右滑回，體驗至關一致。這就是反饋一致性的體現，以下動圖：

5.文字一致性

產品中呈現給用戶閱讀的文字大小、樣式、顏色、佈局等都應該是一致的。

案例：

例如微信幾個關鍵界面的字體：下圖我用紅色框框起來的條目部分的文字，三個主界面不盡相同，可是，字體大小、顏色、佈局的樣式都同樣，這樣讓整個APP視覺上看起來很舒服，這就是字體一致性。所以，咱們在作視覺設計的時候儘可能使用同一風格的文字。

4. 防錯原則

經過網頁的設計、重組或特別安排，防止用戶出錯。

5. 易取原則

好記性不如爛筆頭。儘量減小用戶回憶負擔，把須要記憶的內容擺上檯面。動做和選項應該是可見的。

6. 靈活高效原則

汽車油門，新手用戶經常看不見，而對於高手來講，能夠經過它快速與汽車互動。這樣的系統能夠同時知足有經驗和無經驗的用戶。容許用戶定製經常使用功能。

案例一：

好比安卓版本支付寶中的編輯應用功能：支付寶首頁的應用是能夠根據自身喜愛自定義的，包括定義經常使用應用、排序、刪除、新增等等。這樣用戶能夠根據本身的我的興趣定製本身適合的應用分佈方式，這就叫作用戶定製經常使用功能，也就是靈活高效原則的一種體現，以下圖：

7. 優美且簡約原則

對話中的內容應該去除不相關的信息或幾乎不須要的信息。任何不相關的信息都會讓本來重要的信息更難被用戶察覺。

案例一：

蘋果手機中自帶的軟件（iOS11設計規範）：在新版本的蘋果手機自帶的軟件中標題都屬於字體放大，界面簡潔的設計風格。還有蘋果自帶的音樂軟件中，段落中的標題和正文區別是很明顯的，標題明顯很大，而正文部分相對較小，這就是優美簡約原則的體現，以下圖：

8. 容錯原則

幫助用戶從錯誤中恢復，將損失降到最低。若是沒法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼，好比404。、

9. 人性化幫助原則

幫助性提示最好的方式是：一、無需提示；二、一次性提示；三、常駐提示；4；幫助文檔。

△ 對用戶容易產生困惑的敏感信息進行提醒

二. 審美可用效應

• 用戶常常會將在美學上使人愉悅的設計，視爲更加有用的設計

三. 多爾蒂門檻

• 當使用者與電腦之間的交互速度愈來愈快（小於400毫秒），將會大幅提高生產力

四. 費茨定律

• 快速移動到目標區域所需的時間是目標區域的距離和目標區域的大小的函數

• MT=a+b*log2（D/W+1)

MT標識完成移動所需時間
ab是根據迴歸分析得出的兩個常量
D表明從起點到目標中心的距離
W目標寬度大小（按照移動方向爲水平方向計算）

五. 席克定律

• 決策所需的時間隨着選擇的數量和複雜性而增長
• RT=a+b log2（n）

RT是反應時間
a是與作決定無關的時間（前期認知和觀察時間）
b是根據對選項認識的處理時間（從經驗衍生出的常數，對人來講約0.155s）
n是選項數量

keep的跑步功能。跑步時手機做爲記錄器，通常狀況下，手機綁在手臂是最爲準確，無論是跑步機仍是戶外跑步，用戶都身處在一個時刻運動不穩定的場景之中，很容易形成誤操做，所以界面中有太多選項是很是不明智的。再來看keep的界面，「開始跑步」做爲最重要的按鈕，面積最大，顏色爲鮮豔的品牌綠，按鈕所處位置最容易操做（費茨定律能夠解釋），這樣的設計在跑步中很容易進行操做。

首次在螞蟻財富理財時，金融機構都會強制要求用戶作一次風險測評，這時候希克定律就不適用了，由於每道題都須要仔細的閱讀和思考才能做答，希克定律不適用於這類須要高度閱讀與解答問題的工做。可是設計師仍是有辦法讓風險測評看起來更友好，設計師將每道試題拆分紅一個界面，這樣就會讓用戶在一個頁面上的目標更加專一，選擇更少。頭部的進度條讓用戶時刻了解本身所處的位置。

希克定律適用於任何要從多重選項作出簡單決定的系統設計或程序。若是想減小用戶的反應時間和錯誤機率，請減小選項。若是狀況複雜，須要大量閱讀和思考判斷，那麼，請拋棄希克定律，根據當下場景和目標用戶進行設計。

六. 米勒定律

• 人類頭腦最好的狀態能記憶含有7（±2）項信息塊，超出後人類的頭腦就開始出錯

七. 帕累託原則——二八法則

• 大多數事件，大約80%的影響來自20%的緣由
• 80/20 Rule / Pareto principle

在整個產品中，大部分效果由少數幾項關鍵因素決定。

80/20法則又名二八定律、帕累托法則（定律），也叫巴萊特定律、最省力的法則、不平衡原則等。是19世紀末20世紀初意大利經濟學家巴萊多發現的。他認爲，在任何一組東西中，最重要的只佔其中一小部分，約20%，其他80%儘管是多數，倒是次要的。80/20法則被普遍應用於社會學、經濟、用戶體驗設計、企業管理等。

通用設計法則的定義：在整個產品中，80%的效果是由20%的關鍵元素決定的。確切的百分比並非重點，在實際狀況中，關鍵變量所佔比例是10%~30%不等。

△ QQ同步助手需求場景分析表（圖片來自於《騰訊產品法》）

咱們來假設一個場景：兩個產品經理各提出一個需求，產品經理A的項目用戶量佔比爲90%，產品經理B的項目用戶量佔比5%。若是資源緊張，咱們該如何排期？在一般狀況下，我相信每一個人的答案都是一致的。

80/20法則有助於整合資源，能夠提高設計的最大化。上面假設的場景就是一個真實的案例。《騰訊產品法》中例舉出QQ同步助手需求場景分析案例（如上圖所示），對於工具類的產品來講，產品要解決的「問題」很清楚，用戶在人口學、社會學方面的因素，如性別、年齡等對產品影響不大，因此能夠選擇按「使用場景」來劃分用戶模型。QQ同步助手中A類換機用戶和B類備份防丟失用戶的用戶量佔比分別是90%和80%，利用80%的時間集中該產品20%的主要功能時，那麼咱們的設計就要集中發力在這些關鍵功能上面，因此此兩類功能也被定義爲了產品核心動線。

八. 伯斯塔爾法則

• 對本身嚴格，對他人寬容
  舉個例子：來看金融理財平臺產品，用戶選擇金融理財平臺跟用戶預期密切相關，只有在用戶的心理有足夠的安全感和信任感纔會選擇這個平臺進行投資。騰訊理財通，首頁用首屏1/3的位置來介紹騰訊理財通這個平臺，而且強調了騰訊的背書。這些信息的目的就是打消用戶的顧慮，從用戶的心理預期中先開始信任這個平臺。同理百度理財的首頁佈局也是相似。

△ 騰訊理財界面

△ 百度理財界面

九. 串行位置效應

• 通常來講，用戶更加容易記住系列中出現的第一個和最後一個元素
  例如：讓咱們仔細看看每一個應用程序底部的導航。 第一個和最後一個基本上是「主頁」和「我的中心」。 系列位置效應解釋了爲何最重要的用戶操做首先或最後放置。。 （以上）

十. 特斯勒定律——複雜性守恆定律

• 每個過程都有其固有的複雜性，存在一個臨界點，超過了這個點，過程就不能再簡化了，你只能將固有的複雜性從一個地方移動到另外一個地方

十一. 馮·雷斯托夫效應

• 當多個類似的物體出現時，與周圍元素不一樣的物體最有可能被記住

使用了與總體 icon 徹底不相同的風格。因此用戶記住這樣獨特、有特點的 icon 的可能性纔會大增。特殊性能吸引注意，並且容易留下好的印象。

十九. 蔡格尼克記憶效應

• 人們對於還沒有處理完的事情，筆已處理完成的事情音響更加深入

十二.尼爾森F型視覺設計

• 以F型視覺流瀏覽頁面

十三.3次點擊法則

• 用戶在3次點擊以內若是尚未找到他們想要的信息，或瞭解產品/網站的特點，他們就會離開

十四.0123簡單法則

• 無需說明書
• 一看就會
• 兩秒等待時間
• 三步之內的操做

十五.麥肯錫金字塔方法

• 任何事情都能概括出一箇中心點，而從中心論點能夠由數個一級論據支撐，而這些一級論據也能夠被數個二級論據支撐，如此衍生，狀如金字塔
• 當呈現資料的方式以閱讀爲主時，須要運用倒金字塔法則。先簡要歸納資料的導語，而後描述簡短信息模塊，舉個例子：

產品彈窗上面的文案大部分都是根據倒金字塔法則進行設計的，通常包含兩部分，第一部分一般是直接的反饋（導語），這一部分的字體會較爲醒目；第二部分是簡短的信息模塊。ios 系統在長按 App 圖標刪除時，會出現一個系統彈窗，這個彈窗上面的文案首先最爲重要的導語：「要刪除（ App 名稱）嗎？」第二句簡短的信息模塊：「刪除此應用同時刪除其數據」。

十六.格式塔原則

• 物體間的遠近或形態的不一樣對咱們的認知影響：

1. 接近性原理
   物體之間的相對距離會影響咱們感知他是否以及如何組織在一塊兒。互相靠近（相對於其餘物體）的物體看起來屬於一組。接近性原則權重要大於類似性原理

2. 類似性原理
若是其餘因素相同，那麼類似的物體看起來歸屬於一組。顏色權重大於形狀

3. 連續性原理
視覺傾向於感知連續的形式而不是離散的碎片

4. 封閉性原理
   視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知爲完整的物體而不是分散的碎片