本文為產(chǎn)品經(jīng)理和設(shè)計師提供了一份詳盡的原型設(shè)計規(guī)范指南。作者強(qiáng)調(diào)了規(guī)范在原型設(shè)計中的重要性，指出它能夠提升信息傳達(dá)效率并增強(qiáng)視覺吸引力。文章詳細(xì)介紹了尺寸、顏色、文字、圖標(biāo)、圖片、圓角、陰影、對齊、分布、間距和組件等關(guān)鍵要素的規(guī)范方法，旨在幫助讀者創(chuàng)建既美觀又實用的原型圖。無論是求職面試還是項目評審，一個規(guī)范且吸引人的原型圖都將是一個顯著的加分項。

UI設(shè)計有設(shè)計規(guī)范要遵循，同樣的原型圖也有自己的規(guī)范。

任何通過圖形示意的東西一樣，規(guī)范帶來的最大的好處是提高信息傳達(dá)效率。

人是視覺動物，好看的東西總喜歡多看兩眼，混亂的東西給人最直白的感受就是邏輯混亂。

這就是「卷面分」。

這篇文章我們說下原型圖的規(guī)范。

所謂的規(guī)范就是定規(guī)則，按照這一套規(guī)則作為標(biāo)準(zhǔn)進(jìn)行執(zhí)行，這里邊包含元素規(guī)范、布局、顏色等等。

我對畫原型圖對規(guī)范的要求是：盡量向著規(guī)范靠近。

原型圖不像UI圖，不用去到像素級別去摳。

因為畫原型我們需要考慮時間，考慮效率，我們需要將最大的精力去放到方案的產(chǎn)出，寫需求文檔上。

規(guī)范只是為了讓我們有個標(biāo)準(zhǔn)，如果你想畫的規(guī)范時，給你一個參考。

原型圖規(guī)范

1. 尺寸

對于手機(jī)端、PC端、平板、車機(jī)等不同的產(chǎn)品形態(tài)，最大的區(qū)別是尺寸。

在畫原型圖之前，我們要做的就是先把頁面原型尺寸給定下來。

可以參考的規(guī)范有：手機(jī)端首屏的尺寸設(shè)置為 375×667 px。

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

注：375 × 667 是首屏高度，也就是原型圖的最小高度，并不是原型的固定高度，當(dāng)內(nèi)容很多時，直接把高度拉長到合適的內(nèi)容即可。下邊提到的PC端尺寸也是這個道理。

狀態(tài)欄：375 × 20 px

導(dǎo)航欄：375 × 44 px

底部tab：375 × 49 px

這個規(guī)范的尺寸是使用的 iPhone8 的尺寸，產(chǎn)品經(jīng)理火的那幾年就是這個尺寸火，所以用這個尺寸的多。

你同樣的也可以使用其他常用的手機(jī)端尺寸，這沒有固定限制。

我比較建議用這個尺寸，因為很多Axure組件也都是按照這個尺寸去做的，適配的比較好。

對于PC端，尺寸可以按照 1440×900px。

雖然當(dāng)前使用最多的屏幕尺寸是1920×1080。

對于原型圖1440的寬度，如果是左邊是原型圖，右邊寫需求描述的話，在屏幕上可以正好展示出原型圖+需求描述，不用左右滑動去看。

對于平板，建議直接使用 768×1024 px。

2. 顏色

對于原型圖的顏色，我們可以分別來看：

1）有UI設(shè)計師參與的

我們可以考慮使用中性色，中性色是指不強(qiáng)烈的色彩，常見的就是黑白灰。

在選擇黑白灰時，我很推薦的是Axure色板中自帶的顏色，在畫原型時直接選取使用就行。

另外一些大廠規(guī)范中，都有自己的中性色定義，你也可以選擇使用。不過我不建議你花費(fèi)太多時間去處理顏色。

如下圖，左邊是用Axure中的黑白灰，右邊是使用的Arcodesign的中性色，在畫原型時，整體上影響并沒有那么大。

雖然右邊的更好點(diǎn)，如果你要用其它中性色，可以將顏色收藏進(jìn)Axure的色板中，方便下次使用。

2）沒有UI設(shè)計參與的

比如說后臺，可以添加一些顏色。

后臺一般都是內(nèi)部使用，對樣式?jīng)]有太高要求，也不會讓UI進(jìn)行設(shè)計；

因為后臺一般都是使用現(xiàn)成的UI組件進(jìn)行開發(fā)的，比如Antdesign、Element等；

具體什么顏色，可以用萬能的藍(lán)色作為主色調(diào)，使用其他顏色作為輔助即可。

對于語義色，來表達(dá)成功、警告、錯誤語義，可以選擇紅綠黃進(jìn)行使用即可。

3. 文字

對于文字，涉及到字體、字號、粗細(xì)、行間距等。

字體

可以使用 Arial，也就是Axure默認(rèn)的字體。

同樣的，也可以使用蘋方、微軟雅黑，這兩個字體則需要單獨(dú)安裝。

不過當(dāng)你通過Axure打包發(fā)布出去時，如果對方?jīng)]有安裝對應(yīng)的字體，將則不會展示為蘋方/微軟雅黑字體進(jìn)行展示。

對方查看的效果和你看的效果會不一樣，我正在找處理方案，目前還沒找到。

字號、字重

也就是字體大小、字體粗細(xì)，對于字體大小、粗細(xì)，還有顏色，影響的信息層級關(guān)系。

我們直接看規(guī)范：

一級標(biāo)題：20px、加粗，顏色#000000

主標(biāo)題：18px、選擇性加粗，顏色#000000

次標(biāo)題：16px、選擇性加粗，顏色#000000

小標(biāo)題：14px、選擇性加粗，顏色#000000

正文：14px、選擇性加粗，顏色#000000/#333333

輔助文字：14px/12px，不加粗，顏色#333333/#555555

次級文字：12px/10px，不加粗，顏色#555555/#7F7F7F

注：對于文字的大小，前提是在 375×667、1440×900 的頁面尺寸下的。如果你使用的尺寸過大，對應(yīng)的字號也需要加大。

這個規(guī)范不用記，可以用字號 14 作為標(biāo)準(zhǔn)，層級高的字號+2，加粗、顏色加重即可，層級低的字號就-2，不加粗，顏色淺一些。

行間距

在原型中不重要，Axure時會根據(jù)字體大小自動調(diào)整行間距，如果文字內(nèi)容過多時，可以手動進(jìn)行加大間距。

4. 圖標(biāo)

原型中如果是「圖標(biāo)+文字說明」一起出現(xiàn)，不用管圖標(biāo)，直接使用圓形或矩形代替即可。

占位符太丑，不建議用。

顏色不要使用太深的中性色。如下圖示例：

如果只有「圖標(biāo)」，可以選擇能表達(dá)具體含義的圖標(biāo)。

從iconfont、iconpark中搜索復(fù)制svg格式粘貼到Axure使用即可。

如下圖中的掃一掃、設(shè)置、播放圖標(biāo)。

如果你覺得使用圓形或矩形表達(dá)圖標(biāo)的意思不明顯，或者是不想找圖標(biāo)，就在加個「icon」文字，或者直接用寫文字。

如下圖的掃一掃、設(shè)置、播放，直接使用文字說明即可。

對于頭像、圖片等，都可以加個文字說明。

如果是沒有UI介入設(shè)計，當(dāng)需要確定圖標(biāo)時，則需要產(chǎn)品經(jīng)理確定，同樣的去iconfont、iconpark中找到圖標(biāo)，按前端要求提供過去即可。

5. 圖片

圖片在原型中不需要使用真實圖片，直接使用矩形代替即可。

Axure中自帶的圖片元件太丑了，不建議用。

可以再加上文字說明，來表達(dá)這是圖片，比如加個img，或者根據(jù)圖片特性，如封面、頭像，都是可以的。

原型中的圖片規(guī)范可以按照寬高比，比如 4:3，3:2，16:9，1:1。

當(dāng)然這個沒那么嚴(yán)格，如果你想規(guī)范些，可以這樣用。

6. 圓角

圓角在原型中不重要，如果你想使用圓角，可以按照2的倍數(shù)調(diào)整。

圓角在UI中的作用很大，而且規(guī)范還挺多，原型中就無所謂了。

7. 陰影

陰影不重要。如果想使用陰影，可以將陰影使用純黑色號000000，透明度30%，模糊5。

8. 對齊

對齊是版式設(shè)計的基本原則，使用工具進(jìn)行對齊即可。

具體采用「左對齊、右對齊、上對齊、底對齊、居中對齊」，你可以按照布局來，比如靠右的元件，使用右對齊。

9. 分布

分布是指將頁面內(nèi)容使用水平分布、垂直分布的方式進(jìn)行平均分布，來保證頁面元素之間的間距相同。

當(dāng)相同的元素多次出現(xiàn)時，我們可以使用分布快速調(diào)整，讓頁面更規(guī)范。

10. 間距

間距沒有那么重要，但是規(guī)范的原型一定要有會有間距。

間距分為上下左右間距，分為模塊與模塊間的間距，子模塊與子模塊的間距，元素與元素之間的間距。

對于整個移動端來說，可以使用 5 的倍數(shù)調(diào)整間距。

對于尺寸較大的PC端原型，可以按照 10 的倍數(shù)調(diào)整間距。

也可以直接將元件結(jié)合「對齊、分布」直接調(diào)整，不用關(guān)注具體間距。

根據(jù)我們之前提到的設(shè)計原則「親密性」，屬于同組的內(nèi)容間距小，不同組的內(nèi)容間距大。

11. 組件規(guī)范

組件是就是可以直接拿過來的元件組合。

對于每個組件都是通過基礎(chǔ)的形狀、文字、顏色、尺寸、間距等進(jìn)行組合形成的。

就是UI設(shè)計中的原子化設(shè)計。

當(dāng)完成基礎(chǔ)的形狀、文字、顏色、尺寸、間距等規(guī)范確定后，進(jìn)行基礎(chǔ)元素的組合即可得到規(guī)范的組件。

你可以基于上邊的規(guī)范去制定自己的產(chǎn)品組件庫，可以快速使用規(guī)范的組件。

12. 內(nèi)容的貼合性

在畫原型時，可以將原型中的內(nèi)容盡量填寫為真實內(nèi)容，使用極值狀態(tài)，將內(nèi)容最多、數(shù)據(jù)最多的情況畫出來。

總結(jié)

規(guī)范建立好是為了使用，我們了解清楚原型的規(guī)范后，可以在畫原型時往規(guī)范上靠，慢慢的養(yǎng)成好習(xí)慣。

一個規(guī)范好看的原型圖在求職面試、評審的時候，會是個加分項。

當(dāng)然，不要過度遵循規(guī)范，原型圖不是UI圖，重要的是使用原型將功能表達(dá)出來。

對于剛?cè)腴T的產(chǎn)品經(jīng)理來說，原型圖是日常的基本工作。