導語：一個高顏值的原型圖，能夠在一定程度上體現(xiàn)出你的專業(yè)度，起到錦上添花的作用。那么，要如何畫出高顏值的原型圖呢？本文作者對此作出了分析，一起來看一下吧。
最近有朋友要轉(zhuǎn)產(chǎn)品，自己在學習畫原型，怎么說呢，原型畫的確實差點意思。
雖說大多數(shù)內(nèi)容臨摹出來了，但是還有很多可以優(yōu)化的地方，像對齊、顏色、間距就處理的不好。
那我們需不需要畫出好看的原型？
我認為有必要！
高顏值的原型圖在一定程度上會體現(xiàn)出你的專業(yè)度。
如果你在面試的作品集中畫出好看的原型，加分；
如果你是新入職一家公司畫出好看的原型，加分；
如果給老板、客戶展示好看的原型，加分；
但是呢，要話說在前：好看的原型圖僅是錦上添花。
原型是將需求轉(zhuǎn)化成頁面功能，最重要的能夠表達出功能邏輯，讓產(chǎn)品經(jīng)理能夠快速傳達出自己的想法，讓團隊成員能夠認識產(chǎn)品需求內(nèi)容。
而好看的原型是在此基礎上對原型頁面進行視覺處理，讓看原型的人能夠獲得更好的體驗，畢竟“顏值即正義”。
畫出好看的原型并不復雜，我們只需要掌握基本的UI設計原則，就能收獲好看的原型。
我找到我剛學習產(chǎn)品時畫的原型圖，并按照下文的規(guī)范進行了優(yōu)化，大家可看下對比效果：
我們接下來說說如何快速畫出好看的原型，內(nèi)容較多，建議收藏，隨手幫忙點個贊~
01 原型圖要保證的原則
1. 層級關系
在原型中，我們要明顯區(qū)分出不同模塊、不同元素重要程度。這樣原型頁面才有節(jié)奏感。
當層級關系不突出，對比不明顯，會將所有的信息混雜在一起，顯得凌亂。
左側(cè)的原型層級關系太弱，沒有視覺重點，右側(cè)原型通過顏色、字體大小、使用分割線、調(diào)整間距大小等方法來達到層級劃分的效果。
總結(jié)來看就是：突出重要元素，弱化次要元素。
層級關系的劃分可以通過顏色、字號、字重、間距、分割線等方式。對應的層級關系可查看下圖：
根據(jù)內(nèi)容重要程度不同，選擇不同的顏色、字號、字重、間距即可，這些內(nèi)容我們下邊會詳細介紹。
2. 內(nèi)容關聯(lián)性
對于內(nèi)容關聯(lián)性，我分為2個，一個是元素的關聯(lián)性，一個是填充內(nèi)容的關聯(lián)性。
- 元素的關聯(lián)性：元素是指原型中的組件元素是指對界面元素內(nèi)容進行分組，從視覺上將關聯(lián)內(nèi)容合并在一組中，其最終目的也是為了劃分層級關系。
- 填充內(nèi)容的關聯(lián)性：比如將文案按照真實內(nèi)容進行填充；這個并不是必須要做的，你也可以直接用文字直接說明內(nèi)容是什么。
3. 設計一致性
一致性是指原型中的組件內(nèi)容保持一致，如字體相同、間距一致、各類組件相同，彈窗按鈕位置相同等。
一致性讓原型界面非常規(guī)范，有了一致性，我們就可以直接復用各個組件，制定出組件庫，相同元素可直接復用，極大提高畫原型效率。
4. 不要過度
不要過度追求到像素級標準，不要過度添加裝飾性內(nèi)容，不要過度追求動效。
首先對自己的設計要求嚴格是好事，但是我們需要明確得是原型的作用，它不是UI設計稿，它是你表達想法的可視化界面。
我不建議畫原型到像素級別，是指用字體10px還是11px，圓角用10px還是8px等等。幾個像素影響不到你的原型，摳像素是UI干的事，把摳像素的精力用在需求分析上會更有用。
另外不要過度追求裝飾性內(nèi)容，一個矩形就能表達出的內(nèi)容，不建議為了更好的效果而添加復雜的個性化設計，原因就是費事。
還有不要過度追求動效，添加太多的動效費時費力，投入產(chǎn)出低，比上邊提到的摳像素還要費事。
一定不要陷入動效的陷阱里，過度追求高大上的動效內(nèi)容。原型使用基礎的頁面跳轉(zhuǎn)、隱藏/顯示、動態(tài)面板就可以了。
02 掌握基本的設計規(guī)范
對于UI設計搞都有自己的設計規(guī)范，而對于原型設計，也是同樣的。
但是原型的設計規(guī)范不需要像UI設計稿那么嚴格。我們接著看看有哪些規(guī)范：
1. 尺寸
1）手機端：寬375px，首屏高667px或者812px。
推薦375×667，因為UI設計稿也按照這個尺寸進行設計的。
雖然375×812尺寸在iOS機型中占的比例較多，UI設計稿也按照這個尺寸進行設計，但是我不建議使用。
原因是在這個機型中，狀態(tài)欄變成了44px、底部又有安全區(qū)域，對我們原型設計沒有任何好處。倒不如接著使用375×667。
為啥就是375×667這個尺寸，我簡單說下，了解即可。
在開發(fā)時，使用的單位是pt，在屏幕上顯示時，使用的單位是px。
UI設計使用375×667pt進行設計，最終在導出一倍圖@1x、二倍圖@2x、三倍圖@3x的切圖，就是將pt單位×1、×2、×3得到px單位的圖片，提供給開發(fā)，用于適配不同機型。
375×667這個尺寸在iOS所有的機型中處于中間尺寸，向上向下都能很好的適配，所以就選擇了它。安卓也是按照這個尺寸進行設計。
另外按照這個尺寸設計，我們在預覽原型時，在屏幕上也能顯示出全部內(nèi)容。
在文章中提到的字號、間距等大小，都是基于375×667（1倍圖）來制定的。
2）PC端：建議寬1440px，首屏高度900。
對于PC端的原型尺寸可按照寬1440px，首屏高900px進行設計即可，側(cè)邊導航欄建議200px，頂部導航欄建議60px。
3）平板：首屏768×1024px。
2. 顏色
原型盡量使用黑白灰。在Axure的顏色色板里的黑白灰完全可以滿足原型的使用，不建議自己單獨弄一套顏色規(guī)范。
我將我常用的黑白灰顏色提取出來后，我們看下：
顏色從左到右以及變淡，在頁面中表達的層級關系也依次降低。
在頁面中層級最高、重要程度最高的，使用最左側(cè)的純黑，次重要內(nèi)容使用灰色，依次遞減。
顏色的選擇也受底色的影響，上邊的例子通過白色底進行設計的，對于其它底色，我們可以在調(diào)整，選擇不同顏色進行對比突出。
對于遮罩的顏色，我們可以選擇純黑，調(diào)整為50%透明度。
有些文章說不建議使用純黑，但是我認為純黑能更好的體現(xiàn)出層級關系，大家可以根據(jù)自己需要來調(diào)整。
具體使用什么顏色，我們不建議嚴格按照色號，只要能夠通過顏色區(qū)分出層級即可。
除了基本的黑白灰外，我認為原型中也是可以添加顏色的，像基本的語義色。
另外像按鈕、tab頁選中狀態(tài)、復選框、單選等組件的選中狀態(tài)，也是可以添加顏色的。
但是不要使用色調(diào)較高的顏色，而是采用色調(diào)適中，不刺眼的顏色。
如果你們公司有自己的品牌色，你可以找UI要下，使用到自己的原型中。
很多文章說，原型圖中不要添加顏色，會影響到UI設計，高級的UI設計師是不會被影響的。
3. 字體、字號、字重、行間距
原型中使用1種字體就夠了，你可以使用Axure默認的Arial字體。
如果你想更好看一點，推薦使用蘋方字體，然后將蘋方字體設置為默認字體。
如果你沒有安裝蘋方字體，文末有獲取方式，安裝好字體后，重啟Axure即可，然后將蘋方字體設置為默認字體。
Axure默認字體設置方式：項目-元件樣式管理-字體-選擇蘋方。
字號是指字體大小，常用大小為20px、18px、16px、14px、12px、10px。
字重是指字體重量，就是細體、中等還是加粗，經(jīng)常用的是中等與加粗，細體沒用過。
不同字號、不同字重也是用來區(qū)分不同層級關系的。
我們需要把顏色+字號+字重組合，就能得到一套完整的文字層級關系。
我建議如下：
- 一級標題：20px、加粗，顏色#000000
- 主標題：18px、選擇性加粗，顏色#000000
- 次標題：16px、選擇性加粗，顏色#000000
- 小標題：14px、選擇性加粗，顏色#000000
- 正文：14px、選擇性加粗，顏色#000000/#333333
- 輔助文字：14px/12px，不加粗，顏色#333333/#555555
- 次級文字：12px/10px，不加粗，顏色#555555/#7F7F7F
示例如下：
不需要特意去記，在畫原型時，根據(jù)層級關系與實際效果再去調(diào)整。
行間距：在Axure9中使用不同字體、字號時，會自動調(diào)整行間距。我們可以直接按照Axure9自動的行間距大小即可。
如果你想更好看些，可以按照字號大小的1.5倍調(diào)整行間距，如正文14px字號對應行間距為21px。
當字體內(nèi)容較多時，可適當調(diào)大行間距。
還有字間距，可以不用管，如果你想更好看，自己手動調(diào)整看效果即可。
3. 間距、對齊、分割、分布
一個好看的原型一定是要有間距、對齊的。
為了保證內(nèi)容的可讀性，體現(xiàn)出留白，以及層級關系，我們在畫原型時一定要把間距和對齊同時考慮到。
1）安全間距
在畫原型前，我們先在原型兩側(cè)保留安全距離。可以選擇10px，或者20px。
移動端我一般選擇10px，可以通過拉出標尺線，或者放寬度為10px的熱區(qū)進行限制。
2）具體間距
不同模塊間的間距：推薦使用10px、20px，間距可按照10的倍數(shù)進行調(diào)整。
模塊內(nèi)各種間距：我分為3個，分別是模塊內(nèi)間距、子模塊間距、子模塊內(nèi)元素間距。
對于模塊內(nèi)的間距，建議只關注上下左右的間距。左右間距相同，上下間距相同。
移動端大小推薦10px/15px/20px，但是不需要特別標準，在滿足對齊后，間距能夠區(qū)分出每組關系即可。
PC端可選擇性放大到20px、40px。
子模塊間距：不建議摳像素，能分出層級即可。
可直接選中每個子模塊，然后水平分布/垂直分布讓保證間距相同，但需要保證間距能達到分組的效果。
如果你想摳像素，可按照5px的倍數(shù)調(diào)整。
子模塊內(nèi)元素組件間距：不同元素間的間距我一般不關注，只要間距能達到分出層級的效果：相關元素靠近，不相關元素間距稍微大點。
你也可以按照5px的倍數(shù)進行調(diào)整，但是不建議這樣做，沒必要去摳像素。真要細摳的話，那你就不是畫原型了，你是在搞UI了。
在Axure9中我們可以設置【標尺·網(wǎng)格·輔助線】勾上顯示網(wǎng)格、元件對齊。
【元件對齊設置】中勾上元件對齊、邊緣對齊，垂直與水平設置為5像素。
這樣就可以顯示出間距大小，并能自動吸附對齊。
5. 對齊
對齊是一個原型中最基本的要求，就算你的字體、間距等都不規(guī)范，但是有了對齊，原型也會看起來好看很多。
對齊分為居左對齊、垂直居中對齊、居右對齊、頂部對齊、水平居中對齊、底部對齊。
在Axure中，可直接選中要對齊的組件，點擊頂部導航欄，即可自動對齊；對齊時以第一個選中的組件為標準進行對齊。
同時在Axure9的設置中，把網(wǎng)格對齊、輔助線、元件對齊都勾上，這樣就可以自動對齊。
有些對齊原則可以直接參考（以下內(nèi)容引用Antdesign）：
1）表單類對齊
冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。
2）文案類對齊
如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。
3）數(shù)字類對齊
為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。
6. 分布
分布是指在垂直分布、水平分布，將組件內(nèi)容按照相同間距排列。
當有相同內(nèi)容≥3可考慮使用自動分布，比如多個icon排列時，可以直接使用水平分布。
使用自動分布時，建議不考慮的具體間距。
在實際畫原型時，經(jīng)常會將對齊與分布一起使用。
7. 分割方式
使用分割的作用還是突出層級關系，將相同內(nèi)容在視覺上分組。
分割的方法有留白分割、線性、色塊分割（也叫面性分割）。
- 留白分割：就是我們上邊提到的“間距”，相同組的內(nèi)容減少間距，不同組的內(nèi)容拉大間距。
- 分割線：使用水平線、或者垂直線進行分割，可用于模塊分割、子模塊分割。
- 色塊分割（面性分割）：可以理解為粗的分割線。常可用于分割不同模塊。
在不同模塊間我們考慮采用色塊分割。這時需要考慮不同模塊分割大小的一致性。色塊間距可按照10的倍數(shù)進行設計進行設置。
色塊分割是指一種視覺效果，我們在畫原型時，并不是非要拖個矩形進行分割。
我們可以通過灰色底+白色底實現(xiàn)。通過顏色對比實現(xiàn)色塊分割的效果。
同一模塊內(nèi)的子模塊可以考慮大間距留白，或者是分割線。使用優(yōu)先級是留白分割＞分割線。畢竟畫原型時少個元素，就少些工作量。
（有分割線，放大看）
分割線粗細為1px，顏色建議使用#F2F2F2。
另外分割線樣式通欄分割線、內(nèi)嵌分割線、居中分割線。我們簡單介紹下，大家了解即可，具體使用哪個對原型影響不大。
- 通欄分割線：也叫全出血分割線，用于分隔完全獨立的模塊。
- 內(nèi)嵌分割線：當在同一模塊內(nèi)的有重復的子模塊內(nèi)容，如圖文列表，或者是聯(lián)系人列表時，使用內(nèi)嵌分割線，分割線從文字部分開始進行對齊。
- 居中分割線：分隔線在頁面內(nèi)居中對齊。
8. 陰影
畫原型時，不建議添加陰影，太費勁。
如果你想好看，可以使用這個陰影：色號#000000，透明度20%，X：0 ，Y：1 模糊：4。
9. 圓角
在原型中，具體用圓角還是直角對原型的沖擊不大。
如果想效果更好，可以根據(jù)圓角和直角的特性來判斷：
- 圓角：柔和、友好、識別度高，設計感強，活潑調(diào)性
- 直角：正式、嚴肅、專業(yè)性強、沖突性強，冷系調(diào)性
推薦添加圓角，像Banner、按鈕、封面、圖片、頭像等都可以適當添加圓角。
具體圓角的大小，不需要特別嚴格，選擇元件后，通過拖動小三角標即可。
也可以按照半徑5px的倍數(shù)，根據(jù)元素面積越大，圓角半徑越大進行調(diào)整。
10. 圖標
對于icon的使用，我有以下建議：
- 剛開始畫原型時，先不使用icon，使用文字、占位符或者圓形代替，最終原型確定后再替換icon。
- icon要表意清晰明確，好理解。
- 使用多個icon時，盡量選擇風格一致的icon，如果使用線性圖標，就全部使用線性圖標。推薦使用iconfont網(wǎng)站、iconpark網(wǎng)站，iconpark可以調(diào)整icon的線段粗細、風格、顏色，但是圖標種類有限。iconfont更豐富，也支持按照不同風格篩選。
- 使用svg矢量圖，別讓icon失真。在iconfont或者iconpark中復制svg代碼，粘貼到Axure中，然后變換圖片為SVG形狀。這樣就可以修改icon顏色、調(diào)整大小也不會失真。
- 使用icon調(diào)整大小時同比例縮放擴大，別讓iocn變形。
11. 文案
文案在畫原型時就直接敲出來了，很多時候原型中的文案會使用到線上中，我們在畫原型時，可以直接敲出好點的文案。
具體建議如下：
- 填充的文案內(nèi)容盡量貼合實際場景，并考慮使用實際內(nèi)容填寫文案。對于日期時間、數(shù)字我們可以隨便敲出來，但是可別寫出“2月31日”、“17點知道77分88秒”。
- 提示文案要簡潔精煉，字數(shù)不宜太多。
- 語法使用動詞+名詞，如“添加用戶”“編輯信息”，且語序要保持一致，而不是“添加用戶”“信息編輯”。
- 數(shù)字使用阿拉伯數(shù)字，如“3天后開啟活動”。而不是“三天后開啟活動”。
- 別采用負面詞語，像“你沒資格參與活動”，改為“簽到完成后即可參與活動，立即簽到”。
- 文案內(nèi)容傳達積極的暗示，如“剩余70%未學”修改為“已學完30%”。
- 當出現(xiàn)報錯提示時，要讓用戶知道為什么錯、如何解決。別彈出個“error ”。
- 使用專業(yè)名詞要確定名詞的準確性，另外也要考慮到名詞的大小寫規(guī)范，是iOS，而不是ios。
- 別有錯別字，如“登錄”，不是“登陸”；“請稍后重試”而不是“請稍侯重試”；“請稍侯，馬上回來”而不是“請稍后，馬上回來”。
- 提示內(nèi)容句尾別加標點，“今日預約已滿，可預約明天”而不是“今日預約已滿，可預約明天。”，但是可以加表達委婉的符號，比如“~”。
- 第二人稱可以使用“你”，而不是“您”。
- 文案語氣可以根據(jù)場景、人群、產(chǎn)品調(diào)性選擇不同的語氣，如果是年輕化的產(chǎn)品，可以使用活潑的語氣；如果你老年人產(chǎn)品，語氣就正式嚴肅。
12. 圖片
畫原型時，不需要添加具體圖片，使用占位符、或者矩形圖代替即可，如果覺得表達不清楚，可以添加文字補充。
在使用占位符/矩形代替圖片時，我們可以直接調(diào)整一個差不多的尺寸，如果想更好點，可以按照一定比例調(diào)整。
常見的比例有：
- 16:9，常使用于視頻封面、照片封面。
- 3:2或4:3，常用與圖片封面，圖文列表封面、banner等。畫原型時建議使用3:2，在相同寬度下，比4:3的高度更小，能留更多面積讓我們畫原型。
- 1:1，常用于用戶頭像、商品主圖等。
13. 動效
不過過度追求動效。關于使用動效我有以下小建議：
看原型的使用對象是誰，選擇性的添加動效。
可以添加簡單的效果，如鏈接跳轉(zhuǎn)，隱藏/顯示,切換動態(tài)面板、垂直滾動、水平滾動。
對于頁面切換，PC端產(chǎn)品建議將每個頁面單獨畫出，添加鏈接跳轉(zhuǎn)到新頁面，有利于寫一體化需求文檔。
App端頁面較少時，可直接平鋪在Axure畫布中，通過箭頭表達跳轉(zhuǎn)關系。
建議動態(tài)面板僅用于交互展示，不要在動態(tài)面板的頁面中添加需求文檔說明，沒人喜歡點擊你的原型去找你的需求。
當用動態(tài)面板時，建議先把動態(tài)面板的所有頁面都畫好，然后在放入動態(tài)面板內(nèi)。
動態(tài)面板中盡量別在加動態(tài)面板，修改時每個人動態(tài)面板去找很費勁。
對于動態(tài)面板中的頁面進行切換時，可選擇性添加Axure自帶的切換動畫以及動效效果。效果建議選擇“緩進緩出”。
使用隱藏顯示時：最好選中：置于頂層，避免被遮擋。可選擇性添加顯示與隱藏的動效，效果可選擇“逐漸”，時間選擇300ms
對于選擇日期、選擇日期等，如果沒有好的組件，可直接使用axure自帶的文本框，修改不同類型。
對于中繼器、函數(shù)這種高級交互，不建議在畫原型時使用。其它高級動效也不建議在畫原型中使用，當然你可以自己學著玩。
03 總結(jié)
再分享一張幾年前做的會員落地頁項目的原型圖與UI圖對比照。
（最左邊是我當時領導畫的，中間的是我改的，右邊的是UI設計稿）
其它的話，就是畫原型的首要前提是需求分析完整，功能架構劃分清晰，流程確定清晰。這些我們不在這說，之后在細聊。
另外不要糾結(jié)原型工具。
原型工具有很多：Axure，sketch，摹客，墨刀、xd，即時設計、碼前、MasterGo等。另外PPT、Excel也能畫。
你工作中使用的工具、工具的版本都不是你一個人能決定的，而是看公司要求，或者是其他同事使用的什么工具。
現(xiàn)在主流還是Axure，Axure的使用技巧你可以看我之前的文章：
另外一點，就是使用組件庫，頁面中的組件翻來覆去就那些，每次使用時直接拖拽組件庫即可，不用每次都畫。
我建議每個要畫原型的產(chǎn)品，都要有自己的組件庫。我也整理了Axure組件庫，文末提供了領取方式。
還有就是了解交互組件有哪些，以及交互設計原則。
題圖來自 Unsplash，基于 CC0 協(xié)議
原文鏈接： https://www.woshipm.com/rp/5440818.html
