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