⑴ 交互設計基礎知識整理
交互設計： 人與產品（系統/應用/服務等）互動交流溝通的過程設計；產品的輸入方式是否直觀、簡單、清晰、安全；產品的輸出方式在不同環境中的適應性、以人類和嫌李寬文化角度表述而易於被理解。
交互設計所需要了解的知識體系包括：控制項、布局、路程；用戶、目標、場景；用戶調研、競品研究、設計方法、設計心理學；拓展類的知識：心理學、經濟學、社會學、市場、運營……
易用性包括：易理解性、易學習性、易操作性。
·讓用戶容易理解： 層次清晰；功能區塊的劃分明確；區分可交互元素與不可交互元素；入口要明確，區分優先順序；
·讓用戶操作簡單： 符合常規的操作流程；符合平台的交互特性；產品自身操作的一致性；及時反饋；更短的交互路徑；減少用戶記憶；減少輸入，幫助用戶做選擇；防錯&容錯（不可用置灰、格式限制、可撤銷）；
1.狀態可見原則
2.環境貼切原則
3.撤銷重做原則
4.一致性原則
5.防錯原則
6.易取原則
7.靈活高效原則
8.易掃原則
9.容錯原則
10.人性化幫助原則
體驗目標/本能層次 ——想給用戶/用戶想要什麼樣的感覺（激發情感、喚醒某種記憶、視覺/聽覺/嗅覺等的刺激帶來的情感
最終目標/行為層次 ——用戶想做什芹亮么（使用產品的目的）
人生目標/反思層次 ——用戶想要成為什麼樣的人（品牌形象）
減少用戶輸入/避免重復、過多的操作（減少頁面跳轉；重要信息前置-不需要點擊就可以看到；先露出一部分，點擊後展開，讓跳轉過程更加自然、順滑；）
交互設計元素與非交互設計元素區分明顯
防錯&容錯
幫助用戶記憶
適當引導、提供幫助
交互路徑清晰、讓用戶知道自己所處的位置
保持一致性
文案清晰易懂
直覺設計
網易設計師：快速掌握交互設計知識體系的4個步驟 | 優設網 - UISDC
奧卡姆剃刀原則： 如無必要，勿增實體。
菲茲定律： 到達目標的時間與移動距離成正比，與目標大小成反比。
希克定律： 選擇越多，選擇時間越長。對於設計而言，可以幫助用戶選擇（默認選擇、不可選的情況置灰）、減少選項、或者將選項分類、區分權重、讓用戶分步選擇等。讓用戶一次面對的選項較少。
特斯勒定律： 復雜性守恆定律。產品的復雜性守恆不變，想要讓用戶在使用中變得簡單，需要將復雜性轉移給程序來處理，減少用戶的操作，提高輸入效率，讓人來做一些決策等簡單但是具有控制權的事情。
美即好用效應： 當產品足夠美觀、吸引人時，用戶可以容忍一些操作上的不方便。比較適合於文藝類、慢生活類的產品。不是故意做得難用，而是在設計決策時，可以為了美觀犧牲一些操作效率，如增大留白/顯示面積會讓瀏覽效率降低。
多爾蒂門檻： 系統/產品對於用戶的操作響應時間<400ms，才能讓用戶保持專注，提高沉浸感與效率。一方面對於動效設計而言，時間需要把控，不能過長。另一方面，對於網路、設備性能等引起的等待時間過長，可以考慮使用過渡方式（過渡動畫、佔位符）來減緩用戶的焦慮情緒。
雅各布定律： 操作方式與主流產品或者同類型方式保持一致，可以讓用戶更快上手。沒有更好的交互方式時，採用通用的方式會讓人更容易接受。
簡潔法則： 人的大腦會簡化、歸納、過濾外在的信息，方便簡單快速的理解外在的世界。
鄰近原則&相似原則： 距離接近/具有相似性特點的對象會被認為是一組。模塊內部、模塊之間的距離、樣式的一擾橋致/差異會區分不同的模塊。
帕累托原則： 二八定律。對於大多數事件，80%影響由20%的因素造成。
帕金森定律： 任何任務都會拖延，直到可用的時間都用完為止。
同域原則 ： 元素在一個具有明顯邊界的區域內，會被認為是一組的。類似卡片風格，卡片內的內容被認為是一組。
米勒定律： 短時記憶，人平均能記住7±2個項目。對於信息展示而言，一次展示的條目不宜過多。
馮·雷斯托夫效應： 當存在多個相似的對象時，與眾不同的那個容易被記住。對於設計而言，這也是「設計點」的所在。突出真正重要的內容。
蔡格尼克記憶效應： 人們對於未完成的任務的記憶比已完成的更深刻。對於任務的設計，需要同時關注已完成與未完成，促使、激勵人們去完成未完成的任務。
人、動作、工具或媒介、目的和場景構成交互設計的五要素
·理解
·抽象
·架構
·呈現
·細節
該理論任務交互設計主要因素由圍繞產品（PRODUCT）為中心的人（PEOPLE）、人的行（ACTIVITY）、環境（CONTEXT）、技術（TECHNOLOGY）所組成。
《用戶體驗要素》
網易設計師：快速掌握交互設計知識體系的4個步驟 | 優設網 - UISDC
《About Face 4: 交互設計精髓》
《交互設計：從物理邏輯到行為邏輯》
專業科班的答案！一個完整的交互設計流程是怎樣的？
讓PM無言以對！可能是最專業的交互設計流程
京東內部資料：超好用的用戶體驗提升模型
老年人家庭醫療保健產品交互設計研究
讓設計更有說服力的20條經典原則：特斯勒定律 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：美即好用效應 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：多爾蒂門檻 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：希克定律 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：雅各布定律 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：簡潔法則 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：帕累托原則 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：帕金森定律 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：同域原則、米勒定律 - 優設網 - UISDC
讓設計更有說服力的20條經典原則：馮·雷斯托夫效應、蔡格尼克記憶效應 - 優設網 - UISDC
⑵ 交互、體驗設計概念梳理
交互入門【 UISDC 】
交互設計是：以人的需求為導向，理解用戶的期望、需求，理解商業、技術以及業內的機會與制約。基於以上的理解，創造出形式、內容、行為有用、易用，令用戶滿意且技術可行，具有商業利益的產品。
對需求的時候，必須要搞明白三個問題：為什麼要做這個？（目標）；這個需求針對的用戶群是什麼？（用戶）；什麼場景下會使用到這個功能（場景）。
基礎：設計的美學知識。交互設計的基本原則，如一致性、減少輸入和減少操作步驟等；平台特性及設計規范；做交互設計方案的方法，如繪制流程圖、原型圖和撰寫交互設計規範文檔。
進階：特定控制項設計，如標簽欄、列表界面和彈窗口，匯總已有設計的優缺點和設計規律；特定界面設計，界面中如何呈現特定的信息，如應用程序首頁、個人資料或者數據流界面；獨立常用功能設計，如注冊登錄、刷新和功能引導，需要了解功能背後的技術知識和產品策略，需要繪制流程圖，組織線性的操作流。需要調研已有產品，並試圖區分它們的優缺點。
中階：多項功能設計，一個界面融合單獨的功能，需要應用到設計方法和架構的思路。設計方法是挖掘用戶需求和推動設計優先順序的情景故事法、卡片分類、人物角色、訪談和問卷等；總結方法和已有的設計風格研究；競品和優秀產品分析；最新的系統和產品分析；掌控技術。
高階：產品架構；設計趨勢研究；產品發展趨勢。
理解什麼是設計；學習關注人，而非僅僅是產品；讀書更重要的是去感受和了解作者的體系是怎麼樣的；An architect knows something about everything. <101 Things I Learned in Architecture School>
交互設計師特質：邏輯思維能力強、數據分析能力好、同理心、激情、審美眼光、創新意識、良好的溝通能力、敏捷的執行能力、膽大心細、有大局觀、善於觀察、仔細傾聽
要有自己信仰的設計原則，最好自己去總結，如「縮減、隱藏、附加、組織」。
要有自己的品牌意識
交互設計師定位【 】
交互指的是產品與它的使用者之間的互動過程，而交互設計師則是秉承以用戶為中心的設計理念，以用戶體驗度為原則，對交互過程進行研究並開展設計的工作人員。
產品往往會給出一些故事，告訴大家用戶到底需要什麼樣的東西，交互把東西長什麼樣告訴其他成員。 產品經理的核心是用戶需求 ， 交互設計的核心是用戶體驗 。用戶體驗是用戶對於使用或者期望使用的產品、系統或服務的主觀感受和反應。用戶體驗五要素從表現、框架、結構、范圍、到戰略，劃分為任務流、信息流。交互設計師主要圍繞結構層和框架層，向上對接產品經理打通用戶需求，如交互設計、動效設計、信息架構、信息設計、界面設計、導航設計等等。
情景化設計【 知乎 】
Contextual Design 是交互設計中以用戶為中心的設計理論，是走到用戶身邊去，觀察、發現用戶在某一活動中的切實問題，並加以解決。其較少採用問卷調查的形式，主要是以觀察用戶的同時對其進行訪談和詢問。
原則一：根本目的是提升用戶體驗，認清用戶，包括但不限於用戶的能力，目的，以及使用產品的場景，有針對性地改善用戶體驗。
原則二：用戶很清楚要怎麼做，但他們不一定能清楚地意識並描述他們行為的原因。切實觀察整個行為過程，他們的動機、行為、策略、工作環境等，發現那些被忽略但是對整個行為過程起作用的細節。
原則三：好設計需要用戶協作。及時向用戶提問。
原則四：設計要整體化：注意整個產品過程中的連貫性，保持功能、結構、布局的連貫性。
原則五：設計需要明確地表現，及時用草圖、圖標的方式記錄你的概念。
信息架構【 Quizlet 】
信息架構（Dillon）就是設計、落實、評估信息空間讓其能夠變得被潛在利益相關者從人性和社會層面接受。
設計是打造一款工具，讓它能夠契合具體的任務、執行人、還有使用的情景。
信息設計就是打造信息的呈現方式，契合具體任務、執行人、還有使用情景。
信息架構是一個讓信息和功能可被高效獲取並契合具體任務、執行人、使用情景的設計過程的應用。
UX專業名詞翻譯
交互原型設計：Accessibility 可達性、above the fold 首屏、motion design 動態設計、progressive disclosure 漸進式呈現、call-to-action buttons 行動召喚按鈕、biometrical authorization 生物式授權、physical home button 物理主頁按鈕、decluttering 清楚雜亂、visual hierarchy 視覺層次、1/3 split view 三分之一屏、key color 主色調、color scheme 配色方案、flick 快速翻動、text fields 輸入框/文本框、label 標題/標簽、helper text 輔助說明/幫助文字、visibility icon 可見性切換圖標、autofocus 自動獲取焦點、text area 文本區域、soft/virtual keyboard 軟鍵盤、placeholder/hint text 佔位符文本、progress bar 進度條、picker 選擇器、popover 彈出框、engaging 迷人的
原則與方法【 人人都是產品經理 】
3次點擊原則：用戶點擊三次仍然無法方法他們想要的頁面，他們將要離開。
5秒測試：向用戶展示應用或者網站5秒，然後讓其回想他們剛才看到的內容。這是評價關鍵視覺效果，以及評判用戶的關注點是否符合預期影響的好方法。
二八法則：由帕累托原則 Pareto principle 引出 ，適用於任何網站，網頁app或軟體環境，即80％的結果是由20％的功能/特徵所承擔。
AB測試：將兩個不同版本的線上內容提供給用戶，來觀察他們更傾向於哪一個。
Accessibility 可訪問性：指網站或app是否可以被輕松使用和理解，以及該網站/app對殘疾人或其他人群的特殊需要是否考慮完善，比如通過配色設計使色盲者也能輕松閱讀。
主動傾聽：一種采訪技巧，即采訪者通過認真傾聽和及時地反應，來使交流更好地進行下去。
網頁/應用數據分析：可以有效地提供你的網站/app的流量信息，它告訴你流量從何而來，以及用戶主要在哪裡停留。它為了解你的網站/app是否可行提供了一個很好的視角。
卡片分類法：一種幫助設計/評估網站信息架構的方法。在卡片分類活動中，參與者按自己的理解將細目分成不同的組，也可能需要給這些組貼上一定的標簽。你可以使用卡片、紙張或在線卡片分類工具來進行卡片分類。
點擊流分析：指在網站分析中收集和分析用戶會去訪問哪些頁面，及以什麼順序去訪問等數據的過程。訪問者在網站訪問的路徑稱為點擊流。
競品分析：對當前和潛在競爭對手的優勢和劣勢的評估。
使用情景分析：指收集和分析以下信息：目標用戶、任務、支持其目標的工具、產品使用的物理環境、技術約束及其他會影響用戶體驗的因素。情境分析數據可以通過訪談、研討、調查、站點訪問、焦點小組座談、觀察性研究和情境調查來收集。
轉換率：指在線完成目標交易的訪問者所佔比。在電子商務中，轉化營銷是指將網站訪問者轉化為付費客戶的行為。提高轉化率的過程稱為轉化率優化。
日記分析：指收集有關用戶行為、活動和經驗的 定性數據 的研究方法。通常情況下， 用戶定期進行主動報告活動以創建活動日誌 ，日記分析周期可以從幾天到一個多月。
用戶參與度：如何引起用戶關注並保持其注意力的度量。任何吸引用戶關注一個頁面（無論是按鈕還是菜單）的功能都是至關重要的。
錯誤分析：任務分析的一部分，用於標識每個指定的任務流集合出現錯誤的頻率和類型。錯誤率是在給定的時間段內發生錯誤的頻率。
人種志：通過用觀察和面對面交流等方法，對人及其所處環境進行的一種研究。
眼球追蹤：研究人的眼動觀察屏幕或環境時產生的行為模式。通過眼動跟蹤軟體可以追蹤用戶眼睛在屏幕上的運動以了解用戶頻繁關注何處，並會以什麼順序瀏覽。
魚骨圖：旨在識別給定情況下因素之間因果關系的圖表。它由一個指出了問題的「頭」和代表了各種因素及其分類的延脊椎排列的骨骼組成。魚骨有助於視覺化指出特定問題的潛在原因。
費茲定律：一個數學模型，根據目標大小和鄰近度來預測指向目標所需的時間。目標越小離得越遠，用戶與之交互的時間越長。
焦點小組訪談：這是與參與者的一組討論，主持人對特定主題引導出一系列的問題。其目的是獲取有關用戶、產品、概念、原型、任務、策略和環境的反饋。
格式塔原則：也被稱為「簡單原則」(Law of simplicity)，即每一種刺激都以其最簡單的形式被察覺。人們不能孤立地去感知事物，而是將其作為更大的整體的一部分去觀察該事物。
HEART框架：Google的HEART框架可以讓你從更高的的維度去衡量用戶體驗。衡量的指標是：幸福感、參與度、採納度、保留度和任務分析。
希克定律：描述了一個人對於他/她的選擇作出決定所需的時間。增加選擇次數將增加決策時間。
易學性：學會有效地使用一個系統或界面的難易程度。
心智模型：用戶心智模型越接近網站的功能，網站的可用性就越高。
參與性設計：試圖在設計過程中使所有利益相關者（如員工、合作夥伴、客戶、最終用戶）積極參與的設計方法，其目的是確保最終結果滿足他們的需求。
人物畫像：基於可用數據和用戶訪問所創建的代表性用戶。雖然角色的個人資料可能是虛構的，但用於創建用戶類型的信息不是。
定性研究：一種關注語境和言論，而不是數字或統計數據的人類行為學研究。
定量研究：一種關注數字和統計數據的人類行為學研究，可以通過民意調查，問卷調查和咨詢來完成。
調查：針對特定群體提取特定數據的所產生的一個問題清單。調查可以通過電話、互聯網、面對面等其他各種方式進行。
任務分析：用於識別和理解用戶與網站/app交互行為的方法。
任務流程圖：一種在網站上對任務及其相互關系的視覺表達方法。
出聲思考：一種在可用性測試中收集數據的方法。在可用性測試期間，通過讓用戶思考並說出他們所見所為來收集有價值的信息。
可用性：用戶與用戶界面進行交互的有效性和滿意度。
用戶流：用戶完成任務所執行的步驟。「頂部路徑」是最常見的用戶流。
用戶研究：側重於通過觀察技術、任務分析和許多其他方法來了解用戶需求、行為和動機。
【注意點】
注意用戶做什麼，而不是他們說什麼
什麼是交互設計【 知乎 】
交互設計師工作內容：定義用戶特點、需求、目標；理清用戶任務和流程；定義功能；整理信息/頁面結構；提出設計方案草稿，製作原型，團隊討論；跟進設計和開發；跟進上線和迭代優化；循環
讓人能夠創造人造物、建立對人造物的基本認知、讓人造物的使用符合創造的意圖。
界定一個設計是否屬於交互設計的范疇：
1、人造系統復雜與否？它是否能 被人腦快速理解 ？
2、人造系統的「對話機制」是物理界面還是 虛擬界面 ？
可用性+用戶體驗：構建簡單有效的心理映射模型。
交互設計方法論【知乎魏海海】
研究方法論（操作流程）
1.定性研究--用研（人群調查，比如問卷，訪談...）
2.設定人物角色原型
3.問題腳本，情景化思考設計，角色在使用中遇到的問題（發現問題）
4.動作腳本（解決方法）
5.畫線框圖（草圖）
6.製作原型（體現完整流程）
7.原型可用性測試
8.進入設計開發
測試方法論（列舉了常用到的一些方法）
灰度測試（A/B test）、布爾邏輯（是+否=是？「or，and，not」）、尼爾森交互設計法則（About Face）
整體的統一、突出重點/合理的隱藏、從更高一層去考慮下層的設計，戰略層>內容層>結構層>框架層>表現層、實體感即隱喻/系統符合世界的操作、鮮明/形象/深思熟慮（icon 顏色 位置 大小的細節）、有意義的『動效』（合理的動效，有目的的）、符合用戶習慣、可反悔原則、反饋原則、『不走死胡同』原則
啟發式評估：
過程：1)觀察者解釋評估對象、2)評估者了解或使用評估對象、3)評估者評估、4)集體討論
原則：1)系統狀態可見、2)系統與用戶現實世界的匹配、3)用戶控制與自由、4)一致性與標准化、5)錯誤預防、6)認知而不是記憶、7)使用的靈活性與效率、8)美觀而精煉的設計、9)幫助用戶識別、診斷和修正錯誤、10)幫助和文檔
Android Material Design 的App的設計語言
動畫效果、樣式風格、布局結構、組件規范、紋理、可用性
交互設計的分析層面著重點有：
（人）人物原型、（事）要解決的需求、（物）所在的當下場景
再概括為：（什麼人）了解你的目標用戶、（什麼事）了解用戶要做的事情/同理心，（解決方法&為什麼要這么做）用講故事的方式描述解決方案、（實現解決方案）（心理模型 與 實際模型 的結合）用流程圖，線框圖來解決。
UXD【IxD Foundation】：
UX設計的七個因素標准：有用 useful、易用 usable、可尋 findable、可信 credible、合意 desirable、可達 accessible、有價值 valuable
交互設計是設計人機交互界面，包括五個維度：詞句、視覺呈現、物理空間與實體、時間、行為。
數據分析的UX
以用戶為中心設計——讓終端用戶參與進來
功能需求——優先列出功能列表
數據探索分析——理念產生設計要求
可視化編碼——選擇正確形式
交互設計——優化用戶交互
顏色和展示設計——融合美學和科學
【每一個數字背後都有一個重要的故事，但這需要你給他們一個清晰的並有說服力的聲音。——Stephen Few】
設計規范：
小程序：
蘋果：
安卓/material design：
微軟：
⑶ 交互設計相關理論
1.1 需求挖掘
1）內部挖掘 ：頭腦風暴、業務需求、運營反饋、產品經理
2）外部挖掘：用戶研究（可用性測試、焦點小組、問卷調查、A/B測試等）
1.2 需求分級
1）通用四象限法
適用場景：交互設計師收到很多需求時
①重要且緊急的需求：立即搞定
②重要但不緊急的需求：排期實察陵現
③不重要但緊急的需求：需要考慮
④不重要且不緊急：不用實現
2）kano模型
適用場景：收集到的需求當中，哪些需求能顯著提升用戶的滿意度？
KANO 模型是東京理工大學教授狩野紀昭(Noriaki Kano)發明的對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。
①必須具備的（Must-have）
②所期望的（Linear）
③超出預期的（Exciter）
3）馬斯洛需求層次理論
適用場景：需求實現的價值有多大？
該理論是由美國心理學家亞伯拉罕·馬斯洛在1943年在《人類激勵理論》論文中提出，人類需求像階梯一樣從低到高按層次分為五種，分別是：生理需求、安全需求、社交需求、尊重需求和自我實現需求。
①生理需求
②安全需求
③社交/情感需求
④尊重需求
⑤自我實現需求
註：位於金字塔頂端的需求，能使利潤最大化。
2.1 用戶體驗五要素
適用場景：採用五要素的方法，從不同層次指導產品的框架設計。
戰略層：產品目標及其目標用戶（做什麼、為誰而做？）經營者和用戶分別想從網站得到什麼。
范圍層：功能及其內容需求整合（需要做哪些？）
結構層：交互設計及其信息架構（怎樣做？）
框架層：界面設計、導航設計和內容（信息）設計（要做成什麼樣子？）
表現層：功能及內容的視覺呈現（做成了什麼樣子？）
2.2 神奇數字7±2
1956 年喬治米勒對短時記憶能力進行了 定量研究 ，他發現人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息後人類的頭腦就開始出錯。與席克定律類似，神奇數字 7±2 法則也經常被應用在移動應用交互設計上，如應用的選項卡蠢手不會超過 5 個。
2.3 席克定律 Hick』s Law
定律內容：一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。用數學公式表達為反應時間 T=a+b log2（n）。多應用於軟體/網站界面的菜單及子菜單的設計中，在移動設備中也比較適用。
2.4 Occam』s Razor 奧卡姆剃刀原理（簡單有效原理）
這個原理被稱為「如無必要，勿增實體」，即如有兩個功能相等的設計，那麼選擇最簡單的。
2.5 卡片分類法
適用場景：為我們設計導航、菜單以及分類提供幫助，例如，銀行APP轉賬和查詢余額兩個功能是否放在一起？資金歸集呢？
卡片分類法是一種規劃和設計互聯網產品或者軟體產品的信息構架的方法。它屬於用戶研究中的一種方法，簡單來說就是用戶來對信息卡片（或者是菜單卡片）進行歸類，從而得出信息關聯性的一種方法。我們最後把關聯性更強的菜單放在一起，就形成了較為科學的一套信息分組。
3.1 格式塔心理學
適用場景：界面設計時，選擇有容易理解的形狀，把相關聯的元素組織在一起。
3.2 交互設計四策略
適用場景：界面設計元素組織
1）刪除-去掉不必要的的按鈕，直至減到不能再減
2）組織帶沒嫌-按照有意義的標准把按鈕劃分成組
3）隱藏-把那些不重要的功能隱藏，避免分散用戶的注意力
4）轉移-只在主要界面/設備保留最基本功能，將其他控制轉移到其他界面/設備/用戶里
3.3 尼爾森可用性十大原則
適用場景：產品設計與用戶體驗設計的重要參考指標。
1）Visibility of system status 系統可見性原則
2）Match between system and the real world 匹配系統與真實世界（環境貼切）
3）User control and freedom用戶的控制性和自由度（撤銷重作原則）
4）Consistency and standards一致性和標准化（一致性原則）
5）Error prevention 防錯原則
6）Recognition rather than recall 識別比記憶好（易取原則）
7）Flexibility and efficiency of use使用的靈活高效（靈活高效原則）
8）Aesthetic and minimalist design 審美和簡約的設計（易掃原則）
9）Help users recognize, diagnose, and recover from errors 幫助用戶識別，診斷，並從錯誤中恢復（容錯原則）
10）Help and documentation 幫助文檔（人性化幫助原則）
3.4 費茨定律 Fitts』 Law
適用場景：菜單的設計，可點擊對象的尺寸設計
定律內容：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小（上圖中的 D與 W），用數學公式表達為時間 T = a + b log2(D/W+1)。
⑷ 交互總結篇（一）：框架布局篇
上篇文章裡面簡單介紹了一下關於交互設計分析的三維度，即框架、流程和狀態；這里就不做特殊介紹了，詳細內容請見 《三維度解析一個產品的交互設計》 。
而本文作為交互設計總結篇的第一篇——框架布局篇，主要是系統地整理一下交互框架設計所需要考慮到的方方面面。
首先我們要先理解一個概念：
什麼是交互框架？ （主要是指互聯網產品）
框架是整個或部分系統的可重用設計，表現為一組抽象構件 及構件實例間交互的方法
這是官方的定義，翻譯成人話就是搭建一個產品能夠使其可拓展，規范化，有條理，可快速迭代優化的方法。好像還是不好理解，讓我們舉一個通俗易懂的例子：假如我現在有個空房子，我要重新改造它，那麼我首先要考慮的就是其房間結構（ 也就是框架 ），比如我要設計幾個卧室，幾個客廳，分別佔多大面積，在什麼位置等等（ 信息架構 ）；然後還要考慮如何設計門和窗戶，怎麼能夠在不同房間互通（ 導航方式 ）；接著再思考每個房間裡面分別需要怎麼布局，分別需要哪些家居和電器，具體在什麼位置（ 頁面結構 ）；然後再不停的細分下去，直到考慮全每個細節，那麼一個產品完整的框架就基本上搭建出來了~
理解了框架的概念後，可能我們還是會有疑問：
為什麼要做框架設計？
還是上面房子的例子，假如我不考慮房間布局，隨心所欲地將我的傢具和電器到處擺放，我將卧室放在房子的最裡面，我需要依次穿過客廳、廚房、洗手間才能到到達；我將馬桶放在卧室，把床放在客廳，把廚具放在洗手間，把衣櫃放在陽台，把洗衣機放在廚房……各位可以想像一下你的房子要是要被設計成這樣你還想住嗎？同理，一個框架結構混亂的產品你的用戶也是不會用的。但凡在行業里有些影響力的互聯網產品，其產品的框架和結構必定是由產品和設計人員精心思考並設計過的。框架是一個產品的骨骼和經脈，它是一個產品能用與否的基礎所在，所以在開始產品設計之前先進行框架結構的梳理是非常非常重要的！
那麼對於交互框架：
我們又該如何去思考和設計呢？
我將其總結為3個步驟：
對於產品和設計來說，這個詞肯定是不陌生的，那麼信息架構是個什麼東西呢？
這就是某app產品的信息架構圖，通過不同級別的分類，將其所有的功能點展示出來的一個功能信息框架圖。一般來說這種架構圖主要是由產品產出，而有些比較專業的交互前期也會參與其中，下面還是以設計房子為案例來探究一下信息架構到底該怎麼做。
首先我們要想清楚房子有幾個房間，分別需要哪些家居和設備鬧春廳（液隱收集需求）
收集完需求後，我們需要開始對需求進行整理和分類，這里整理的規則可以參考 卡片分類法和卡諾模型 ：
整理完成後最後產出信息架構圖：
信息架構完成後並沒有結束，你還需進一步思考： 還有沒有其他問題呢？有沒有漏掉的功能？功能分類有沒有問題？這個框架拓展性如何？結構是否足夠扁平？ 等等……如果不考慮森世清楚那麼就很有可能會出現馬桶被擺放在卧室這種情況了。
當信息架構確定好了之後開始思考第二步：
導航就像是房子裡面的門，是貫穿整個產品的入口，導航做的好的能讓用戶快速達到目標，導航做的不好會讓用戶迷失在茫茫的信息海洋中不知所措，目前在app業內主要的導航模式有3種： 選項卡式導航、抽屜式導航和跳板式導航。
選項卡導航：iOS上又叫Tab bar，典型代表像淘寶、微信，這類產品相對體量較大，產品結構和流程邏輯也都較為復雜多變；
抽屜式導航：代表如滴滴、摩拜等，這類產品都有一個很共性的特點就是「單線程」，即用戶目標明確，操作流程單一，屬於「強流程，弱框架」的類型。
跳板式導航：也叫9宮格式導航，典型代表如美圖，這類產品也有著比較鮮明的特點「多線程單流程」，即功能入口較多（一般5個以上），操作流程單一，常用於美圖類產品和一些B端類產品。
雖說不同的產品形態決定了其不同的導航模式，然而業內幾乎90%的app都是採用選項卡導航，選項卡式導航的確擁有非常顯著的優勢：結構簡潔清晰，操作便捷，拓展性強，穩定性好，確實是很多app首選的導航模式，然而並非一概而論， 你所選擇的導航一定是跟你的產品類型和框架結構相互關聯的，滴滴採用抽屜式導航而非選項卡導航是由其產品本身屬性所決定，豆瓣一刻的導航採用抽屜式是因為本身產品框架結構較為簡單的原因。 所以採用什麼導航方式要靈活變通，沒有最好的只有最適合的，比如下面3個例子：
片刻使用的是駝式導航，是選項卡導航的一種變形，強化了某一個重要或高頻繁操作的功能，多用於博客類，直播類app中；
好奇心日報用了一種很罕見的懸浮導航，至於為什麼會這么做，各位可以自己去思考；
Hyperlapse更是大膽，它根本就沒有導航，這個產品全身上下就只有一個功能；
結合自己產品類型和框架結構，靈活選擇導航，不要拘泥於形式，多嘗試多思考，總會發現最合適的那個。
完成導航設計後，來到最後一個步驟：
頁面結構即頁面布局，是針對單個頁面不同控制項和元素的布局展示關系，就像房子的房間大小位置都設計好了，那麼接下來就考慮每個房間裡面該怎麼添置家居了，比如卧室裡面的床，衣櫃，台燈，空調等等這些東西該怎麼布置，分別放在什麼方位，具體佔多大位置，這樣擺有什麼影響等等，房間裡面布局的好壞影響空間的運用，也影響了房間的美觀整潔和整個房子的格局風格，同理， 頁面的布局好壞就決定了用戶的使用和閱讀體驗，決定了整個產品的調性和品位，最終影響了產品的轉化。
那麼一個優秀的頁面布局具備哪些特點呢？
1、主次分明，結構清晰：
結構清晰的頁面各個元素和控制項處理的非常得當，相反結構混亂的用戶的關注沒有焦點，看了很長時間都不知道你的頁面想表達什麼，也不知道該如何操作，下面看兩個例子：
12306的首頁結構看起來似乎毫無層次感，頁面結構就像是隨意的信息排列，再看看智行的首頁，卡片式結構視覺焦點更清晰，信息的排版和布局也更有層次感。
2、化繁為簡，引導清晰：
特別是移動端產品，手機屏幕尺寸有限，如何在最短的時間里吸引用戶的眼球， 設計師需要做的是做減法，刪除干擾用戶的不必要的內容，強化核心的操作流程，快速引導用戶達成目標。
讓我們再看一下上面12306的首頁，可以發現它的查詢頁麵包含了出發點、目的地、出發日期、出發時間、席位、車次篩選和添加乘客，也就是說用戶需要瀏覽這些信息後然後再進行一步步的操作選擇，等這些全部設置好了之後估計票早都搶完了，而智行就機智了很多，它將出發時間，席位，添加乘客等非重要信息進行了刪減，就連車次篩選也只是用了開關設置，所以大大提升了用戶的查詢效率。操作指引方面，出發時間是一個非常重要的必填操作，智行對於時間選擇有比較強的引導，而12306的出發時間根本看不出來是可以點擊操作的。
3、操作方便：
這里操作方便更多適用於移動端，特別是現在手機尺寸普遍越來越大，用戶單手操作越來越困難，所以我們在設計頁面結構布局的時候也是要考慮到人體工程學的，特別是某些特殊場景使用的app，比如地圖類應用，用戶使用場景多在戶外（步行、騎行、公交車），用戶單手操作的場景非常之多，如下圖所示：
左圖是用戶單手操作的觸摸區域圖，從圖中可以看出界面的左上區域屬於觸摸困難區，下方是舒適觸摸區，所以在處理頁面信息布局的時候就可以考慮將重要展示類信息放在頁面的頭部和中部，而需要操作類的控制項和按鈕可以考慮放在下方用戶容易操作到的區域。我們再看右圖，是高德的首頁，我們可以看到高德的頭部有個搜索框，是屬於重要按鈕控制項，然而卻放在了頭部用戶難操作的區域，那麼高德當然也意識到了這個問題，於是乎他們在頁面的底部放了一個「路線」入口，能夠讓用戶在單手操作的情況下同樣也能快速完成路線查詢。
其實關於頁面結構，設計師們要考慮的點很多，也不僅僅單純地用幾個點就能完全涵蓋進去的，不同的產品屬性會決定其框架和導航，也決定了其頁面的展示布局，比如網易新聞和淘寶的信息展示方式就完全不同，一個是瀏覽，一個是逛，兩者間的使用場景和用戶心理是完全不一樣的。即使是同一屬性的產品其頁面結構和布局也是千差萬別的，比如下面4個例子：
雖然都是互聯網金融產品，也都是展示首頁，然而可以看到每個產品的首頁展示形態完全不同，有的主推產品和收益，有的引導登錄購買，有的主推運營活動，有的主打社區互動， 究其背後形態各異的原因跟其產品定位與運營策略有重要的關聯，設計師們分析產品的時候不僅僅需要從設計本身出發，還要思考更多背後潛在的原因，從而達到真正意義上的「閉環」。
好了說了這么多，最後總結一下，產品交互框架設計需要經歷的3個步驟：
1、信息架構： 功能需求的篩選與分類，根據不同權重和屬性進行級別的劃分；
2、導航模式： 根據產品屬性和產品架構來選擇最為合適的導航方式；
3、頁面結構： 結構主次分明、結構清晰、引導明確以及操作方便是一個優秀的頁面結構的必要條件；
框架是死的，人是活的，設計的思維大多都是發散的，合適的方法論確實能夠在關鍵的時候提供思考的方向，但不可固步自封，設計師需要不停地學習、思考、交流、總結、創新，因為這個過程本身才是設計最重要的意義~
（待續……）