設計原則總結:最全的互動設計原則和理論匯總

2021-01-08 人人都是產品經理

設計是有原則和方法論的,鑑於網上各種文章和原則比較零碎,這次統一將互動設計的方法和理論匯總,不足之處也希望各位能夠提出,一起補全。

文章包括:格式塔心理學原則、尼爾森可用性原則、尼爾森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 中由開始菜單到開始屏幕的轉變背後也可以看作是該定律的應用。

菲茨定律的啟示:

按鈕等可點擊對象需要合理的大小尺寸

屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因為邊角是巨大的目標,它們無限高或無限寬,你不可能用滑鼠超過它們。即不管你移動了多遠,滑鼠最終會停在屏幕的邊緣,並定位到按鈕或菜單的上面。

出現在用戶正在操作的對象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開得更快,因為不需要移動到屏幕的其他位置。

相關焦點

  • 互動設計原則:如何用好的設計留住你的用戶?
    首先揭露一些常見的現象,從現象到本質到總結一些設計方法。現象一:內容複雜時,用戶大都只會掃視當我們在查看內容和信息的時候,絕大多數情況下我們都會有目的和意識的去尋找自己感興趣和對自己有幫助的內容。視覺層次能夠呈現出頁面中不同元素之間的優先級和關係,在設計的時候,同樣需要遵循下面的幾個原則:梳理主要流程,將功能劃分出主次取捨功能操作,突出主要操作流程,弱化次級功能通過視覺表達層級關係:重要的元素需醒目;邏輯上關聯的元素,在視覺也應相關層級不能太多,三級以內較合適,四五級的層級界面會讓用戶找不到重點。
  • 架構師必須知道的架構設計原則
    隨著時間的推移,很多技戰術細節性的東西 (工具,框架,程式語言) 在我腦海中漸漸模糊,但是一些平時學習積累起來,並且在實踐中加深體會的軟體架構設計和組織原則,這些原則性的東西卻絲毫沒有被時間衝淡,反而愈加清新。現在即使我不在一線開發,但這些沉澱下來的原則仍然潛移默化地影響我的日常管理和部分架構設計指導工作。我想有必要總結一下那些業界知名,給我留下深刻印象的軟體架構設計和組織原則,和大家一起分享。
  • 「Material Design」的九大設計原則
    除了在Google+社交媒體上發布了相關內容之外,谷歌還給與會者發送了一些藝術印刷套件,其中就包括一些極具特色的明信片,這些明信片很漂亮,也向人們展示了新設計語言的設計原則。谷歌是這樣介紹的:「設計是創造的藝術,我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展,我們的設計,實踐,以及理念也要隨之提升。
  • 姜松榮:設計的「倫理原則」
    湖南師範大學美術學院在包浩斯100周年之際開展了「紀念包浩斯100周年」國際學術研討會,10月27日開展的「包浩斯與設計教育」專題報告邀請到了湖南師範大學美術學院學術委員會主任、博士生導師、倫理學博士,中國文藝評論家協會會員,湖南省視覺藝術評論委員會副會長,湖南省美術家協會美術理論委員會主任委員姜松榮教授進行了以《設計的「倫理原則」》為主題的演講。
  • 設計的四項基本原則
    設計是有原則和方法論的,本文作者梳理總結了關於設計的四項基本原則並對其展開了分析,與大家分享。首先聲明,這四項基本原則適用包括但不限於產品設計、平面設計、產品策劃、工業設計、機械設計、環境設計、寫文章、導演電影、編故事、向上級匯報、和別人吵架等領域。
  • 實例分析:圖標設計4原則
    而今天作者結合自身的實戰經驗,分享幾個接地氣的設計原則,希望在你的實際工作中能夠有所受益。圖標設計是界面設計最重要的組成部分之一,作為UI視覺設計師,這項技能已經是我們必須要掌握的基本技能,那圖標設計要遵循什麼樣的原則呢?
  • 平面設計原則是什麼?怎麼樣把握設計的度!
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 平面設計原則是什麼?怎麼樣把握設計的度! 總結,有助於提高設計人員的能力,因此設計師應該收集客戶反饋意見,並且確定方案是否達到既定目標,這也有助於日後進一步改善設計。 如果能夠按照這樣的方式,進行有針對性的調查、研究、設計、反饋我相信能在一定程度上改變設計過度的問題。
  • 互動設計的最後一公裡(一)——動效設計
    隨著設計工具逐漸遷移到sketch上,其最基本的頁面點擊跳轉卻不能實現,只能進行靜態頁面展示,若設計師工作時間充足一些,或許會進行頁面之間的流轉箭頭指示。對於那些對產品以及業務不是很了解的團隊成員來說,其一直會處於懵懂狀態,甚至會在眾多的靜態頁面中迷失,大大降低了交互稿的可讀性。
  • 德國包浩斯Komar教授:人工智慧管控5項基本原則和6個設計倫理性原則
    重要理論——人工智慧管控5項原則經合組織出臺了人工智慧指導原則,經合組織秘書長古裡亞指出,新技術帶來了諸多便利,但也引發了擔憂和設計倫理的思考。新的方針政策主要著眼於對科技發展的潛在風險進行長期的研究和有效的控制。人工智慧研究的是算法,是計算機的所有應用領域,是有學習能力、可以解決問題的系統。它輔助人類,須由人掌握而不可主宰人類。
  • 可視化設計的10個指導原則
    在設計數據時我們應該遵循哪些指導原則?以下最佳實踐將幫助您設計豐富、有洞察力的數據體驗。01 為特定受眾設計可視化是用於揭示模式的,提供上下文並描述數據中的關係。雖然設計師對給定的一組數據集中的模式和關係沒有任何影響,但她可以根據用戶的需求選擇顯示哪些數據以及提供怎樣的語境。畢竟,就像其他產品一樣,如果用戶無法使用它,那麼可視化就毫無意義。
  • 直流電源EMI濾波器的設計原則
    1設計原則——滿足最大阻抗失配  插入損耗要儘可能增大,即儘可能增大信號反射。設電源輸出阻抗和與之端接濾波器輸人阻抗分別為ZO和ZI,根據信號傳輸理論,當ZO≠ZI時,在濾波器輸入埠會發生反射,反射係數  p=( ZO- ZI)/( ZO+ ZI)  顯然,ZO與ZI相差越大,p便越大,埠產生反射越大,EMI信號就越難通過。所以,濾波器輸入埠應與電源輸出埠處於失配狀態,使EMI信號產生反射。
  • 關於食品工廠設計化驗室及中心實驗室的設計原則
    所以在食品工廠設計化驗室及中心實驗室的設計原則中要根據分工範圍和工作條件確定其設置內容。食品工廠化驗室設計食品工廠設計化驗室的規劃設計原則化驗室設計的實施1、根據化驗室建設規劃確定專業實驗室類型和數量2、配合建築模數要求確定實驗室的開間和分隔3、根據安全和防幹擾原則組合實驗室4、繪製單個實驗室平面圖和全化驗室總體組合布局圖
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    本文總結了一些在互動設計中重要的理論要點,並針對各理論要點展開描述相應的設計策略。在《互動設計精髓》一書中,提出設計者最重要的目標之一,就是要使表現模型和用戶的心理模型儘可能地接近:認知摩擦除了直接導致產品的易用性降低之外
  • 阿貝原則的內容和意義---機械設計首先需要遵循的原則
    牛8牛9 ,是一個專注於SolidWorks 使用教程的訂閱號,同步官方網站www.nbnq.net ,發布有關SolidWorks使用教程和技巧,機械設計知識等。阿貝原則能解決的根本問題· 量具或儀器的標準量系統和被測尺寸應成串聯形式。· 若為並聯排列,則 該計量器具的設計, 或者說其測量方法原理不符合阿貝原則。
  • 如何利用互動設計的接近法則與格式塔理論
    「形狀」和「圖形」在德語是「Gestalt」,因此這些理論也被稱為視覺感知的格式塔(Gestalt)原理。接近法則是格式塔理論中最為我們所熟知的,也是我們最常用到的一項法則。說的是物體之間的相對距離會影響我們感知它們是否以及如何在一起。相對於其它物體來說,彼此之間靠近的物體看起來屬於一組。越接近,組合在一起的可能性就越大,強調的是位置。如下圖,我們在意識中會將其分為兩組。
  • Dieter Rams「好」設計的十大原則
    從小米的「沒有設計就是最好的設計」到一加的「好的設計在哪怕最細枝末節處」再到錘子的 「對稱美學」,如今的國內手機產品的工業設計都或多或少受到工業設計巨匠Dieter Rams 的影響。他的十項關於「什麼是好的設計」的總結概述更是被眾多設計工作者奉為啟蒙與淨化心靈的最高精神指引,Dieter Rams的設計哲學正越來越被那些已經形成成熟設計文化的國家重視並不斷融合於自身設計產品之中。
  • 高頻變壓器設計原理及設計原則
    高頻變壓器設計原理   在高頻變壓器設計時,變壓器的漏感和分布電容必須減至最小,因為開關電源中高頻變壓器傳輸的是高頻脈衝方波信號。在傳輸的瞬變過程中,漏感和分布電容會引起浪湧電流和尖峰電壓,以及頂部振蕩,造成損耗增加。通常變壓器的漏感,控制為初級電感量的1%~3%。
  • 電感設計的三個原則
    對於PFC、BOOST、BUCK以及DC-DC電感,電感的取值通常由設計要求最大紋波電流(Ripple Current)來決定(通常設計指標是最大紋波電流百分比)。其中,對於BUCK和DC-DC電感,其直流工作點(IAVG)相對恆定,如圖這是在最大直流工作點時,所需的電感最小感值。
  • 第四節 臨床試驗設計原則
    第四節 臨床試驗設計原則   設置對照,研究對象隨機分組和盲法是臨床試驗設計的三項原則。   一、設置對照   有比較才能鑑別。某種治療措施只有與其他治療方法比較,才能了解其優劣。因而,設置對照是科學地評價一項治療措施必不可少的。
  • EDA365:RF電路設計原則是什麼?設計中這些問題你都遇到過嗎?
    1 引言 射頻(RF)PCB設計,在目前公開出版的理論上具有很多不確定性,常被形容為一種「黑色藝術」。 3.2.1物理分區原則 元器件位置布局原則。元器件布局是實現一個優秀RF設計的關鍵.最有效的技術是首先固定位於RF路徑上的元器件並調整其方向,以便將RF路徑的長度減到最小,使輸入遠離輸出。並儘可能遠地分離高功率電路和低功率電路。 PCB堆疊設計原則。