前言：本文為網易交互設計微專業干貨提煉，視頻不方便隨時查看，所以整理出框架要點方便回顧。一些截圖可能不太清晰，敬請諒解。
首先是整個專業課的課程框架：
Chapter1 揭開交互神秘面紗
第一章 揭開交互神秘面紗
本章以兩張圖概括：
第二章 玩轉Axure
本章老師以一個案例簡要介紹了Axure的界面、交互，Axure的詳細教程可以參考小樓老師Axure RP 7.0從入門到精通視頻教程。
第三章 平臺設計規范與常見的設計模式
（一）ios與Android的設計規范
1、ios端
頁眉-導航欄
用于實現在應用不同信息層級結構間的導航，有時候也可用于管理當前屏幕內容。
頁腳-工具欄
用于放置操作當前屏幕中各對象的控件。既可以放icon，也可以放文字。
Tips：如果想讓工具欄上可以放置更多功能入口，可以選擇icon；如果工具沒有那么多，又想表達更加清晰，可以選擇文字。
頁腳-標簽欄
讓用戶在不同的任務、界面和模式中進行切換。
Tips：一般標簽放置不超過5個
2、Android端 4.0
頁眉-操作欄（Action Bar）
操作欄用于實現app內視圖的切換和層級間的導航（返回上層），還會放置一些重要控件。
3、Android端 5.0
頁眉-應用欄（APP Bar）
在舊版本中叫做操作欄，用于顯示應用的標識、應用導航、內容搜索以及其他操作。
4、常用控件
5、手勢介紹
（二） 移動產品模式設計之導航欄
1、標簽式導航
入口扁平化；導航控件面積大，功能間快速切換；
ios一般布局在底部，安卓一般布局在頂部
當標簽過多（＞5個）時，可使用滾動式導航，但要讓用戶知道這是可滾動的。
2、分段式導航
尺寸較小，能輕松融入界面，不占用空間。
Tips:它只是ios的標準控件；不適合作為一級導航，往往作為二級導航與標簽導航嵌套使用
3、舵式導航
多個功能中有某個功能特別重要
4、抽屜式導航
隱藏不重要功能，讓用戶更關注核心功能，大大減少主界面中的導航控件數量
Tips：不要在抽屜式導航放置太重要的功能
5、下拉菜單式導航
可與滾動式導航結合
（三）移動產品模式設計之列表
1、垂直列表
閱讀習慣：從左往右，從上往下。條目詳細程度與條目數量要平衡。
模式：標準模式（純文字）、圖文結合模式、控制模式、時間軸形式、對話形式
應用到導航：簡單清晰、冷靜高效
適用于二級導航
2、橫向列表
banner輪播大圖展示型、輪播小圖展示型
Tips：需要提示用戶屏幕外面還有內容
應用到導航：優點-隱藏其余導航選項，使頁面簡潔，讓用戶在同一時間只專注于一個目標
缺點-用戶很難跳轉到非相鄰的導航選項
體驗感強，適用于一些功能選項較少，且不頻繁跳轉的產品，又或者是瀏覽體驗式的產品
3、網格列表
展示以圖片為主+文字輔助，可以展示更多內容，更富有感染力 ? ?eg：相冊
變形：瀑布流
應用到導航：eg：手機主頁、支付寶
相比垂直列表在右側區域有很大空閑，宮格導航可以充分應用整個頁面
適用于二級導航，在有限空間羅列大量功能
（四）Web端設計規范與設計模式
主要分為：logo、導航、用戶登錄、網站推廣內容、廣告、其他信息
logo：左上角
導航：頂部一級導航、左側二級導航。當用戶下拉網頁不在第一屏時，可以將導航固定在頂部
用戶登錄：右上角
自適應設計：自動識別屏幕寬度、并做出調整的網頁設計
Chapter2 ?設計需求分析與方案選擇
第一章 ?設計方案不能讓人滿意的原因
業務需求=業務目的+業務目標
用戶需求=目標用戶（特征、經驗）+場景+行為+體驗目標
用戶體驗路徑：用戶在使用前、使用中、使用后的各個接觸點，確保設計方案能夠形成閉環
1、為什么要做這個功能？--業務目的
2、產品期望得到怎樣的成果？--業務目標
3、誰來使用這個功能？--目標用戶
4、他們為什么要使用這個功能？--用戶需求
5、如何讓他們都來使用這個功能？--將業務目標轉化為用戶行為
第二章 ?設計需求分析方法簡介
詳細步驟如下：
第一步、分析業務需求--將業務需求轉化為用戶行為
第二步、分析用戶需求
1、明確目標用戶，而不是定義（產品經理的工作）
產出：persona
目標用戶是產品或服務的直接接觸對象，可以從特征和經驗描述目標用戶
2、用戶需求=目標用戶（特征、經驗）+場景+行為+體驗目標
讓目標與設計建立關聯（GSM）：目標（Goal）+信號（Signal）+衡量指標（Metric）
eg：快速完成在線表單填寫+用戶填寫申請表單+表單的填寫效率高
第三步、分析關鍵因素
關鍵因素：動機、擔憂、障礙
使用前 創造--動機 ? 有哪些因素會促使用戶產生注冊的動機？
排除--擔憂
使用中 解決--障礙 ? eg：新手指引
可以通過用戶調研
第四步、用戶體驗路徑
1、畫出用戶體驗路徑 ?eg：找到申請入口-查看介紹-填寫申請表單-等待審核-獲得審核結果
2、整理各個接觸點的問題和驚喜（用戶研究）
3、判斷各個點的情緒高低
4、連接情感曲線
第三章 ?選擇合適的解決方案
如何推銷設計方案：
1、將思考過程可視化
2、自己人效應：對自己人說的話往往更加信賴、更加容易接受
3、準備一份PPT
4、講一個動聽的故事
5、掌握必要的演講技巧和表達能力
Chapter3 規范信息架構與流程設計
第一章 ?信息架構設計
（一）認知產品信息架構
對信息進行結構、組織方式以及歸類的設計，好讓用戶容易使用和理解。
-讓用戶一眼就明白你的產品能做什么，大概怎么用
-用戶能在需要的時候容易的找到某個功能，即容易記憶的
（二）產品信息架構設計的前期工作
1、了解用戶、場景、習慣
persona、場景→習慣
尊重用戶的習慣：用戶通常用你的產品做什么？用戶用這類產品最關心什么？用戶有哪些思維定式？用戶用什么類似的產品？
不要在不必要的地方體現差別
2、了解業務需求
不僅要從產品經理那了解需求，還可以從市場和運營了解，從而讓信息架構有更多的兼容性，讓產品有更多的可能性
3、調研競品的信息架構
找3-5個同類競品分析他們的信息架構,并找出他們的共性和差異，共性是要遵循的用戶習慣，差異是設計創新點
工具：Xmind
4、卡片分類法
讓用戶對功能卡片進行分類、組織，并給相關功能的集合重新定義名稱的一種自下而上的整理方法。即讓用戶來搭建信息架構。
可以在了解競品后，進一步了解用戶的心智模型。
（三）產出產品信息架構設計
1、對信息架構進行重要性分級（≠排序）→Axure 站點地圖
2、尋找層和度的平衡
層：信息架構樹的深度 ? ? ? ? ? ? ??
? ? ? ?層過深：進入某一葉功能時需要非常多層級，操作困難，一般不超過5層
度：某一節點子節點的數量 ? ? ? ? ? ? ? ? ? ? ??
? ? ? ?度過多：在某一層級有太多的內容，用戶認知成本增加，容易找不到想找的內容
層和度相互轉化，需要找到一個平衡
3、驗證核心使用流程
a、盡量保證根據樹結構進行層級自上而下前進
b、不連通層級間的跳躍，盡量發生在最后一步驟
4、考慮信息架構和交互構圖的關系
tab式導航=第一重要級中多項
Drawer式導航=第一重要級中只有一項，常見于工具型應用
5、為討論做好準備
（四）評判產品信息架構設計
1、用戶測試
a、用戶是否在不介紹具體產品的情況下，通過短時間的使用，說出產品可以用來做什么；
b、讓用戶進行核心流程任務，檢查完成任務是否順利；
c、給用戶一個找尋一個層級較深的功能的任務，檢測用戶能否通過信息架構名稱找到功能。
2、產品說明書
你需要多復雜的說明書才能教會用戶使用核心功能？
（五）用信息架構思路設計頁面
確定頁面所需呈現的信息-繪制信息架構樹狀圖-重要性分級-繪制頁面
在單一頁面設計時要刻意練習！
第二章 ?打造漂亮的流程設計
（一）流程設計的重要性
你的app有幾個按鈕？你的app有幾個頁面？用戶會用你的app做哪些事情？--我們設計的是用戶完成任務的方式
流程設計是根據用戶使用流程進行頁面設計的方法
*企業有商務目標，因此需要在用戶使用流程和業務需求中尋找平衡，以不干擾用戶使用流程的方式完成需求
（二）如何進行流程設計
1、充分理解業務需求
a、業務需要達成的商業目標
b、業務受到哪些技術和商務限制
c、了解業務合作方的需求
2、找到用戶完成任務的所有接觸點
接觸點來自用戶場景，而用戶場景基于用戶模型、經驗、用戶調研的體驗故事
*學會在設計之前寫這樣的故事，可以在設計頁面時更有邏輯。
Tip1.為了完成流程設計，需要構思的用戶場景有多個，并且要學會合并同類項
Tip2.要顧及頭尾，他們是最容易被遺漏的接觸點
（三）流程設計與交互工作
1、流程設計與信息架構設計的關系
信息架構設計→核心流程設計→信息架構調整→完成所有流程設計
2、流程設計與用戶場景的關系
目標用戶、業務目標、用戶體驗目標--用戶場景scenario→相應流程設計→一個結合頁面的用戶場景故事
Chapter4 ?讓頁面更優雅
第一章 你需要懂的視覺心理學
第二章 五步熟練掌握頁面排版布局
1、確定頁面的任務目標
明確當前頁面用戶的任務和目的，以及產品的需求。
衡量頁面的標準：滿足用戶需求，減少用戶的理解和操作成本，還能深深的吸引用戶，讓這個產品捕獲用戶的芳心。
有用-最重要的衡量標準，用戶和產品需求的滿足
易用-架構清晰、流程清晰、不需思考
好用-友好和充滿情感化
*在評價同一功能不同競品的好壞時，要從每個競品的產品目標和定位出發，而不是僅僅評價外觀
2、信息元素的組織分類
卡片分類法“可能是”信息組織分類最好的方法，應用場景有信息架構、導航設計、頁面設計。
3、對組塊進行排版布局
4、權衡平臺規范
*Native APP 指的是原生程序，一般依托于操作系統，有很強的交互，是一個完整的App，可拓展性強。很穩定。需要用戶下載安裝使用。
? ? ? ? 語言：Object C （ios）、Java（Android）
? ? ? ? 頁面：存放在本地
Web（H5）跨平臺跨終端，開發成本低，方便部署，無需下載，用戶無須手動更新。生存在瀏覽器中的應用，基本上可以說是觸屏版的網頁應用。但是會不穩定，數據可能會有延遲。
? ? ? ? 語言：Html
? ? ? ? 頁面：存放于服務器
Hybrid混合設計：頁面框架由本地native構成，確保穩定性；
? ? ? ? ? ? ? ? ? ? ? ? ? ? 頁面內容由H5構成，保證迭代的靈活性。
Hybrid App 設計的注意事項：
1、簡化。簡化不重要的動畫/動效，簡化復雜的圖形文字樣式
2、少用。少用手勢、少用彈窗
3、減少。減少頁面內容，減少控件數量，減少頁面跳轉次數、盡量在當前頁面展示
4、增強。增強加載時的趣味性，增強頁面主次關系，增強控件復用性。
Tips：平臺規范是基礎，用戶的使用習慣是核心，一起規范終究要給用戶習慣讓步。
是否區分平臺設計：
1、是否區分平臺設計，需要看當前項目的階段和項目重點
2、如果不區分設計，在大框架一致的前提下，尊重平臺控件的使用規范
3、如果采取分別的設計，發揮各自平臺最大的潛力，做到極致
4、Hybrid混合設計也許能夠從另外一個層面解決跨平臺兼容問題
5、頁面排版的設計驗證
邀請交互專家-系統評估-系統交互/可用性問題-整理結果-修改及排期
第三章 撰寫漂亮的交互設計文檔
產品經理：具象產品需求，以可視化的頁面形式，談論需求滿足情況
視覺設計：根據交互稿設計出視覺效果圖，關注頁面的布局結構，順序位置，主次及交互方式等，還有頁面的情感需求。
產品開發：通過交互文檔，交互設計師與各端開發確定方案的可實現性。開發人員依據交互文檔的實現方式進行開發。
產品測試：嚴格測試設計方案最終的實現效果，確保產品的質量。
1、封面
名稱、版本、負責人員
2、目錄
即站點地圖
3、修訂記錄
功能變動、時間、超鏈接
4、需求分析+業務流程圖
產品需求文檔中也會有業務流程圖，但是為了方便開發和測試在一份交互稿里理解業務需求，可以放上
5、信息架構
6、流程圖
7、交互方案
a、流程
一個頁面一個任務；每個任務都要有起點；
同一個頁面的不同狀態，最好在一個頁面展示（不要忽視極端情況）
b、頁面內容
頁面布局規范，準確傳遞設計方案
盡量黑白灰，避免視覺干擾
c、交互說明
交互說明1：交互規則及邏輯關系
交互說明2：交互迭代要有標識
交互說明3：點擊后的交互反饋
交互說明4：動效說明
交互說明5：需要視覺注意的要特別標明
8、控件庫
Chapter5 ?交互設計測試與評估
第一章 為什么要開展測試與評估
用戶測試：請目標用戶使用產品來完成任務，觀察并記錄用戶使用產品的整個過程
用戶測試的定義，有時也被稱為產品可用性測試，指特定的用戶在特定的使用場景中，為了達到特定的目標而使用某產品時，從而找出產品可用性問題，并解決這些問題，目的是為了改善這些產品，讓產品更容易使用。
用戶測試的測試目標：有效性-用戶能夠達成自己的目標；
效率-用戶能以最短路徑達成目的；
滿意度-用戶沒有產品不愉快的體驗；
用戶測試基本流程：1、設計測試。設計參與者在測試中需要完成的任務；
2、招募用戶。篩選符合測試要求的目標用戶進行測試；
3、進行測試。觀察并記錄參與者完成任務過程中的情況。
Tips：以拋出問題為主，少做建議。
4、分析報告。列出問題并進行分析，判定問題的嚴重性及特殊性。
用戶測試的意義：1、挖掘用戶的潛在需求
2、發現并解決產品存在的問題
3、降低產品周期成本
4、增強設計的說服力
測試與評估的形式及方法
評估形式：
1、評估主體，主要有用戶評估和專家評估
用戶評估就是用戶測試，主要靠收集用戶使用數據，它相對客觀，但時間和費用花費較多，評估范圍較寬
專家評估，是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。它相對主觀，但時間和費用花費少，評估的范圍較窄
2、評估性質，主要有定性評估和定量評估
定量評估是指對可以計量的部分進行評價，如點擊量、使用率等
定性評估是指對非計量性的部分進行評價，如流暢度、舒適性、創造性等
3、評估過程，主要有理性評估和感性評估
理性評估相對客觀，從客觀角度出來判斷客觀事物，例如對比的是價格，我們一定會選擇便宜的
感性評估更為主觀，評估結果并沒有客觀規律
以上評估方式各有優缺，需要結合起來使用。
四種常見評估方法
1、原型評估方法
2、簡易測試評估方法
攝像機、實驗室、記錄員
3、眼動評估方法
4、腦電評估方法
第二章 ?啟發式評估
定義：是專家評估法的一種，也被稱為經驗性評估。是一種簡易的可用性評估方法，使用一套相對簡單、通用、有啟發性的可用性原則，讓幾個評審人員根據專業知識和經驗來進行評估，發現產品潛在的可用性問題。
兩大要素：
1、評估者
人數：推薦3~5人，有時也會簡化
崗位：設計師、用戶研究員
身份：最好非設計師本人
知識：同時具有可用性知識及設計知識更佳
2、評估原則
Nielsen啟發式10原則、Nielsen拓展原則、Nielsen首頁可用性指南、iSO9241、八項黃金法則、HHS網頁設計與可用性指南
以下為Nielsen啟發式10原則：
一、狀態可見原則
用戶在網頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應即時給出反饋。“即時”是指，頁面響應時間小于用戶能忍受的等待時間。
二、環境貼切原則
網頁的一切表現和表述，應該盡可能貼近用戶所在的環境（年齡、學歷、文化、時代背景），而不要使用第二世界的語言?！秈Phone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。
三、撤銷重做原則
為了避免用戶的誤用和誤擊，網頁應提供撤銷和重做功能。
四、一致性原則
同一用語、功能、操作保持一致。
五、防錯原則
通過網頁的設計、重組或特別安排，防止用戶出錯。
六、易取原則
好記性不如爛筆頭。盡可能減少用戶回憶負擔，把需要記憶的內容擺上臺面。
七、靈活高效原則
中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計，不要低估，也不可輕視，保持靈活高效。
八、易掃原則
互聯網用戶瀏覽網頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關信息。
九、容錯原則
幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼，比如404。
十、人性化幫助原則
幫助性提示最好的方式是：1、無需提示；2、一次性提示；3、常駐提示；4；幫助文檔。
適用階段：“評估越早越好”，一般是在交互/視覺設計階段、測試優化階段、正式發布階段進行評估
特點：優：成本低、效率高、發現大多數可用性問題
? ? ? ? ? ?缺：不能代表真實用戶，相對主觀；有時發現問題過多；對評估人員知識背景要求較高
適用情況：1、適合時間、資源有限的情況下快速發現可用性問題，降低風險及成本；
2、版本變動不大的情況下，小成本檢驗
3、作為可用性測試之前的準備
如何進行啟發式評估？
Step1：評估準備階段
確定范圍：整體vs局部
背景信息：用戶、場景、主要任務、競品
評估參考原則（如尼爾森10原則）：根據評審目標和產品特性選擇
評委邀約：設計師、用戶研究員、非本人
材料準備：評估說明、用戶手冊、評分表等
Step2：評估執行階段
任務走查、整體走查、結果記錄
Step3：結果分析階段
匯總討論、報告總結、優化方案
問題清單一般包括：問題序號、頁面名稱、問題維度、截圖、問題/需求描述、解決方案
第三章 ?可用性測試
類型：
1、形成式
小樣本；發現問題解決問題為主；不能做定量對比
2、總結式
大樣本，30人以上；可以做版本的對比評估和定量評估
流程：準備-測試-分析-優化
測試準備：確定目標、測試方案、測試腳本、招募用戶、材料工具、測試場地、預測試
測試任務注意點：1、鎖定在主要任務上
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2、從用戶角度出發
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3、明確起點和終點
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?4、任務場景化
招募用戶時可以用到過濾問卷快速篩選用戶
材料工具：待測試產品素材（草圖、低保真原型、高保真原型）；常用量表工具 （可用性測試量表、形容詞語義量表、概念吸引力測試卡片、卡片分類內容卡片、生活形態價值觀量表、彩色競品示卡、背景信息問卷）
正式測試輸出物：測試記錄、錄像錄音
測試參與人員：主持人、記錄員、產品團隊、用戶
測試前：暖場、測前訪談、簡單試用
測試中：用戶執行任務、事后訪談
測試后：道別、準備下一場測試、簡單總結發現
測試過程中的觀察要點：
1、用戶是否獨立完成了任務；
2、是否存在無效操作或者不知所措；
3、用戶是否不滿
結果分析輸出物：測試報告
結果分析步驟：對發現分類、整理不確定項、評定優先級（參考常見標準）、結果記錄
結果分析報告撰寫：1、總體如何？2、有哪些問題？截圖3、嚴重程度如何？優先級的描述和排序4、建議是什么？
除此之外，可以問繞用戶核心關注的問題和一些為滿足需求做補充分析
優化跟蹤輸出物、優化方案：
結合其他方法、指標解決問題：
第四章 其他評估方法
（一）問卷調查
適用階段：產品研發前（挖掘需求）、產品設計（了解用戶使用習慣、偏好）、正式發布（用戶滿意度）
適用于做定量分析、匿名調研、對已有假設進行檢驗、對用戶的認知和態度進行評估，不適用于發現和描述具體問題、獲取創新的想法、獲取精確的行為數據
step1：確定調研目的
step2：設計調研方案
step3：問卷設計
step4：問卷測試
step5：問卷投放
step6：數據分析
（二）產品數據分析
通過在網站或應用中進行數據埋點，進而獲取用戶對產品的使用和行為數據，并進行基于產品體驗優化的數據統計分析
數據來源：服務器日志文件記錄、javascript頁面標記
第三方網站監測分析工具
數據分析流程：監控-定義-埋點-測量（獲取數據）-分析-優化-監控
web頁面常用基礎指標：PV、UV、UPV、訪問
識別用戶的方式：IP、IP+User Agent、Cookie、User ID、設備ID、其他
復合指標：跳出率（來了就走）、退出率、訪問時長、訪問深度、轉化率
以上
