設計是有原則和方法論的,鑑於網上各種文章和原則比較零碎,這次統一將互動設計的方法和理論匯總,不足之處也希望各位能夠提出,一起補全。
文章包括:格式塔心理學原則、尼爾森可用性原則、尼爾森F視覺模型、Heuristic Evaluation十原則、費茨定律、席克定律、7+2法則、2秒原理、2/8法則、3次點擊法則、界面黃金8法則、jakob nielson原則、KANO模型、0123簡單法則、MVP法則、嬰兒鴨綜合症、包浩斯理念、泰思勒定律、防錯原則、奧卡姆剃刀原理、maya法則、信噪比法則、序列效應、功能可見性原則、成本效益、古騰堡圖表法、交互易用性五大法則、馬斯洛需求層次理論…
部分理論可能意思相近或重複。
格式塔原則
格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的,我們的視覺系統自動對視覺輸入構建結構,並在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。「形狀」和「圖形」在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。
格式塔原則的原理主要有七種:
接近性原理;相似性原理;連續性原理;封閉性原理;對稱性原理;主體/背景原理;共同命運原理。
接近性原理:
物體之間的相對距離會影響我們感知它是否以及如何組織在一起。互相靠近(相對於其它物體)的物體看起來屬於一組,而那些距離較遠的則自動劃為組外。
相似性原理:
如果其它因素相同,那麼相似的物體看起來歸屬於一組。
連續性原理:
視覺傾向於感知連續的形式而不是離散的碎片
封閉性原理:
視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。
對稱性原理:
我們傾向於分解複雜的場景來降低複雜度。
主體/背景原理:
我們的大腦將視覺區域分為主體和背景。主體包括一個場景中佔據我們主要注意力的所有元素,其餘則是背景。
當物體重疊時我們習慣把小的那個看成是背景之上的主體。
共同命運:與接近性、相似永生原理相關,都影響我們感知的物體是否成組。指出一起運動的物體被感知為屬於一組或者是彼此相關的。
下面的數十個五邊形中,如果其中的7個同步的前後擺動,那麼雖然它們的距離較遠,還是會被感知為一組
同樣間距大小顏色的圖形,那麼視覺上會把一起動的圖形分為一組。文件夾拖動時同時選中的文件夾出現的反白背景及運動軌跡是共同命運原理最直觀的解釋。
尼爾森可用性原則
尼爾森的十大可用性原則是產品設計與用戶體驗設計的重要參考標準,值得深入研究與運用。
1.狀態可見原則
用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。「即時」是指,頁面響應時間小於用戶能忍受的等待時間。
2.環境貼切原則
網頁的一切表現和表述,應該儘可能貼近用戶所在的環境(年齡、學歷、文化、時代背景),而不要使用第二世界的語言。《iPhone人機互動指南》裡提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。
3.撤銷重做原則
為了避免用戶的誤用和誤擊,網頁應提供撤銷和重做功能。
4.一致性原則
同一用語、功能、操作保持一致。
5.防錯原則
通過網頁的設計、重組或特別安排,防止用戶出錯。
6.易取原則
好記性不如爛筆頭。儘可能減少用戶回憶負擔,把需要記憶的內容擺上檯面。
7.靈活高效原則
中級用戶的數量遠高於初級和高級用戶數。為大多數用戶設計,不要低估,也不可輕視,保持靈活高效。
8.易掃原則
網際網路用戶瀏覽網頁的動作不是讀,不是看,而是掃。易掃,意味著突出重點,弱化和剔除無關信息。
9.容錯原則
幫助用戶從錯誤中恢復,將損失降到最低。如果無法自動挽回,則提供詳盡的說明文字和指導方向,而非代碼,比如404。
10.人性化幫助原則
幫助性提示最好的方式是:1、無需提示;2、一次性提示;3、常駐提示;4;幫助文檔。
尼爾森F型視覺模型
尼爾森F型視覺模型由 Jakob Nielsen於2006年提出
他指出,我們在第一次觀看頁面時,視線會呈 F的形狀關注頁面
先從頂部開始從左到右水平移動
目光再下移開始從左到右觀察但是長度會相對短些
以較短的長度向下掃視,形成一個 F形狀,此時我們的閱讀速度較慢,更為系統和條理性
具體如圖:
根據尼爾森F模型,我們可以得出幾個心理暗示:
用戶快速掃視時,具體的文字並不重要
多用小標題、短句引起閱讀者注意
將重要的內容放在最上邊
NN Group最經典的Heuristic Evaluation的十原則
1.Visibility of system status
可視性原則:系統狀態有反饋,等待時間要合適。
e.g. 鍵盤大寫的時候會有小綠燈告訴你哦!
2.Match between system and the real world
不要脫離現實 :使用用戶語言而不是開發者語言,貼近生活實際而不是學術概念
e.g. 惹人厭的404錯誤,根本不明白什麼意思好嗎!
3.User Control and Freedom
用戶有自由控制權:操作失誤可回退
e.g. 啊不小心發錯了,求撤回!
4.Consistency and Standards
一致性原則:同一事物和同類操作的表示用語要各處保持一致
e.g. 熟悉了一個Adobe產品,其他的我就都會啦!
5.Error prevention
有預防用戶出錯的措施:關鍵操作有確認提示,及早消除誤操作
e.g. 哎媽差點刪除錯了!
6.Recognition rather than recall
要在第一時間讓用戶看到:識別勝於回憶,提供必要的信息提示(可視&易取),減少記憶負擔
e.g. 我對什麼感興趣來著?哦哦有選項啊,那就方便多啦,我對旅行、藝術都很感興趣哦!(pinterest在用戶註冊後詢問用戶preference的時候直接提供選項,避免強迫用戶回憶。)
7.Flexibility and efficiency of use
使用起來靈活且高效:為新手和專家設計定製化的操作方式,快捷操作可調整。
e.g. 我用CAD已經是一把好手啦,才懶得去菜單欄裡找insert rectangle呢,我就用快捷鍵就行啦!
8.Aesthetics and minimalist design
易讀性:減少無關信息,體現簡潔美感
e.g. 我用Cash這個應用就是為了打錢的,不要看到其他信息,我只在乎金額!(很多互動設計的初學者都會容易有一個誤區,就是想把頁面填滿。實際上,你頁面上放什麼,什麼信息要突出,取決於你的用戶需求。避免為了「填滿」界面而放入無關信息。)
9.Help users recognize, diagnose and recover from errors
給用戶明確的錯誤信息,並協助用戶方便的從錯誤中恢復工作
e.g. 哎腫麼進不去了?哦哦還好,有人可以幫我/方法可以解決。
10.Help and documentation
必要的幫助提示與說明文檔:無需文檔就能流暢應用當然更好,一般地文檔很必要,而且也提供便利的檢索功能,面向用戶任務描述,列出具體實現步驟,並且不要太冗長。
e.g. 哎怎麼從web page導入PDF啊?搜索一下!哇一步一步的help documentation好清楚啊!
Fitts』 Law / 菲茨定律(費茨法則)
定律內容:從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大小(上圖中的 D與 W),用數學公式表達為時間 T = a + b log2(D/W+1)。
它是 1954 年保羅.菲茨首先提出來的,用來預測從任意一點到目標中心位置所需時間的數學模型,在人機互動(HCI)和設計領域的影響卻最為廣泛和深遠。 新的 Windows 8 中由開始菜單到開始屏幕的轉變背後也可以看作是該定律的應用。
菲茨定律的啟示:
按鈕等可點擊對象需要合理的大小尺寸
屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因為邊角是巨大的目標,它們無限高或無限寬,你不可能用滑鼠超過它們。即不管你移動了多遠,滑鼠最終會停在屏幕的邊緣,並定位到按鈕或菜單的上面。
出現在用戶正在操作的對象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開得更快,因為不需要移動到屏幕的其他位置。