第一章 交互設(shè)計基礎(chǔ)知識
名稱解釋
UI：User Interface 用戶界面
用戶界面其實是一個比較廣泛的概念艳汽，指人和機(jī)器互動過程中的界面看尼，以車為例子蹬音，方向盤、儀表盤库说、換檔器等都屬于用戶界面狂鞋。主要是負(fù)責(zé)產(chǎn)品或是網(wǎng)站的圖形圖標(biāo)色彩搭配，總之是負(fù)責(zé)網(wǎng)站看起來是一個什么風(fēng)格什么氣質(zhì)潜的。
UE or UX： User Experience 用戶體驗
用戶體驗指用戶在使用產(chǎn)品過程中的個人主觀感受骚揍。關(guān)注用戶使用前、使用過程中啰挪、使用后的整體感受信不，包括行為、情感亡呵、成就等各個方面抽活。用戶體驗是整體感受，所以不僅僅來自于用戶界面锰什，那只是其中的一部分酌壕。
IxD：Interaction design 交互設(shè)計
交互指任何機(jī)器互動的過程，交互設(shè)計通過了解人的心理歇由、目標(biāo)和期望，使用有效的交互方式來讓整個過程可用果港、易用沦泌。
UID： User Interface Design 用戶界面設(shè)計
用戶界面設(shè)計（UID）不僅僅是做“漂亮的界面”，所以不可避免的會涉及到交互設(shè)計辛掠。所以廣義來說谢谦，界面設(shè)計包含交互設(shè)計。但是現(xiàn)在很少提這個概念了
UED： User Experience Design 用戶體驗設(shè)計
用戶體驗是個人主觀感受萝衩，但是共性的體驗是可以經(jīng)由良好的設(shè)計提升的回挽。用戶體驗設(shè)計旨在提升用戶使用產(chǎn)品的體驗。
交互交互師 Interaction Designer
交互設(shè)計師的職責(zé):
1. 工作之一是分析猩谊，但分析不是設(shè)計千劈，主要是關(guān)于用戶知識領(lǐng)域，更像建筑師牌捷。
2. 需要懂得什么對于程序設(shè)計人員是重要的墙牌，但是不需要知道怎樣編程涡驮，只需要將代碼要實現(xiàn)的功能形象化。
3. 應(yīng)當(dāng)負(fù)責(zé)程序做什么和怎樣表達(dá)喜滨，設(shè)計項目的第一部分是針對問題域詳細(xì)研究項目捉捅。
4. 在項目中的地位很重要，所以不能犯錯誤
交互設(shè)計師的執(zhí)行：
1.實質(zhì)工作就是用圖形將行為文檔化
2.用定性的現(xiàn)場調(diào)查技術(shù)虽风，用戶建模方法棒口，設(shè)計原則，設(shè)計模板
3.常用軟件 PPT辜膝、Azure无牵、justinmind、Xmind内舟；常用工具 紙合敦、白板筆、2B鉛筆
交互設(shè)計師需要具備的能力：
1验游、具備閱讀充岛、理解、整理耕蝉、修訂產(chǎn)品需求文檔說明書的能力
2崔梗、具備思維導(dǎo)圖、流程圖垒在、用例圖蒜魄、交互邏輯圖、業(yè)務(wù)邏輯圖场躯、功能架構(gòu)圖的編寫與解說的能力
3谈为、具備交互功能原型的線框圖原型、高保真原型的制作與演示能力
4踢关、具備編寫完善的交互設(shè)計說明書（DRD）能力
5伞鲫、具備交互設(shè)計項目方案演講、解說签舞、組織交互設(shè)計項目方案評審能力
6秕脓、具備用戶行為研究分析、與用戶交流并收集FEEDBACK整理出關(guān)鍵點的能力
7儒搭、交互設(shè)計方案迭代設(shè)計能力
8吠架、用戶體驗設(shè)計能力（寬泛的說法）
9、動效設(shè)計能力與UI搂鲫、研發(fā)進(jìn)行溝通解釋清楚設(shè)計思路的能力
10傍药、配合UI、PM、研發(fā)怔檩、BOSS等一干人等的八面玲瓏的溝通技巧
11褪秀、用戶心理知識也需要懂點
12、頂層架構(gòu)設(shè)計能力（這個是配合BOSS說想法的）
交互設(shè)計師的知識體系
需求分析能力
能看懂薛训、看明白需求分析師提供的文檔
自己可以在沒有明確需求的情況下梳理出一個明確的需求并補(bǔ)充到需求文檔里
需求是不斷變化的媒吗、可以持續(xù)迭代的，但是交互設(shè)計師在工作中要盡量以最少的次數(shù)確認(rèn)需求乙埃，使需求“拍板”闸英，不然變來變?nèi)サ模瑹o法進(jìn)行研發(fā)和設(shè)計介袜。這個是最考驗交互設(shè)計師的需求能力的地方甫何。
學(xué)習(xí)需求分析的方法
建立用戶模型
學(xué)習(xí)別人的需求規(guī)格說明書文檔模板
很多需求用戶自己都不能清楚表達(dá)他需要什么，作為交互設(shè)計師要能夠善于溝通和察言觀色還有需要知道你項目相關(guān)知識和專業(yè)背景
流程邏輯設(shè)計
邏輯設(shè)計就是在用戶正常的使用邏輯（去學(xué)點心理學(xué)知識）
概念:流程圖是指在一個項目中的業(yè)務(wù)流轉(zhuǎn)步驟展示位圖形化
作用：方便設(shè)計者和決策者發(fā)現(xiàn)流程弊端從而進(jìn)行優(yōu)化
如何制作：Visio/Xmind
產(chǎn)品功能設(shè)計
基于業(yè)務(wù)邏輯進(jìn)行功能模塊設(shè)計 ?注意：不要在做產(chǎn)品功能設(shè)計時候照搬或太超前的設(shè)計方案
設(shè)計產(chǎn)品功能的時候一般是使用excel梳理出所有功能模塊分為站點地圖，例如下圖結(jié)構(gòu)
低保真原型設(shè)計
就是線框圖，推薦多用莺奔，不要花費大量時間去搞UI
高保真原型設(shè)計
在低保真上基礎(chǔ)把之前的線框加上了顏色和圖片使其看起來更接近真實下項目。
文檔能力（DRD文檔）巍耗、各種流程圖
1、邏輯條理清晰（針對Boss等領(lǐng)導(dǎo)層看框架）
2渐排、頁面跳轉(zhuǎn)關(guān)系展示合理（針對需求炬太、產(chǎn)品看細(xì)節(jié)）
3、交互動作與功能說明到位（針對研發(fā)看功能與特效驯耻，其實是加多少班的判斷依據(jù)）
4亲族、UI留白空間合理（UI是否還有發(fā)揮空間）
演講與演示（PPT、demo）
多看口才書方面的書吧
文案編寫
所有原型設(shè)計之初可缚，沒有任何素材給你霎迫，你需要抓取項目特點提取創(chuàng)作出文案，填寫到原型演示demo里去帘靡，進(jìn)入UI設(shè)計階段后可能回到出現(xiàn)市場與運(yùn)營進(jìn)行確認(rèn)文案的過程知给。恩，從明天起要當(dāng)好一個段子手
頂層戰(zhàn)略設(shè)計
從立項階段起就參與
用戶研究
需要建立用戶模型與用戶用例
懂得與用戶建立feedback關(guān)系测柠，提示可持續(xù)迭代的依據(jù)意見收取整理分析
挖掘用戶行為數(shù)據(jù)，為下一代產(chǎn)品迭代提供依據(jù)
第二章 交互設(shè)計師工作場景
UED組織架構(gòu)
項目組工作場景
定義：人缘滥、事轰胁、物、氣氛
需求評估場景
參與人員為項目前期籌劃人員：boss朝扼、項目經(jīng)理赃阀、產(chǎn)品經(jīng)理、需求分析師、研發(fā)代表
提交物：提交需求說明書榛斯，交互設(shè)計師在這是參與評估需求并分析需求分析報告
提交人:需求分析師
功能設(shè)計場景
根據(jù)需求說明書進(jìn)行產(chǎn)品設(shè)計并提交產(chǎn)品和項目領(lǐng)導(dǎo)者評審
提交物：功能組織架構(gòu)圖观游、業(yè)務(wù)流程圖、功能組織邏輯圖驮俗、用例圖懂缕、產(chǎn)品設(shè)計方案說明書
提交人：產(chǎn)品經(jīng)理/交互設(shè)計師
產(chǎn)品評審場景
提交物：產(chǎn)品評審會議紀(jì)要、產(chǎn)品設(shè)計變更備忘錄王凑、產(chǎn)品流程相關(guān)系列的圖表
交互設(shè)計場景
1搪柑、建立信息模型
2、建立用戶模型
3索烹、設(shè)計業(yè)務(wù)流程交互流程框架
4工碾、設(shè)計頁面流程原型
5、設(shè)計交互動作事件交互
6百姓、形成交互設(shè)計文檔
7渊额、編寫交互設(shè)計文檔備忘錄（針對不同人群的閱讀提示）這里廢話幾句，你寫的文檔要提交給3個部門分別是boss垒拢、ui旬迹、研發(fā)，他們各自看你的文檔出發(fā)點依次分為：boss—流程子库、框架舱权；ui —界面可發(fā)揮空間；研發(fā)—要加多少班仑嗅。
8宴倍、設(shè)計出來文檔定稿了之后就可以組織交互設(shè)計評審了
第三章 如何進(jìn)行頂層設(shè)計（鍛煉戰(zhàn)略眼光、站在領(lǐng)導(dǎo)層角度看問題）
什么是頂層設(shè)計仓技？
頂層設(shè)計是運(yùn)用系統(tǒng)論的方法鸵贬，從全局的角度，對某項任務(wù)或者某個項目的各方面脖捻、各層次阔逼、各要素統(tǒng)籌規(guī)劃，以集中有效資源地沮，高效快捷地實現(xiàn)目標(biāo)嗜浮。是一個架構(gòu)設(shè)計方向，不用關(guān)心實現(xiàn)細(xì)節(jié)摩疑，而是當(dāng)下的產(chǎn)品架構(gòu)危融、產(chǎn)品鏈、產(chǎn)品后臺支撐體系等
怎么進(jìn)行頂層設(shè)計雷袋？
需要明確以下信息：
項目信息：希望達(dá)成的目標(biāo)? 項目啟動資源（資金）?內(nèi)容來源等大范圍概念里去思考問題 ?不要局限于細(xì)節(jié)例如怎么去實現(xiàn)一個通知消息推送
eg:
項目名稱：iamue網(wǎng)項目
項目簡介：交互設(shè)計垂直資料分享
頂層設(shè)計：一個平臺吉殃、兩個層、三個前端
頂層構(gòu)架圖：下圖
在設(shè)計頂層設(shè)計方案的生活，要綜合考慮蛋勺，先把所有分支梳理清楚瓦灶，按照從金字塔頂部向底部一層層的梳理出來功能、結(jié)構(gòu)抱完、資源贼陶、任務(wù)清單等，形成一份可以指定分工的計劃書
注意事項
關(guān)心項目延展性（后面項目死掉是否可以轉(zhuǎn)型）
關(guān)心項目可行性（別老板給我們畫大餅）
關(guān)心具體實施方案
IT項目頂層設(shè)計方案大綱
概述
背景
項目目標(biāo)
項目架構(gòu)
項目資源配置
項目執(zhí)行計劃方案
項目驗收計劃方案
總結(jié)
第四章 流程和功能設(shè)計
制作流程圖的核心：“設(shè)計流程”
一個測試項目的流程的設(shè)計示例：
1乾蛤、先確認(rèn)幾件事：
（一）APP的平臺（安卓還是IOS還是WP）
（二）確認(rèn)項目采用系統(tǒng)版本
（三）確認(rèn)項目核心需求
本案例核心需求：
1每界、多用戶協(xié)作辦公平臺APP端的即時通訊
2、打卡簽到功能
3家卖、我的任務(wù)管理：增眨层、刪、改上荡、查
4趴樱、查看任務(wù)詳情
5、更新任務(wù)進(jìn)度
6酪捡、任務(wù)帖子內(nèi)的評論與回復(fù)（@功能）
7叁征、登陸與管理員注冊驗證
8、通知提醒服務(wù)
（四）進(jìn)行需求的分析
功能設(shè)計表格模板
（五）進(jìn)行設(shè)計功能模塊
根據(jù)上面的核心需求提示我們找出幾個重要的模塊作為主要模塊
設(shè)計出核心模塊如下：
1.即時通訊模塊
2.任務(wù)管理模塊
3.登陸注冊模塊
4.通知消息模塊
（六）根據(jù)模塊順藤摸瓜設(shè)計功能點
在一級模塊下進(jìn)行細(xì)分功能點設(shè)計
1逛薇、即時通訊模塊
通訊錄功能
消息聊天
發(fā)送圖片
表情聊天
傳送文檔支持DOC.PPT.XLS.ZIP
2.任務(wù)管理模塊
發(fā)布新任務(wù)
發(fā)布任務(wù)進(jìn)度狀態(tài)
查看任務(wù)詳情
3.登陸注冊模塊
企業(yè)郵箱登陸功能
注冊功能
4.通知消息模塊
閱讀消息通知
編輯消息通知狀態(tài)
完成基本設(shè)計的功能表
（七）設(shè)計業(yè)務(wù)流程
流程圖繪畫的工具：
產(chǎn)品經(jīng)理或技術(shù)經(jīng)理（需要畫一些技術(shù)性的邏輯流程圖）：Visio捺疼、Mindjet MindManager
用戶體驗和產(chǎn)品設(shè)計/交互設(shè)計師（需要畫一些界面流程圖，設(shè)計可交互的流程）：Axure 永罚、Visio啤呼、 MockPlus 、Balsamiq
跨職能流程圖示例
部門流程圖示例
業(yè)務(wù)流程圖示例
邏輯流程圖示例
頁面流程圖示例
注：設(shè)計流程圖和線框圖的時候要切記我們是為了輔助產(chǎn)品開發(fā)的不要在流程和原型階段花費太多的時間和精力呢袱，如果你能一個圖解釋清楚就不要加注釋官扣，怎么快捷高效怎么來。千萬不要本末倒置羞福，本來是快速設(shè)計印證需求惕蹄，結(jié)果搞得很復(fù)雜需求最后不斷變化，你設(shè)計迭代很多版本治专，耽誤了大量的時間壓縮了研發(fā)和UI的工作時間卖陵。
技巧一 充分理解需求
功能設(shè)計的目的：滿足需求、需要张峰，形成產(chǎn)品形態(tài)泪蔫，完善用戶體驗。（下面以注冊功能為例）
從吃透需求這點出發(fā)進(jìn)行設(shè)計的時候應(yīng)該是這樣的：
1挟炬、客戶是否希望使用手機(jī)號作為賬戶名鸥滨，為后期營銷和收集真實可驗證的用戶身份。
2谤祖、客戶是否希望在社交媒體做粉絲運(yùn)營推廣營銷婿滓，那么引入第三方社交媒體進(jìn)行登陸是個解決方案。
3粥喜、安全性以及找回密碼
4凸主、機(jī)制通用性，是否進(jìn)行單點登錄設(shè)計全站和多線服務(wù)統(tǒng)一一個賬號
技巧二 提取核心功能
核心功能是別的產(chǎn)品沒有或者比不上的额湘，是這個產(chǎn)品的生命力保證與品牌策劃推廣的賣點卿吐。
需要在你設(shè)計之初就要想好什么是你產(chǎn)品的特色呢？怎么體系出產(chǎn)品特色功能锋华？
技巧三 邏輯清晰
邏輯清晰的設(shè)計是基于上一小節(jié)的流程設(shè)計而言的嗡官，在做設(shè)計的時候要嚴(yán)格遵守已經(jīng)確認(rèn)的邏輯流程。
第五章 原型設(shè)計及常用工具教程
原型概念：針對產(chǎn)品需求而作的具體形態(tài)展示的作業(yè)過程毯焕，一般理解為框架衍腥、結(jié)構(gòu)、頁面地圖的設(shè)計展示纳猫。
線框圖：用線條勾勒出產(chǎn)品的界面婆咸，主要針對頁面邏輯、架構(gòu)/結(jié)構(gòu)設(shè)計
低保真原型：可演示的產(chǎn)品demo芜辕，不是具體指哪一個功能和頁面而是整個產(chǎn)品的完整原型
高保真原型：界面美術(shù)設(shè)計
原型設(shè)計總結(jié)
設(shè)計過程中盡量不要用色彩尚骄，最好使用黑白灰進(jìn)行色階區(qū)分
在設(shè)計原型過程中不要糾結(jié)于細(xì)節(jié)交互實現(xiàn)，可靈活多變侵续，完成你的最終展示出的交流流程能讓大家明白你的頁面邏輯和產(chǎn)品架構(gòu)即可
一定要快速倔丈，原型是用來驗證需求和展示設(shè)計方向是否正確的驗證demo
不要沉迷于高級復(fù)雜的交互事件中去
保持頭腦清醒，自己做什么藥一條流程一條流程的去做询兴，比如登錄流程乃沙，要進(jìn)行登錄界面-登錄交互-登錄正常結(jié)構(gòu)-登錄異常結(jié)果等，這樣保證在大項目中不會遺漏重要交互步驟
要及時測試驗證你的原型诗舰，遇到問題當(dāng)時解決
善于加注釋警儒，解釋你的交互設(shè)計思路，方便開發(fā)和UI看你的設(shè)計方案的時候理解
第六章 高保真原型設(shè)計
需要高保真原型設(shè)計場景1
以項目為導(dǎo)向
需要先和他們確定需求眶根，需求確認(rèn)過程中對方表示要求要做原型看看
此時蜀铲，先提供基本的線框圖，進(jìn)行需求反復(fù)確認(rèn)属百，完成需求確認(rèn)最后一版本線框圖讓美工參與UI設(shè)計记劝，二級頁面不用太深入，然后切圖替換上線框圖族扰，升級為高保真原型
需要高保真原型設(shè)計場景2
以UI視覺界面為導(dǎo)向
一些公司靠UI界面吃飯的
第七章?測試評估交互原型
概念：原型評估厌丑，它是描述一種用來確認(rèn)架構(gòu)定欧、邏輯、使用場景的交互設(shè)計方案的正確性怒竿、完整性砍鸠、安全性和質(zhì)量的過程。
為什么要做耕驰？ 為了確保交互原型是一個可以被項目組執(zhí)行爷辱、被用戶所接受需要進(jìn)行測試評估交互原型
做測試評估交互原型有哪些方式？
常見的測試方法有：
建立用戶模型
用戶模型概念: 是由設(shè)計師進(jìn)行虛構(gòu)出的一個用戶用來代表一個用戶群
一個用戶模型可以比任何一個真實的個體都更有代表性朦肘，因為設(shè)計師把年齡層的人群屬性進(jìn)行提煉饭弓，形成一個代表典型用戶
用戶模型的資料有消費習(xí)慣、產(chǎn)品使用習(xí)慣媒抠、生活習(xí)慣弟断、性別、年紀(jì)趴生、收入夫嗓、地域、情感冲秽、上網(wǎng)方式舍咖、搜索歷史、名片關(guān)鍵詞等等
根據(jù)你的項目設(shè)計3-6個用戶模型就足夠代表所有的用戶群體
進(jìn)行可用性測試分析
我用最簡單的語音來描述一下什么是可用性測試：通過讓特定的人群完成你設(shè)定的測試用例任務(wù)锉桑，發(fā)現(xiàn)并記錄出現(xiàn)的可用性問題排霉，從設(shè)計層面解決這些問題
普遍的說法：可用性測試就是邀請真實用戶或潛在用戶使用產(chǎn)品或設(shè)計原型，對其在使用過程中的行為進(jìn)行觀察民轴、記錄攻柠、測量和訪談，進(jìn)而了解用戶對產(chǎn)品的要求和需要后裸，并以此作為改進(jìn)產(chǎn)品設(shè)計的出發(fā)點瑰钮，提高產(chǎn)品的可用性。
組織焦點小組
訪談法/座談
焦點小組一般由8-12人組成微驶，在一名主持人的引導(dǎo)下對某一主題或觀念進(jìn)行深入討論浪谴。
目的：了解和理解人們心中的想法及其原因。
關(guān)鍵：使參與者對主題進(jìn)行充分和詳盡的討論
意義：了解他們對一種產(chǎn)品因苹、觀念苟耻、想法或組織的看法，了解所調(diào)研的事物與他們生活的契合程度以及在感情上的融合程度
專家把關(guān)
設(shè)計出測試用例
概念：就是一個文檔扶檐，描述輸入凶杖、動作、或者時間和一個期望的結(jié)果款筑，其目的是確定應(yīng)用程序的某個特性是否正常的工作智蝠。
根據(jù)設(shè)計功能的情況設(shè)計出每一個流程的操作用例的測試用例腾么。
（1）確認(rèn)人數(shù)或用戶模型，一般情況下都是選擇6-8人杈湾，項目大一些的就8-12人或模型哮翘。
（2）確定用戶場景，需要明確你產(chǎn)品設(shè)計中的每一個功能的使用場景
（3）明確任務(wù)毛秘，要給具體的人分配具體的任務(wù)，根據(jù)任務(wù)收集測試結(jié)果阻课。匯總問題與討論解決方案叫挟。收集可用性、用戶體驗性限煞、邏輯性等問題抹恳，分門別類的形成文檔，然后根據(jù)不同問題和不同層面的人討論解決方案
總結(jié)
1署驻、從測試評估的過程中總結(jié)出一些經(jīng)驗
2奋献、把自己當(dāng)作一個普通的具體的用戶
3、盡可能的模擬真實場景來評估旺上，更具有參考意義
4瓶蚂、按照流程設(shè)計與邏輯設(shè)計方案進(jìn)行走查一邊自己的設(shè)計方案，查找問題
5宣吱、做多次的競品分析窃这，要有針對性，例如支付寶和微信
第八章 怎么出一份各方有滿意的交互設(shè)計說明書
寫什么征候？
你只需要把原型截圖或原型直接畫成一個文檔杭攻，其實交互文檔就是頁面文檔，所有的軟件頁面疤坝、狀態(tài)都分離出頁面進(jìn)行展示兆解，然后加入頁面流程和交互動作說明文字，箭頭指示線條等
關(guān)鍵：邏輯結(jié)構(gòu)跑揉、頁面跳轉(zhuǎn)锅睛、交互狀態(tài)的文字說明，統(tǒng)一交互體驗動作历谍，確保頁面組件的一致性衣撬。
注：寫之前弄清楚寫什么的問題
怎么寫？
文檔結(jié)構(gòu)
文檔封皮與版本信息
目錄頁
log修訂記錄頁
交互行為邏輯圖+文字說明
頁面展開圖+邏輯+文字
其他單獨的交互動作詳細(xì)解釋介紹
封皮和版本（下圖）
版本信息一般包括 ?版本信息扮饶、日期信息具练、參與人信息、變更內(nèi)容簡要甜无、備注信息
目錄
合理分級分清主次
Log更新記錄頁
用來描述某次更新的信息簡介及頁碼導(dǎo)航等
交互行為邏輯圖+文字說明
可以看出扛点，這個說明文檔是把應(yīng)用更新這個功能拿出來當(dāng)一頁將它的架構(gòu)哥遮、交互、流程陵究、邏輯眠饮、交互事件、文字解釋說明都齊全了铜邮。
這個過程是針對產(chǎn)品經(jīng)理和程序來的仪召，他們需要看明白交互流程邏輯
頁面展開圖+邏輯+文字
下圖是頁面、原件松蒜、文案扔茅、邏輯、頁面狀態(tài)的展示秸苗，和上面對應(yīng)的是第二大部分
這個是針對視覺來的召娜，這個部分要把所有的頁面都展開解釋一遍，共用部分可以單獨標(biāo)記
其他單獨的交互動作詳細(xì)解釋介紹
這個部分是補(bǔ)充書寫不在流程里的單獨的或獨立的交互惊楼，例如：導(dǎo)航條交互
給誰看玖瘸？
總結(jié)：
給程序看就用一章獨立的章節(jié)寫明白交互邏輯、頁面流轉(zhuǎn)
給視覺也用獨立的一章寫明白所有的頁面展開檀咙，公用頁面交互等
給測試就加好注釋與說明
交互需要按照功能邏輯一個個拍著寫更容易理解
交互事件的狀態(tài)需要用截圖形式展示出來雅倒，不能大量文字描述，因為很多人不看小字就看圖
第九章 組織交互設(shè)計評估會
意義：規(guī)避風(fēng)險和明確職責(zé)
參與人員：boss產(chǎn)品經(jīng)理 ?項目經(jīng)理 UI界面設(shè)計師 ?研發(fā)部代表測試部代表 運(yùn)營
