起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互設計的基礎設計和理論總結（下）
交互設計師的重要價值在于使產品變得易用且人性化。這就需要我們深入學習交互設計的基本理論知識，幫助我們拆分問題，提高效率，創造出更好的設計。
前段時間我們發布了文章《交互設計方法和理論（上）》，反響熱烈，為了滿足廣大粉絲求知若渴的需求，我們馬不停蹄地總結了下篇，在開始正文之前，我們先來光速回顧一下上篇講的方法和理論：
一、需求挖掘理論
二、需求分級理論-通用四象限法
三、需求分級理論-KANO模型
四、需求分級理論-馬斯洛需求層次理論
五、產品框架設計理論-用戶體驗五要素
六、產品框架設計理論-7（±2）信息塊效應
七、產品框架設計理論-卡片分類法
八、界面設計理論-格式塔理論
如果你忘記了具體內容，可在公眾號對話框回復“交互設計”即可溫習上篇哦~話不多說，我們馬上進入今天的分享：
九、80/20原則
任何一個大型的系統中，大約80%的效用是由系統中20%的變量產生的。
“用戶80%的時間花在了20%的功能上?！?/p>
80/20法則又被稱為二八定律、帕累托法則（定律），也叫最省力的法則、不平衡原則。最初是19世紀末20世紀初意大利經濟學家巴萊多發現的。他認為，在任何一組東西中，最重要的只占其中一小部分，約20%，其余80%盡管是多數，卻是次要的。80/20法則被廣泛應用于社會學、經濟、用戶體驗設計、企業管理等。
8020法則有助于資源整合，可以幫助設計師最大化提升用戶體驗質量。比如：用戶用80%的時間集中于產品20%的功能時，那設計師應該集中力量對那20%進行優化，剩余80%應該重新評估，確認他們的價值。設計師可以利用此法則，對設計中的所有元素進行重新評估，劃定重新設計與優化的范圍，有效決定優勢資源進行再設計。80/20法則是不受人為直接控制的，它是自然而然形成的。
80/20 法則的核心在于分清主次，更有效地調配和整合資源。
- 占據產品中80%使用量的是20%的功能；
- 80％的關注度花費在頁面的20％上；
- 80%的進步，是來自于20%關鍵性的努力；
- 80%的產品誤差，源自于20%的組件；
- 企業80%的收益，來自于20%的產品。
有些情況下，確定至關重要的20%的構成是容易的。通過網頁數據統計、表單提交和session cookies可以追蹤到用戶的使用行為，幫助我們了解用戶與哪些UI區域有最多的交互。
80/20法則在用戶體驗設計中的應用：
案例一：找出其中20%的關鍵功能做成工具條展示在主界面，其余隱藏
案例二：QQ同步助手需求場景分析表（圖片來自于《騰訊產品法》）
《騰訊產品法》中例舉出QQ同步助手需求場景分析案例（如上圖所示），對于工具類的產品來說，產品要解決的「問題」很清楚，用戶在人口學、社會學方面的因素，如性別、年齡等對產品影響不大，所以可以選擇按「使用場景」來劃分用戶模型。QQ同步助手中A類換機用戶和B類備份防丟失用戶的用戶量占比分別是90%和80%，利用80%的時間集中該產品20%的主要功能時，那么我們的設計就要集中發力在這些關鍵功能上面，所以此兩類功能也被定義為了產品核心動線。
案例三：在傳統的網站和網絡應用中，使用頻率和交互頻率最高的區域被歸入20%部分。當設計移動界面時，只關注那20%的部分。
相比于傳統網站中所提供的豐富功能，即使此網站的移動版包含20%最常用的功能，那么就可以說這個移動版本具有了大多數重要的功能。
上圖是一個網站的全貌，網站上有一些引導用戶行為的區域。這個網站設計絕對不是全世界最差的，但總的來說不是非常的集中，并且有太多的選擇。
對比下面的移動版頁面：
相比之下，移動版界面非常簡潔，引導用戶第一眼找到最重要的信息，而不是讓用戶感覺不知所措。
緊湊的移動網頁應用是一個非常好的范例。設計師將大部分的精力投入到項目最重要的方面。
在理解了80/20法則后，我們可以將此法則廣泛的適用于各個場景中，如下：
- 分析數據，確定用戶最經常使用的那20%的功能。
- 排定優先級。關注網站或app中最核心功能，并不斷強化。
- 統計出歸入20%的最常使用的功能，在此基礎上簡化設計和布局。
- 精簡80%非關鍵性功能，大膽做減法。
此外，要注意的是，當優化20%時創造了一個新功能，可能就培養了一個新的行為習慣，此時要改變這些行為習慣，面臨的阻力就會比較大。
十、奧卡姆剃刀原理
奧卡姆原理也被稱為“簡單有效原理”，由14世紀哲學家、圣方濟各會修士奧卡姆的威廉（William of Occam，約1285年至1349年）提出。通俗稱為“如無必要，勿增實體?！币簿褪钦f：如果有兩個功能相等的設計，那么選擇最簡單的那個。奧卡姆剃刀原理并不是只肯定簡單的設計就是好的，也不是否定一切復雜含蓄的設計就是不好的。核心是強調“簡單”設計比“復雜”設計更容易讓人理解，傳達效果更好，可以以小博大。
以下案例節選自《交互設計：若無必要，勿增實體》和《交互設計原理之奧卡姆剃刀原理》）
案例一：
在Amazon Prime的案例中，左邊的方案用邊框區分每個項目卡，并在項目卡之間加了水平分割線。邊框并沒有帶來任何附加的價值，反而在視覺上增加了分割感，破壞了簡潔的界面語言。相比之下，一條簡單的分割線就能完成區分模塊的作用，并且還增加了更多的空間去羅列更多的項目。
案列二：
在日常的設計中，經常會有產品經理這樣說，“你看這邊這么空，我們不如放點引導性的圖文唄”。這時設計師估計要抓狂了，這簡單的流程為什么要搞這么復雜。
分析如下，在增加流程以外的內容，勢必會對用戶操作進行干擾，降低表單填寫效率，并且可能會導致無法預期的后果(用戶關閉頁面)。
在功能性頁面設計過程中，我們需要知道在這個頁面用戶行為是什么？流程內的引導盡量弱化于主流程。流程外的內容，沒有必要不要增加。這一點其實很重要，簡單的頁面讓用戶一眼就能找到他們自己感興趣的內容，讓他們看起來更舒服，更能專心于你要表達的內容上。而復雜的頁面會讓訪客一時找不到信息的重點，也分散了訪客的注意力。
遵從奧卡姆剃刀原則，科學設計簡單頁面的方法：
（1）只放置必要的東西
簡潔頁面最重要的一個方面是只展示有作用的東西，其他的都沒有。這并不意味著你不能提供給用戶很多的信息，你可以用“更多信息”的鏈接來實現這些。
（2）減少點擊次數
讓你的用戶通過很少的點擊就能找到他們想要的東西，不要讓他們找一個內容找得很累。
（3）“外婆”規則
如果你的外婆（其他老點的人）也能輕松的使用你的頁面，你就成功了。
（4）減少段落的個數
每當你的網頁增加一段，頁面中主要的內容就會被擠到一個更小的空間。那些段落并沒有起到什么好的作用，而是讓顧客們知道更多他們不想了解的東西。
（5）給予更少的選項
用戶希望在瀏覽網頁的時候思考的少一點。我們在展示內容的時候要努力減少用戶的思維負擔，這樣就會使瀏覽者使用更順暢，心態更平和。
十一、菲茨定律 / Fitts’ Law
從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小（上圖中的D與W），用數學公式表達為時間T = a + b log2(D/W+1)。
T=移動設備所需時長；a,b是經驗常量；D=設備起始位置和目標位置的距離；W=目標的寬度大小。
菲茨定律的啟示：
- 按鈕等可點擊對象需要合理的大小尺寸。
- 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，
- 出現在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因為不需要移動到屏幕的其他位置。
- ?要讓不常用或危險的UI元素難以被點擊。
案例一：Mac OS X默認將底欄（Dock)放到了屏幕的最下方；這樣的話底欄就變得“無限可選中”
案列二：
用戶拖拽想要刪除的應用到頂部刪除，頂部W無窮大，增加了用戶操作效率和精準度。
十二、席克定律
核心就是，一個人面臨的選擇越多，做出決策需要的時間就越多。
所以在設計中，我們要思考的是，怎樣最小最優化設計選項，太多的選項會延長用戶做決策的時候，甚至對一些“選擇困難戶”來說，會直接或簡介導致他們任務失敗。席克定律揭示了，頁面中的選項是如何影響用戶決策的速度和易用性。定義的范圍很廣泛，因為不是測量物理反應或技術扮演的角色，而是測量決策的心理過程。
在設計過程中，可將席克定律作為重要的參考設計原則。當開始畫線框圖時，看看功能樹“鏈接1、鏈接2、鏈接3…”，然后看下在流程中用戶需要做的所有決策。（最好是解決掉這些決策）
如果原型填滿，不要害怕多次使用操作召喚按鈕。當設計師組織選項、拉開選項間距、改變背景顏色、或者使用紋理時，正在突出設計的某個選項的同時其他的選項已經被弱化。這就是為什么設計不僅僅是修飾頁面或是突出某個按鈕。我們必須聰明的使用設計所帶來的影響力，這樣才能嚴格限制用戶需承擔的決策數量。
案列：Foursquare上的探索功能由無限的可能性變成了一個簡單的設置選項。
Foursquare的探索功能簡單的提供各種篩選項，減少手動輸入。來訪者被鼓勵使用簡單的服務：在輸入框中輸入想要的內容，然后點擊屏幕上唯一的按鈕。當然，設計的核心是Foursquare知道他的用戶對他們當前位置的周圍事物感興趣，因為這項服務就是關于分享和探索用戶的周圍環境。所以，默認的搜索當前用戶所在區域是個安全的賭注。其次，超過十億的數據點起到很到的作用。用這么大的一組信息，Foursquare在后臺可以做很多事情來猜測用戶真正對什么感興趣。
總結
交互設計師的重要價值在于使產品變得易用且人性化。這就需要我們深入學習交互設計的基本理論知識，幫助我們拆分問題，提高效率，創造出更好的設計。
相關閱讀
來源：喜馬拉雅XUED（ID：ximalaya_XUED）
本文由 @喜馬拉雅XUED?原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
- 目前還沒評論，等你發揮！
