2026-3-9 清陽 設(shè)計(jì)資源
UI設(shè)計(jì)有設(shè)計(jì)規(guī)范要遵循，同樣的原型圖也有自己的規(guī)范。
任何通過圖形示意的東西一樣，規(guī)范帶來的最大的好處是提高信息傳達(dá)效率。
人是視覺動物，好看的東西總喜歡多看兩眼，混亂的東西給人最直白的感受就是邏輯混亂。
這就是「卷面分」。
這篇文章我們說下原型圖的規(guī)范。
所謂的規(guī)范就是定規(guī)則，按照這一套規(guī)則作為標(biāo)準(zhǔn)進(jìn)行執(zhí)行，這里邊包含元素規(guī)范、布局、顏色等等。
我對畫原型圖對規(guī)范的要求是：盡量向著規(guī)范靠近。
原型圖不像UI圖，不用去到像素級別去摳。
因?yàn)楫嬙臀覀冃枰紤]時(shí)間，考慮效率，我們需要將最大的精力去放到方案的產(chǎn)出，寫需求文檔上。
規(guī)范只是為了讓我們有個(gè)標(biāo)準(zhǔn)，如果你想畫的規(guī)范時(shí)，給你一個(gè)參考。
對于手機(jī)端、PC端、平板、車機(jī)等不同的產(chǎn)品形態(tài)，最大的區(qū)別是尺寸。
在畫原型圖之前，我們要做的就是先把頁面原型尺寸給定下來。
可以參考的規(guī)范有：手機(jī)端首屏的尺寸設(shè)置為 375×667 px。
注：375 × 667 是首屏高度，也就是原型圖的最小高度，并不是原型的固定高度，當(dāng)內(nèi)容很多時(shí)，直接把高度拉長到合適的內(nèi)容即可。下邊提到的PC端尺寸也是這個(gè)道理。
狀態(tài)欄：375 × 20 px
導(dǎo)航欄：375 × 44 px
底部tab：375 × 49 px
這個(gè)規(guī)范的尺寸是使用的 iPhone8 的尺寸，產(chǎn)品經(jīng)理火的那幾年就是這個(gè)尺寸火，所以用這個(gè)尺寸的多。
你同樣的也可以使用其他常用的手機(jī)端尺寸，這沒有固定限制。
我比較建議用這個(gè)尺寸，因?yàn)楹芏郃xure組件也都是按照這個(gè)尺寸去做的，適配的比較好。
對于PC端，尺寸可以按照 1440×900px。
雖然當(dāng)前使用最多的屏幕尺寸是1920×1080。
對于原型圖1440的寬度，如果是左邊是原型圖，右邊寫需求描述的話，在屏幕上可以正好展示出原型圖+需求描述，不用左右滑動去看。
對于平板，建議直接使用 768×1024 px。
對于原型圖的顏色，我們可以分別來看：
1）有UI設(shè)計(jì)師參與的
我們可以考慮使用中性色，中性色是指不強(qiáng)烈的色彩，常見的就是黑白灰。
在選擇黑白灰時(shí)，我很推薦的是Axure色板中自帶的顏色，在畫原型時(shí)直接選取使用就行。
另外一些大廠規(guī)范中，都有自己的中性色定義，你也可以選擇使用。不過我不建議你花費(fèi)太多時(shí)間去處理顏色。
如下圖，左邊是用Axure中的黑白灰，右邊是使用的Arcodesign的中性色，在畫原型時(shí)，整體上影響并沒有那么大。
雖然右邊的更好點(diǎn)，如果你要用其它中性色，可以將顏色收藏進(jìn)Axure的色板中，方便下次使用。
2）沒有UI設(shè)計(jì)參與的
比如說后臺，可以添加一些顏色。
后臺一般都是內(nèi)部使用，對樣式?jīng)]有太高要求，也不會讓UI進(jìn)行設(shè)計(jì)；
因?yàn)楹笈_一般都是使用現(xiàn)成的UI組件進(jìn)行開發(fā)的，比如Antdesign、Element等；
具體什么顏色，可以用萬能的藍(lán)色作為主色調(diào)，使用其他顏色作為輔助即可。
對于語義色，來表達(dá)成功、警告、錯(cuò)誤語義，可以選擇紅綠黃進(jìn)行使用即可。
對于文字，涉及到字體、字號、粗細(xì)、行間距等。
字體
可以使用 Arial，也就是Axure默認(rèn)的字體。
同樣的，也可以使用蘋方、微軟雅黑，這兩個(gè)字體則需要單獨(dú)安裝。
不過當(dāng)你通過Axure打包發(fā)布出去時(shí)，如果對方?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)的字號也需要加大。
這個(gè)規(guī)范不用記，可以用字號 14 作為標(biāo)準(zhǔn)，層級高的字號+2，加粗、顏色加重即可，層級低的字號就-2，不加粗，顏色淺一些。
行間距
在原型中不重要，Axure時(shí)會根據(jù)字體大小自動調(diào)整行間距，如果文字內(nèi)容過多時(shí)，可以手動進(jìn)行加大間距。
原型中如果是「圖標(biāo)+文字說明」一起出現(xiàn)，不用管圖標(biāo)，直接使用圓形或矩形代替即可。
占位符太丑，不建議用。
顏色不要使用太深的中性色。如下圖示例：
如果只有「圖標(biāo)」，可以選擇能表達(dá)具體含義的圖標(biāo)。
從iconfont、iconpark中搜索復(fù)制svg格式粘貼到Axure使用即可。
如下圖中的掃一掃、設(shè)置、播放圖標(biāo)。
如果你覺得使用圓形或矩形表達(dá)圖標(biāo)的意思不明顯，或者是不想找圖標(biāo)，就在加個(gè)「icon」文字，或者直接用寫文字。
如下圖的掃一掃、設(shè)置、播放，直接使用文字說明即可。
對于頭像、圖片等，都可以加個(gè)文字說明。
如果是沒有UI介入設(shè)計(jì)，當(dāng)需要確定圖標(biāo)時(shí)，則需要產(chǎn)品經(jīng)理確定，同樣的去iconfont、iconpark中找到圖標(biāo)，按前端要求提供過去即可。
圖片在原型中不需要使用真實(shí)圖片，直接使用矩形代替即可。
Axure中自帶的圖片元件太丑了，不建議用。
可以再加上文字說明，來表達(dá)這是圖片，比如加個(gè)img，或者根據(jù)圖片特性，如封面、頭像，都是可以的。
原型中的圖片規(guī)范可以按照寬高比，比如 4:3，3:2，16:9，1:1。
當(dāng)然這個(gè)沒那么嚴(yán)格，如果你想規(guī)范些，可以這樣用。
圓角在原型中不重要，如果你想使用圓角，可以按照2的倍數(shù)調(diào)整。
圓角在UI中的作用很大，而且規(guī)范還挺多，原型中就無所謂了。
陰影不重要。如果想使用陰影，可以將陰影使用純黑色號000000，透明度30%，模糊5。
對齊是版式設(shè)計(jì)的基本原則，使用工具進(jìn)行對齊即可。
具體采用「左對齊、右對齊、上對齊、底對齊、居中對齊」，你可以按照布局來，比如靠右的元件，使用右對齊。
分布是指將頁面內(nèi)容使用水平分布、垂直分布的方式進(jìn)行平均分布，來保證頁面元素之間的間距相同。
當(dāng)相同的元素多次出現(xiàn)時(shí)，我們可以使用分布快速調(diào)整，讓頁面更規(guī)范。
間距沒有那么重要，但是規(guī)范的原型一定要有會有間距。
間距分為上下左右間距，分為模塊與模塊間的間距，子模塊與子模塊的間距，元素與元素之間的間距。
對于整個(gè)移動端來說，可以使用 5 的倍數(shù)調(diào)整間距。
對于尺寸較大的PC端原型，可以按照 10 的倍數(shù)調(diào)整間距。
也可以直接將元件結(jié)合「對齊、分布」直接調(diào)整，不用關(guān)注具體間距。
根據(jù)我們之前提到的設(shè)計(jì)原則「親密性」，屬于同組的內(nèi)容間距小，不同組的內(nèi)容間距大。
組件是就是可以直接拿過來的元件組合。
對于每個(gè)組件都是通過基礎(chǔ)的形狀、文字、顏色、尺寸、間距等進(jìn)行組合形成的。
就是UI設(shè)計(jì)中的原子化設(shè)計(jì)。
當(dāng)完成基礎(chǔ)的形狀、文字、顏色、尺寸、間距等規(guī)范確定后，進(jìn)行基礎(chǔ)元素的組合即可得到規(guī)范的組件。
你可以基于上邊的規(guī)范去制定自己的產(chǎn)品組件庫，可以快速使用規(guī)范的組件。
在畫原型時(shí)，可以將原型中的內(nèi)容盡量填寫為真實(shí)內(nèi)容，使用極值狀態(tài)，將內(nèi)容最多、數(shù)據(jù)最多的情況畫出來。
規(guī)范建立好是為了使用，我們了解清楚原型的規(guī)范后，可以在畫原型時(shí)往規(guī)范上靠，慢慢的養(yǎng)成好習(xí)慣。
一個(gè)規(guī)范好看的原型圖在求職面試、評審的時(shí)候，會是個(gè)加分項(xiàng)。
當(dāng)然，不要過度遵循規(guī)范，原型圖不是UI圖，重要的是使用原型將功能表達(dá)出來。
對于剛?cè)腴T的產(chǎn)品經(jīng)理來說，原型圖是日常的基本工作。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.dzxscac.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.dzxscac.cn