產(chǎn)品原型設(shè)計(jì)及原型工具展示規(guī)范引言產(chǎn)品原型設(shè)計(jì)是連接需求分析與產(chǎn)品開發(fā)的關(guān)鍵環(huán)節(jié)，通過可視化的原型可清晰呈現(xiàn)產(chǎn)品功能邏輯、交互流程及界面布局，有效降低溝通成本，減少開發(fā)返工。為規(guī)范原型設(shè)計(jì)流程、統(tǒng)一工具使用標(biāo)準(zhǔn)，保證原型質(zhì)量與團(tuán)隊(duì)協(xié)作效率，特制定本規(guī)范。本規(guī)范涵蓋原型設(shè)計(jì)核心原則、常用工具操作指南、模板表格及注意事項(xiàng)，適用于產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、交互設(shè)計(jì)師及開發(fā)團(tuán)隊(duì)相關(guān)人員，旨在打造標(biāo)準(zhǔn)化、可復(fù)用的原型設(shè)計(jì)體系。第一章原型設(shè)計(jì)概述一、原型設(shè)計(jì)的核心價(jià)值原型設(shè)計(jì)是將抽象需求轉(zhuǎn)化為具象產(chǎn)品的“可視化語言”，其核心價(jià)值體現(xiàn)在：需求驗(yàn)證：通過原型模擬真實(shí)使用場(chǎng)景，提前發(fā)覺需求邏輯漏洞，避免開發(fā)后修改；溝通提效：可視化原型可替代文字描述，幫助團(tuán)隊(duì)（包括非技術(shù)人員）快速理解產(chǎn)品形態(tài)；成本控制：原型階段的修改成本遠(yuǎn)低于開發(fā)階段，可有效降低項(xiàng)目風(fēng)險(xiǎn)；開發(fā)指引：高保真原型可作為前端開發(fā)的直接參考，明確界面元素、交互細(xì)節(jié)及數(shù)據(jù)流向。二、原型分類與工具適配根據(jù)保真度與用途，原型可分為三類，不同類型對(duì)應(yīng)工具選擇建議原型類型特點(diǎn)適用工具低保真原型線框圖為主，注重布局與流程墨刀、即時(shí)設(shè)計(jì)（低保真模式）、Axure（基礎(chǔ)線框）中保真原型包含基礎(chǔ)交互與視覺樣式Figma、Sketch、即時(shí)設(shè)計(jì)高保真原型還真視覺細(xì)節(jié)，完整交互邏輯Axure、Figma（高級(jí)交互）、Principle第二章常用原型工具展示規(guī)范一、AxureRP：高保真交互原型設(shè)計(jì)工具（一）適用場(chǎng)景與優(yōu)勢(shì)AxureRP是專業(yè)原型設(shè)計(jì)工具，擅長復(fù)雜交互邏輯搭建與動(dòng)態(tài)原型制作，適用于以下場(chǎng)景：需驗(yàn)證多步驟流程（如電商下單、用戶注冊(cè)）；需模擬數(shù)據(jù)動(dòng)態(tài)變化（如表單提交后數(shù)據(jù)更新、圖表聯(lián)動(dòng)）；需產(chǎn)出可交互的產(chǎn)品原型（用于用戶測(cè)試或開發(fā)對(duì)接）。優(yōu)勢(shì)：組件庫豐富、交互邏輯靈活、支持自適應(yīng)原型、可規(guī)格說明書。（二）分步操作指南步驟1：需求梳理與原型規(guī)劃輸入：產(chǎn)品需求文檔（PRD）、用戶流程圖；操作：明確原型核心模塊（如首頁、列表頁、詳情頁）、關(guān)鍵交互節(jié)點(diǎn)（如、跳轉(zhuǎn)、彈窗），繪制原型結(jié)構(gòu)圖；輸出：原型結(jié)構(gòu)圖（可使用XMind等工具）。步驟2：創(chuàng)建Axure文件與畫布設(shè)置打開AxureRP，“文件-新建”，選擇“響應(yīng)式網(wǎng)格”模板（建議網(wǎng)格單位為8px，符合設(shè)計(jì)規(guī)范）；設(shè)置畫布尺寸：移動(dòng)端原型建議375×812（iPhoneX尺寸），Web端建議1920×1080（PC端常用尺寸）。步驟3：組件拖拽與頁面布局從左側(cè)“元件庫”拖拽組件至畫布：布局組件：矩形、文本標(biāo)簽、圖片（用于搭建頁面框架）；表單組件：文本框、下拉列表、按鈕（用于輸入交互）；菜單組件：導(dǎo)航欄、選項(xiàng)卡（用于頁面切換）。示例：首頁布局可拖拽“矩形”作為導(dǎo)航欄，設(shè)置高度44px，背景色#1890FF；“文本標(biāo)簽”添加Logo文字；“按鈕”添加“立即進(jìn)入”入口。步驟4：交互邏輯設(shè)置以“按鈕跳轉(zhuǎn)詳情頁”為例：選中“立即進(jìn)入”按鈕，右側(cè)“交互”面板“新建交互”；選擇“事件”為“時(shí)”，“動(dòng)作”為“到-打開”；在“到”中選擇目標(biāo)頁面（如“商品詳情頁”），設(shè)置“在新窗口打開”或“當(dāng)前窗口打開”；若需傳遞參數(shù)（如商品ID），在“選項(xiàng)”中設(shè)置“到頁面時(shí)傳遞變量”，變量名填寫“goodsId”，類型為“字符串”。步驟5：動(dòng)態(tài)數(shù)據(jù)與交互效果模擬數(shù)據(jù)列表：從“元件庫”拖入“動(dòng)態(tài)面板”，命名為“商品列表”；右鍵“商品列表”-“管理重復(fù)”，選擇“橫向”或“縱向”重復(fù)，設(shè)置重復(fù)數(shù)量（如10條）；在重復(fù)項(xiàng)內(nèi)添加商品圖片、名稱、價(jià)格等文本，通過[[Item.index]]顯示序號(hào)，[[I]]顯示商品名稱；添加交互動(dòng)效：選中組件，在“交互”面板“動(dòng)作”中選擇“顯示/隱藏動(dòng)畫”（如“淡入”）、“動(dòng)畫時(shí)間”設(shè)為300ms。步驟6：原型預(yù)覽與發(fā)布Axure右上角“預(yù)覽”按鈕，HTML原型，可在瀏覽器中查看交互效果；發(fā)布：“文件-發(fā)布到AxureShare”，至云端，分享（可設(shè)置密碼保護(hù)）。（三）工具功能模板表格功能模塊組件類型交互邏輯輸出格式導(dǎo)航欄矩形、文本、圖標(biāo)跳轉(zhuǎn)至對(duì)應(yīng)頁面HTML、AxureShare商品列表動(dòng)態(tài)面板、重復(fù)列表下拉加載更多、查看詳情HTML、PDF規(guī)格說明搜索框文本框、搜索按鈕輸入關(guān)鍵詞觸發(fā)搜索HTML、數(shù)據(jù)接口文檔用戶中心列表項(xiàng)、圖標(biāo)進(jìn)入子頁面（如訂單頁）HTML、交互原型（四）操作注意事項(xiàng)組件命名規(guī)范：組件名稱需簡潔明確，如“btn_login”（登錄按鈕）、“img_logo”（Logo圖片），避免使用“按鈕1”“圖片2”等模糊名稱；交互邏輯復(fù)用：復(fù)雜交互（如彈窗關(guān)閉、表單驗(yàn)證）可保存為“母版”，避免重復(fù)設(shè)置；版本管理：重要版本需保存為Axure工程文件（.rp），并標(biāo)注版本號(hào)（如V1.0_需求評(píng)審版）；功能優(yōu)化：動(dòng)態(tài)面板避免嵌套過深（建議不超過3層），減少重復(fù)組件數(shù)量，保證原型運(yùn)行流暢。二、Figma：團(tuán)隊(duì)協(xié)作型UI/原型設(shè)計(jì)工具（一）適用場(chǎng)景與優(yōu)勢(shì)Figma是基于云端的設(shè)計(jì)工具，支持多人實(shí)時(shí)協(xié)作，適用于以下場(chǎng)景：團(tuán)隊(duì)需協(xié)同設(shè)計(jì)（如產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)同時(shí)在線編輯）；需統(tǒng)一設(shè)計(jì)規(guī)范（如組件庫、樣式指南）；需從設(shè)計(jì)稿直接原型，減少工具切換成本。優(yōu)勢(shì)：云端實(shí)時(shí)同步、組件化設(shè)計(jì)、開發(fā)標(biāo)注導(dǎo)出、免費(fèi)版本功能強(qiáng)大。（二）分步操作指南步驟1：創(chuàng)建設(shè)計(jì)文件與設(shè)置規(guī)范登錄Figma，“新建文件”，選擇“移動(dòng)設(shè)備”或“桌面設(shè)備”模板；設(shè)置設(shè)計(jì)規(guī)范：創(chuàng)建“顏色樣式”：“資源庫-新建顏色”，添加品牌色（如主色#1890FF、輔助色#52C41A）、文字顏色（主文本#333333、次要文本#666666）；創(chuàng)建“文字樣式”：設(shè)置字體（如蘋方、思源黑體）、字號(hào)（標(biāo)題24px、16px）、行高（1.5倍）；創(chuàng)建“組件”：拖拽按鈕、輸入框等元素，選中后“創(chuàng)建組件”，右鍵“創(chuàng)建變體”（如按鈕的“默認(rèn)”“”“禁用”狀態(tài)）。步驟2：頁面布局與組件使用從左側(cè)“圖層”面板拖拽“框架”至畫布，設(shè)置尺寸（如移動(dòng)端375×812）；使用組件：從“資源庫”拖拽“按鈕組件”至框架，雙擊修改文字內(nèi)容（如“登錄”），組件樣式自動(dòng)同步；示例：登錄頁布局可包含“Logo組件”“輸入框組件（賬號(hào)/密碼）”“登錄按鈕組件”“忘記密碼文本”。步驟3：原型交互設(shè)置選中“登錄按鈕”，右側(cè)“原型”面板設(shè)置：觸發(fā)事件：（OnTap）；動(dòng)作：轉(zhuǎn)到（GotoLink）；目標(biāo)頁面：選擇“首頁”框架；動(dòng)畫效果：選擇“滑動(dòng)”（Slide），方向?yàn)椤皬挠抑磷蟆保M返回效果）；設(shè)置頁面間跳轉(zhuǎn)：在“原型”面板拖拽頁面間的連接線，定義跳轉(zhuǎn)邏輯。步驟4：開發(fā)標(biāo)注與交付選中組件，右側(cè)“開發(fā)”面板查看標(biāo)注：尺寸：組件寬高（如按鈕寬度120px、高度40px）；間距：組件與邊框/其他組件的距離（如按鈕距離底部20px）；樣式：顏色值（#1890FF）、圓角（4px）、陰影（02px8pxrgba(0,0,0,0.1)）；導(dǎo)出標(biāo)注：“文件-導(dǎo)出-開發(fā)資源”，選擇“標(biāo)注PDF”，包含所有組件的尺寸、樣式、間距信息。（三）工具功能模板表格功能模塊組件類型交互邏輯交付物品牌組件庫顏色、文字、按鈕樣式統(tǒng)一，一鍵復(fù)用組件庫文件、設(shè)計(jì)規(guī)范文檔登錄頁面框架、輸入框、按鈕登錄跳轉(zhuǎn)首頁，輸入校驗(yàn)設(shè)計(jì)稿、交互原型、標(biāo)注PDF首頁Banner圖片輪播組件自動(dòng)輪播、左右滑動(dòng)切換設(shè)計(jì)稿、標(biāo)注信息個(gè)人中心列表組件、頭像跳轉(zhuǎn)設(shè)置頁，頭像交互原型、接口文檔（四）操作注意事項(xiàng)組件更新：修改母版組件后，右鍵選擇“在所有實(shí)例中更新”，保證所有頁面組件樣式一致；協(xié)作規(guī)范：團(tuán)隊(duì)成員使用“評(píng)論”功能反饋問題，避免直接修改他人圖層；使用“版本歷史”恢復(fù)誤操作；文件命名：文件名格式為“項(xiàng)目名稱_模塊_版本”（如“電商APP_首頁_V2.0”），便于版本管理；功能優(yōu)化：避免導(dǎo)入超大圖片（建議壓縮至2MB以內(nèi)），減少畫布中的圖層數(shù)量（單個(gè)框架圖層不超過200層）。三、墨刀：快速低保真原型工具（一）適用場(chǎng)景與優(yōu)勢(shì)墨刀是輕量化原型工具，操作簡單，專注于快速搭建低保真原型，適用于以下場(chǎng)景：需求初期快速驗(yàn)證產(chǎn)品流程（如頭腦風(fēng)暴階段）；非設(shè)計(jì)人員（如產(chǎn)品經(jīng)理、運(yùn)營）快速輸出原型；向客戶或領(lǐng)導(dǎo)演示核心功能框架。優(yōu)勢(shì)：上手快、組件豐富、支持手機(jī)端實(shí)時(shí)預(yù)覽、免費(fèi)版可導(dǎo)出高清圖片。（二）分步操作指南步驟1：創(chuàng)建項(xiàng)目與選擇畫布登錄墨刀，“新建項(xiàng)目”，輸入項(xiàng)目名稱（如“電商APP原型”）；選擇畫布模板：移動(dòng)端選擇“iPhoneX”，Web端選擇“1366×768”。步驟2：拖拽組件與搭建框架從底部“組件庫”拖拽組件至畫布：常用組件：矩形、文本、圖片、按鈕、列表、圖標(biāo)；布局組件：導(dǎo)航欄、選項(xiàng)卡、彈窗；示例：首頁框架可拖拽“頂部導(dǎo)航欄組件”（包含Logo、搜索圖標(biāo)、購物車圖標(biāo)）、“輪播圖組件”、“商品列表組件”。步驟3：頁面跳轉(zhuǎn)與交互設(shè)置選中“搜索圖標(biāo)”，右側(cè)“交互”面板設(shè)置：觸發(fā)：；動(dòng)作：打開頁面（選擇“搜索結(jié)果頁”）；轉(zhuǎn)場(chǎng)：無動(dòng)畫（低保真原型建議簡化轉(zhuǎn)場(chǎng)效果）；設(shè)置返回邏輯：在“搜索結(jié)果頁”拖拽“返回按鈕”，交互動(dòng)作設(shè)為“返回上一頁”。步驟4：預(yù)覽與分享右上角“預(yù)覽”按鈕，手機(jī)端掃碼查看原型效果；分享：“分享-”，設(shè)置公開/私密，可導(dǎo)出PDF或圖片格式。（三）工具功能模板表格功能模塊組件類型交互邏輯輸出格式首頁框架導(dǎo)航欄、輪播圖搜索跳轉(zhuǎn)結(jié)果頁圖片、PDF、分享商品列表列表、加載更多下拉刷新，查看詳情交互原型、購物車列表、數(shù)量按鈕修改數(shù)量，計(jì)算總價(jià)高清圖片、PDF（四）操作注意事項(xiàng)組件簡化：低保真原型無需復(fù)雜樣式，用灰色塊代替圖片，用占位符文本代替真實(shí)內(nèi)容；流程聚焦：核心流程（如用戶注冊(cè)、下單）需完整搭建，次要功能可簡化處理；版本標(biāo)注：每次迭代后更新項(xiàng)目名稱（如“V1.0_需求評(píng)審”），避免混淆；導(dǎo)出格式：向客戶演示建議導(dǎo)出PDF（可交互），向開發(fā)團(tuán)隊(duì)導(dǎo)出高清圖片（用于標(biāo)注）。第三章原型設(shè)計(jì)流程規(guī)范一、需求分析與原型目標(biāo)確定輸入：產(chǎn)品需求文檔（PRD）、用戶畫像、用戶旅程圖；操作：梳理核心功能模塊（如電商APP的“商品瀏覽”“購物車”“支付”）；確定原型保真度（根據(jù)項(xiàng)目階段：需求階段用低保真，開發(fā)前用高保真）；輸出《原型設(shè)計(jì)任務(wù)書》，明確模塊負(fù)責(zé)人、交付時(shí)間、驗(yàn)收標(biāo)準(zhǔn)。二、原型設(shè)計(jì)與評(píng)審設(shè)計(jì)階段：低保真原型：用墨刀/Axure繪制線框圖，驗(yàn)證流程邏輯，輸出《流程評(píng)審報(bào)告》；中高保真原型：用Figma/Axure添加視覺樣式與交互細(xì)節(jié)，標(biāo)注開發(fā)需求。評(píng)審流程：組織原型評(píng)審會(huì)（參與人員：產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)負(fù)責(zé)人、測(cè)試負(fù)責(zé)人）；評(píng)審要點(diǎn)：流程完整性、交互合理性、視覺一致性、開發(fā)可行性；輸出《原型評(píng)審意見表》，明確修改項(xiàng)與責(zé)任人。三、原型修改與定稿根據(jù)評(píng)審意見修改原型，更新版本號(hào)（如V1.0→V1.1）；關(guān)聯(lián)需求文檔：在原型中標(biāo)注對(duì)應(yīng)PRD章節(jié)（如“登錄按鈕觸發(fā)接口調(diào)用，詳見PRD-3.2”）；定稿輸出：交互原型（HTML/）、設(shè)計(jì)稿（Figma/Axure文件）、開發(fā)標(biāo)注（PDF）。第四章注意事項(xiàng)一、通用規(guī)范需求對(duì)齊：原型設(shè)計(jì)前需與產(chǎn)品經(jīng)理*確認(rèn)需求細(xì)節(jié)，避免理解偏差；用戶視角：交互設(shè)計(jì)需符合用戶習(xí)慣（如“返回”按鈕放在左側(cè)，操作按鈕放在右側(cè)）；兼容性：移動(dòng)端原型需考慮不同屏幕尺寸（如iPhone/Android主流機(jī)型），Web端需適配主流瀏覽器；可訪問性：添加文字替代文本（如圖片標(biāo)注“商品圖”），保證色盲用戶可識(shí)別（避免紅綠對(duì)比）。二、版本管理與協(xié)作版本控制：重要原型需保存歷史版本（如使用Axure“另存為”功能），避免覆蓋修改；團(tuán)隊(duì)協(xié)作：使用Figma實(shí)時(shí)協(xié)作時(shí)，明確圖層分工（如設(shè)計(jì)師負(fù)責(zé)視覺，產(chǎn)品經(jīng)理負(fù)責(zé)交互）；文檔同步：原型更新后需同步更新PRD、測(cè)試用例等關(guān)聯(lián)文檔，保證信息一致。三、原型交付標(biāo)準(zhǔn)交互完整性：核心流程（如注冊(cè)→登