【産品經理學習筆記】Part 9 互動設計（1）

互動設計

• （一）互動設計-圖形界面設計
• • 格式塔理論
  • • 1. 相似性
    • 2. 接近性
    • 3. 連續性
    • 4. 閉合性
    • 5. 圖/地法則（主體與背景法則）
    • 6. 簡單法則（Pragnanz）
    • 7. 共同命運法則
  • 視覺感覺流程：人是如何擷取界面上的資訊的
• （二）互動設計-人機互動界面的視覺感覺
• • 亮度感覺
  • 色彩感覺
  • 景深感覺
• （三）互動設計-認知摩擦
• • 認知摩擦
  • • 如何降低認知摩擦
• （四）互動設計-認知負荷
• • 認知負荷
  • • 外在認知負荷
    • 内在認知負荷
    • 控制外在認知負荷
    • 控制内在認知負荷
• （五）互動設計-情景認知
• • 情景認知
  • • 改善使用者情景認知
• （六）互動設計-産品設計原則
• • 7（±2）資訊塊效應
  • 80/20 原則
  • 奧卡姆剃刀
  • 菲茨定律（Fitts' Law）
  • 席克定律

（一）互動設計-圖形界面設計

格式塔理論

人類視覺是整體的：我們的視覺系統自動對視覺輸入建構結構，并在神經系統層面上感覺整體和統一的形狀、圖形和物體，而不是隻看到互不相連的邊、線和區域。

1. 相似性

如果元素彼此相似，則元素傾向于被感覺為一組。這也意味着如果具有相同功能、含義和層次結構級别的元素，則應在視覺上保持統一比對（包括顔色、大小、形狀、紋理、尺寸和方向的相似性）

2. 接近性

當物體彼此靠近時，它們傾向于被預設感覺在同一個組織中。具體來說，物體之間的相對距離會影響我們感覺它們是否或者以何種規則組織在一起。互相靠近（相對于其他物體）的物體看起來屬于一組，而那些具裡較遠的則自動被劃分到組外。

3. 連續性

視覺傾向于感覺連續的形式而不是分散的碎片。

“我們的思想更喜歡阻力最小的道路。連續性幫助我們通過構圖來解釋方向和運動。他在對齊元素時發生，它可以幫助我們的眼睛順利地穿過頁面，有利于提高易讀性。連續性原則加強了對分組資訊的感覺，建立了秩序并引導使用者通過不同的内容細分。”

（頁面右側按鈕連續，友善使用者手指連續操作）

4. 閉合性

視覺會自動嘗試将空出/殘缺的圖形閉合（或腦補）起來，進而将其感覺為完整的物體而不是破碎的物體。

5. 圖/地法則（主體與背景法則）

表明使用者界面需要将主體對象與背景區分開來。（前後、遠近透視關系）

“這個原理指出：我們在感覺事物的時候，總是自動的将視覺區域分為主體和背景。一旦圖像中的某個部分符合作為北京特征的話，我們的視覺感覺就不會把它們作為主體焦點。根據這樣的原理在使用者界面設計當中，我們就可以通過一些處理将圖像中的某些部分變成北京，這樣可以顯示更多的資訊或者将使用者的焦點轉移。”

6. 簡單法則（Pragnanz）

人的眼睛喜歡在複雜的形狀中找到簡單而有序的對象，當我們在一個設計中看到複雜的物體時，眼睛更願意将它們轉化為單一統一形狀，并嘗試從這些形狀中移除無關的細節來簡化這些物體。

“Less is More ，簡單的東西往往帶給人們的是更多的享受”

7. 共同命運法則

前面的幾個格式塔原理都是針對靜态的圖形，這裡的共同命運針對的是運動的物體。東通命運和前面的相似性和接近性相關，都影響着我們感覺的物體是否在同一個組裡。共同命運指出具有共同運動形式的物體被感覺為彼此相關的一組。

視覺感覺流程：人是如何擷取界面上的資訊的

1. 視覺尋找：在視線所及的範圍内搜尋目标.
2. 尋找：當發現視覺探測到的對象與預期目标吻合時，排除其他對象的幹擾，固定跟蹤對象。
3. 分辨：對多個相似的對象的資訊進行深入探測。
4. 識别：根據視覺特征資訊和細節資訊的差異，識别目标的含義。
5. 确定：鎖定的對象與記憶中的存儲資訊相吻合，确認目标。
6. 記憶搜尋：以上視覺過程的基礎，以上視覺所獲得的資訊都要與記憶資訊對比，進而做出判斷。

（二）互動設計-人機互動界面的視覺感覺

亮度感覺

• 在較低的亮度對比條件下，亮度對比要比色彩組合對視覺感覺具有更重要的作用
• 在較高的亮度對比條件下，使用者更傾向于選擇不同的顔色組合。

色彩感覺

• 在使用者界面的設計中使用色彩要謹慎
• 設計應該首先考慮單色，在白色背景下的黑色圖案或者在黑色背景下的白色圖案通常适用于大多數的使用者
• 合理的顔色搭配不僅能夠提高界面資訊的認知效果，還能夠豐富界面的層次

  

景深感覺

• 人機互動中我們希望能夠産生盡可能多的深度資訊，因為在人機互動界面中圖像是眼睛和大腦的注意焦點。如果破壞了深度資訊，也就喪失了真實感。
• 在界面的設計過程中，亮度是一個決定視覺感覺效果的因素，是以對象的明暗變化成為判斷對象遠近的依據。
• 此外，可以利用光與影的變化、内容的重疊與幹涉以及細節與空中透視産生的立體效果。

  

（三）互動設計-認知摩擦

認知摩擦

• 因任職的差異性導緻基于産品開發的界面變得複雜，使用者難以通過界面表象了解程式員的意圖，執行任務過程存在困難如标簽或導航的認知不清晰、操作回報得不明确或不及時，得不到預期的效果等問題。
• 設計者最重要的目标之一，就是要使表現模型和使用者的心理模型盡可能地接近。

如何降低認知摩擦

• 界面應該有自己内部的和諧，這是最基本的要求。
• 将資訊有效的組織進而控制認知差異。（分欄、分組等）

  

（四）互動設計-認知負荷

認知負荷

• 感覺輸入和短時記憶的容量都是有限的，并且如果個體直接或間接接收到的資訊量多餘容量值時，勢必會給個體的認知系統帶來符合，即形成認知負荷。
• 在人機互動界面中可以認為，認知負荷使使用者為了順利完成某項工作任務，實際投入到注意和工作記憶中去的認知資源的總量占個體固有認知資源的比例。

外在認知負荷

• 這個頁面的實體元素多少、容量大小等。
• 主要與人機互動界面資訊的組織呈現方式有關，用于外在認知負荷的認知資源可能會超過使用者的工作記憶容量，進而阻礙使用者使用産品。例如使用者從界面大量的資訊中搜尋目标時，無關資訊往往成為幹擾項，增加外在認知負荷。

内在認知負荷

• 主要在資訊讀取過程中需要被同時識别的元素數量決定，元素數量與内在認知負荷成正比。
• 内在認知負荷的高低主要是由産品的複雜性與使用者知識之間的關系決定。是以，内在認知負荷不僅受到資訊内容的影響，還受到使用者特征的影響。

eg：一道選擇題，如果有20個選項——外在認知負荷

如果是政治選擇題，4個選項，但每一個都要思考很久——内在認知負荷

控制外在認知負荷

• 在界面元素的組織上，要遵循一定的視覺搜尋原則，要符合人的視覺搜尋規律，使使用者以最短的視覺搜尋線路找到所需資訊，并建立資訊之間的聯系，進而整合資訊，減少使用者的分散注意力，進而降低使用者的認知負荷。
• 在界面元素的呈現方式上，根據資訊的特性和使用者的任務需要選擇适合的方式呈現，例如利用色彩塊來表達區域和等級資訊，增加複雜内容的幫助提示資訊等。

控制内在認知負荷

• 采用圖形化、子產品化的建構産品規則，可以提高使用者自身的認知能力，控制内在認知負荷。
• 減少各個元素之間的互動動作，可以降低圖形化結構之間的複雜度，進而有效降低内在認知負荷。
• 采用簡單的資訊組織結構，減少各資訊架構之間的交叉點和分支，也可以起到降低内在認知負荷的效果。

（五）互動設計-情景認知

情景認知

• 情景認知是對周圍發生的事情感覺和了解的意識，是對時間和行為産生影響的目标宗旨。
  • 情景認知第一階段（感覺階段）：影響使用者感覺的直接因素：視覺感覺、對象識别、知識認知、環境感覺。
  • 情景認知第二階段（了解階段）：影響使用者了解的直接因素：記憶、圖示和認知偏差
  • 情景認知第三階段（預測階段）：影響使用者預測的直接因素：推理、記憶和認知偏差
  • 情景認知第四階段（使用者内在因素）：間接因素包括：決策、内在能力、經驗、情緒。

改善使用者情景認知

• 感覺階段：從人機互動界面構成要素入手，以适合讀取、便于記憶的方式進行設計。
  • 減少無效資訊顯示
  • 確定資訊的清晰易讀，對重要資訊有一定的提示
  • 提供與情景任務相關的重要資訊顯示
• 了解階段：要求人機互動界面提供與任務情境相符合的認知模式，幫助使用者正确了解目前情景。
  • 提供與情景相關的資訊，支援并引導使用者在各種情景下的正确認知
  • 設計界面的應急機制，能夠警告和提示錯誤
  • 界面邏輯層次簡單，提供快捷周遊的操作方式
• 預測階段：要求人機互動界面提供能對任務情景進行預測的認知資訊，幫助使用者正确預測将要發生的情況。
  • 對将要發生的具有确定性的情況向使用者說明
  • 對不确定性的情況盡可能的提供給使用者解決方案

（六）互動設計-産品設計原則

7（±2）資訊塊效應

應用：

導航或頁籤盡量不要超過9個。

如果導航或頁籤内容很多，可以用ige層級結構來展示各段及其子段，并注意其深廣度的平衡。

使用場景：規範導航或者頁籤的數量和層級深度，例如，我們網站的菜單的最佳數量是多少個？

80/20 原則

• 使用者80%的時間花在了20%的功能上
• 在傳統的網站和網絡應用中，使用頻率和互動頻率最高的區域被歸入20%部分
• 當設計移動界面時，隻關注那20%的功能

奧卡姆剃刀

• 簡單有效原理（有意識做減法）

  

  1. 隻放置必要的東西

  可以使用“更多資訊”的連結來實作

  2. 減少點選次數

  3. “外婆”規則

  如果你的外婆（其他較老的人）也鞥輕松使用你的頁面，你就成功了。

  4. 減少段落的個數

  5. 給予更少的選項

菲茨定律（Fitts’ Law）

從一個起始位置移動到一個最終目标所需額時間由兩個參數來決定，到目标的距離和目标的大小（下圖的D與W），用數學公式表達為時間T=a+b log2(D/W+1)

T=移動裝置所需時長；

a,b是經驗常量；

D=裝置起始位置和目标位置的距離；

W=目标的寬度大小；

菲茨定律的啟示：

• 按鈕等可點選對象需要合理的大小尺寸
• 螢幕的邊和角很适合放置像菜單欄和按鈕這樣的元素，出現在使用者正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因為不需要移動到螢幕的其他位置
• 要讓不常用或危險的UI元素難以被點選（撤回、删除等）

  

席克定律

一個人面臨的選擇越多沒做出決策需要的時間就越多。

最小最優化設計選項，太多的選項會延長使用者做決策的時間，甚至對一些選擇困難戶來說，會直接或間接導緻他們任務失敗。