序
可用性測試是發現設計上問題的最直接方法，但效率低。因此設計需要沉淀和積累，形成方法論，形成準則。
引言
設計面臨大量的沖突的目標，需要權衡，需要在設計準則中找到平衡點。（例如功能強大又要系統簡單）。另外設計最好具備認知心理學的知識背景。
所有設計的準則都來源于人類心理學：感知、學習、推理、記憶的心理學研究。
第一章 我們感知自己的期望
經驗影響感知
我們對周圍世界的感知來源于我們期望，而非真實的描述。過去的經驗、現在的環境、將來的目標會影響我們的感知。
兩個簡單的案例（字母和素描），不同的預期目標下看到的圖片是不一樣的。（貌似有道理）
用戶經常不認真看屏幕就點擊，他們根據以往經驗，而不是屏幕上的實際內容。（所以不要用大量文字引導用戶行為，效果不好的）
在上述心理學原則下，控件的擺放一致是最基本準則。（書中以按鈕的順序為例，確實是這樣）
環境影響感知
視覺的感知不一定是自下而上的（先看單詞再看句子），書中的案例顯示，在不同的環境影響下，確實會把同樣的字母判定成不同的含義（自上而下）。
周圍環境對感知的影響也存在不同感官之間。
目標影響感知
與目標無關的東西會被過濾掉，而不會進入意識。視覺會做過濾外，聽覺也會做過濾。感知過濾在網站導航中也會出現，書中的100美元中獎的案例挺有意思。
目標會影響我們注意什么，目標是我們的感知系統有預判，從而對某些特性敏感。
對設計意味著什么
上述三個影響對設計有三個啟發：
1、避免歧義。對容易出現歧義的地方，依靠標準或慣例。
2、保持一致：在一致的位置擺放信息和控件。有助于用戶快速識別。
3、理解目標：要理解用戶使用系統的目標，知道目標導致用戶對什么的感知強烈。在交互節點上確保提供用戶需要的信息，并對應到可能的用戶目標。
為觀察結構優化視覺
視覺感知的格式塔（Gestalt)原理【描述性框架】：人類理解圖像會自動構建結構，而非細節。該原理也是用戶界面設計的準則。
格式塔原理：接近性
人類傾向于把接近的物體分為一類，把距離較遠的物體分成兩類。（書中星星行列的排布印證）
設計界面時可以把一組內的物體拉近，不同組的放遠。（書中也給了一個反例，很到位）
格式塔原理：相似性
人類傾向于把相似的物體分為一類（例如書中空心星星的案例）。也給了一個反例。
格式塔原理：連續性
人類會把不連續的相似物體自動補齊連續。例如IBM標志。
格式塔原理：封閉性
視覺系統會自動嘗試把敞開的圖形關閉起來。（例如書中圓的案例和三角形案例）
格式塔原理：對稱性
視覺系統會分解復雜場景來降低復雜度，分解的方向往往趨向于最簡單的方案。（例如書中的兩個菱形疊加）
一個非常贊的案例,涉及了封閉性、連續性、對稱性：
格式塔原理：主體/背景
視覺系統會自動嘗試區分主體和背景。例如書中案例，會把小三角當成主體。當然，主體和背景有可能隨著注意目標的不同而改變。（雖然很少）
背景可以傳遞品牌的信息。
通過半透明化當前主體，浮現新的主體，可以讓用戶清晰知道自己在交互中所處的位置，是不錯的方法。
格式塔原理：共同命運
在動態過程中，具有相同動作或方向的會自動被構建為一組。哪怕物體之間距離比較遠。
第三章：尋找和使用視覺結構
用戶在使用網站時，會快速掃描相關信息，不會仔細去看。所以當信息以簡潔和結構化呈現時，會更容易瀏覽和理解。
越是結構化和精煉，人們越能快速掃描和理解。
顯示搜索結果也是，可以用信息結構化和避免噪聲。
書中地產網站的計算軟件結果圖也給了類似的例子。計算結果和標簽之間距離一樣，違背接近性原則。
結構化也能提高記憶長數字的能力。例如電話號碼。也可以利用數據控件強制結構化。
通過將信息分段，把大塊的信息切割成小塊。顯著標記每個信息段，以層次結構展示。的視覺層次的方法，可以讓用戶更專注相關的信息。
第四章：閱讀不是自然的
人類的大腦不是為閱讀而設計的，在進化的過程中人類兒童學習語言不需要訓練，但閱讀需要。
閱讀涉及識別模式和特征（字的線條，字的組成部分，詞），閱讀可以是自下而上特征驅動的（先看字，再明白意思），也可以使自上而下語境驅動的（英文中理解整段話，大腦會自動糾正一些錯誤單次）。
特征驅動的過程需要長時間訓練才能轉成無意識的行為。
書中舉的英文句子去掉一半，還有句中單詞錯亂。
好的閱讀應當是無意識的特征驅動。我本身是一個語境驅動的閱讀者，所以細讀的時候偶爾會費勁。
大腦的掃描也證明了高級閱讀者和初級閱讀者在大腦通路的使用上的不同。
不常見和不熟悉的詞匯會影響閱讀。
難以辨認的字體會影響閱讀（阻礙的自下而上的無意識閱讀）
小的字體，嘈雜背景下的文字也是一樣的。
重復的信息也會淹沒內容。
眼動在換行的時候會自動對齊到下一段的開始，所以大段文字居中或靠右對齊會打斷無意識閱讀。
設計需要支持，而非干擾閱讀。
為閱讀提供支持的設計準則
1、文字應基于無意識的特征識別來處理
2、使用直白的語言
3、文字設計突出視覺層次，例如標題、列表、表格和視覺加強的單詞。
對設計的啟示是：盡量少讓人閱讀
第五章：色覺是有限的
人類視覺是為了檢測反差（邊緣）而優化的。
現實世界中，由于周圍都很明亮，所以提供光感的視桿細胞幾乎提供不了什么信息。
不同的視錐細胞的敏感度不同，低頻的紅黃細胞敏感度高，中間的綠細胞敏感度中，高頻的藍細胞敏感度低。
人類對色彩的對比敏感，而非決定顏色敏感。所以陽光下的花和陰影的花會認為一樣紅。
越淺的顏色，越不容易區分。越小的色塊，越不容易區分。越遠的顏色，越不容易區分。
例如在數據圖中，如果圖例的色塊太小，很可能讓用戶區分不出顏色。
在設計中，也要考慮不要講常見色盲的顏色設計在一起。
使用色彩的準測
1、用飽和度、亮度和色相來區分顏色。避免采用輕微的差別。可以在灰度模式下測試，需要在灰度模式下也能看出差別。
2、使用獨特的顏色通道。（紅綠 黃藍 黑白）在某個通道有信號，其它通道空信號是最容易識別的。
3、避免色盲人群無法區分的顏色。
4、使用顏色之外的其它提示。例如蘋果的圖標，除了顏色還有符號。
5、將強烈的對抗色分開。例如紅綠。
第六章：我們的邊界視力很糟糕
眼睛中央凹的分辨率比周圍視錐細胞高很多，大腦會填充焦點之外的內容。
書中的例子也很有意思，對屏幕上中央凹關注的點以正確的文字，周圍的文字隨機變化，大腦也會認為看到的是一篇正常的文字。
在色彩上，中央凹的分辨率也比其他地方更敏銳。
邊界視覺對運動有很好的敏銳度。邊界視覺提供模糊的線索，引導眼球轉動過去。
反例：電腦界面的出錯信息出現在視覺邊緣，并且沒有明顯的顏色或動作，用戶往往注意不到。
讓信息可見的常用方法
- 把信息放在用戶所看的位置上。
- 標記出錯誤。
- 使用錯誤符號。
- 保留紅色以呈現錯誤。
讓用戶注意到信息的重武器（小心使用）
- 彈出框：網頁版應用的話用戶可能屏蔽彈出框。另外彈出框會打斷用戶當前任務。
- 使用聲音（蜂）
- 閃爍或簡短的晃動：不能過長，四分之一到二分之一秒，否則很煩。例如菜單操作會利用閃爍表示確認收到指令。
第7章：我們的注意力有限，記憶力也不完美。
設計需要支持和增強記憶力，而非給記憶力增加負擔。
感覺是受到環境和特征共同影響的。例如坐在車里聽到狗交和在小區聽到狗叫的感覺是不一樣的。環境和特征越一致，大腦受到刺激的區域重合度越高。和感覺相關的大腦區域察覺簡單的特征。而大腦較低的區域識別對象。
長期記憶是神經元被改變，產生了長期的改變。記憶也不是發生在一處，而是與神經元的連接有關系，破壞了某處神經元，不一定損傷記憶，可能只是讓回憶不清晰或變慢。但破壞了關鍵路徑上的神經元，可能會損失記憶。
短期記憶是感覺和注意現象的組合。感覺器官的刺激殘留經大腦整合后形成了意識，或稱短期記憶。短期記憶不是一個長期記憶的緩沖區，而是當前注意力的焦點。
短期記憶最重要的特點是低容量和高度不穩定性。一般可以記住不相關的7個事物。
短期記憶的特點對用戶界面設計的影響
應當幫助用戶從一個時刻到下一個時刻記住核心的信息。不能指望用戶自己記住。
模式讓交互系統分配不同的意義給相同的操作，從而讓用戶減少需要學習的操作數量。
但要提供足夠的模式反饋， 要么不要提供模式。（例如車的檔位會被新手掛錯）即使系統的模式切換是由用戶來決定或操作的。
一個案例是搜索，在點擊操作后清空了搜索框，由于短期記憶的不穩定性，在注意力轉移到搜索結果后，用戶往往會忘了自己搜的是什么詞。
同樣因為短期記憶的不穩定性，不能指望用戶記住一系列指令，而應該隨時可以查閱。
長期記憶的特點
長期記憶的缺點：
- 容易產生錯誤：長期記憶是被壓縮的，只留下一些特征，而非全部特征。
- 受情緒影響
- 追憶時可改變
長期記憶特點對用戶節目設計的影響：
長期記憶的特點是人們需要工具去加強它。
身份認證是許多系統附加在用戶長期記憶上的負擔。
用戶節目的一致性有助于學習和長期保留。
不同功能的操作越一致，用戶要學的就越少。
第8章：注意力對思考以及行動的限制
一些用戶界面設計的準則，建立在短期記憶和有限的注意力上。
模式一：專注于目標，而很少注意使用的工具
人們的注意力放在目標和與任務相關的東西上，只是很表面的考慮所用的工具，而且只在必要時才這樣做。因為注意力集中在工具上時，會忘了目標及為了達成目標已完成的及進度。所以這個時候需要有提示。否則懵逼。
網站本身應隱入背景中，讓用戶專注于自己的目標。（Do not make me think)
模式二：使用外部幫助來記錄正在做的事情
例如 郵件系統會區別草稿郵件，區別已讀未讀。交互系統還應該允許用戶標記或移動對象。
模式三：我們跟著信息的氣味靠近目標。
因為我們只關注目標，所以會注意到任何與目標相關的文字或元素上。
例如書中舉的柜員機的例子。轉賬的任務會引導用戶注意到 transfer 和donate。所以交互節目需要先梳理目標，確定任務。
信息氣味導向的原理，意味著交互系統應該設計的有強烈的信息氣味，引導用戶實現目標。
所以需要理解用戶在每次做決定時目標可能是什么，保證為每個重要目標提供選項，清晰標識出每個目標對應的選項。
模式四：我們偏好熟悉的路徑
要實現某個目標，在有時間壓力的情況下，我們會采用熟悉的路徑，而不是探索新路徑。因為熟知的路徑不需要消耗注意力和短期記憶。
用電腦時不動腦子很重要，人們更愿意為了少動腦子而多敲鍵盤。
在一些低頻操作的軟件里，不動腦子勝過按鍵。可以增加操作路徑來減少問題。
引導用戶到最佳路徑，在第一屏就應把用戶路徑展現出來，提供清晰的信息氣味
幫助有經驗的用戶提高效率。這也是快捷鍵的思路。
模式五：思考周期-目標 執行 評估
評估環節說明需要給用戶結果確認的評估手段。
幫助的手段：
目標：提供達成目標的清晰路徑，包括起始步驟。
執行：基于任務而非實現，在需要選擇的節點上提供清晰的信息氣味。
評估：提供進度反饋，讓用戶離開不能幫助實現目標的操作。
模式六：完成主要目標后會忘記收尾工作
短期記憶力的焦點之一是當前的目標，其它的注意力在于如何完成目標。注意力隨著任務的執行而轉移（所以當前任務的所有事情最好都在當前任務完成，不要放到后面指望回頭再檢查，短期記憶原理會忘記檢查點）。
好的交互應該避免這樣的失誤，甚至自動完成收尾。例如轉向完成后自動關閉轉向燈。
第九章 識別容易，回憶很難
人腦能很快的識別物體，但沒有線索的支持下回憶是不善長的。
記憶通過兩種方式激活：a)、從感官來的感覺。b)、從其他大腦來的活動。識別是感覺與長期記憶的協同工作。
利用環境輔助記憶。
GUI的基礎：更輕松識別，更困難回憶。
看到和選擇比回憶和輸入更容易。
盡可能使用圖像表達功能，icon能和其它圖標區分開，能與代表的意義聯系起來。
使用縮略圖緊湊描繪全尺寸圖像，而且越熟悉越容易識別縮略圖。
越多人使用的功能，應該越可見：減少用戶回憶。
使用視覺提示讓用戶知道他們所處的位置
讓認證信息容易回憶
第十章 從經驗中學習與學后付諸實踐容易，解決問題和計算很難
舊腦，中腦，新腦
從經驗中學習通常是容易的
操作已經學會的動作是容易的：人們為了節約注意力而將熟悉的事情交由無意識處理。
解決問題和計算是困難的
段時間處理新問題，有代價，不能并行驚醒，同時需要專注的注意力和不間斷的有意識監控。計算消耗注意力和短期記憶力。
當問題的要求超出短期記憶，需要從長期記憶里提取信息或受到打擾，腦負荷就增加。
用戶為了避免思考，或者認為思考帶來的回報不值得，而一直采用“笨辦法”。
一些設計原則：
- 顯著標識系統狀態和用戶當前進度。
- 引導用戶完成他們的目標。在每一次做決定的時候提供清晰的信息氣味，引導用戶向目標前進。
- 不要讓用戶診斷系統問題。
- 盡可能減少設置的數量和復雜度。
- 讓用戶試用感覺而不是計算。
- 讓系統另人感到熟悉。使用已知詞匯，遵循業界標準，使用比喻。
- 讓電腦計算。
第十一章：許多因素影響學習
大腦執行熟練掌握的活動采用的是“自動”的方式，與解決新問題和計算所用的高度受控的方式不同。無意識行為不占用注意力資源，且能并行執行。受控方式占用短期記憶資源以及無法并行。
練習和多次操作能將受控行為轉為無意識行為。
交互最好能在一個時間范圍內能讓操作是無意識行為。
操作專注于任務、簡單和一致時學的更快
以使用天文望遠鏡為例，用戶為了觀測獵戶座，需要把任務（觀測獵戶座），轉為工具的操作（調整望遠鏡的垂直角度，水平角度，目標與當前的角度差等）。這稱為執行的鴻溝，用戶把注意力從任務轉移到操作，會帶來損失。要減少任務和操作之間的鴻溝，需要：
- 做任務分析。
- 設計一個專注于任務的概念模型，包括對象-操作分析。
- 嚴格按照任務分析和概念模型設計UI
任務分析：
用戶使用目的；哪些人群；任務出現頻率；任務重要度；任務步驟；任務結果和輸出；任務的相關信息來源；任務信息的利用；使用的工具；執行任務時會遇到什么問題，問題頻率，問題重要度，問題原因，問題造成的損失大小；執行任務使用的詞匯；如何溝通；不同任務的聯系；
根據任務設計專注任務的概念模型。工具和任務之間所需概念的轉換越直接越好。UI應盡可能達到用戶自動試用這個工具。
對象-動作分析
應用展現給用戶的概念對象，用戶對對象能做的動作，各對象的屬性，對象之間的關系。不要讓用戶了解他們不需要了解的東西，這樣會影響可學習性。
重要的概念設計可以在UI設計之前就完成。
對于額外添加的功能，以防用戶萬一需要這個功能，除非有很多潛在用戶需要，否則這類的需求要堅決抵制。因為每多增加一種可能性，會導致整個工程復雜性指數級別的上升。
一致性
用戶從有意識的操作進步到無意識的操作受到系統一致性的嚴重影響。功能越可預期，一致性越高，了解越快速。不一致會導致用戶注意力的損耗。
過度復雜來源于不同又太相似的概念（書中舉的例子挺好）。
概念層的一致性：對象是否有相同的操作和屬性。
交互層的一致性：同一類型的概念操作是否由相同的物理動作觸發。
對象-操作矩陣
行是對象，列是操作，對應的單元格打勾。從該矩陣上能看出交互概念模型的復雜度。越高說明對象越多，越寬說明操作越多，同類型的對象也可看出交互的相似性。
小而緊湊的矩陣是易于學習的。
大而稀疏的矩陣是很難學習并且交互不一致的設計。
首要經驗是盡可能壓縮對象-操作矩陣。
或者大矩陣由小矩陣組成，小矩陣是緊密的。
根據業界標準，保持按鍵的一致性
僅在概念層和任務層創新，在按鍵上要保持一致性，降低學習成本。
詞匯專注于任務，熟悉和一致
保證新引入的概念聚焦在用戶要完成的任務上，而非所用的技術上。書中的反例舉得很好。
所用的詞匯應該是熟悉的
熟悉的詞匯降低對用戶注意力和理解力資源的占用。
專用詞匯應保持一致
人們希望將認知資源用在自己的目標和任務上。人們對展示的東西僅作表面和字面上的理解。因此交互系統中的專用詞匯應保持高度一致。
同一個名稱就是同一個東西，不同的名稱就是不同的東西。（騰訊云的云服務器和建站主機違反了這個原則）詞條和概念要一一對應。（書中舉了photoshop的例子）
有一個好的概念模型方便開發專注于任務、熟悉和一致的專用詞匯
產品詞典里的詞條應來源于任務，而不是實現方式。對業界標準的概念不要去發明新名詞。產品詞典應隨著產品的發展而發展。
風險低的時候學的更快
所以要降低用戶的風險，并讓用戶意識到這一點。錯誤要容易修復，撤銷或反轉。
向用戶清晰展示他們做了什么。
第十二章 我們有時間要求
感知和認知是有時長的。不能與用戶的時間要求同步的交互系統會被認為不靈敏。
感知的響應度被研究證明是決定用戶滿意度最重要的因素。
響應度的定義：以服從用戶在時間上的要求以及用戶滿意度來衡量。
高響應度的交互不一定是高性能。例如書中解決問題的案例，咨詢問題時快速響應，給出解決時間而非立即解決。
- 立刻告知接收輸入。
- 操作完成所需時間提供指示。
- 等待時允許做其他事情。
- 對常見的用戶請求做出預期。
好的響應度要對用戶操作做出即時的反饋。
糟糕的案例：
- 對動作反饋遲緩。
- 耗時的操作阻斷其它活動，還不能被取消。
- 運行時間長的操作對時間不提供線索。
大腦的時間常量：躲閃的反射動作反應非常快。
聽覺非常靈敏，可以察覺出聲音到達兩耳的差異，從而判斷聲音方向。
對我們產生影響的視覺刺激最短5ms。無意識保護的運動反應80ms。
一個事件產生另一個事件的連續事件最長時間：140ms，超過這個時間，大腦會將兩個事件無意識分割。
在識別一個事物后注意力暫失的時間窗口（500ms）
視覺-運動反應時間700ms。
不受干擾的單一操作時長 6~30s，超過這一時間很容易分神。
滿足實時交互的設計：
- 立刻告知收到用戶動作，保持用戶對因果關系的感知。
- 動畫要做到平滑和清晰。
- 讓用戶取消不想要的長時間操作。
- 讓用戶知道長時間操作需要多長時間。
聲音交互的間隔不要超過1ms，否則注意力會被分散。
10ms以上就會被用戶察覺到延時。
對用戶動作的反饋不要超過0.1s，否則因果關系會被打破。緊密的手眼協調延時不要超過0.1s。另外大腦會在這個時間范圍內對信息重排。所以多個人一起說話在這個窗口期內會被大腦區分開各自的話語。
10S：多頁向導對話框每一步最多消耗用戶10s的時間，多了應該被分解到更多步驟。否則容易失去用戶注意力。
100S：支持快速關鍵決策不要超過的時間。
達到高響應度交互系統的一些指導原則
- 使用忙碌標志。應為任何運行時會阻止用戶下一步操作顯示一個忙碌標志。即使能很快執行完。
- 使用用戶進度指示：顯示進度的時限是1s內。任何超過幾秒的操作都應該顯示一個進度標識。顯示還剩多少，而非已完成多少。顯示總進度而非當前進度。0%和100%處如果停留超過2s，用戶會認為有問題。
- 進度應該是平緩，線性的。
- 用人們平時使用的語言和單位。
- 單位任務內的延遲比單位任務之間的延遲麻煩。單位任務是分解大型任務的方式，在執行單位任務時，用戶將信息保存在知覺區內，完成后會釋放。保存信息占用注意力資源，所以任務內不要分散注意力。任務間的延遲危害更小些。
- 先顯示重要的信息。給一些信息讓用戶動腦子，讓用戶注意力從未處理完成的信息上移開。例如打開文檔，先打開一頁再去加載其它的。打開圖片，先打開低分辨率版，再打開高分辨率版。
- 手眼協調的任務延遲不要超過0.1s，可以偽造反饋后續計算來處理。
- 提前處理。例如文檔渲染，可以在用戶操作的空閑時間預先渲染。
- 根據用戶輸入的優先級而非順序處理。進來找機會按照任務重排，優先處理重要度高的任務。
- 監控時間，哪怕降低工作質量也要保障時間實時性。
- 提供及時反饋，即使網頁應用也應該如此。比如用原生組件，分批加載渲染等方法。
- 實現高響應度是重要的。響應度是設計問題，不僅僅是實現問題。響應度不會隨著硬件的提升而消失。
手機掃碼或點擊此處訪問我的個站
我的個站.png
本文章歡迎轉載，轉載請注明出處和作者。
