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