12個規范原型的方法,好看的原型就是有用
本文為產品經理和設計師提供了一份詳盡的原型設計規范指南。作者強調了規范在原型設計中的重要性,指出它能夠提升信息傳達效率并增強視覺吸引力。文章詳細介紹了尺寸、顏色、文字、圖標、圖片、圓角、陰影、對齊、分布、間距和組件等關鍵要素的規范方法,旨在幫助讀者創建既美觀又實用的原型圖。無論是求職面試還是項目評審,一個規范且吸引人的原型圖都將是一個顯著的加分項。
UI設計有設計規范要遵循,同樣的原型圖也有自己的規范。
任何通過圖形示意的東西一樣,規范帶來的最大的好處是提高信息傳達效率。
人是視覺動物,好看的東西總喜歡多看兩眼,混亂的東西給人最直白的感受就是邏輯混亂。
這就是「卷面分」。
這篇文章我們說下原型圖的規范。
所謂的規范就是定規則,按照這一套規則作為標準進行執行,這里邊包含元素規范、布局、顏色等等。
我對畫原型圖對規范的要求是:盡量向著規范靠近。
原型圖不像UI圖,不用去到像素級別去摳。
因為畫原型我們需要考慮時間,考慮效率,我們需要將最大的精力去放到方案的產出,寫需求文檔上。
規范只是為了讓我們有個標準,如果你想畫的規范時,給你一個參考。
原型圖規范
1. 尺寸
對于手機端、PC端、平板、車機等不同的產品形態,最大的區別是尺寸。
在畫原型圖之前,我們要做的就是先把頁面原型尺寸給定下來。
可以參考的規范有:手機端首屏的尺寸設置為 375×667 px。
注:375 × 667 是首屏高度,也就是原型圖的最小高度,并不是原型的固定高度,當內容很多時,直接把高度拉長到合適的內容即可。下邊提到的PC端尺寸也是這個道理。
狀態欄:375 × 20 px
導航欄:375 × 44 px
底部tab:375 × 49 px
這個規范的尺寸是使用的 iPhone8 的尺寸,產品經理火的那幾年就是這個尺寸火,所以用這個尺寸的多。
你同樣的也可以使用其他常用的手機端尺寸,這沒有固定限制。
我比較建議用這個尺寸,因為很多Axure組件也都是按照這個尺寸去做的,適配的比較好。
對于PC端,尺寸可以按照 1440×900px。
雖然當前使用最多的屏幕尺寸是1920×1080。
對于原型圖1440的寬度,如果是左邊是原型圖,右邊寫需求描述的話,在屏幕上可以正好展示出原型圖+需求描述,不用左右滑動去看。
對于平板,建議直接使用 768×1024 px。
2. 顏色
對于原型圖的顏色,我們可以分別來看:
1)有UI設計師參與的
我們可以考慮使用中性色,中性色是指不強烈的色彩,常見的就是黑白灰。
在選擇黑白灰時,我很推薦的是Axure色板中自帶的顏色,在畫原型時直接選取使用就行。
另外一些大廠規范中,都有自己的中性色定義,你也可以選擇使用。不過我不建議你花費太多時間去處理顏色。
如下圖,左邊是用Axure中的黑白灰,右邊是使用的Arcodesign的中性色,在畫原型時,整體上影響并沒有那么大。
雖然右邊的更好點,如果你要用其它中性色,可以將顏色收藏進Axure的色板中,方便下次使用。
2)沒有UI設計參與的
比如說后臺,可以添加一些顏色。
后臺一般都是內部使用,對樣式沒有太高要求,也不會讓UI進行設計;
因為后臺一般都是使用現成的UI組件進行開發的,比如Antdesign、Element等;
具體什么顏色,可以用萬能的藍色作為主色調,使用其他顏色作為輔助即可。
對于語義色,來表達成功、警告、錯誤語義,可以選擇紅綠黃進行使用即可。
3. 文字
對于文字,涉及到字體、字號、粗細、行間距等。
字體
可以使用 Arial,也就是Axure默認的字體。
同樣的,也可以使用蘋方、微軟雅黑,這兩個字體則需要單獨安裝。
不過當你通過Axure打包發布出去時,如果對方沒有安裝對應的字體,將則不會展示為蘋方/微軟雅黑字體進行展示。
對方查看的效果和你看的效果會不一樣,我正在找處理方案,目前還沒找到。
字號、字重
也就是字體大小、字體粗細,對于字體大小、粗細,還有顏色,影響的信息層級關系。
我們直接看規范:
一級標題:20px、加粗,顏色#000000
主標題:18px、選擇性加粗,顏色#000000
次標題:16px、選擇性加粗,顏色#000000
小標題:14px、選擇性加粗,顏色#000000
正文:14px、選擇性加粗,顏色#000000/#333333
輔助文字:14px/12px,不加粗,顏色#333333/#555555
次級文字:12px/10px,不加粗,顏色#555555/#7F7F7F
注:對于文字的大小,前提是在 375×667、1440×900 的頁面尺寸下的。如果你使用的尺寸過大,對應的字號也需要加大。
這個規范不用記,可以用字號 14 作為標準,層級高的字號+2,加粗、顏色加重即可,層級低的字號就-2,不加粗,顏色淺一些。
行間距
在原型中不重要,Axure時會根據字體大小自動調整行間距,如果文字內容過多時,可以手動進行加大間距。
4. 圖標
原型中如果是「圖標+文字說明」一起出現,不用管圖標,直接使用圓形或矩形代替即可。
占位符太丑,不建議用。
顏色不要使用太深的中性色。如下圖示例:
如果只有「圖標」,可以選擇能表達具體含義的圖標。
從iconfont、iconpark中搜索復制svg格式粘貼到Axure使用即可。
如下圖中的掃一掃、設置、播放圖標。
如果你覺得使用圓形或矩形表達圖標的意思不明顯,或者是不想找圖標,就在加個「icon」文字,或者直接用寫文字。
如下圖的掃一掃、設置、播放,直接使用文字說明即可。
對于頭像、圖片等,都可以加個文字說明。
如果是沒有UI介入設計,當需要確定圖標時,則需要產品經理確定,同樣的去iconfont、iconpark中找到圖標,按前端要求提供過去即可。
5. 圖片
圖片在原型中不需要使用真實圖片,直接使用矩形代替即可。
Axure中自帶的圖片元件太丑了,不建議用。
可以再加上文字說明,來表達這是圖片,比如加個img,或者根據圖片特性,如封面、頭像,都是可以的。
原型中的圖片規范可以按照寬高比,比如 4:3,3:2,16:9,1:1。
當然這個沒那么嚴格,如果你想規范些,可以這樣用。
6. 圓角
圓角在原型中不重要,如果你想使用圓角,可以按照2的倍數調整。
圓角在UI中的作用很大,而且規范還挺多,原型中就無所謂了。
7. 陰影
陰影不重要。如果想使用陰影,可以將陰影使用純黑色號000000,透明度30%,模糊5。
8. 對齊
對齊是版式設計的基本原則,使用工具進行對齊即可。
具體采用「左對齊、右對齊、上對齊、底對齊、居中對齊」,你可以按照布局來,比如靠右的元件,使用右對齊。
9. 分布
分布是指將頁面內容使用水平分布、垂直分布的方式進行平均分布,來保證頁面元素之間的間距相同。
當相同的元素多次出現時,我們可以使用分布快速調整,讓頁面更規范。
10. 間距
間距沒有那么重要,但是規范的原型一定要有會有間距。
間距分為上下左右間距,分為模塊與模塊間的間距,子模塊與子模塊的間距,元素與元素之間的間距。
對于整個移動端來說,可以使用 5 的倍數調整間距。
對于尺寸較大的PC端原型,可以按照 10 的倍數調整間距。
也可以直接將元件結合「對齊、分布」直接調整,不用關注具體間距。
根據我們之前提到的設計原則「親密性」,屬于同組的內容間距小,不同組的內容間距大。
11. 組件規范
組件是就是可以直接拿過來的元件組合。
對于每個組件都是通過基礎的形狀、文字、顏色、尺寸、間距等進行組合形成的。
就是UI設計中的原子化設計。
當完成基礎的形狀、文字、顏色、尺寸、間距等規范確定后,進行基礎元素的組合即可得到規范的組件。
你可以基于上邊的規范去制定自己的產品組件庫,可以快速使用規范的組件。
12. 內容的貼合性
在畫原型時,可以將原型中的內容盡量填寫為真實內容,使用極值狀態,將內容最多、數據最多的情況畫出來。
總結
規范建立好是為了使用,我們了解清楚原型的規范后,可以在畫原型時往規范上靠,慢慢的養成好習慣。
一個規范好看的原型圖在求職面試、評審的時候,會是個加分項。
當然,不要過度遵循規范,原型圖不是UI圖,重要的是使用原型將功能表達出來。
對于剛入門的產品經理來說,原型圖是日常的基本工作。
本文由人人都是產品經理作者【王大鹿】,微信公眾號:【產品大鹿】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
剛入門沒看見這個,不過目前基本都是這么設計的
我好像一直都是這么操作的 ,干了四五年活,崗位一直是產品兼UI,連個能商量的人都沒
工資多少?
回小縣城了,一個小公司,兩個產品,一個四千五,一個五千,前端五千,后端六千,快離職了我才知道,人麻了,前端那個小姑娘氣不過找老板吵了一架,一下離職了四個,我也走了,
感謝分享!請問博主有沒有小白交流群可以拉我一下呀
這規范…不看時間我還以為iPhone 4剛剛發布呢
新來,現在的規范跟文章里面那些規范有哪些區別呢
感謝分享
感謝分享
寫的很好啊,不熟悉產品規范的同學可以收藏