您的當前位置： 發(fā)布時(shí)間：2026-05-05 10:55:16 瀏覽：7285 次
產(chǎn)品原型的產(chǎn)品規范化，目的管理規范是清楚表達產(chǎn)品設計理念和功能交(jiao)互及執行邏輯，提高產(chǎn)品、流程研發(fā)、有產(chǎn)UI及業(yè)??務(wù)部門(mén)之間的品原溝通效率。本文主要講解了產(chǎn)品原型設計的型設一些標準、規范及實(shí)際操作方式，計??的及實(shí)際操方法，標準與大家(jia)分享。作方
01 制定產(chǎn)品原型設計規范的產(chǎn)品目的及意義目的：產(chǎn)品原型的規范化，目的管理規范是清楚表達產(chǎn)品設計理念和功能交互及執行邏輯，提高產(chǎn)品、?????流程研發(fā)、有產(chǎn)UI及業(yè)務(wù)部門(mén)之間的品原溝通效率，避免信息不(′?_?`)對稱(chēng)和信息傳達的型設遺漏和缺失而導致的整個(gè)項目進(jìn)度延期問(wèn)題。
讓開(kāi)發(fā)和設計團隊提高設計開(kāi)發(fā)質(zhì)量及工作效率。統一設計規則，降低各方溝通成本。進(jìn)行模塊式的設計，降低開(kāi)發(fā)成(????)本和減少開(kāi)發(fā)時(shí)間，加快產(chǎn)品迭代上線(xiàn)的速度。改善交互設計的水平，提升用戶(hù)的使用體驗。對于個(gè)人來(lái)說(shuō)：規范性產(chǎn)品原型繪制能夠提高個(gè)人的職業(yè)水平，標準，統(tong)一性，團隊??內部及協(xié)作單位的溝通成本也會(huì )降低，這能減少扯皮、反復溝通等問(wèn)題，將更多時(shí)間放在產(chǎn)品的思考上，同時(shí)避免不必要的糾紛。
02 原型保真度比較1. 評價(jià)維度一般有五個(gè)維度來(lái)測量一(′?｀*)個(gè)原型的真實(shí)（保真）程度。
a、視覺(jué)精煉層次
原型與最終產(chǎn)品看上去有多相似？一個(gè)低保真的原型也許就是一個(gè)手繪的草稿，而一個(gè)高保真原型就會(huì )是精確到像素，看上去和真(zhen)實(shí)的產(chǎn)品沒(méi)什么區別。
b、功能的廣度
原型能夠包含多少??的功能？一個(gè)低保真??的原型聚焦于那些最重要的任務(wù)，而高保真原型會(huì )有更細節的任務(wù)
c、功能的深度
每一個(gè)功能能夠被多大程度地制作成原型？一個(gè)低保真的原型可以在頁(yè)面和頁(yè)面之間跳轉，并在已有典型數據的情況下，告訴你(ni)大概的用戶(hù)流程。一個(gè)高保真的原型可以讓你輸入數據，知道那些在進(jìn)行不同的輸入時(shí)影響到輸出的區分。
d、交互的豐富性
原型中會(huì )有多(duo)少的交互？低保真原┐(′?｀)┌型也許會(huì )相當簡(jiǎn)單，在用戶(hù)使用時(shí)沒(méi)有?任何的反饋信息。高保??真原型將會(huì )考慮動(dòng)畫(huà)效果，表單??驗證，和所有用戶(hù)與產(chǎn)品直接的細節交互。
e、數據模型的豐富性
產(chǎn)品原型設計根據還原度，也就是與最??終成本的逼真度，大致分為低保真、中保真，高保真原型。我在過(guò)往中基本做到中保真，這也是絕大公司的要求。不同團隊及個(gè)人可能對保真度理解不一致，僅僅為個(gè)人觀(guān)點(diǎn)??。
2. 保真度a、 低保真原型
表現軟件的重點(diǎn)??功能和基本交互過(guò)程，使用簡(jiǎn)易的線(xiàn)框進(jìn)行處理，。好處是：制(zhi)作成本低，速度快，修改也方便，在功能簡(jiǎn)單及團隊溝通順暢時(shí)可以使ヽ(′▽?zhuān)?ノ用
b、 中度保真原型
中度保真的產(chǎn)品添加了更多細節，對軟件的交互進(jìn)行了更細(′?_?`)致的設計，比如照片處有對應內容照片，選項卡有??具體內容，按鈕??顏色做了區分，有動(dòng)效模擬。在大部分情況下，中度?保真原型已經(jīng)足夠，既表現了軟件的功能(neng)特性和交互過(guò)(guo)程(cheng)，界面有一定??的細節，而且(╥_╥)使用者已經(jīng)能完整體驗到(?????)最終的產(chǎn)品，可以驗證產(chǎn)品的可行性，確保了不會(huì )在后面的開(kāi)發(fā)過(guò)程中發(fā)現重大失誤。缺點(diǎn)是花費時(shí)間會(huì )多一些。
c. 高保真原型
幾乎完全(′；д；`)按照最終產(chǎn)品來(lái)制作的原型，細節豐富，包括了產(chǎn)品的所有功能以及詳細的交互細節。制作高保真原型可以顯著(zhù)降低溝通成本，┐(′ー｀)┌原型更精準和精美。但是，保真度越高就意味著(zhù)需(′?｀)要花更多的時(shí)間和開(kāi)發(fā)精力，而且一旦有修改也會(huì )更加耗??費時(shí)間。
d、各類(lèi)保真度優(yōu)劣總結
03 主流設計??工具Axure：的保密性更強，功能更強大，但是在線(xiàn)協(xié)作稍微差一點(diǎn)點(diǎn)。
Xmind：繪制功能結構圖（主要）；
V??isio：繪制用戶(hù)使用流程、系統業(yè)務(wù)流程、功能架構等；
Word：開(kāi)發(fā)周期允許時(shí)撰寫(xiě)PRD；
Excel：項目時(shí)間計劃管理(′▽?zhuān)?)、項目會(huì )議紀要輸出；
04 原型大綱一個(gè)完整項目ヽ(′ー｀)ノ的產(chǎn)品原型需要有“大綱”，包含內容如下：
1.產(chǎn)品的版本概況需明確記錄原型的增刪改內容及日期，
b、功能點(diǎn)列表
列出該ˉ\_(ツ)_/ˉ原型圖的功能點(diǎn)，明確開(kāi)發(fā)任務(wù)及優(yōu)先級。對于分期開(kāi)發(fā)，但原型已經(jīng)出完的，標注不同功能開(kāi)發(fā)的階段，“1期”、“2期”等。
2. 功能結構(╬?益?)圖a、使用xmind繪(′▽?zhuān)?)制，讓??開(kāi)發(fā)人員了解整個(gè)功能??框架、信息架構，利于估算開(kāi)發(fā)時(shí)間。
b、 功能結構圖(°□°)中使用的功能及頁(yè)面名稱(chēng)要和“功能清單列表”保持一致，
示例：
05 界面原型及邏輯說(shuō)明a、原型界面設計
在繪制產(chǎn)品原(???)型時(shí)，按思維導圖的產(chǎn)品規劃，先搭框架，制作主頁(yè)面菜單，菜單支持多個(gè)??級別，各頁(yè)面的層級關(guān)系需要明確，但一般不要超過(guò)3級到4級，級數過(guò)多則意味著(zhù)用戶(hù)的使用層級深，是不太好的方式。。
b、邏輯交互說(shuō)明
i. 點(diǎn)擊購物車(chē)結算按鈕，跳轉到訂單支付頁(yè)面。
ii. 點(diǎn)擊購物車(chē)結算按鈕，需要判斷是否選中商品，所選中商品是否有貨，a、如果沒(méi)有選中商品，點(diǎn)擊之后則當頁(yè)彈窗提醒“您尚未選中商品”，b、如果有選中商品??，則跳轉訂單支付頁(yè)面（??對于不同情況下的點(diǎn)擊效果，需要做多個(gè)按鈕進(jìn)行不(′▽?zhuān)?)同跳(╯‵□′)╯轉，），可?進(jìn)一步說(shuō)明不同跳轉的切換效果，比如是左右滑動(dòng)還是直接跳轉等。
對比以上兩種方式，則第二種更明確，這也會(huì )減少溝通成本。
c、設計說(shuō)明
如果對設計有特殊要求的也需要ヽ(′ー｀)ノ做說(shuō)明，比如支付的一般此阿勇明亮飽和的色調，專(zhuān)業(yè)性則一般采取藍色，或者有設┐(′?｀)┌計可供參考的，配色等方面。但如果對于設計沒(méi)(╯‵□′)╯有較好感覺(jué)，或是專(zhuān)業(yè)知識的，建議盡量讓設計師處理，畢竟專(zhuān)業(yè)的事情留給專(zhuān)業(yè)的人來(lái)做嘛。
06 交互用例a、在頁(yè)面層級樹(shù)的第一個(gè)頂級菜單設置并填寫(xiě)【產(chǎn)品名稱(chēng)】，下面可以添加更多層級；
b、版本號——采用子頁(yè)面進(jìn)行管理，頁(yè)面名稱(chēng)命名：版本號+【版本編號】如版本號V1.1.1；
c、修訂記錄——采用子頁(yè)面進(jìn)行管理，管理當前版本產(chǎn)品原型設計的修訂記錄——文章前部分已經(jīng)做了說(shuō)明；
d、功能清單說(shuō)明——采用子頁(yè)面進(jìn)行(xing)管理，使用表格說(shuō)明本次產(chǎn)品原型中需求的主要內容和功能；
e、正式原型部分：
i、ヾ(′?｀)?產(chǎn)品頁(yè)面的層級，最高一般不超過(guò)4層；
ii、產(chǎn)品模塊，命名規則為“【序號】+【產(chǎn)品模塊名稱(chēng)】”；
iii??、產(chǎn)品功能級頁(yè)面，命名規則為“【序號】+【產(chǎn)品頁(yè)面名稱(chēng)】”；
命名規則與文章章節目錄類(lèi)似
2. 墨刀母版制作與引用墨刀母版的制作請參考墨刀的母版制作 具體見(jiàn)網(wǎng)址：https://modao.kf5.com??/hc/search/results/?type=kb&keyword=%E6%AF%8D%E7%89%88
復用元件/組件ヾ(′?｀)?，必須使用母版設計，然后再統一添加到頁(yè)面上。在添加母版時(shí)，產(chǎn)品的背景，要求使用“位置鎖定”，防止在原型繪制的過(guò)程中，背景變動(dòng)頻繁調整的情況；
頁(yè)面母版的名稱(chēng)可自定義設置：“序號+自定義名稱(chēng)”；全局性的母版和局部使用母版，需要在命名規則上做區分，盡可能將眾多頁(yè)面都會(huì )(hui)使用到的標題（如小程序的頭部）、元件（如日歷）以及交互組件放置在母版中；3. 頁(yè)面位置和尺寸規范a、 PC默認(ren)尺寸為墨刀的【網(wǎng)頁(yè)/電視】類(lèi)別，APP/H5/小程序默認尺寸選擇iPhone6或者一個(gè)特定的尺寸，并在之后的(de)原型沿用；
b、 APP的框架設計不區分Android與IOS，僅在交互用例的設計上進(jìn)行區分；
08 流程制作規范“流程頁(yè)面”設計并制作用戶(hù)對本功能的使用流程，一般使用泳道流??程圖，泳道流程圖的畫(huà)法可以進(jìn)行百度搜索，一般而言是二維方式，橫軸為角色，縱軸為流程進(jìn)展，在流程旁邊，給出必要的文字備注說(shuō)明，對流程進(jìn)行(′ω｀)進(jìn)一步的闡述。
示例：
09 頁(yè)面說(shuō)明1. 交互設計及說(shuō)明需按照產(chǎn)??品原型規范要求，需使用能更好表達原型的，使產(chǎn)品原型上的所有(′ω｀*)功能板塊，能夠
準備模擬用戶(hù)的操作情景，保證所有功能的動(dòng)態(tài)(╥_╥)面(mian)板交互、點(diǎn)擊效果、頁(yè)面跳轉鏈接等ヽ(′?｀)ノ交互效果準確并正確。
并且為準確描述頁(yè)面的交互效果需求?？?ke)在頁(yè)面旁邊增加“點(diǎn)擊交互效果需求”的說(shuō)明，來(lái)描述頁(yè)面中每一個(gè)功能的操作交互需求。
示例：
2. 頁(yè)面功能及邏輯的標注為了方便開(kāi)發(fā)人員查看和理解，在產(chǎn)品原型中對功能的實(shí)現邏輯或使用的限制條件等進(jìn)行說(shuō)明。對(??-)?頁(yè)面的功能點(diǎn)進(jìn)行編號，在對應編號進(jìn)行說(shuō)明備注
范例：
3. 頁(yè)面流程圖項目整體頁(yè)面之間的交互流向邏輯，這個(gè)在墨刀上有一個(gè)工作流，可以點(diǎn)擊進(jìn)入之后，選擇需要展示流向的頁(yè)面，之后可以選擇：a、每個(gè)頁(yè)面與頁(yè)面整體交互的方式；b、所有控件交互的流向兩種方式進(jìn)行自動(dòng)生成。第一種方式對于查看頁(yè)面的主交互方式更清晰
這是另一種頁(yè)面流程交互流的畫(huà)法，這是按照業(yè)務(wù)流程進(jìn)行分拆，按一個(gè)業(yè)務(wù)流程從頭到尾，(′▽?zhuān)?)會(huì )走過(guò)哪些頁(yè)面。下圖即為示例，為訂單相關(guān)的流程交互，從最開(kāi)始的進(jìn)入APP或網(wǎng)站首頁(yè)》瀏覽商品》搜索》下單等，一直到最后支付成功，中間(jian)有異常流程也需(?⊿?)要做說(shuō)明。
以??上即是“產(chǎn)品管理流程及規范3——產(chǎn)品原型設計”的內容(rong)，主要講解了產(chǎn)品原型設計的一些標準、規范及實(shí)際操作方式，方(fang)法。
