PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：5-1原型設(shè)計(jì)基礎(chǔ)01項(xiàng)目導(dǎo)入綠航物流系統(tǒng)迭代困境與AIGC提效成果02學(xué)習(xí)目標(biāo)涵蓋知識(shí)、能力、素質(zhì)的全方位提升03原型設(shè)計(jì)認(rèn)知理解原型定義、分類及其橋梁作用04主流原型工具Axure、墨刀、Figma等工具特性解析05原型優(yōu)劣勢(shì)分析快速迭代價(jià)值與技術(shù)實(shí)現(xiàn)局限06思考互動(dòng)探討工具選擇邏輯與用戶參與價(jià)值01項(xiàng)目導(dǎo)入原型設(shè)計(jì)基礎(chǔ)綠航原型優(yōu)化實(shí)踐成果項(xiàng)目導(dǎo)入2024綠航困境界面混亂導(dǎo)致系統(tǒng)誤操作率高23%跨部門協(xié)作低效需求變更頻繁58%系統(tǒng)迭代遭遇瓶頸，需求描述模糊，開發(fā)返工量大，嚴(yán)重影響物流調(diào)度效率。15%低保真優(yōu)化提效40%減少重復(fù)工作量Figma協(xié)作平臺(tái)母版統(tǒng)一組件，實(shí)現(xiàn)跨部門實(shí)時(shí)協(xié)作，大幅降低溝通成本。AIGC輔助設(shè)計(jì)自動(dòng)生成界面框架與數(shù)據(jù)可視化方案，大幅壓縮單頁面設(shè)計(jì)時(shí)長。優(yōu)化實(shí)踐成果02學(xué)習(xí)目標(biāo)原型設(shè)計(jì)基礎(chǔ)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)掌握原型設(shè)計(jì)概念與分類熟悉Axure/摹客工具功能理解不同保真度應(yīng)用場(chǎng)景能力目標(biāo)熟練運(yùn)用工具繪制原型獨(dú)立完成產(chǎn)品原型方案應(yīng)用AIGC技術(shù)輔助設(shè)計(jì)素質(zhì)目標(biāo)培養(yǎng)嚴(yán)謹(jǐn)細(xì)致職業(yè)素養(yǎng)提升團(tuán)隊(duì)溝通協(xié)作能力樹立用戶體驗(yàn)優(yōu)先意識(shí)03原型設(shè)計(jì)認(rèn)知原型設(shè)計(jì)基礎(chǔ)原型設(shè)計(jì)的定義與橋梁作用原型設(shè)計(jì)認(rèn)知什么是原型設(shè)計(jì)？原型是產(chǎn)品的最初模型，用于模擬軟件功能操作與交互邏輯。它是連接抽象概念與具體實(shí)現(xiàn)的紐帶，也是產(chǎn)研團(tuán)隊(duì)高效協(xié)作的重要溝通依據(jù)。產(chǎn)品概念創(chuàng)意構(gòu)思/需求分析/靈感最終實(shí)現(xiàn)產(chǎn)品落地/代碼開發(fā)/交付原型設(shè)計(jì)的分類原型設(shè)計(jì)認(rèn)知草圖原型定義：白板或紙質(zhì)繪制的核心界面，快速記錄靈感。場(chǎng)景：適合項(xiàng)目初期頭腦風(fēng)暴，快速描述需求。低保真原型定義：使用工具搭建，展現(xiàn)大致結(jié)構(gòu)與基礎(chǔ)交互。場(chǎng)景：確認(rèn)功能邏輯，助力跨部門高效溝通。高保真原型定義：視覺與體驗(yàn)接近真實(shí)產(chǎn)品，細(xì)節(jié)逼真。場(chǎng)景：用于產(chǎn)品演示、高層匯報(bào)及用戶測(cè)試。保真度選擇邏輯無需一味追求高保真，需結(jié)合設(shè)計(jì)目標(biāo)與項(xiàng)目階段選擇適配的保真度，以平衡制作成本與驗(yàn)證價(jià)值。04主流原型工具原型設(shè)計(jì)基礎(chǔ)主流原型工具（一）主流原型工具AxureRP專業(yè)交互高保真Axure

RP是一款專業(yè)級(jí)交互原型工具，能夠處理復(fù)雜的動(dòng)態(tài)交互邏輯。它支持變量、函數(shù)及動(dòng)態(tài)面板，可將構(gòu)想轉(zhuǎn)化為接近真實(shí)體驗(yàn)的高保真原型，非常適合需要深度驗(yàn)證的大型項(xiàng)目。摹客(Mockplus)一站式

協(xié)同設(shè)計(jì)摹客是國內(nèi)領(lǐng)先的一站式設(shè)計(jì)協(xié)作平臺(tái)，集成了原型設(shè)計(jì)與團(tuán)隊(duì)協(xié)作功能。它支持從低保真草圖到高保真設(shè)計(jì)的全流程，有效打通產(chǎn)品、。設(shè)計(jì)與開發(fā)之間的壁壘，大幅提升跨部門協(xié)同效率主流原型工具（二）主流原型工具墨刀(Mockitt)國內(nèi)領(lǐng)先的一體化設(shè)計(jì)協(xié)作平臺(tái)，集成強(qiáng)大的AIGC功能，支持智能生成界面框架，顯著提升設(shè)計(jì)效率。智能化/高效率SketchmacOS平臺(tái)專業(yè)矢量設(shè)計(jì)工具，擁有豐富的插件生態(tài)，操作輕量化，完美適配

UI/UX設(shè)計(jì)需求。矢量設(shè)計(jì)/插件豐富MasterGo基于云端的產(chǎn)品設(shè)計(jì)工具，支持多人實(shí)時(shí)協(xié)作，多光標(biāo)同步編輯，有效保障設(shè)計(jì)規(guī)范統(tǒng)一。云端同步/團(tuán)隊(duì)協(xié)同05原型優(yōu)劣勢(shì)原型設(shè)計(jì)基礎(chǔ)原型設(shè)計(jì)優(yōu)點(diǎn)原型優(yōu)劣勢(shì)快速迭代驗(yàn)證通過拖拽組件快速搭建原型，需求變化時(shí)可迅速調(diào)整方案，無需大量返工，大幅提升設(shè)計(jì)效率。促進(jìn)溝通協(xié)作為跨部門提供統(tǒng)一交流平臺(tái)，減少語言描述帶來的誤解，有效對(duì)齊設(shè)計(jì)與開發(fā)的認(rèn)知標(biāo)準(zhǔn)。節(jié)省成本時(shí)間在原型階段低成本解決邏輯問題，規(guī)避開發(fā)后期修改代碼帶來的高昂返工成本與時(shí)間浪費(fèi)。提升用戶體驗(yàn)?zāi)M真實(shí)操作場(chǎng)景優(yōu)化交互流程，根據(jù)測(cè)試反饋調(diào)整視覺元素，顯著提升產(chǎn)品的最終吸引力。原型設(shè)計(jì)局限原型優(yōu)劣勢(shì)原型雖是高效工具，但在細(xì)節(jié)、技術(shù)與體驗(yàn)評(píng)估上存在客觀局限性細(xì)節(jié)表現(xiàn)有限原型的視覺細(xì)節(jié)往往不如最終產(chǎn)品精致，功能多為簡(jiǎn)化版本。對(duì)于涉及復(fù)雜算法或大數(shù)據(jù)處理的邏輯，原型往往無法真實(shí)呈現(xiàn)，可能掩蓋潛在的數(shù)據(jù)流轉(zhuǎn)問題。技術(shù)可行性不足設(shè)計(jì)階段容易產(chǎn)生“理想化”的交互動(dòng)效，但在實(shí)際開發(fā)中可能面臨高額成本。部分效果技術(shù)實(shí)現(xiàn)難度極高，這種偏差可能導(dǎo)致開發(fā)階段被迫閹割功能，造成設(shè)計(jì)與落地的落差。體驗(yàn)?zāi)M局限測(cè)試環(huán)境通常優(yōu)于真實(shí)場(chǎng)景（如網(wǎng)絡(luò)延遲、設(shè)備性能），導(dǎo)致數(shù)據(jù)不準(zhǔn)。用戶在測(cè)試時(shí)帶有特定任務(wù)心態(tài)，與真實(shí)使用時(shí)的隨意性不同，用戶體驗(yàn)評(píng)估可能不夠精準(zhǔn)。06思考互動(dòng)原型設(shè)計(jì)基礎(chǔ)課堂思考互動(dòng)工具選擇的核心價(jià)值是什么？思考如何根據(jù)項(xiàng)目階段（草圖/低保真/高保真）靈活選擇工具，以平衡制作成本與驗(yàn)證價(jià)值？無用戶參與原型設(shè)計(jì)有何風(fēng)險(xiǎn)？分析缺乏真實(shí)用戶反饋可能導(dǎo)致的體驗(yàn)評(píng)估偏差，以及設(shè)計(jì)者視角的認(rèn)知局限性。請(qǐng)分組討論以上問題，并分享您的觀點(diǎn)課堂知識(shí)點(diǎn)小結(jié)Summary

of

Knowledge

Points基礎(chǔ)理論回顧原型分類與層級(jí)草圖(靈感) 低保真(結(jié)構(gòu)) 高保真(演示)主流設(shè)計(jì)工具Axure(專業(yè)交互)/Figma(實(shí)時(shí)協(xié)作)/墨刀(AIGC提效)價(jià)值與局限優(yōu)勢(shì)：快速迭代驗(yàn)證、統(tǒng)一溝通語言局限：細(xì)節(jié)表現(xiàn)有限、技術(shù)實(shí)現(xiàn)差異"工具選擇必須服務(wù)于設(shè)計(jì)目標(biāo)，拒絕盲目追求高保真，產(chǎn)研協(xié)作效率至上。"綠航案例啟示15%低保真優(yōu)化提升操作效率40%協(xié)作平臺(tái)減少重復(fù)工作量THANKYOU感謝觀看!主講人：馬勝銘時(shí)間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：5-2低保真原型設(shè)計(jì)前的準(zhǔn)備準(zhǔn)備工作CORE

STEPS低保真原型設(shè)計(jì)前的兩大核心前置任務(wù)01

需求分析明確問題與目標(biāo)基于前期調(diào)研與訪談，提煉用戶痛點(diǎn)與期望，明確業(yè)務(wù)核心目標(biāo)，為設(shè)計(jì)指明方向。02

設(shè)計(jì)規(guī)劃制定解決方案拆分系統(tǒng)功能模塊，設(shè)計(jì)原型架構(gòu)與頁面布局，制作母版提升復(fù)用性，構(gòu)建清晰藍(lán)圖。需求分析：需求描述與收集01

前期基礎(chǔ)基于項(xiàng)目三的用戶與業(yè)務(wù)分析結(jié)果，確立初步方向，為后續(xù)需求挖掘奠定數(shù)據(jù)與邏輯基礎(chǔ)。02

收集渠道利用調(diào)研、訪談、問卷等多維渠道廣泛收集信息，確保樣本的多樣性與真實(shí)性。03

提煉目標(biāo)從海量信息中提煉核心需求，精準(zhǔn)匹配用戶痛點(diǎn)與期望，形成可落地的設(shè)計(jì)目標(biāo)。關(guān)鍵點(diǎn)：從原始數(shù)據(jù)到核心需求的轉(zhuǎn)化，是低保真原型設(shè)計(jì)的核心依據(jù)。需求整理與分析現(xiàn)場(chǎng)明確用戶與業(yè)務(wù)需求示例在線教育平臺(tái)

用戶側(cè)用戶強(qiáng)烈需求課程個(gè)性化推薦，系統(tǒng)需精準(zhǔn)匹配用戶的學(xué)習(xí)進(jìn)度與興趣偏好。電商平臺(tái)

業(yè)務(wù)側(cè)核心業(yè)務(wù)目標(biāo)是提升轉(zhuǎn)化率，重點(diǎn)在于優(yōu)化商品展示邏輯與簡(jiǎn)化購物支付流程。總結(jié)目標(biāo)留存用戶提升營收拓展市場(chǎng)遵循SMART設(shè)定設(shè)計(jì)目標(biāo)SSpecific

明確具體目標(biāo)需清晰界定，拒絕模糊概念，明確做什么。MMeasurable

可衡量需有明確的數(shù)據(jù)指標(biāo)支持，以便驗(yàn)證結(jié)果。AAttainable

可落地結(jié)合實(shí)際資源與能力，確保目標(biāo)具備實(shí)現(xiàn)性。RRelevant

相關(guān)性與業(yè)務(wù)核心目標(biāo)及用戶痛點(diǎn)緊密相關(guān)。TTime-bound

有時(shí)限設(shè)定明確的截止時(shí)間節(jié)點(diǎn)，避免拖延。CASE

STUDY在線教育平臺(tái)目標(biāo)示例時(shí)限：兩周內(nèi)完成低保真原型設(shè)計(jì)指標(biāo)：課程查找效率提升30%結(jié)果：產(chǎn)出可交互的原型方案設(shè)計(jì)規(guī)劃：拆分功能模塊第一步：拆分系統(tǒng)大功能確立產(chǎn)品的核心骨架，將復(fù)雜的系統(tǒng)需求劃分為若干獨(dú)立的大功能模塊。細(xì)化：分解小功能與菜單將大模塊逐級(jí)下沉，進(jìn)一步拆解為具體的操作菜單、子功能點(diǎn)及頁面元素。目的：梳理清晰功能層級(jí)構(gòu)建嚴(yán)密的邏輯結(jié)構(gòu)，確保功能層級(jí)清晰、無遺漏，為原型設(shè)計(jì)打好基礎(chǔ)。功能架構(gòu)思維導(dǎo)圖示例設(shè)計(jì)規(guī)劃：架構(gòu)布局整合構(gòu)建原型架構(gòu)基于前期功能拆分結(jié)果，運(yùn)用設(shè)計(jì)經(jīng)驗(yàn)搭建產(chǎn)品整體骨架，確立清晰的信息層級(jí)與導(dǎo)航邏輯。規(guī)劃頁面布局合理安排頁面元素位置，遵循用戶視覺習(xí)慣與操作路徑，確保界面布局平衡且交互流暢。整合功能模塊將拆解的細(xì)分功能點(diǎn)有機(jī)串聯(lián)，填充至架構(gòu)框架中，形成完整閉環(huán)的業(yè)務(wù)流程體驗(yàn)。設(shè)計(jì)規(guī)劃：提升復(fù)用性核心策略：制作母版(Master)將導(dǎo)航欄、頁腳、搜索框等通用功能模塊封裝為母版，實(shí)現(xiàn)“一次制作，多處調(diào)用”的設(shè)計(jì)邏輯。減少重復(fù)操作避免對(duì)相同組件的反復(fù)繪制，顯著降低低效勞動(dòng)，讓設(shè)計(jì)過程更加流暢。提升設(shè)計(jì)效率通過拖拽母版快速搭建頁面框架，縮短原型設(shè)計(jì)周期，聚焦核心交互邏輯。便于統(tǒng)一維護(hù)修改母版即可同步更新所有引用頁面，確保設(shè)計(jì)的一致性與維護(hù)便捷性。準(zhǔn)備工作核心回顧需求分析核心用戶調(diào)研：通過訪談提煉痛點(diǎn)與期望業(yè)務(wù)目標(biāo)：明確商業(yè)價(jià)值與核心訴求SMART原則：設(shè)定清晰可落地的設(shè)計(jì)目標(biāo)設(shè)計(jì)規(guī)劃核心模塊拆分：細(xì)化功能層級(jí)與菜單結(jié)構(gòu)

架構(gòu)整合：結(jié)合經(jīng)驗(yàn)設(shè)計(jì)頁面布局邏輯母版復(fù)用：提取通用功能提升設(shè)計(jì)效率THANKYOU感謝觀看!主講人：馬勝銘時(shí)間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：5-3原型設(shè)計(jì)基礎(chǔ)與應(yīng)用01原型設(shè)計(jì)核心認(rèn)知市場(chǎng)定位決策與Axure

RP工具價(jià)值02Axure

RP詳解界面七大分區(qū)與核心功能操作指南03Axure元件應(yīng)用基礎(chǔ)元件庫使用與交互事件設(shè)置04Axure實(shí)操案例快速制作登錄頁原型全流程演示01原型設(shè)計(jì)核心認(rèn)知原型設(shè)計(jì)基礎(chǔ)與應(yīng)用原型設(shè)計(jì)工具的應(yīng)用原型設(shè)計(jì)核心認(rèn)知原型設(shè)計(jì)工具眾多，本書要介紹的是AxureRP，這個(gè)工具在國內(nèi)很多大型互聯(lián)網(wǎng)公司正在使用和推廣，同時(shí)它也是產(chǎn)品經(jīng)理必備的原型設(shè)計(jì)工具，因?yàn)樗鲜挚?、操作?jiǎn)單，滿足產(chǎn)品經(jīng)理的需求。Axure

RP工具優(yōu)勢(shì)快速上手界面直觀，學(xué)習(xí)曲線平緩，適合快速入門。操作簡(jiǎn)單強(qiáng)大的拖拽式交互設(shè)計(jì)，輕松實(shí)現(xiàn)所見即所得。02AxureRP詳解原型設(shè)計(jì)基礎(chǔ)與應(yīng)用AxureRP界面分區(qū)AxureRP詳解Axure

RP

9

-

Untitled.rp1菜單欄包含文件、編輯、視圖等9項(xiàng)常規(guī)操作功能入口。2工具欄集合剪切、復(fù)制、對(duì)齊分布等高頻快捷編輯按鈕。3頁面與概要樹狀展示頁面結(jié)構(gòu)，管理頁面元件層級(jí)與可見性。元件與母版4

提供基礎(chǔ)元件庫，支持母版復(fù)用設(shè)計(jì)。工作區(qū)5原型設(shè)計(jì)核心畫布，進(jìn)行拖拽布局創(chuàng)作。檢視區(qū)6設(shè)置元件樣式、添加交互事件與說明。參數(shù)格式7設(shè)置元件屬性參數(shù)，輔助樣式調(diào)整。菜單與工具欄功能AxureRP詳解菜單欄(MenuBar)包含文件、編輯、視圖、項(xiàng)目等9項(xiàng)常規(guī)操作功能。提供軟件最基礎(chǔ)的文件管理與視圖控制入口，是原型設(shè)計(jì)的全局控制中樞。工具欄(Toolbar)匯集了設(shè)計(jì)過程中高頻使用的快捷編輯工具。內(nèi)置剪切、復(fù)制、粘貼、對(duì)齊、分布等常用按鈕，可大幅提升原型制作與排版效率。圖5-1

Axure頂部操作區(qū)域詳解參數(shù)格式與頁面與概要區(qū)功能AxureRP詳解參數(shù)格式區(qū)用于精細(xì)化設(shè)置元件屬性，包括坐標(biāo)尺寸、填充顏色、邊框樣式及交互效果，是控制元件外觀的核心區(qū)域。頁面區(qū)以樹狀結(jié)構(gòu)直觀展示原型站點(diǎn)地圖，支持頁面的添加、刪除、重命名及層級(jí)拖拽，便于管理復(fù)雜項(xiàng)目結(jié)構(gòu)。概要區(qū)類似設(shè)計(jì)軟件的圖層面板，管理當(dāng)前頁所有元件層級(jí)，支持快速檢索、鎖定、隱藏元件及動(dòng)態(tài)面板狀態(tài)切換。元件庫與母版區(qū)功能AxureRP詳解元件庫功能元件庫為原型制作提供豐富的基礎(chǔ)素材，涵蓋線框圖、流程圖、圖標(biāo)及自定義元件，支持通過拖拽快速構(gòu)建頁面結(jié)構(gòu)。母版區(qū)功能母版區(qū)用于設(shè)計(jì)共用區(qū)域（如導(dǎo)航欄、頁腳版權(quán)），支持

“一處修改，多頁同步”，大幅提升原型維護(hù)效率與一致性。母版(Master)工作區(qū)與檢視區(qū)功能AxureRP詳解工作區(qū)：核心設(shè)計(jì)畫布工作區(qū)是原型設(shè)計(jì)的核心操作界面。用戶在此區(qū)域進(jìn)行元件拖拽、頁面布局排列，所見即所得地自由完成原型創(chuàng)作。檢視區(qū)：三大功能模塊檢視區(qū)集成了“樣式”、“交互”、“說明”三大功能頁簽，是對(duì)頁面及元件屬性進(jìn)行精細(xì)化配置的關(guān)鍵控制中心。樣式定義與事件交互通過檢視區(qū)可調(diào)整元件的顏色、邊框等視覺樣式，并能添加單擊、載入等交互事件，實(shí)現(xiàn)從靜態(tài)線框圖到動(dòng)態(tài)原型的轉(zhuǎn)變。檢視區(qū)樣式交互展示AxureRP詳解檢視區(qū)功能概覽檢視區(qū)集成樣式（Style）、交互（Interaction）與說明（Notes）三大核心模塊，支持對(duì)頁面或元件屬性的全方位定義與管理。說明與注釋配置通過“說明”標(biāo)簽頁可為元件添加詳細(xì)的功能邏輯描述，支持自定義字段（如需求ID、優(yōu)先級(jí)），實(shí)現(xiàn)文檔的標(biāo)準(zhǔn)化管理。界面操作邏輯界面采用層級(jí)化結(jié)構(gòu)，頂部支持頁面與元件對(duì)象的快速切換，配合“指定元件”功能，可高效定位并批量編輯說明內(nèi)容。Axure生成文件類型AxureRP詳解.rp原型源文件這是Axure最基礎(chǔ)的文件格式，包含了項(xiàng)目中所有的頁面、元件、交互邏輯和注釋信息。適用于個(gè)人獨(dú)立完成原型設(shè)計(jì)工作，文件體積相對(duì)適中。.rpprj共享項(xiàng)目文件專為團(tuán)隊(duì)協(xié)作設(shè)計(jì)，通常配合AxureCloud或SVN使用。支持多人同時(shí)編輯同一個(gè)項(xiàng)目，具有簽入/簽出機(jī)制，能夠有效管理版本沖突。.rplib元件庫文件用于封裝自定義元件的集合文件。設(shè)計(jì)師可以將常用的組件（如導(dǎo)航欄、按鈕組）打包成庫，供團(tuán)隊(duì)成員導(dǎo)入使用，確保設(shè)計(jì)規(guī)范統(tǒng)一。版本兼容性重要提示Axure的文件遵循“向下兼容，向上不兼容”的原則。高版本（如Axure

RP

10）創(chuàng)建或保存的文件，無法在低版本（如AxureRP8/9）中打開。在團(tuán)隊(duì)協(xié)作中，務(wù)必確保所有成員使用相同的軟件版本，以免造成文件損壞或無法讀取。03Axure元件應(yīng)用原型設(shè)計(jì)基礎(chǔ)與應(yīng)用Axure元件庫分類Axure元件應(yīng)用Axure默認(rèn)元件庫線框圖元件(Common)核心基本元件表單元件菜單/表格標(biāo)記元件流程圖元件(Flow)用于繪制業(yè)務(wù)邏輯與跳轉(zhuǎn)流程圖標(biāo)庫(Icons)內(nèi)置常用矢量圖標(biāo)集合知識(shí)點(diǎn)解析Axure元件庫是原型設(shè)計(jì)的核心資源庫，其中線框圖元件使用頻率最高，涵蓋了從基礎(chǔ)形狀到復(fù)雜表單的所有UI元素。矩形/按鈕輸入框下拉列表基礎(chǔ)與特殊元件應(yīng)用Axure元件應(yīng)用基礎(chǔ)元件體系包含矩形、圓形、按鈕及占位符等核心組件。操作方式類似

Office繪圖工具，是構(gòu)建低保真線框圖的基石。圖片智能切割圖片元件支持十字、橫向及縱向三種切割方式。可靈活調(diào)整圖片布局而不影響整體比例，適配不同尺寸需求。熱區(qū)交互應(yīng)用通過透明熱區(qū)（Hot

Spot）覆蓋圖片特定區(qū)域，可在單張靜態(tài)圖上定義多個(gè)點(diǎn)擊跳轉(zhuǎn)邏輯，常用于電商海報(bào)設(shè)計(jì)。元件庫基礎(chǔ)線框圖元件功能演示圖片切割與編輯表單與菜單表格元件Axure元件應(yīng)用表單交互元件表單元件是用戶與系統(tǒng)交互的核心，包含文本框、下拉列表、復(fù)選框等。廣泛應(yīng)用于登錄注冊(cè)、信息填報(bào)等場(chǎng)景，支持單行或多行文本輸入及選項(xiàng)互斥邏輯，滿足基礎(chǔ)數(shù)據(jù)錄入需求。菜單與數(shù)據(jù)表格菜單表格元件用于結(jié)構(gòu)化數(shù)據(jù)的展示與導(dǎo)航。列表框和樹狀菜單適配部門列表、城市選擇等層級(jí)數(shù)據(jù)；表格元件則能清晰呈現(xiàn)復(fù)雜信息，提升后臺(tái)管理系統(tǒng)等場(chǎng)。景的信息獲取效率流程圖與自定義元件Axure元件應(yīng)用內(nèi)置流程圖元件庫Axure預(yù)置了標(biāo)準(zhǔn)化的流程圖元件，包含矩形（處理）、菱形（判定）、圓角矩形（起止）等，可快速繪制業(yè)務(wù)邏輯與操作步驟。業(yè)務(wù)邏輯可視化利用內(nèi)置元件庫，產(chǎn)品經(jīng)理能夠高效地理清產(chǎn)品交互邏輯，將抽象的業(yè)務(wù)規(guī)則轉(zhuǎn)化為直觀的視覺流程圖，提升團(tuán)隊(duì)溝通效率。自定義與第三方庫導(dǎo)入支持導(dǎo)入外部.rplib元件庫或創(chuàng)建自定義庫，以適配特定項(xiàng)目風(fēng)格，實(shí)現(xiàn)設(shè)計(jì)資源的復(fù)用與統(tǒng)一管理，擴(kuò)展設(shè)計(jì)能力。流程圖元件展示Axure元件應(yīng)用標(biāo)準(zhǔn)流程元件庫AxureRP內(nèi)置了標(biāo)準(zhǔn)的流程圖（Flow）元件庫，包含矩形、菱形、圓角矩形等標(biāo)準(zhǔn)化圖形。用戶無需額外尋找資源，直接拖拽即可快速構(gòu)建符合規(guī)范的業(yè)務(wù)邏輯圖。常用圖形語義規(guī)范遵循國際標(biāo)準(zhǔn)：圓角矩形代表流程起止，矩形代表執(zhí)行步驟，菱形用于條件判斷，平行四邊形表示輸入輸出。邏輯梳理與交互輔助在高保真設(shè)計(jì)前，利用流程圖元件梳理后臺(tái)邏輯與用戶操作路徑，能有效規(guī)避邏輯漏洞。配合頁面快照，可生成清晰的交互說明文檔，降低團(tuán)隊(duì)溝通成本。04Axure實(shí)操案例原型設(shè)計(jì)基礎(chǔ)與應(yīng)用Axure快速制作登錄頁Axure實(shí)操案例1新建空白文件啟動(dòng)Axure

RP軟件，點(diǎn)擊菜單欄“文件”選項(xiàng)，選擇“新建”，創(chuàng)建一個(gè)全新的空白原型項(xiàng)目文件。2添加表單元件從左側(cè)元件庫拖入兩個(gè)“文本框”和一個(gè)“提交按鈕”，分別設(shè)置提示文字為“用戶名”和“密碼”。3保存并預(yù)覽調(diào)整元件位置使其居中對(duì)齊，保存項(xiàng)目文件（Ctrl+S），點(diǎn)擊右上角“預(yù)覽”按鈕在瀏覽器查看效果。Login

Page

PreviewTHANKYOU感謝觀看!主講人：馬勝銘時(shí)間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：5-4原型設(shè)計(jì)進(jìn)階技巧0102母版的創(chuàng)建母版的拖放行為03母版的應(yīng)用01母版的創(chuàng)建原型設(shè)計(jì)進(jìn)階技巧母版核心作用母版的創(chuàng)建減少重復(fù)制作，大幅降低設(shè)計(jì)工作量在原型設(shè)計(jì)中常遇重復(fù)的頁面元素（如導(dǎo)航欄、頁腳），使用Axure母版功能可實(shí)現(xiàn)“一次設(shè)計(jì)，處處引用”。避免重復(fù)勞動(dòng)無需在每個(gè)頁面重復(fù)繪制相同的導(dǎo)航條或菜單，解決傳統(tǒng)復(fù)制粘貼帶來的維護(hù)難

題。提升設(shè)計(jì)效率修改母版即可同步更新所有引用的頁面，極大地縮短了迭代修改的時(shí)間成本。新建母版步驟1母版的創(chuàng)建切換面板區(qū)域在Axure界面左下角找到并點(diǎn)擊“母版”選項(xiàng)卡，進(jìn)入母版管理視圖。執(zhí)行添加操作點(diǎn)擊面板工具欄中的“添加母版”按鈕（+號(hào)圖標(biāo)），創(chuàng)建一個(gè)新的空白母版。規(guī)范命名管理雙擊新建的母版名稱，將其重命名為“導(dǎo)航條”，以便后續(xù)識(shí)別調(diào)用。圖示：添加母版操作制作導(dǎo)航母版內(nèi)容母版的創(chuàng)建01拖入矩形元件在Axure的元件庫面板中找到“矩形”元件，將其拖拽至母版編輯工作區(qū)的中心位置。02復(fù)制并排列復(fù)制該矩形兩次，并將這三個(gè)矩形橫向排列對(duì)齊，保持間距一致，構(gòu)建導(dǎo)航條的基本骨架。03命名與賦值分別雙擊這三個(gè)矩形元件，依次輸入文字內(nèi)容：

“首頁”、“新聞中心”、“社會(huì)責(zé)任”。Axure

RP

-

Master

View:Navigation首頁新聞中心社會(huì)責(zé)任創(chuàng)建頁面與母版批量引用母版的創(chuàng)建1

創(chuàng)建獨(dú)立展示頁面在頁面面板中分別創(chuàng)建“首頁”、“新聞中心”、“社會(huì)責(zé)任”三個(gè)獨(dú)立頁面，作為母版引用的載體。2

母版批量引用右鍵點(diǎn)擊導(dǎo)航條母版選擇“添加到頁面中”，在彈窗中勾選所有目標(biāo)頁面，實(shí)現(xiàn)一次性批量部署。母版應(yīng)用效果與移除操作母版的創(chuàng)建查看應(yīng)用效果雙擊“首頁”頁面進(jìn)入編輯區(qū)，即可直觀看到導(dǎo)航條母版已成功同步應(yīng)用。母版內(nèi)容的任何修改都會(huì)自動(dòng)更新到所有引用頁面，實(shí)現(xiàn)高效復(fù)用。移除母版關(guān)聯(lián)若需解除關(guān)聯(lián)，在母版面板中右鍵點(diǎn)擊目標(biāo)母版，選擇“從頁面中移除”選項(xiàng)。在彈出的對(duì)話框中勾選目標(biāo)頁面，即可快速切斷母版引用。母版第二種創(chuàng)建方法母版的創(chuàng)建方法二：元件直接轉(zhuǎn)換無需重新創(chuàng)建，直接利用現(xiàn)有設(shè)計(jì)成果。將頁面中已完成布局和樣式的元件組合，一鍵升級(jí)為可復(fù)用的母版，大幅提升設(shè)計(jì)效率。1選中目標(biāo)元件在畫布中選擇一個(gè)或多個(gè)需要復(fù)用的元件2右鍵上下文菜單點(diǎn)擊鼠標(biāo)右鍵喚出操作菜單3轉(zhuǎn)換為母版選擇功能項(xiàng)并命名完成母版創(chuàng)建制作頁面導(dǎo)航條-案例母版的創(chuàng)建拖入元件在首頁畫布中拖入3個(gè)矩形元件，作為導(dǎo)航菜單的基礎(chǔ)背景。命名設(shè)置將三個(gè)矩形分別命名為“首頁”、“新聞中心”、“社會(huì)責(zé)任”。檢查列表觀察左側(cè)概要面板，確認(rèn)元件層級(jí)正確，導(dǎo)航條初具雛形。Axure

RP

9-首頁導(dǎo)航制作元件轉(zhuǎn)母版操作母版的創(chuàng)建圖5-55將元件轉(zhuǎn)換為母版1選中目標(biāo)元件在畫布中框選或按住Shift鍵，依次選中已制作好的“首頁”、“新聞中心”、“社會(huì)責(zé)任”三個(gè)矩形元件。右鍵轉(zhuǎn)換母版保持選中狀態(tài)，點(diǎn)擊鼠標(biāo)右鍵喚出菜單，在列表中找到并選擇“轉(zhuǎn)換為母版”選項(xiàng)。命名并保存系統(tǒng)彈出創(chuàng)建對(duì)話框后，輸入母版名稱“導(dǎo)航菜單”，點(diǎn)擊確定即可完成從元件到母版的轉(zhuǎn)換。元件轉(zhuǎn)母版注意事項(xiàng)母版的創(chuàng)建坐標(biāo)默認(rèn)歸零機(jī)制元件被轉(zhuǎn)換為母版后，其內(nèi)部元件的坐標(biāo)屬性(X,Y)

將默認(rèn)重置為(0,0)。這意味著母版內(nèi)容將以母版容器的左上角為原點(diǎn)進(jìn)行對(duì)齊。實(shí)例位置獨(dú)立性在具體頁面中移動(dòng)母版實(shí)例，僅改變?cè)搶?shí)例在當(dāng)前頁面的顯示位置，絕不會(huì)改變母版源文件本身的內(nèi)部結(jié)構(gòu)或位置設(shè)定。防止布局錯(cuò)位設(shè)計(jì)時(shí)需特別留意坐標(biāo)變化帶來的視覺差異。建議在轉(zhuǎn)換前確認(rèn)好元件間的相對(duì)位置關(guān)系，避免因坐標(biāo)重置導(dǎo)致整體布局出現(xiàn)意外錯(cuò)位。Axure

RP

-Properties02母版的拖放行為原型設(shè)計(jì)進(jìn)階技巧母版3種拖放行為母版的拖放行為任意位置Anywhere母版可在引用頁面中自由拖動(dòng)與定

位，且內(nèi)容修改后會(huì)同步更新至所有頁面，適用于通用型組件。鎖定位置Lock

to

MasterLocation固定在引用頁面的底層，位置坐標(biāo)與母版內(nèi)保持絕對(duì)一致，非常適合制作背景圖或固定導(dǎo)航條。從母版脫離Break

Away切斷頁面實(shí)例與母版的關(guān)聯(lián)，轉(zhuǎn)換為普通元件獨(dú)立編輯，適用于需要基于模板進(jìn)行個(gè)性化修改的場(chǎng)景。02母版的應(yīng)用原型設(shè)計(jì)進(jìn)階技巧模板應(yīng)用實(shí)操案例母版的應(yīng)用海瀾集團(tuán)官網(wǎng)原型制作結(jié)合所學(xué)母版知識(shí)，使用Axure制作官網(wǎng)原型。重點(diǎn)在于將重復(fù)出現(xiàn)的導(dǎo)航欄與底部版權(quán)信息轉(zhuǎn)換為母版，體驗(yàn)“一次修改，全局同步”的高效設(shè)計(jì)流程。導(dǎo)航菜單母版化統(tǒng)一管理首頁、新聞中心等頁面入口底部信息復(fù)用批量應(yīng)用版權(quán)聲明與聯(lián)系方式至全站交互動(dòng)態(tài)效果設(shè)置鼠標(biāo)懸停樣式與菜單選中狀態(tài)原型效果預(yù)覽官網(wǎng)原型制作模塊與要點(diǎn)母版的應(yīng)用四大制作模塊導(dǎo)航菜單母版布局設(shè)計(jì)與結(jié)構(gòu)規(guī)劃底部版權(quán)信息母版復(fù)用與信息展示動(dòng)態(tài)效果制作導(dǎo)航菜單交互實(shí)現(xiàn)內(nèi)容補(bǔ)充各頁面專屬內(nèi)容填充核心設(shè)計(jì)要點(diǎn)元件組合應(yīng)用熟練使用文本標(biāo)簽、水平線、占位符、圖片等基礎(chǔ)元件，構(gòu)建結(jié)構(gòu)清晰、視覺規(guī)范的網(wǎng)頁母版。交互動(dòng)態(tài)實(shí)現(xiàn)通過設(shè)置交互事件（如鼠標(biāo)懸停、點(diǎn)擊切換），賦予靜態(tài)元件動(dòng)態(tài)反饋能力，提升原型的真實(shí)感。THANKYOU感謝觀看!主講人：馬勝銘時(shí)間：PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：20265-5

AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)使用AIGC繪制原型草圖使用AIGC輔助原型設(shè)計(jì)01使用AIGC繪制原型草圖AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)應(yīng)用場(chǎng)景使用AIGC繪制原型草圖Deepseek創(chuàng)意構(gòu)思1設(shè)計(jì)概念生成2用戶故事與場(chǎng)景模擬3即夢(mèng)AI快速繪制草圖1線框圖制作2實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖蘇信圖書館目前準(zhǔn)備開發(fā)一款線上借書和座位預(yù)定的小程序，產(chǎn)品經(jīng)理Salmon想通過借助AIGC工具幫助提供一些設(shè)計(jì)靈感，并輔助繪制原型草圖，從而方便后續(xù)進(jìn)行分享匯報(bào)使用。任務(wù)情境實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟一：進(jìn)入Deepseek官網(wǎng)進(jìn)行提問。如圖所示。（1）讓Deepseek提供原型設(shè)計(jì)結(jié)構(gòu)創(chuàng)意實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟二：進(jìn)行提問（1）讓Deepseek提供原型設(shè)計(jì)結(jié)構(gòu)創(chuàng)意在輸入框中，輸入提示詞：作為資深的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)理，需要為江蘇信息職業(yè)技術(shù)學(xué)院設(shè)計(jì)一款圖書館借書和座位預(yù)約的小程序，請(qǐng)為小程序設(shè)計(jì)開發(fā)功能界面。生成結(jié)果如下：實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟一：繼續(xù)進(jìn)行提問（2）將上述提供的建議界面轉(zhuǎn)化成即夢(mèng)AI可用的提示詞在輸入框中，輸入提示詞：現(xiàn)在你準(zhǔn)備各個(gè)功能模塊的描述，利用即夢(mèng)AI生成原型草圖，請(qǐng)你針對(duì)圖書借閱系統(tǒng)的首頁、圖書詳情頁頁面、座位智能選座系統(tǒng)頁面的描述，將描述轉(zhuǎn)化為即夢(mèng)AI生圖的提示詞。生成結(jié)果如下：實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟一：進(jìn)入登錄即夢(mèng)AI官網(wǎng)。（3）利用即夢(mèng)AI進(jìn)行草圖生成在即夢(mèng)官網(wǎng)選擇“圖片生成”功能，選擇合適的尺寸和分辨率。此處選擇默認(rèn)的1:1比例、標(biāo)清，如圖所示。實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟二：進(jìn)行提問（3）利用即夢(mèng)AI進(jìn)行草圖生成在輸入框中，將上文生成的提示詞一個(gè)個(gè)粘貼到對(duì)話框：手繪線稿草圖,圖書館小程序首頁,低保真線框單色線條,無背景--頂部：搜索欄（左側(cè)放大鏡圖標(biāo)+"搜索圖書/座位"占位文字）--中部：4個(gè)功能入口大按鈕（掃碼借書圖標(biāo)+文字、圖書檢索圖標(biāo)+文字、座位預(yù)約圖標(biāo)+文字、我的借閱圖標(biāo)+文字），2x2網(wǎng)格布局--下方：功能區(qū)標(biāo)題"熱門推薦"+橫向滾動(dòng)3個(gè)圖書卡片（簡(jiǎn)筆畫封面占位塊+書名標(biāo)簽）--底部：Tab欄（首頁/發(fā)現(xiàn)/個(gè)人中心圖標(biāo)+文字）組件帶手寫標(biāo)注，線條輕微抖動(dòng)感，留白30%。實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟三：即夢(mèng)生成的結(jié)果如下（3）利用即夢(mèng)AI進(jìn)行草圖生成即夢(mèng)默認(rèn)會(huì)生成4個(gè)效果圖，如圖所示，可以根據(jù)生成的效果圖選擇一個(gè)合適的草圖進(jìn)行保存。參照上邊的兩個(gè)步驟，依次將圖書詳情頁和智能選座系統(tǒng)的提示詞輸入即夢(mèng)AI的對(duì)話框，生成效果圖。最后選擇合適的效果圖。02使用AIGC輔助原型設(shè)計(jì)AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)應(yīng)用場(chǎng)景使用AIGC輔助原型設(shè)計(jì)摹客快速生成低保真原型圖1借助摹客的AI功能，產(chǎn)品經(jīng)理或設(shè)計(jì)師只需輸入產(chǎn)品基本需求、功能結(jié)構(gòu)等關(guān)鍵信息，即可快速生成低保真原型圖。這為設(shè)計(jì)團(tuán)隊(duì)提供了初始框架，大大節(jié)省了從空白頁面開始構(gòu)思和繪制的時(shí)間成本，提高了設(shè)計(jì)的啟動(dòng)效率。智能布局與元素推薦2摹客能夠根據(jù)產(chǎn)品類型和用戶需求，智能推薦合理的頁面布局方案以及常用UI元素。它基于大量的設(shè)計(jì)數(shù)據(jù)和模式識(shí)別，為原型設(shè)計(jì)中的界面排版、元素選擇提供參考建議，幫助設(shè)計(jì)師設(shè)計(jì)出更符合用戶體驗(yàn)和設(shè)計(jì)規(guī)范的低保真原型，提升原型的專業(yè)性和可用性。實(shí)時(shí)協(xié)作與反饋3在低保真原型圖制作過程中，團(tuán)隊(duì)成員可以通過摹客平臺(tái)進(jìn)行實(shí)時(shí)協(xié)作。產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)人員等不同角色能夠同時(shí)查看和編輯原型圖，隨時(shí)添加注釋、提出修改意見。實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書館小程序使用AIGC輔助原型設(shè)計(jì)蘇信圖書館平臺(tái)希望根據(jù)規(guī)劃的圖書館小程序原型，設(shè)計(jì)低保真原型，以便后期能夠更好地和開發(fā)人員及用戶分享。通過前期的規(guī)劃和構(gòu)思，預(yù)計(jì)設(shè)計(jì)以下幾個(gè)功能頁面。1.圖書借閱系統(tǒng)頁面：包含智能搜索、一鍵借閱、圖書詳情頁、個(gè)人借閱管理等。2.座位智慧預(yù)約頁面：包含3D樓層導(dǎo)航、智能選座系統(tǒng)、時(shí)段化預(yù)約動(dòng)態(tài)簽到機(jī)制等。3.學(xué)術(shù)支持中心：包含教材教參專區(qū)、考證資料庫、論文支持等。4.校園學(xué)習(xí)生態(tài)：包括學(xué)習(xí)計(jì)時(shí)器、失物招領(lǐng)平臺(tái)、活動(dòng)日歷等。任務(wù)情境實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書館小程序使用AIGC輔助原型設(shè)計(jì)步驟一：進(jìn)入慕客平臺(tái)（1）借助慕客AI完成低保真原型的制作實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書館小程序使用AIGC輔助原型設(shè)計(jì)步驟二：注冊(cè)登錄慕客，新建項(xiàng)目（1）借助慕客AI完成低保真原型的制作進(jìn)入慕客工作臺(tái)后，新建項(xiàng)目，選擇合適的畫板尺寸。此處將項(xiàng)目命名為“蘇信圖書館”、選擇“380x844”的畫板尺寸，如圖所示。實(shí)踐操作案例1：使用慕客