交互原型設(shè)計第4單元主編：馬楠副主編：徐歆愷、李秀智、姚永強一、交互原型設(shè)計概述原型是思想的物化，是無形創(chuàng)意與有形產(chǎn)品之間的對話媒介。BillBuxton微軟研究院首席研究員原型設(shè)計是將創(chuàng)意轉(zhuǎn)化為現(xiàn)實的橋梁原型設(shè)計的重要性采用原型設(shè)計的項目成功率高出50%建筑師的沙盤模型與實際建筑從紙筆草圖到數(shù)字化工具早期HCI研究到現(xiàn)代原型設(shè)計平臺原型設(shè)計的演變視頻由AI+剪映生成二、交互原型設(shè)計的基本概念交互原型是產(chǎn)品設(shè)計過程中的工作模型人機交互理論與實際應(yīng)用的結(jié)合點定義與本質(zhì)電影制作流程①劇本②分鏡頭③排練④正式拍攝交互原型是產(chǎn)品設(shè)計過程中的工作模型人機交互理論與實際應(yīng)用的結(jié)合點定義與本質(zhì)產(chǎn)品制作流程①需求文檔②線框圖③交互原型④最終產(chǎn)品原型：投資小回報大有數(shù)據(jù)支持的商業(yè)價值結(jié)論：越早投入原型設(shè)計，越能獲得項目成功的高回報原型設(shè)計每投入1美元，可節(jié)省后期高達100美元的修復(fù)成本IEEE研究《軟件缺陷減少十大清單》缺陷修復(fù)成本隨階段推進而指數(shù)增長設(shè)計階段：1單位→部署后：40-1000單位美國國家標準與技術(shù)研究院(NIST)原型設(shè)計能將需求理解錯誤減少約70%，這是項目失敗的主要原因之一StandishGroupCHAOS報告采用設(shè)計思維和原型設(shè)計方法的公司產(chǎn)品上市時間比競爭對手平均快33%麥肯錫《設(shè)計的商業(yè)價值》特點:簡單線條和形狀優(yōu)勢:快速創(chuàng)建、成本低、易修改適用場景:概念驗證階段工具示例:紙筆、白板原型分類-低保真原型特點:更精確界面元素、有限交互優(yōu)勢:平衡速度和細節(jié)適用場景:需求確認、流程測試工具示例:墨刀,Balsamiq,Mockplus原型分類-中保真原型特點:精確視覺設(shè)計、復(fù)雜交互優(yōu)勢:接近最終產(chǎn)品體驗適用場景:詳細設(shè)計、用戶測試，

向利益相關(guān)者展示工具示例:Figma,AdobeXD,AxureRP原型分類-高保真原型為什么有時"完美"不如"足夠好"?低保真vs高保真:何時選擇?思考三、交互原型設(shè)計流程用戶研究：通過一系列科學(xué)的研究方法來了解并理解用戶的需求、習(xí)慣、動機和挑戰(zhàn)的過程。強調(diào)以用戶為中心，通過數(shù)據(jù)和實證

來明確產(chǎn)品或服務(wù)該

如何滿足用戶的需求。角色:交互設(shè)計師、產(chǎn)品經(jīng)理、開發(fā)者1-需求分析了解你的用戶和使命用戶畫像：真實用戶的虛擬代表是創(chuàng)建在一系列真實數(shù)據(jù)之上的目標用戶模型。深度用戶研究方法用戶畫像：真實用戶的虛擬代表是創(chuàng)建在一系列真實數(shù)據(jù)之上的目標用戶模型。情境調(diào)查：在用戶自然環(huán)境中觀察他們使用類似產(chǎn)品的行為深度用戶研究方法方法民族志研究情境調(diào)查理解的目的廣泛的焦點：文化發(fā)展深入的理解完全沉浸構(gòu)建工作模型為設(shè)計提供信息的目的關(guān)注產(chǎn)品或流程目的在于特性沉浸式訪問用戶畫像：真實用戶的虛擬代表是創(chuàng)建在一系列真實數(shù)據(jù)之上的目標用戶模型。情境調(diào)查：在用戶自然環(huán)境中觀察他們使用類似產(chǎn)品的行為日記研究：讓用戶記錄他們與相關(guān)產(chǎn)品交互的日常體驗深度用戶研究方法$$日記研究：活動時間線規(guī)劃與準備研究前預(yù)備會議報告期研究后訪談數(shù)據(jù)分析支付里程碑支付里程碑用戶畫像：真實用戶的虛擬代表是創(chuàng)建在一系列真實數(shù)據(jù)之上的目標用戶模型。情境調(diào)查：在用戶自然環(huán)境中觀察他們使用類似產(chǎn)品的行為日記研究：讓用戶記錄他們與相關(guān)產(chǎn)品交互的日常體驗共情映射：通過“用戶看到了什么、說了什么、做了什么、想了什么”來構(gòu)建用戶理解框架深度用戶研究方法層級任務(wù)分析(HTA)方法關(guān)注任務(wù)的結(jié)構(gòu)和層級分解展示任務(wù)的目標-子目標關(guān)系任務(wù)分析理論應(yīng)用主要關(guān)注"做什么"和行動的順序適合識別復(fù)雜任務(wù)的組成部分和操作步驟認知任務(wù)分析(CTA)方法關(guān)注用戶內(nèi)部的認知過程展示決策點、信息處理和心智模型主要關(guān)注"如何思考"和"為什么做"突出顯示感知、決策、問題解決等認知元素任務(wù)分析理論應(yīng)用認知任務(wù)分析(CTA)方法關(guān)注用戶內(nèi)部的認知過程展示決策點、信息處理和心智模型主要關(guān)注"如何思考"和"為什么做"突出顯示感知、決策、問題解決等認知元素任務(wù)分析理論應(yīng)用認知任務(wù)分析(CTA)方法關(guān)注用戶內(nèi)部的認知過程展示決策點、信息處理和心智模型主要關(guān)注"如何思考"和"為什么做"突出顯示感知、決策、問題解決等認知元素任務(wù)分析理論應(yīng)用導(dǎo)航模式：面包屑、標簽頁、漢堡菜單表單模式：分步表單、實時驗證、自動完成反饋模式：進度指示器、微交互、狀態(tài)更新交互設(shè)計模式庫設(shè)計沖刺：源自Google的五天結(jié)構(gòu)化方法，從問題定義到原型測試瘋狂八分鐘：快速草圖練習(xí)，8分鐘內(nèi)折疊一張紙創(chuàng)作8個不同的設(shè)計想法6-3-5法：6人小組，每人繪制3個想法，傳遞5次，30分鐘產(chǎn)生108個想法2-草圖設(shè)計從混沌中創(chuàng)造秩序格式塔原則：相近性、相似性、連續(xù)性、閉合性等組織視覺元素視覺層次結(jié)構(gòu)：通過大小、顏色、位置等建立視覺優(yōu)先級認知負荷理論：減少用戶需要同時處理的信息量，簡化界面認知心理學(xué)在界面布局中的應(yīng)用環(huán)境注意遺忘長時記憶學(xué)習(xí)回憶剩余容量外部認知負荷內(nèi)部認知負荷交互模型選擇：如CRUD（創(chuàng)建、讀取、更新、刪除）、向?qū)Я鞒?、主從結(jié)構(gòu)等導(dǎo)航結(jié)構(gòu)設(shè)計：層級、平面、復(fù)合、上下文相關(guān)導(dǎo)航等狀態(tài)管理：定義不同用戶操作后的界面狀態(tài)變化反饋機制：加載狀態(tài)、成功/錯誤提示、微交互3-原型制作核心要素從靜態(tài)到動態(tài)心理模型匹配認知心理學(xué)在原型設(shè)計中的應(yīng)用運作模型心理模型表現(xiàn)模型不好好表現(xiàn)技術(shù)原理表現(xiàn)用戶認知設(shè)計師使用的表現(xiàn)模型越接近用戶的心理模型，則越容易被用戶接受認知心理學(xué)在原型設(shè)計中的應(yīng)用可供性原則門把手形狀暗示拉或推動作按鈕凸起暗示可按下滑塊形狀暗示可拖動核心：直觀的使用暗示關(guān)注物理特性與功能映射減少用戶認知負擔認識流暢性高對比度提高可讀性合理布局減少搜索時間設(shè)計一致性增強熟悉感核心：信息處理的輕松度影響用戶信任與滿意度提高用戶體驗與決策速度A/B/n測試啟發(fā)式評估谷歌HEART框架SUS(系統(tǒng)可用性量表)4-原型測試方法通過數(shù)據(jù)提升體驗A/B測試方案A方案B17%25%可發(fā)現(xiàn)性問題：用戶難以發(fā)現(xiàn)界面中的功能或操作方式。理解性問題：用戶雖然看到了界面元素，但不理解其含義或用途，造成認知障礙?？深A(yù)測性問題：用戶無法準確預(yù)測系統(tǒng)的響應(yīng)或行為，導(dǎo)致猶豫、焦慮或錯誤操作。反饋不足問題：系統(tǒng)未能及時、清晰地告知用戶其操作的結(jié)果或系統(tǒng)狀態(tài)的變化。常見交互問題分析四、交互原型設(shè)計工具快速草圖工具BalsamiqMockups-專注低保真原型全能型設(shè)計工具Figma-協(xié)作性強，全平臺支持全能型設(shè)計工具AxureRP-復(fù)雜交互和條件邏輯工具名稱特長領(lǐng)域協(xié)作能力學(xué)習(xí)曲線特色功能Figma全流程UI/UX設(shè)計極強中等組件系統(tǒng)、自動布局墨刀快速原型、本地化強低豐富中文資源、智能組件AdobeXD創(chuàng)意設(shè)計、動效中等中等與Adobe生態(tài)集成Framer高保真交互、代碼中等高React組件、真實數(shù)據(jù)SketchUI設(shè)計、插件生態(tài)中等中等豐富插件、Mac優(yōu)化國際主流原型工具比較實驗三：手機App原型開發(fā)設(shè)計實驗?zāi)康暮皖愋褪煜そ换ピO(shè)計的