PRODUCT互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)主講人：馬勝銘時間：6-1產(chǎn)品交互設(shè)計基礎(chǔ)三維學(xué)習(xí)目標(biāo)知識目標(biāo)掌握交互設(shè)計的基本概念、核心原則與常用方法。了解交互設(shè)計工具的功能特性及

AIGC在設(shè)計中的應(yīng)用。能力目標(biāo)熟練運用Axure

RP制作高保真產(chǎn)品交互原型。能依據(jù)需求設(shè)計合理的交互流程與界面布局。借助AIGC工具優(yōu)化設(shè)計流程，快速生成原型方案。素質(zhì)目標(biāo)提升分析與解決問題的能力，強化用戶體驗思維。鍛煉動手實踐與團隊協(xié)作能力，解決實際設(shè)計問題。培養(yǎng)社會責(zé)任感，致力于用專業(yè)知識服務(wù)社會。項目導(dǎo)入：淘寶交互設(shè)計案例設(shè)計優(yōu)勢

DesignAdvantages個性化推薦：精準(zhǔn)匹配用戶興趣，顯著提升轉(zhuǎn)化率。界面簡潔：視覺層級清晰，操作流程快捷流暢。智能搜索：引入自然語言處理，優(yōu)化搜索匹配度?，F(xiàn)存劣勢

Existing

Disadvantages信息過載：商品展示繁多，干擾用戶快速決策。流程復(fù)雜：部分交易環(huán)節(jié)繁瑣，增加用戶學(xué)習(xí)成本。核心思路：堅持以用戶為中心，持續(xù)優(yōu)化交互體驗。交互設(shè)計核心認(rèn)知交互設(shè)計定義交互設(shè)計聚焦于雙向信息互動，而非單向展示。它關(guān)注用戶行為的外在表現(xiàn)，通過設(shè)計內(nèi)容、方式與規(guī)則，實現(xiàn)人與產(chǎn)品的高效對話。核心價值：賦予產(chǎn)品靈魂符合用戶心理模型與操作習(xí)慣建立情感連接，提升用戶體驗助力產(chǎn)品在同質(zhì)化競爭中脫穎而出CASE

STUDY雙向互動典型的雙向交互場景：用戶輸入賬號密碼（行為），系統(tǒng)驗證并反饋結(jié)果（響應(yīng)），形成閉環(huán)。案例：登錄交互交互設(shè)計七大原則原則體系概覽可視原則一致原則啟發(fā)原則文字易讀易取原則交互設(shè)計原則旨在優(yōu)化人機對話過程，降低用戶認(rèn)知負(fù)荷，提升產(chǎn)品可用性與易用性。反饋原則防錯原則登錄狀態(tài)反饋當(dāng)用戶處于未登錄狀態(tài)時，系統(tǒng)通過模態(tài)彈窗明確提示

“請重新登錄”，并提供“取消/確定”選項。設(shè)計要點：明確告知當(dāng)前狀態(tài)與后續(xù)操作關(guān)鍵操作二次確認(rèn)針對“刪除”等不可逆操作，系統(tǒng)彈出黑色警示框，強調(diào)“無法找回”的風(fēng)險，需用戶二次點擊確認(rèn)。設(shè)計要點：風(fēng)險預(yù)警與操作攔截交互設(shè)計主要方法用戶研究類User

Research用戶訪談問卷調(diào)查用戶畫像旅程地圖設(shè)計構(gòu)思類Design

Ideation頭腦風(fēng)暴業(yè)務(wù)流程圖信息架構(gòu)(IA)原型制作類Prototyping低保真線框圖(Wireframe)高保真交互原型(Hi-fi

Prototype)測試評估類Testing

&

Evaluation可用性測試(Usability

Testing)A/B測試(A/BTesting)思考討論課堂互動任務(wù)結(jié)合項目六任務(wù)1所學(xué)交互設(shè)計原則與方法，分組對淘寶APP交互案例進(jìn)行深入剖析，并回答下方三個關(guān)鍵問題。個性化推薦分析淘寶個性化推薦算法對用戶購物體驗與平臺業(yè)務(wù)增長分別帶來了哪些具體的優(yōu)點與缺點？#用戶體驗vs業(yè)務(wù)目標(biāo)搜索技術(shù)優(yōu)化引入自然語言處理（NLP）技術(shù)優(yōu)化搜索功能的必要性是什么？在當(dāng)前技術(shù)背景下其可行性如何？#智能交互技術(shù)痛點解決方案針對商品信息過載與交易流程復(fù)雜的問題，你能提出哪些具體的交互優(yōu)化方案？#流程簡化與信息架構(gòu)課程核心回顧理論構(gòu)建掌握交互設(shè)計核心概念

理解七大原則與全流程方法技能提升熟練運用設(shè)計工具

結(jié)合AIGC提升設(shè)計效率實踐應(yīng)用具備原型制作能力

解決真實場景交互痛點感謝觀看

·

歡迎提問THANKYOU感謝觀看!主講人：馬勝銘時間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)主講人：馬勝銘時間：6-2原型交互設(shè)計進(jìn)階01交互核心構(gòu)成頁面觸發(fā)事件·元件觸發(fā)事件·交互動作配置02交互邏輯與變量應(yīng)用邏輯條件設(shè)置·全局變量·局部變量實戰(zhàn)03高級元件應(yīng)用動態(tài)面板狀態(tài)管理·中繼器數(shù)據(jù)交互與應(yīng)用01交互核心構(gòu)成原型交互設(shè)計進(jìn)階本章將深入解析Axure交互設(shè)計的核心層級架構(gòu)，重點講解頁面觸發(fā)事件的原理與基礎(chǔ)操作，幫助學(xué)習(xí)者建立清晰的交互邏輯思維，為構(gòu)建高保真原型奠定堅實基礎(chǔ)。交互層級事件觸發(fā)頁面觸發(fā)事件交互核心構(gòu)成鼠標(biāo)類事件單擊時(OnClick)雙擊時(OnDoubleClick)右擊時

(OnContextMenu)鼠標(biāo)移動時

(OnMouseMove)鍵盤類事件按鍵按下時OnKeyDown按鍵松開時OnKeyUp主要用于捕獲用戶鍵盤輸入操作，常用于快捷鍵或表單輸入驗證。頁面類事件窗口尺寸改變時頁面載入時窗口滾動時視圖狀態(tài)改變時元件觸發(fā)事件交互核心構(gòu)成交互面板切換在工作區(qū)選中任意元件，右側(cè)交互窗格將自動聚焦，即時顯示當(dāng)前元件可用的所有觸發(fā)事件列表，便于快速配置。事件類型分類系統(tǒng)內(nèi)置事件主要劃分為三大類：鼠標(biāo)交互（如單擊、懸停）、鍵盤輸入（按鍵響應(yīng)）及形狀變化（尺寸或位置改變）。高級元件專屬動態(tài)面板（狀態(tài)改變時）、中繼器（每項加載時）及文本框（文本改變時）等高級元件，擁有滿足復(fù)雜邏輯的高頻專屬事件。元件命名小貼士交互核心構(gòu)成規(guī)范命名習(xí)慣建議給元件命名為英文或拼音。避免使用默認(rèn)名稱（如“矩形1”），保持命名清晰可讀。提升檢索效率規(guī)范的命名便于在添加交互事件時，通過搜索框快速查找對應(yīng)元件，極大提升原型開發(fā)效率。動作交互核心構(gòu)成交互響應(yīng)動作是對交互事件的響應(yīng)。只有添加了動作，交互事件才有實際意義。鏈接動作用于頁面跳轉(zhuǎn)或窗口操作，如打開鏈

接、關(guān)閉窗口、在框架中打開鏈接等。元件動作針對元件屬性的控制，如顯示/隱藏、設(shè)置文本、移動、旋轉(zhuǎn)、設(shè)置尺寸等。中繼器動作專門用于操作中繼器數(shù)據(jù)，包含添加

行、刪除行、更新行、添加排序、移除篩選等。其他動作輔助交互邏輯的動作，如等待、設(shè)置變量值、觸發(fā)事件、其他等高級控制功

能。交互動作與實操案例交互核心構(gòu)成配置流程詳解實操案例：導(dǎo)航菜單聯(lián)動點擊一級菜單切換二級菜單顯示1

添加交互事件選中目標(biāo)元件（如一級菜單），在交互窗格點擊“新建交互”，選擇如“鼠標(biāo)單擊時”等觸發(fā)條件。2

組織執(zhí)行動作在動作列表中選擇需要響應(yīng)的命令，例如“元件動作”下的“顯示/隱藏”或“設(shè)置面板狀態(tài)”。3

設(shè)置目標(biāo)參數(shù)指定目標(biāo)對象（如二級菜單動態(tài)面板），配置動畫效果（如向下滑動）及持續(xù)時間，完成邏輯閉環(huán)。localhost:8080/index.html02交互邏輯與變量應(yīng)用原型交互設(shè)計進(jìn)階本章節(jié)將深入解析Axure交互邏輯條件的設(shè)置規(guī)則，重點探討全局變量與局部變量的定義與區(qū)別。通過實戰(zhàn)案例，掌握變量在數(shù)據(jù)傳遞與復(fù)雜邏輯判斷中的核心應(yīng)用技巧。邏輯條件全局變量局部變量交互邏輯條件設(shè)置交互邏輯與變量應(yīng)用進(jìn)入情形編輯器在交互設(shè)置中，通過雙擊已添加的用例，或在交互編輯器頂部點擊

“啟用情形”按鈕，即可打開邏輯條件設(shè)置面板，為交互添加判斷規(guī)則。條件匹配邏輯匹配所有(AND)：需滿足列表中所有條件才觸發(fā)動作；

匹配任何(OR)：只要滿足列表中任意一個條件即可觸發(fā)。條件設(shè)置三要素完整的邏輯判斷由三部分構(gòu)成：比較主體（如元件文字）、運算符（如等于、包含）以及比較對象（具體值或變量）。CaseEditor全局與局部變量應(yīng)用交互邏輯與變量應(yīng)用全局變量作用于整個項目范圍，主要用于在不同頁面之間進(jìn)行數(shù)據(jù)傳遞與狀態(tài)存儲。局部變量僅在單個交互動作內(nèi)部有效，常用于函數(shù)引用或臨時計算，不跨頁面。設(shè)置規(guī)則變量名需由字母或數(shù)字組成，長度小于25字符，且名稱中嚴(yán)禁包含空格。03高級元件應(yīng)用原型交互設(shè)計進(jìn)階本章節(jié)重點講解動態(tài)面板與中繼器兩種核心高級元件。深入解析多狀態(tài)容器的交互邏輯與動態(tài)數(shù)據(jù)管理的實現(xiàn)方法，助力原型設(shè)計從靜態(tài)展示向高保真動態(tài)交互進(jìn)階。動態(tài)面板中繼器動態(tài)面板的創(chuàng)建高級元件應(yīng)用方式一：直接拖曳法直接從左側(cè)元件庫面板中找到“動態(tài)面板”元件，將其拖曳至工作區(qū)域即可完成創(chuàng)建。方式二：右鍵轉(zhuǎn)換法選中工作區(qū)中的普通元件，點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“轉(zhuǎn)換為動態(tài)面板”。動態(tài)面板的應(yīng)用高級元件應(yīng)用編輯模式啟動雙擊工作區(qū)中的動態(tài)面板元件，即可進(jìn)入專屬編輯區(qū)域。此時界面會顯示藍(lán)色虛線邊框，用于區(qū)分當(dāng)前處于面板內(nèi)部狀態(tài)，避免與正常頁面層級混淆。專屬屬性配置擁有普通元件不具備的高級屬性：自適應(yīng)內(nèi)容可隨內(nèi)容調(diào)整尺寸，滾動條控制內(nèi)容溢出顯示，固定到瀏覽器可實現(xiàn)懸浮窗效果。多狀態(tài)容器特性動態(tài)面板是一個多狀態(tài)容器，支持添加多個獨立狀態(tài)（State）。在原型運行時，任意時刻僅顯示一種狀態(tài)，是制作輪播圖、Tab切換等交互的核心組件。中繼器核心應(yīng)用高級元件應(yīng)用雙重核心架構(gòu)中繼器由數(shù)據(jù)集（存儲數(shù)據(jù)源）與中繼器項（展示模板）構(gòu)成，實現(xiàn)了數(shù)據(jù)存儲與界面顯示的邏輯分離。動態(tài)數(shù)據(jù)管理具備類數(shù)據(jù)庫特性，支持在原型交互中實現(xiàn)數(shù)據(jù)的增、刪、改、查及排序篩選，模擬真實后臺邏輯。典型應(yīng)用場景廣泛應(yīng)用于復(fù)雜的列表交互場景，如電商商品展示、學(xué)生信息管理表格及動態(tài)搜索結(jié)果頁面的高保真還原。Axure

RP-中繼器編輯視圖任務(wù)總結(jié)項目六互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)交互核心掌握Axure交互事件觸發(fā)機制與動作配置流程邏輯應(yīng)用熟練運用條件判斷邏輯與全局/局部變量管理高級元件精通動態(tài)面板狀態(tài)切換與中繼器數(shù)據(jù)交互實戰(zhàn)感謝觀看THANK

YOU

FOR

WATCHINGTHANKYOU感謝觀看!主講人：馬勝銘時間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)主講人：馬勝銘時間：6-3高保真原型開發(fā)實踐素質(zhì)提升技能儲備原型流程掌握已熟悉產(chǎn)品需求分析方法，能夠獨立完成低保真原型的邏輯梳理與繪制。Axure工具基礎(chǔ)熟練掌握AxureRP面板操作、動態(tài)面板狀態(tài)切換及基礎(chǔ)元件屬性設(shè)置。項目實戰(zhàn)目標(biāo)以海瀾飛馬體育公園小程序為例，進(jìn)階學(xué)習(xí)高保真交互設(shè)計與開發(fā)全流程。素質(zhì)提升目標(biāo)響應(yīng)“體重管理年”號召鼓勵大學(xué)生積極參與體育鍛煉，以健康的體魄支撐學(xué)業(yè)成長，培養(yǎng)自信心態(tài)。增強文化自信，以更好的狀態(tài)服務(wù)社會發(fā)展。健康體魄·強國有我高保真原型核心內(nèi)容與知識點3類核心頁面繪制首頁搭建基礎(chǔ)容器、導(dǎo)航布局與內(nèi)容模塊填充馬術(shù)頁設(shè)計業(yè)務(wù)展示與詳情頁布局會員意向頁表單設(shè)計與信息采集界面4類核心交互效果垂直滑屏動態(tài)面板拖動與回彈輪播圖多狀態(tài)循環(huán)切換動畫跑馬燈文字水平循環(huán)滾動底部菜單狀態(tài)選中與頁面跳轉(zhuǎn)關(guān)鍵技術(shù)點梳理基礎(chǔ)元件應(yīng)用熟練使用圖片、文本標(biāo)簽、矩形等基礎(chǔ)組件構(gòu)建高保真UI。事件與觸發(fā)機制掌握頁面加載(OnLoad)、點擊(OnClick)、拖動(OnDrag)等核心事件。動態(tài)面板邏輯深入理解多狀態(tài)管理、條件判斷(Condition)及狀態(tài)切換動畫。高保真原型前期準(zhǔn)備流程1.低保真原型繪制梳理產(chǎn)品邏輯與功能架構(gòu)，使用線框圖快速構(gòu)建產(chǎn)品骨架，確定頁面布局與交互流向。2.視覺設(shè)計輸出切圖

UI設(shè)計師依據(jù)低保真稿進(jìn)行視覺設(shè)計，輸出高精度界面設(shè)計稿及對應(yīng)的切圖素材。3.交互設(shè)計替換素材交互設(shè)計師將切圖導(dǎo)入Axure，替換原有線框，添加動態(tài)交互效果，生成高保真原型。小程序首頁基礎(chǔ)容器搭建背景容器尺寸規(guī)范拖入矩形元件作為頁面背景，嚴(yán)格設(shè)置尺寸為寬330px、高644px，以精確模擬移動端小程序的標(biāo)準(zhǔn)顯示區(qū)域。Content動態(tài)面板配置創(chuàng)建核心"Content"動態(tài)面板并設(shè)置多個狀態(tài)，用于承載首頁、分類頁等不同功能模塊的切換，構(gòu)建單頁應(yīng)用(SPA)結(jié)構(gòu)。底部導(dǎo)航視覺樣式導(dǎo)航背景僅保留頂部線寬，文本標(biāo)簽統(tǒng)一采用#7F7F7F

灰色值與12px字號，確保底部菜單視覺層級清晰統(tǒng)一。首頁內(nèi)容模塊填充基礎(chǔ)視覺元素填充導(dǎo)入首頁背景圖作為視覺底層，頂部精確放置“海瀾飛馬體育公園”

Logo，確立應(yīng)用整體的品牌識別度與視覺基調(diào)。導(dǎo)航與輪播布局繪制輪播圖邊框以界定核心展示區(qū)，填充中部導(dǎo)航條的各類圖標(biāo)與說明文本，構(gòu)建清晰且直觀的功能入口結(jié)構(gòu)。動態(tài)公告區(qū)域預(yù)留在導(dǎo)航條下方規(guī)劃跑馬燈位置，使用矩形背景搭配喇叭圖標(biāo)，為后續(xù)實現(xiàn)文字循環(huán)滾動的動態(tài)公告效果預(yù)留空間。項目六互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)高保真原型開發(fā)實踐首頁場地預(yù)約與課程布局場地預(yù)約區(qū)搭建采用左右分欄布局，左側(cè)展示圖標(biāo)，右側(cè)配置多色塊運動類型。填充對應(yīng)的Logo與文本信息，精準(zhǔn)設(shè)置色彩搭配，確保視覺層次分明。休閑樂園模塊布局參考場地預(yù)約區(qū)的設(shè)置規(guī)范，保持整體設(shè)計風(fēng)格的統(tǒng)一性。合理規(guī)劃休閑樂園區(qū)域的空間分布，完成基礎(chǔ)結(jié)構(gòu)與內(nèi)容的填充。熱門課程展示設(shè)計精心布局熱門課程列表，優(yōu)化圖文排版。突出課程名稱、教練信息及報名狀態(tài)，提升用戶瀏覽體驗與信息獲取效率。垂直滑屏交互效果制作Axure

RP

9

-

InteractionEditor轉(zhuǎn)換為動態(tài)面板選中首頁所有內(nèi)容轉(zhuǎn)換為動態(tài)面板，并確認(rèn)滑動邊界坐標(biāo)。1設(shè)置拖動時跟隨添加“拖動時”交互事件，設(shè)置動態(tài)面板跟隨鼠標(biāo)垂直方向拖動。設(shè)置拖動結(jié)束復(fù)位設(shè)置拖動結(jié)束到達(dá)頂部或底部邊界時，面板自動彈性復(fù)位。3首頁輪播圖交互實現(xiàn)新建動態(tài)面板狀態(tài)將輪播區(qū)域轉(zhuǎn)換為動態(tài)面板，命名為“輪播圖”。編輯面板狀態(tài)，添加State1、State2、State3三個狀態(tài)，并分別在每個狀態(tài)中導(dǎo)入對應(yīng)的輪播海報素材。配置頁面載入交互點擊頁面空白處，在交互窗格中選擇“頁面載入時”(PageLoaded)事件。添加“設(shè)置面板狀態(tài)”動作，目標(biāo)指定為“輪播圖”面板。設(shè)置循環(huán)切換參數(shù)將狀態(tài)選擇為Next，勾選“向后循環(huán)”。設(shè)置進(jìn)入/退出動畫為

“向左滑動”，并將循環(huán)間隔時間設(shè)置為3000ms。跑馬燈循環(huán)動畫制作轉(zhuǎn)換動態(tài)面板將文本標(biāo)簽與背景組合轉(zhuǎn)換為“內(nèi)容動態(tài)面板”，設(shè)置初始位置在可視區(qū)域右側(cè)，為滾動做準(zhǔn)備。1配置循環(huán)引擎新建空白“循環(huán)面板”并設(shè)置2個狀態(tài)，利用“頁面載入時”觸發(fā)狀態(tài)循環(huán)切換（間隔

1000ms）作為計時器。2添加滾動交互在狀態(tài)改變時添加“移動”動作，設(shè)置文本面板沿X軸向左移動（如移至-366），使用線性動畫（10000ms）。3實現(xiàn)邊界復(fù)位當(dāng)文本移出左側(cè)邊界后，設(shè)置立即復(fù)位至右側(cè)起始點（如坐標(biāo)328），實現(xiàn)無縫循環(huán)播放效果。4Axure交互編輯器-循環(huán)邏輯設(shè)置圖示：設(shè)置文本向左滾動的循環(huán)效果參數(shù)配置底部菜單交互配置菜單轉(zhuǎn)動態(tài)面板配置將底部菜單轉(zhuǎn)換為動態(tài)面板，為其設(shè)置“初始”與“選中”兩個狀態(tài)。分別導(dǎo)入對應(yīng)的圖標(biāo)與文字素材，構(gòu)建基礎(chǔ)交互結(jié)構(gòu)，為后續(xù)的狀態(tài)切換做好準(zhǔn)備。頁面載入默認(rèn)選中邏輯在“頁面載入時”交互事件中，強制設(shè)置首頁菜單的動態(tài)面板狀態(tài)為“選中”，其余菜單保持“初始”狀態(tài)，確保用戶進(jìn)入小程序時視覺焦點默認(rèn)定位在首頁。單擊切換狀態(tài)與頁面跳轉(zhuǎn)配置“鼠標(biāo)單擊時”事件：當(dāng)前點擊菜單切換至選中狀態(tài)，其余復(fù)位。同時設(shè)置頁面跳轉(zhuǎn)邏輯，連接馬術(shù)、會員等不同功能板塊，實現(xiàn)完整的導(dǎo)航功能。Axure

Interaction

Editor馬術(shù)頁與會員意向頁繪制馬術(shù)頁面視覺呈現(xiàn)頁面核心展示高清馬匹輪播圖，中間區(qū)域配置品牌標(biāo)識與歡迎語，底部集成標(biāo)準(zhǔn)導(dǎo)航欄，通過視覺元素構(gòu)建沉浸式馬術(shù)氛圍。會員意向登記功能設(shè)計簡潔清晰的表單結(jié)構(gòu)，包含姓名與手機號輸入框，底部設(shè)置醒目的提交按鈕，背景融入低透明度馬術(shù)元素，提升填寫體驗。小程序高保真原型最終效果UI界面高度還原成功構(gòu)建了海瀾飛馬體育公園小程序的首頁界面，整合了輪播圖、跑馬燈公告、功能入口及底部導(dǎo)航，視覺風(fēng)格統(tǒng)一，色彩搭配和諧。交互邏輯閉環(huán)實現(xiàn)了頁面間的順暢跳轉(zhuǎn)與狀態(tài)切換。底部菜單點擊反饋精準(zhǔn)，動態(tài)面板根據(jù)用戶操作實時響應(yīng)，垂直滑屏效果流暢自然，模擬真實APP體驗。核心功能模塊落地賽事活動報名、場地在線預(yù)約、休閑樂園展示等核心業(yè)務(wù)流程路徑清晰。通過高保真原型，直觀驗證了功能布局的合理性與易用性。原型評審核心意義與維度連接創(chuàng)意與現(xiàn)實原型評審是連接產(chǎn)品創(chuàng)意與開發(fā)實現(xiàn)的橋梁。通過多維度的評審，團隊可以提前發(fā)現(xiàn)潛在問題，驗證設(shè)計假設(shè)，并進(jìn)行針對性優(yōu)化，從而保障產(chǎn)品高質(zhì)量落地。團隊協(xié)作評審現(xiàn)場用戶體驗User

Experience功能實現(xiàn)Functionality技術(shù)可行性Feasibility視覺設(shè)計Visual

Design業(yè)務(wù)邏輯Business

Logic評審核心Review

Core原型優(yōu)化原則與實施方法持續(xù)迭代優(yōu)化連接創(chuàng)意與現(xiàn)實，通過多維度的評審與優(yōu)化，保障產(chǎn)品從設(shè)計到開發(fā)的高質(zhì)量落地。明確優(yōu)先級根據(jù)業(yè)務(wù)價值和開發(fā)成本，分階段實施功能，確保核心路徑優(yōu)先跑

通，避免資源分散。用戶參與邀請真實用戶進(jìn)行可用性測試，持續(xù)收集反饋，基于客觀數(shù)據(jù)而非主觀臆斷進(jìn)行迭代。跨部門協(xié)作設(shè)計、開發(fā)、測試多方協(xié)同，統(tǒng)一產(chǎn)品認(rèn)知，減少溝通壁壘，共同推進(jìn)項目進(jìn)度。注重細(xì)節(jié)打磨交互微動效、文案提示與異常狀態(tài)處理，追求極致的用戶體驗與統(tǒng)一的視覺規(guī)范。保持靈活性為產(chǎn)品架構(gòu)預(yù)留擴展空間，靈活應(yīng)對市場變化，支持未來的功能新增與業(yè)務(wù)調(diào)整。文檔記錄及時沉淀設(shè)計規(guī)范、交互邏輯變更與開發(fā)經(jīng)驗，形成知識庫，便于團隊傳承與維護。Axure團隊協(xié)作藍(lán)湖托管平臺Axure

Cloud使用痛點服務(wù)器位于海外，訪問速度慢且不穩(wěn)定，團隊協(xié)作效率低，分享鏈接常無法打開。藍(lán)湖托管解決方案國內(nèi)服務(wù)器高速穩(wěn)定，無縫對接Axure，支持自動標(biāo)注與全流程協(xié)作，大幅提升交付效率。面向多角色的協(xié)作價值產(chǎn)品經(jīng)理Product

Manager一鍵上傳原型，自動生成版本歷史，文檔在線評審與管理更高效。設(shè)計師UI/UX

Designer自動標(biāo)注切圖，設(shè)計圖與原型邏輯關(guān)聯(lián)，確保設(shè)計規(guī)范精準(zhǔn)落地。藍(lán)湖團隊協(xié)作操作步驟1.安裝登錄下載并安裝藍(lán)湖Axure客戶端，使用賬號完成登錄。2.創(chuàng)建團隊新建團隊空間與項目文件夾，配置成員權(quán)限。3.上傳文檔通過插件將Axure原型一鍵發(fā)布至藍(lán)湖云端。4.分享查看生成分享鏈接，團隊成員在線查看并打點評論。5.版本管理自動記錄歷史版本，支持隨時回溯與對比。全流程協(xié)作價值通過規(guī)范化的五步操作流程，藍(lán)湖平臺有效解決了傳統(tǒng)原型分發(fā)困難、版本混亂的問題。它連接了產(chǎn)品經(jīng)理、設(shè)計師與開發(fā)工程師，確保團隊始終基于最新、最準(zhǔn)確的原型文檔進(jìn)行開發(fā)與溝通。課程知識點總結(jié)高保真頁面繪制掌握圖片、矩形等基礎(chǔ)元件運用，結(jié)合視覺素材完成首頁、馬術(shù)頁及會員意向頁的精準(zhǔn)布局，實現(xiàn)從低保真到高保真的視覺還原。動態(tài)面板復(fù)雜交互深入理解動態(tài)面板狀態(tài)切換邏輯，熟練實現(xiàn)垂直滑屏拖動、輪播圖自動切換、跑馬燈循環(huán)滾動及底部菜單跳轉(zhuǎn)等核心交互效果。團隊協(xié)作與評審優(yōu)化掌握藍(lán)湖平臺的高效協(xié)作流程，明確原型評審的五大維度，遵循優(yōu)先級明確、持續(xù)迭代等優(yōu)化原則，保障產(chǎn)品設(shè)計的高質(zhì)量落地。PROJECT

06:

HIGH-FIDELITY

PROTOTYPE

DEVELOPMENT以匠心致初心，創(chuàng)造極致用戶體驗THANKS

FOR

WATCHINGTHANKYOU感謝觀看!主講人：馬勝銘時間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)主講人：馬勝銘時間：20266-4AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)01使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)應(yīng)用場景使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計UXbot交互原型生成1可以通過向UXbot輸入產(chǎn)品基本需求、功能流程等關(guān)鍵信息，快速生成具有交互功能的原型。UXbot能夠基于其智能算法和交互設(shè)計原則，自動生成頁面布局、元素交互效果等，為團隊提供一個可操作的初始交互原型，大大節(jié)省了從零開始設(shè)計交互原型的時間成本，提高了設(shè)計的啟動效率。交互動作優(yōu)化2UXbot可以對原型中的交互動作進(jìn)行智能分析和優(yōu)化建議。它能夠識別交互流程中的潛在問題，如操作步驟過于復(fù)雜、交互反饋不及時等，并提供優(yōu)化方案。通過優(yōu)化交互動作，使產(chǎn)品的交互更加自然、流暢，提升用戶體驗。用戶體驗測試與反饋3UXbot能夠模擬用戶行為對交互原型進(jìn)行測試，生成用戶體驗測試報告。報告中包含用戶在使用產(chǎn)品過程中的操作路徑、停留時間、操作錯誤率等關(guān)鍵數(shù)據(jù)，幫助團隊直觀了解交互設(shè)計的優(yōu)缺點。實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計通過前期的規(guī)劃與設(shè)計，產(chǎn)品經(jīng)理Salmon已經(jīng)完成了小程序草圖和低保真界面的設(shè)計，準(zhǔn)備設(shè)計開發(fā)高保真的蘇信圖書館小程序，并且添加元件以及界面之間的交互，讓其更加符合用戶的使用習(xí)慣和開發(fā)目標(biāo)。任務(wù)情境實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟一：登錄UXbot官網(wǎng)，開啟新對話。如圖所示。（1）借助UXbot創(chuàng)建高保真交互原型實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟二：創(chuàng)建項目，如圖所示。（1）借助UXbot創(chuàng)建高保真交互原型UXbot提供了三種創(chuàng)建項目的方法，分別為AI文字生成產(chǎn)品、參考圖片生成界面、從模板庫選擇。如果通過前面的項目完成了低保真原型的制作，可以通過參考圖片生成界面。此處為了更完整地應(yīng)用UXbot制作高保真原型，選擇使用“AI文字生成產(chǎn)品”功能創(chuàng)建一個新項目，如圖所示。實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟三：輸入產(chǎn)品信息（1）借助UXbot創(chuàng)建高保真交互原型從下圖可以看出創(chuàng)建項目包含四個步驟：產(chǎn)品信息——生成Workflow——選擇產(chǎn)品風(fēng)格——生成產(chǎn)品界面，如圖6-71所示。在產(chǎn)品信息區(qū)域，根據(jù)需要選擇合適的平臺類型、分辨率和撰寫產(chǎn)品描述。此處由于制作的是小程序，所以選擇平臺類型為手機APP，分辨率為402x874，產(chǎn)品描述為：蘇信圖書管理系統(tǒng)是用來為在校大學(xué)生提供圖書借閱和座位預(yù)約的系統(tǒng)，其中圖書借閱系統(tǒng)需要包含智能搜索、圖書詳情頁、一鍵借閱和個人借閱管理；座位智慧預(yù)約系統(tǒng)需要包含3D樓層導(dǎo)航、智能選座系統(tǒng)、時段化預(yù)約和動態(tài)簽到機制。如果不確定那個如何撰寫產(chǎn)品信息，可以單擊“用案例體驗一下”按鈕，會生成標(biāo)準(zhǔn)的產(chǎn)品信息文案，可以參考修改。實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟四：完成Workflow工作流的設(shè)置與優(yōu)化（1）借助UXbot創(chuàng)建高保真交互原型通過產(chǎn)品信息描述會生成各個頁面之間的工作流關(guān)系，如果自動生成的工作流內(nèi)容有誤差，可以選擇需要優(yōu)化的流程進(jìn)行修改優(yōu)化。實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟五：選擇合適的產(chǎn)品風(fēng)格（1）優(yōu)化產(chǎn)品交互動作UXbot提供了多種產(chǎn)品風(fēng)格，可以根據(jù)實際情況和產(chǎn)品用戶畫像選擇合適的產(chǎn)品風(fēng)格。此處選擇“經(jīng)典學(xué)院”風(fēng)格，如圖所示。選擇風(fēng)格后單擊“生成產(chǎn)品界面”即可完成原型的初步制作，如圖所示實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟一：選擇需要優(yōu)化的元件或界面（2）優(yōu)化產(chǎn)品交互動作通過預(yù)覽最終的原型發(fā)現(xiàn)，在3D流程導(dǎo)航頁面中“智能推薦座位”按鈕的交互存在一定的問題，當(dāng)單擊時，可選擇的座位動畫效果不夠明顯，因此選中“智能推薦座位”按鈕，重新撰寫描述詞：單擊智能推薦座位時，將推薦的可預(yù)約座位變換顏色，并動態(tài)展示變換效果。如圖所示。單擊“重新生成”則會根據(jù)描述重新優(yōu)化交互效果。實踐操作案例1：使用UXbot進(jìn)行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟二：預(yù)覽優(yōu)化效果（2）優(yōu)化產(chǎn)品交互動作單擊右上角“預(yù)覽”按鈕，鼠標(biāo)單擊“智能推薦座位”按鈕，可以看到淡綠色的可選座位顏色變化，并且有明顯的動態(tài)效果，更易于用戶使用和查看。其他界面或按鈕的交互可以參照上邊的操作步驟進(jìn)行優(yōu)化，最終完成蘇信圖書館借書高保真系統(tǒng)的制作。適老化設(shè)計貼心服務(wù)對于當(dāng)代大學(xué)生來說，在進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)時，特別需要關(guān)注老年人等特殊群體的需求，要認(rèn)識到為特殊群體設(shè)計產(chǎn)品的重要性，培養(yǎng)自己的社會責(zé)任感和愛心，將關(guān)愛他人、服務(wù)社會的理念貫徹到未來的產(chǎn)品開發(fā)中。另外要深入了解用戶需求和使用習(xí)慣。這不僅體現(xiàn)對用戶的尊重，只有將用戶放在中心位置，才能設(shè)計出有價值的產(chǎn)品，還與社會主義核心價值觀中的“以人民為中心”的發(fā)展思想相契合。02使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)應(yīng)用場景使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)扣子空間（Coze）智能體創(chuàng)建與集成1扣子空間（Coze）可快速創(chuàng)建智能體，并將其集成到互聯(lián)網(wǎng)產(chǎn)品中。平臺提供了簡潔易用的界面和豐富的開發(fā)工具，即使不具備深厚人工智能專業(yè)知識的開發(fā)人員，也能高效地構(gòu)建智能體，為產(chǎn)品賦予智能問答、智能推薦、自動化流程處理等人工智能能力，豐富產(chǎn)品功能，提升用戶對產(chǎn)品的滿意度和依賴度。智能功能開發(fā)與優(yōu)化2在開發(fā)過程中，扣子空間（Coze）的開發(fā)平臺可以搭建完整的應(yīng)用。扣子中搭建的AI應(yīng)用具備完整業(yè)務(wù)邏輯和可視化用戶界面，是一個獨立的AI項目。通過扣子開發(fā)的AI應(yīng)用程序可以進(jìn)行輸入和輸出，可以根據(jù)既定的業(yè)務(wù)邏輯和流程完成一系列簡單或復(fù)雜的任務(wù)，例如AI搜索、翻譯工具、飲食記錄等。開發(fā)效率提升與成本降低3該平臺的一站式開發(fā)環(huán)境整合了豐富的資源和工具，簡化了開發(fā)流程，減少了開發(fā)人員在搭建環(huán)境、配置參數(shù)等基礎(chǔ)工作上的時間消耗。其高效的開發(fā)模式和自動化測試工具，能夠快速發(fā)現(xiàn)并修復(fù)問題，縮短開發(fā)周期。此外，平臺還提供了靈活的擴展功能，方便開發(fā)人員根據(jù)產(chǎn)品發(fā)展需求逐步添加和升級智能功能，避免了一次性大規(guī)模投入，有效降低了開發(fā)成本。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)隨著人工智能技術(shù)的飛速發(fā)展，眾多AIGC（人工智能生成內(nèi)容）工具和平臺應(yīng)運而生，例如扣子。這些平臺能夠助力開發(fā)者構(gòu)建包含智能體的智能化應(yīng)用。在當(dāng)今社會和各行業(yè)快速發(fā)展的背景下，對于能夠勝任場景化應(yīng)用的人才需求日益迫切。本文旨在通過扣子開發(fā)AI應(yīng)用的案例，詳細(xì)講解開發(fā)流程，以啟發(fā)學(xué)生掌握相關(guān)技能并拓展思維。任務(wù)情境實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟一：創(chuàng)建AI應(yīng)用項目（1）設(shè)計你的應(yīng)用功能登錄扣子開發(fā)平臺。在左側(cè)菜單欄，單擊“創(chuàng)建”按鈕，創(chuàng)建一個“應(yīng)用”，如圖所示。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟一：創(chuàng)建AI應(yīng)用項目（1）設(shè)計你的應(yīng)用功能在應(yīng)用模板頁面，單擊“創(chuàng)建空白應(yīng)用”實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟一：創(chuàng)建AI應(yīng)用項目（1）設(shè)計你的應(yīng)用功能輸入應(yīng)用名稱，并單擊圖標(biāo)旁的AI圖標(biāo)使用AI自動生成一個圖標(biāo)。然后單擊確定，如圖所示。應(yīng)用創(chuàng)建成功后，會直接進(jìn)入到應(yīng)用的集成開發(fā)環(huán)境(IDE)。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能在業(yè)務(wù)邏輯頁面，找到工作流，然后單擊“+”號，新建工作流，如圖所示輸入工作流名稱和說明，然后單擊確認(rèn)。工作流名稱只支持字母、數(shù)字和下劃線，且必須以字母開頭實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能在工作流畫布，單擊開始節(jié)點的連接線或畫布下方的添加節(jié)點按鈕，然后依次添加插件、大模型、圖像生成節(jié)點，并完成連線實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能工作流的整體結(jié)構(gòu)如下圖所示然后依次單擊工作流的每個部分，設(shè)置詳細(xì)的參數(shù)實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能為了保證業(yè)務(wù)邏輯實現(xiàn)符合預(yù)期，單擊試運行測試工作流的執(zhí)行，如圖所示。在完成業(yè)務(wù)邏輯搭建并通過測試后，就可以開始用戶界面搭建了。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟三：搭建用戶界面（1）設(shè)計你的應(yīng)用功能扣子提供了可視化的用戶界面搭建能力，可以通過拖拉拽的方式搭建一個用戶界面，無需寫一行代碼。在應(yīng)用IDE，單擊頁面上方的用戶界面頁簽。選擇合適的UI搭建類型，然后單擊開始搭建實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟三：搭建用戶界面（1）設(shè)計你的應(yīng)用功能添加頁面組件，完成頁面搭建。具體使用的組件和Axure類似，將不再詳細(xì)介紹實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進(jìn)行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟四：為用戶界面添加事件和設(shè)置參數(shù)（1）設(shè)計你的應(yīng)用功能搭建好頁面后，就可以通過配置事件和添加數(shù)據(jù)實現(xiàn)業(yè)務(wù)邏輯與用戶頁面的聯(lián)動了。具