PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：2026年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)樗鲜挚?、操作簡單，滿足產(chǎn)品經(jīng)理的需求。Axure

RP工具優(yōu)勢(shì)快速上手界面直觀，學(xué)習(xí)曲線平緩，適合快速入門。操作簡單強(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)目文件