導語：一個高顏值的原型圖，能夠在一定程度上體現出你的專業(yè)度，起到錦上添花的作用。那么，要如何畫出高顏值的原型圖呢？本文作者對此作出了分析，一起來看一下吧。

最近有朋友要轉產品，自己在學習畫原型，怎么說呢，原型畫的確實差點意思。

雖說大多數內容臨摹出來了，但是還有很多可以優(yōu)化的地方，像對齊、顏色、間距就處理的不好。

那我們需不需要畫出好看的原型？

我認為有必要！

高顏值的原型圖在一定程度上會體現出你的專業(yè)度。

如果你在面試的作品集中畫出好看的原型，加分；

如果你是新入職一家公司畫出好看的原型，加分；

如果給老板、客戶展示好看的原型，加分；

但是呢，要話說在前：好看的原型圖僅是錦上添花。

原型是將需求轉化成頁面功能，最重要的能夠表達出功能邏輯，讓產品經理能夠快速傳達出自己的想法，讓團隊成員能夠認識產品需求內容。

而好看的原型是在此基礎上對原型頁面進行視覺處理，讓看原型的人能夠獲得更好的體驗，畢竟“顏值即正義”。

畫出好看的原型并不復雜，我們只需要掌握基本的UI設計原則，就能收獲好看的原型。

我找到我剛學習產品時畫的原型圖，并按照下文的規(guī)范進行了優(yōu)化，大家可看下對比效果：

我們接下來說說如何快速畫出好看的原型，內容較多，建議收藏，隨手幫忙點個贊~

01 原型圖要保證的原則

1. 層級關系

在原型中，我們要明顯區(qū)分出不同模塊、不同元素重要程度。這樣原型頁面才有節(jié)奏感。

當層級關系不突出，對比不明顯，會將所有的信息混雜在一起，顯得凌亂。

左側的原型層級關系太弱，沒有視覺重點，右側原型通過顏色、字體大小、使用分割線、調整間距大小等方法來達到層級劃分的效果。

總結來看就是：突出重要元素，弱化次要元素。

層級關系的劃分可以通過顏色、字號、字重、間距、分割線等方式。對應的層級關系可查看下圖：

根據內容重要程度不同，選擇不同的顏色、字號、字重、間距即可，這些內容我們下邊會詳細介紹。

2. 內容關聯(lián)性

對于內容關聯(lián)性，我分為2個，一個是元素的關聯(lián)性，一個是填充內容的關聯(lián)性。

1. 元素的關聯(lián)性：元素是指原型中的組件元素是指對界面元素內容進行分組，從視覺上將關聯(lián)內容合并在一組中，其最終目的也是為了劃分層級關系。
2. 填充內容的關聯(lián)性：比如將文案按照真實內容進行填充；這個并不是必須要做的，你也可以直接用文字直接說明內容是什么。

3. 設計一致性

一致性是指原型中的組件內容保持一致，如字體相同、間距一致、各類組件相同，彈窗按鈕位置相同等。

一致性讓原型界面非常規(guī)范，有了一致性，我們就可以直接復用各個組件，制定出組件庫，相同元素可直接復用，極大提高畫原型效率。

4. 不要過度

不要過度追求到像素級標準，不要過度添加裝飾性內容，不要過度追求動效。

首先對自己的設計要求嚴格是好事，但是我們需要明確得是原型的作用，它不是UI設計稿，它是你表達想法的可視化界面。

我不建議畫原型到像素級別，是指用字體10px還是11px，圓角用10px還是8px等等。幾個像素影響不到你的原型，摳像素是UI干的事，把摳像素的精力用在需求分析上會更有用。

另外不要過度追求裝飾性內容，一個矩形就能表達出的內容，不建議為了更好的效果而添加復雜的個性化設計，原因就是費事。

還有不要過度追求動效，添加太多的動效費時費力，投入產出低，比上邊提到的摳像素還要費事。

一定不要陷入動效的陷阱里，過度追求高大上的動效內容。原型使用基礎的頁面跳轉、隱藏/顯示、動態(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所有的機型中處于中間尺寸，向上向下都能很好的適配，所以就選擇了它。安卓也是按照這個尺寸進行設計。

另外按照這個尺寸設計，我們在預覽原型時，在屏幕上也能顯示出全部內容。

在文章中提到的字號、間距等大小，都是基于375×667（1倍圖）來制定的。

2）PC端：建議寬1440px，首屏高度900。

對于PC端的原型尺寸可按照寬1440px，首屏高900px進行設計即可，側邊導航欄建議200px，頂部導航欄建議60px。

3）平板：首屏768×1024px。

2. 顏色

原型盡量使用黑白灰。在Axure的顏色色板里的黑白灰完全可以滿足原型的使用，不建議自己單獨弄一套顏色規(guī)范。

我將我常用的黑白灰顏色提取出來后，我們看下：

顏色從左到右以及變淡，在頁面中表達的層級關系也依次降低。

在頁面中層級最高、重要程度最高的，使用最左側的純黑，次重要內容使用灰色，依次遞減。

顏色的選擇也受底色的影響，上邊的例子通過白色底進行設計的，對于其它底色，我們可以在調整，選擇不同顏色進行對比突出。

對于遮罩的顏色，我們可以選擇純黑，調整為50%透明度。

有些文章說不建議使用純黑，但是我認為純黑能更好的體現出層級關系，大家可以根據自己需要來調整。

具體使用什么顏色，我們不建議嚴格按照色號，只要能夠通過顏色區(qū)分出層級即可。

除了基本的黑白灰外，我認為原型中也是可以添加顏色的，像基本的語義色。

另外像按鈕、tab頁選中狀態(tài)、復選框、單選等組件的選中狀態(tài)，也是可以添加顏色的。

但是不要使用色調較高的顏色，而是采用色調適中，不刺眼的顏色。

如果你們公司有自己的品牌色，你可以找UI要下，使用到自己的原型中。

很多文章說，原型圖中不要添加顏色，會影響到UI設計，高級的UI設計師是不會被影響的。

3. 字體、字號、字重、行間距

原型中使用1種字體就夠了，你可以使用Axure默認的Arial字體。

如果你想更好看一點，推薦使用蘋方字體，然后將蘋方字體設置為默認字體。

如果你沒有安裝蘋方字體，文末有獲取方式，安裝好字體后，重啟Axure即可，然后將蘋方字體設置為默認字體。

Axure默認字體設置方式：項目-元件樣式管理-字體-選擇蘋方。

字號是指字體大小，常用大小為20px、18px、16px、14px、12px、10px。

字重是指字體重量，就是細體、中等還是加粗，經常用的是中等與加粗，細體沒用過。

不同字號、不同字重也是用來區(qū)分不同層級關系的。

我們需要把顏色+字號+字重組合，就能得到一套完整的文字層級關系。

我建議如下：

• 一級標題：20px、加粗，顏色#000000
• 主標題：18px、選擇性加粗，顏色#000000
• 次標題：16px、選擇性加粗，顏色#000000
• 小標題：14px、選擇性加粗，顏色#000000
• 正文：14px、選擇性加粗，顏色#000000/#333333
• 輔助文字：14px/12px，不加粗，顏色#333333/#555555
• 次級文字：12px/10px，不加粗，顏色#555555/#7F7F7F

示例如下：

不需要特意去記，在畫原型時，根據層級關系與實際效果再去調整。

行間距：在Axure9中使用不同字體、字號時，會自動調整行間距。我們可以直接按照Axure9自動的行間距大小即可。

如果你想更好看些，可以按照字號大小的1.5倍調整行間距，如正文14px字號對應行間距為21px。

當字體內容較多時，可適當調大行間距。

還有字間距，可以不用管，如果你想更好看，自己手動調整看效果即可。

3. 間距、對齊、分割、分布

一個好看的原型一定是要有間距、對齊的。

為了保證內容的可讀性，體現出留白，以及層級關系，我們在畫原型時一定要把間距和對齊同時考慮到。

1）安全間距

在畫原型前，我們先在原型兩側保留安全距離。可以選擇10px，或者20px。

移動端我一般選擇10px，可以通過拉出標尺線，或者放寬度為10px的熱區(qū)進行限制。

2）具體間距

不同模塊間的間距：推薦使用10px、20px，間距可按照10的倍數進行調整。

模塊內各種間距：我分為3個，分別是模塊內間距、子模塊間距、子模塊內元素間距。

對于模塊內的間距，建議只關注上下左右的間距。左右間距相同，上下間距相同。

移動端大小推薦10px/15px/20px，但是不需要特別標準，在滿足對齊后，間距能夠區(qū)分出每組關系即可。

PC端可選擇性放大到20px、40px。

子模塊間距：不建議摳像素，能分出層級即可。

可直接選中每個子模塊，然后水平分布/垂直分布讓保證間距相同，但需要保證間距能達到分組的效果。

如果你想摳像素，可按照5px的倍數調整。

子模塊內元素組件間距：不同元素間的間距我一般不關注，只要間距能達到分出層級的效果：相關元素靠近，不相關元素間距稍微大點。

你也可以按照5px的倍數進行調整，但是不建議這樣做，沒必要去摳像素。真要細摳的話，那你就不是畫原型了，你是在搞UI了。

在Axure9中我們可以設置【標尺·網格·輔助線】勾上顯示網格、元件對齊。

【元件對齊設置】中勾上元件對齊、邊緣對齊，垂直與水平設置為5像素。

這樣就可以顯示出間距大小，并能自動吸附對齊。

5. 對齊

對齊是一個原型中最基本的要求，就算你的字體、間距等都不規(guī)范，但是有了對齊，原型也會看起來好看很多。

對齊分為居左對齊、垂直居中對齊、居右對齊、頂部對齊、水平居中對齊、底部對齊。

在Axure中，可直接選中要對齊的組件，點擊頂部導航欄，即可自動對齊；對齊時以第一個選中的組件為標準進行對齊。

同時在Axure9的設置中，把網格對齊、輔助線、元件對齊都勾上，這樣就可以自動對齊。

有些對齊原則可以直接參考（以下內容引用Antdesign）：

1）表單類對齊

冒號對齊（右對齊）能讓內容鎖定在一定范圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。

2）文案類對齊

如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。

3）數字類對齊

為了快速對比數值大小，建議所有數值取相同有效位數，并且右對齊。

6. 分布

分布是指在垂直分布、水平分布，將組件內容按照相同間距排列。

當有相同內容≥3可考慮使用自動分布，比如多個icon排列時，可以直接使用水平分布。

使用自動分布時，建議不考慮的具體間距。

在實際畫原型時，經常會將對齊與分布一起使用。

7. 分割方式

使用分割的作用還是突出層級關系，將相同內容在視覺上分組。

分割的方法有留白分割、線性、色塊分割（也叫面性分割）。

• 留白分割：就是我們上邊提到的“間距”，相同組的內容減少間距，不同組的內容拉大間距。
• 分割線：使用水平線、或者垂直線進行分割，可用于模塊分割、子模塊分割。
• 色塊分割（面性分割）：可以理解為粗的分割線。?？捎糜诜指畈煌K。

在不同模塊間我們考慮采用色塊分割。這時需要考慮不同模塊分割大小的一致性。色塊間距可按照10的倍數進行設計進行設置。

色塊分割是指一種視覺效果，我們在畫原型時，并不是非要拖個矩形進行分割。

我們可以通過灰色底+白色底實現。通過顏色對比實現色塊分割的效果。

同一模塊內的子模塊可以考慮大間距留白，或者是分割線。使用優(yōu)先級是留白分割＞分割線。畢竟畫原型時少個元素，就少些工作量。

（有分割線，放大看）

分割線粗細為1px，顏色建議使用#F2F2F2。

另外分割線樣式通欄分割線、內嵌分割線、居中分割線。我們簡單介紹下，大家了解即可，具體使用哪個對原型影響不大。

• 通欄分割線：也叫全出血分割線，用于分隔完全獨立的模塊。
• 內嵌分割線：當在同一模塊內的有重復的子模塊內容，如圖文列表，或者是聯(lián)系人列表時，使用內嵌分割線，分割線從文字部分開始進行對齊。
• 居中分割線：分隔線在頁面內居中對齊。

8. 陰影

畫原型時，不建議添加陰影，太費勁。

如果你想好看，可以使用這個陰影：色號#000000，透明度20%，X：0 ，Y：1 模糊：4。

9. 圓角

在原型中，具體用圓角還是直角對原型的沖擊不大。

如果想效果更好，可以根據圓角和直角的特性來判斷：

• 圓角：柔和、友好、識別度高，設計感強，活潑調性
• 直角：正式、嚴肅、專業(yè)性強、沖突性強，冷系調性

推薦添加圓角，像Banner、按鈕、封面、圖片、頭像等都可以適當添加圓角。

具體圓角的大小，不需要特別嚴格，選擇元件后，通過拖動小三角標即可。

也可以按照半徑5px的倍數，根據元素面積越大，圓角半徑越大進行調整。

10. 圖標

對于icon的使用，我有以下建議：

• 剛開始畫原型時，先不使用icon，使用文字、占位符或者圓形代替，最終原型確定后再替換icon。
• icon要表意清晰明確，好理解。
• 使用多個icon時，盡量選擇風格一致的icon，如果使用線性圖標，就全部使用線性圖標。推薦使用iconfont網站、iconpark網站，iconpark可以調整icon的線段粗細、風格、顏色，但是圖標種類有限。iconfont更豐富，也支持按照不同風格篩選。
• 使用svg矢量圖，別讓icon失真。在iconfont或者iconpark中復制svg代碼，粘貼到Axure中，然后變換圖片為SVG形狀。這樣就可以修改icon顏色、調整大小也不會失真。
• 使用icon調整大小時同比例縮放擴大，別讓iocn變形。

11. 文案

文案在畫原型時就直接敲出來了，很多時候原型中的文案會使用到線上中，我們在畫原型時，可以直接敲出好點的文案。

具體建議如下：

• 填充的文案內容盡量貼合實際場景，并考慮使用實際內容填寫文案。對于日期時間、數字我們可以隨便敲出來，但是可別寫出“2月31日”、“17點知道77分88秒”。
• 提示文案要簡潔精煉，字數不宜太多。
• 語法使用動詞+名詞，如“添加用戶”“編輯信息”，且語序要保持一致，而不是“添加用戶”“信息編輯”。
• 數字使用阿拉伯數字，如“3天后開啟活動”。而不是“三天后開啟活動”。
• 別采用負面詞語，像“你沒資格參與活動”，改為“簽到完成后即可參與活動，立即簽到”。
• 文案內容傳達積極的暗示，如“剩余70%未學”修改為“已學完30%”。
• 當出現報錯提示時，要讓用戶知道為什么錯、如何解決。別彈出個“error ”。
• 使用專業(yè)名詞要確定名詞的準確性，另外也要考慮到名詞的大小寫規(guī)范，是iOS，而不是ios。
• 別有錯別字，如“登錄”，不是“登陸”；“請稍后重試”而不是“請稍侯重試”；“請稍侯，馬上回來”而不是“請稍后，馬上回來”。
• 提示內容句尾別加標點，“今日預約已滿，可預約明天”而不是“今日預約已滿，可預約明天?！?，但是可以加表達委婉的符號，比如“~”。
• 第二人稱可以使用“你”，而不是“您”。
• 文案語氣可以根據場景、人群、產品調性選擇不同的語氣，如果是年輕化的產品，可以使用活潑的語氣；如果你老年人產品，語氣就正式嚴肅。

12. 圖片

畫原型時，不需要添加具體圖片，使用占位符、或者矩形圖代替即可，如果覺得表達不清楚，可以添加文字補充。

在使用占位符/矩形代替圖片時，我們可以直接調整一個差不多的尺寸，如果想更好點，可以按照一定比例調整。

常見的比例有：

• 16:9，常使用于視頻封面、照片封面。
• 3:2或4:3，常用與圖片封面，圖文列表封面、banner等。畫原型時建議使用3:2，在相同寬度下，比4:3的高度更小，能留更多面積讓我們畫原型。
• 1:1，常用于用戶頭像、商品主圖等。

13. 動效

不過過度追求動效。關于使用動效我有以下小建議：

看原型的使用對象是誰，選擇性的添加動效。

可以添加簡單的效果，如鏈接跳轉，隱藏/顯示,切換動態(tài)面板、垂直滾動、水平滾動。

對于頁面切換，PC端產品建議將每個頁面單獨畫出，添加鏈接跳轉到新頁面，有利于寫一體化需求文檔。

App端頁面較少時，可直接平鋪在Axure畫布中，通過箭頭表達跳轉關系。

建議動態(tài)面板僅用于交互展示，不要在動態(tài)面板的頁面中添加需求文檔說明，沒人喜歡點擊你的原型去找你的需求。

當用動態(tài)面板時，建議先把動態(tài)面板的所有頁面都畫好，然后在放入動態(tài)面板內。

動態(tài)面板中盡量別在加動態(tài)面板，修改時每個人動態(tài)面板去找很費勁。

對于動態(tài)面板中的頁面進行切換時，可選擇性添加Axure自帶的切換動畫以及動效效果。效果建議選擇“緩進緩出”。

使用隱藏顯示時：最好選中：置于頂層，避免被遮擋?？蛇x擇性添加顯示與隱藏的動效，效果可選擇“逐漸”，時間選擇300ms

對于選擇日期、選擇日期等，如果沒有好的組件，可直接使用axure自帶的文本框，修改不同類型。

對于中繼器、函數這種高級交互，不建議在畫原型時使用。其它高級動效也不建議在畫原型中使用，當然你可以自己學著玩。

03 總結

再分享一張幾年前做的會員落地頁項目的原型圖與UI圖對比照。

（最左邊是我當時領導畫的，中間的是我改的，右邊的是UI設計稿）

其它的話，就是畫原型的首要前提是需求分析完整，功能架構劃分清晰，流程確定清晰。這些我們不在這說，之后在細聊。

另外不要糾結原型工具。

原型工具有很多：Axure，sketch，摹客，墨刀、xd，即時設計、碼前、MasterGo等。另外PPT、Excel也能畫。

你工作中使用的工具、工具的版本都不是你一個人能決定的，而是看公司要求，或者是其他同事使用的什么工具。

現在主流還是Axure，Axure的使用技巧你可以看我之前的文章：

另外一點，就是使用組件庫，頁面中的組件翻來覆去就那些，每次使用時直接拖拽組件庫即可，不用每次都畫。

我建議每個要畫原型的產品，都要有自己的組件庫。我也整理了Axure組件庫，文末提供了領取方式。

還有就是了解交互組件有哪些，以及交互設計原則。

題圖來自 Unsplash，基于 CC0 協(xié)議

原文鏈接： https://www.woshipm.com/rp/5440818.html