編輯導(dǎo)語(yǔ)：一個(gè)高顏值的原型圖，能夠在一定程度上體現(xiàn)出你的專(zhuān)業(yè)度，起到錦上添花的作用。那么，要如何畫(huà)出高顏值的原型圖呢？本文作者對(duì)此作出了分析，一起來(lái)看一下吧。

最近有朋友要轉(zhuǎn)產(chǎn)品，自己在學(xué)習(xí)畫(huà)原型，怎么說(shuō)呢，原型畫(huà)的確實(shí)差點(diǎn)意思。

雖說(shuō)大多數(shù)內(nèi)容臨摹出來(lái)了，但是還有很多可以?xún)?yōu)化的地方，像對(duì)齊、顏色、間距就處理的不好。

那我們需不需要畫(huà)出好看的原型？

我認(rèn)為有必要！

高顏值的原型圖在一定程度上會(huì)體現(xiàn)出你的專(zhuān)業(yè)度。

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

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

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

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

原型是將需求轉(zhuǎn)化成頁(yè)面功能，最重要的能夠表達(dá)出功能邏輯，讓產(chǎn)品經(jīng)理能夠快速傳達(dá)出自己的想法，讓團(tuán)隊(duì)成員能夠認(rèn)識(shí)產(chǎn)品需求內(nèi)容。

而好看的原型是在此基礎(chǔ)上對(duì)原型頁(yè)面進(jìn)行視覺(jué)處理，讓看原型的人能夠獲得更好的體驗(yàn)，畢竟“顏值即正義”。

畫(huà)出好看的原型并不復(fù)雜，我們只需要掌握基本的UI設(shè)計(jì)原則，就能收獲好看的原型。

我找到我剛學(xué)習(xí)產(chǎn)品時(shí)畫(huà)的原型圖，并按照下文的規(guī)范進(jìn)行了優(yōu)化，大家可看下對(duì)比效果：

我們接下來(lái)說(shuō)說(shuō)如何快速畫(huà)出好看的原型，內(nèi)容較多，建議收藏，隨手幫忙點(diǎn)個(gè)贊~

01 原型圖要保證的原則

1. 層級(jí)關(guān)系

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

當(dāng)層級(jí)關(guān)系不突出，對(duì)比不明顯，會(huì)將所有的信息混雜在一起，顯得凌亂。

左側(cè)的原型層級(jí)關(guān)系太弱，沒(méi)有視覺(jué)重點(diǎn)，右側(cè)原型通過(guò)顏色、字體大小、使用分割線、調(diào)整間距大小等方法來(lái)達(dá)到層級(jí)劃分的效果。

總結(jié)來(lái)看就是：突出重要元素，弱化次要元素。

層級(jí)關(guān)系的劃分可以通過(guò)顏色、字號(hào)、字重、間距、分割線等方式。對(duì)應(yīng)的層級(jí)關(guān)系可查看下圖：

根據(jù)內(nèi)容重要程度不同，選擇不同的顏色、字號(hào)、字重、間距即可，這些內(nèi)容我們下邊會(huì)詳細(xì)介紹。

2. 內(nèi)容關(guān)聯(lián)性

對(duì)于內(nèi)容關(guān)聯(lián)性，我分為2個(gè)，一個(gè)是元素的關(guān)聯(lián)性，一個(gè)是填充內(nèi)容的關(guān)聯(lián)性。

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

3. 設(shè)計(jì)一致性

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

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

4. 不要過(guò)度

不要過(guò)度追求到像素級(jí)標(biāo)準(zhǔn)，不要過(guò)度添加裝飾性?xún)?nèi)容，不要過(guò)度追求動(dòng)效。

首先對(duì)自己的設(shè)計(jì)要求嚴(yán)格是好事，但是我們需要明確得是原型的作用，它不是UI設(shè)計(jì)稿，它是你表達(dá)想法的可視化界面。

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

另外不要過(guò)度追求裝飾性?xún)?nèi)容，一個(gè)矩形就能表達(dá)出的內(nèi)容，不建議為了更好的效果而添加復(fù)雜的個(gè)性化設(shè)計(jì)，原因就是費(fèi)事。

還有不要過(guò)度追求動(dòng)效，添加太多的動(dòng)效費(fèi)時(shí)費(fèi)力，投入產(chǎn)出低，比上邊提到的摳像素還要費(fèi)事。

一定不要陷入動(dòng)效的陷阱里，過(guò)度追求高大上的動(dòng)效內(nèi)容。原型使用基礎(chǔ)的頁(yè)面跳轉(zhuǎn)、隱藏/顯示、動(dòng)態(tài)面板就可以了。

02 掌握基本的設(shè)計(jì)規(guī)范

對(duì)于UI設(shè)計(jì)搞都有自己的設(shè)計(jì)規(guī)范，而對(duì)于原型設(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ū)域，對(duì)我們?cè)驮O(shè)計(jì)沒(méi)有任何好處。倒不如接著使用375×667。

為啥就是375×667這個(gè)尺寸，我簡(jiǎn)單說(shuō)下，了解即可。

在開(kāi)發(fā)時(shí)，使用的單位是pt，在屏幕上顯示時(shí)，使用的單位是px。

UI設(shè)計(jì)使用375×667pt進(jìn)行設(shè)計(jì)，最終在導(dǎo)出一倍圖@1x、二倍圖@2x、三倍圖@3x的切圖，就是將pt單位×1、×2、×3得到px單位的圖片，提供給開(kāi)發(fā)，用于適配不同機(jī)型。

375×667這個(gè)尺寸在iOS所有的機(jī)型中處于中間尺寸，向上向下都能很好的適配，所以就選擇了它。安卓也是按照這個(gè)尺寸進(jìn)行設(shè)計(jì)。

另外按照這個(gè)尺寸設(shè)計(jì)，我們?cè)陬A(yù)覽原型時(shí)，在屏幕上也能顯示出全部?jī)?nèi)容。

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

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

對(duì)于PC端的原型尺寸可按照寬1440px，首屏高900px進(jìn)行設(shè)計(jì)即可，側(cè)邊導(dǎo)航欄建議200px，頂部導(dǎo)航欄建議60px。

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

2. 顏色

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

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

顏色從左到右以及變淡，在頁(yè)面中表達(dá)的層級(jí)關(guān)系也依次降低。

在頁(yè)面中層級(jí)最高、重要程度最高的，使用最左側(cè)的純黑，次重要內(nèi)容使用灰色，依次遞減。

顏色的選擇也受底色的影響，上邊的例子通過(guò)白色底進(jìn)行設(shè)計(jì)的，對(duì)于其它底色，我們可以在調(diào)整，選擇不同顏色進(jìn)行對(duì)比突出。

對(duì)于遮罩的顏色，我們可以選擇純黑，調(diào)整為50%透明度。

有些文章說(shuō)不建議使用純黑，但是我認(rèn)為純黑能更好的體現(xiàn)出層級(jí)關(guān)系，大家可以根據(jù)自己需要來(lái)調(diào)整。

具體使用什么顏色，我們不建議嚴(yán)格按照色號(hào)，只要能夠通過(guò)顏色區(qū)分出層級(jí)即可。

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

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

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

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

很多文章說(shuō)，原型圖中不要添加顏色，會(huì)影響到UI設(shè)計(jì)，高級(jí)的UI設(shè)計(jì)師是不會(huì)被影響的。

3. 字體、字號(hào)、字重、行間距

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

如果你想更好看一點(diǎn)，推薦使用蘋(píng)方字體，然后將蘋(píng)方字體設(shè)置為默認(rèn)字體。

如果你沒(méi)有安裝蘋(píng)方字體，文末有獲取方式，安裝好字體后，重啟Axure即可，然后將蘋(píng)方字體設(shè)置為默認(rèn)字體。

Axure默認(rèn)字體設(shè)置方式：項(xiàng)目-元件樣式管理-字體-選擇蘋(píng)方。

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

字重是指字體重量，就是細(xì)體、中等還是加粗，經(jīng)常用的是中等與加粗，細(xì)體沒(méi)用過(guò)。

不同字號(hào)、不同字重也是用來(lái)區(qū)分不同層級(jí)關(guān)系的。

我們需要把顏色+字號(hào)+字重組合，就能得到一套完整的文字層級(jí)關(guān)系。

我建議如下：

• 一級(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

示例如下：

不需要特意去記，在畫(huà)原型時(shí)，根據(jù)層級(jí)關(guān)系與實(shí)際效果再去調(diào)整。

行間距：在Axure9中使用不同字體、字號(hào)時(shí)，會(huì)自動(dòng)調(diào)整行間距。我們可以直接按照Axure9自動(dòng)的行間距大小即可。

如果你想更好看些，可以按照字號(hào)大小的1.5倍調(diào)整行間距，如正文14px字號(hào)對(duì)應(yīng)行間距為21px。

當(dāng)字體內(nèi)容較多時(shí)，可適當(dāng)調(diào)大行間距。

還有字間距，可以不用管，如果你想更好看，自己手動(dòng)調(diào)整看效果即可。

3. 間距、對(duì)齊、分割、分布

一個(gè)好看的原型一定是要有間距、對(duì)齊的。

為了保證內(nèi)容的可讀性，體現(xiàn)出留白，以及層級(jí)關(guān)系，我們?cè)诋?huà)原型時(shí)一定要把間距和對(duì)齊同時(shí)考慮到。

1）安全間距

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

移動(dòng)端我一般選擇10px，可以通過(guò)拉出標(biāo)尺線，或者放寬度為10px的熱區(qū)進(jìn)行限制。

2）具體間距

不同模塊間的間距：推薦使用10px、20px，間距可按照10的倍數(shù)進(jìn)行調(diào)整。

模塊內(nèi)各種間距：我分為3個(gè)，分別是模塊內(nèi)間距、子模塊間距、子模塊內(nèi)元素間距。

對(duì)于模塊內(nèi)的間距，建議只關(guān)注上下左右的間距。左右間距相同，上下間距相同。

移動(dòng)端大小推薦10px/15px/20px，但是不需要特別標(biāo)準(zhǔn)，在滿足對(duì)齊后，間距能夠區(qū)分出每組關(guān)系即可。

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

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

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

如果你想摳像素，可按照5px的倍數(shù)調(diào)整。

子模塊內(nèi)元素組件間距：不同元素間的間距我一般不關(guān)注，只要間距能達(dá)到分出層級(jí)的效果：相關(guān)元素靠近，不相關(guān)元素間距稍微大點(diǎn)。

你也可以按照5px的倍數(shù)進(jìn)行調(diào)整，但是不建議這樣做，沒(méi)必要去摳像素。真要細(xì)摳的話，那你就不是畫(huà)原型了，你是在搞UI了。

在Axure9中我們可以設(shè)置【標(biāo)尺·網(wǎng)格·輔助線】勾上顯示網(wǎng)格、元件對(duì)齊。

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

這樣就可以顯示出間距大小，并能自動(dòng)吸附對(duì)齊。

5. 對(duì)齊

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

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

在Axure中，可直接選中要對(duì)齊的組件，點(diǎn)擊頂部導(dǎo)航欄，即可自動(dòng)對(duì)齊；對(duì)齊時(shí)以第一個(gè)選中的組件為標(biāo)準(zhǔn)進(jìn)行對(duì)齊。

同時(shí)在Axure9的設(shè)置中，把網(wǎng)格對(duì)齊、輔助線、元件對(duì)齊都勾上，這樣就可以自動(dòng)對(duì)齊。

有些對(duì)齊原則可以直接參考（以下內(nèi)容引用Antdesign）：

1）表單類(lèi)對(duì)齊

冒號(hào)對(duì)齊（右對(duì)齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶(hù)眼球順著冒號(hào)的視覺(jué)流，就能找到所有填寫(xiě)項(xiàng)，從而提高填寫(xiě)效率。

2）文案類(lèi)對(duì)齊

如果頁(yè)面的字段或段落較短、較散時(shí)，需要確定一個(gè)統(tǒng)一的視覺(jué)起點(diǎn)。

3）數(shù)字類(lèi)對(duì)齊

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

6. 分布

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

當(dāng)有相同內(nèi)容≥3可考慮使用自動(dòng)分布，比如多個(gè)icon排列時(shí)，可以直接使用水平分布。

使用自動(dòng)分布時(shí)，建議不考慮的具體間距。

在實(shí)際畫(huà)原型時(shí)，經(jīng)常會(huì)將對(duì)齊與分布一起使用。

7. 分割方式

使用分割的作用還是突出層級(jí)關(guān)系，將相同內(nèi)容在視覺(jué)上分組。

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

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

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

色塊分割是指一種視覺(jué)效果，我們?cè)诋?huà)原型時(shí)，并不是非要拖個(gè)矩形進(jìn)行分割。

我們可以通過(guò)灰色底+白色底實(shí)現(xiàn)。通過(guò)顏色對(duì)比實(shí)現(xiàn)色塊分割的效果。

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

（有分割線，放大看）

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

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

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

8. 陰影

畫(huà)原型時(shí)，不建議添加陰影，太費(fèi)勁。

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

9. 圓角

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

如果想效果更好，可以根據(jù)圓角和直角的特性來(lái)判斷：

• 圓角：柔和、友好、識(shí)別度高，設(shè)計(jì)感強(qiáng)，活潑調(diào)性
• 直角：正式、嚴(yán)肅、專(zhuān)業(yè)性強(qiáng)、沖突性強(qiáng)，冷系調(diào)性

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

具體圓角的大小，不需要特別嚴(yán)格，選擇元件后，通過(guò)拖動(dòng)小三角標(biāo)即可。

也可以按照半徑5px的倍數(shù)，根據(jù)元素面積越大，圓角半徑越大進(jìn)行調(diào)整。

10. 圖標(biāo)

對(duì)于icon的使用，我有以下建議：

• 剛開(kāi)始畫(huà)原型時(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)種類(lèi)有限。iconfont更豐富，也支持按照不同風(fēng)格篩選。
• 使用svg矢量圖，別讓icon失真。在iconfont或者iconpark中復(fù)制svg代碼，粘貼到Axure中，然后變換圖片為SVG形狀。這樣就可以修改icon顏色、調(diào)整大小也不會(huì)失真。
• 使用icon調(diào)整大小時(shí)同比例縮放擴(kuò)大，別讓iocn變形。

11. 文案

文案在畫(huà)原型時(shí)就直接敲出來(lái)了，很多時(shí)候原型中的文案會(huì)使用到線上中，我們?cè)诋?huà)原型時(shí)，可以直接敲出好點(diǎn)的文案。

具體建議如下：

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

12. 圖片

畫(huà)原型時(shí)，不需要添加具體圖片，使用占位符、或者矩形圖代替即可，如果覺(jué)得表達(dá)不清楚，可以添加文字補(bǔ)充。

在使用占位符/矩形代替圖片時(shí)，我們可以直接調(diào)整一個(gè)差不多的尺寸，如果想更好點(diǎn)，可以按照一定比例調(diào)整。

常見(jiàn)的比例有：

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

13. 動(dòng)效

不過(guò)過(guò)度追求動(dòng)效。關(guān)于使用動(dòng)效我有以下小建議：

看原型的使用對(duì)象是誰(shuí)，選擇性的添加動(dòng)效。

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

對(duì)于頁(yè)面切換，PC端產(chǎn)品建議將每個(gè)頁(yè)面單獨(dú)畫(huà)出，添加鏈接跳轉(zhuǎn)到新頁(yè)面，有利于寫(xiě)一體化需求文檔。

App端頁(yè)面較少時(shí)，可直接平鋪在Axure畫(huà)布中，通過(guò)箭頭表達(dá)跳轉(zhuǎn)關(guān)系。

建議動(dòng)態(tài)面板僅用于交互展示，不要在動(dòng)態(tài)面板的頁(yè)面中添加需求文檔說(shuō)明，沒(méi)人喜歡點(diǎn)擊你的原型去找你的需求。

當(dāng)用動(dòng)態(tài)面板時(shí)，建議先把動(dòng)態(tài)面板的所有頁(yè)面都畫(huà)好，然后在放入動(dòng)態(tài)面板內(nèi)。

動(dòng)態(tài)面板中盡量別在加動(dòng)態(tài)面板，修改時(shí)每個(gè)人動(dòng)態(tài)面板去找很費(fèi)勁。

對(duì)于動(dòng)態(tài)面板中的頁(yè)面進(jìn)行切換時(shí)，可選擇性添加Axure自帶的切換動(dòng)畫(huà)以及動(dòng)效效果。效果建議選擇“緩進(jìn)緩出”。

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

對(duì)于選擇日期、選擇日期等，如果沒(méi)有好的組件，可直接使用axure自帶的文本框，修改不同類(lèi)型。

對(duì)于中繼器、函數(shù)這種高級(jí)交互，不建議在畫(huà)原型時(shí)使用。其它高級(jí)動(dòng)效也不建議在畫(huà)原型中使用，當(dāng)然你可以自己學(xué)著玩。

03 總結(jié)

再分享一張幾年前做的會(huì)員落地頁(yè)項(xiàng)目的原型圖與UI圖對(duì)比照。

（最左邊是我當(dāng)時(shí)領(lǐng)導(dǎo)畫(huà)的，中間的是我改的，右邊的是UI設(shè)計(jì)稿）

其它的話，就是畫(huà)原型的首要前提是需求分析完整，功能架構(gòu)劃分清晰，流程確定清晰。這些我們不在這說(shuō)，之后在細(xì)聊。

另外不要糾結(jié)原型工具。

原型工具有很多：Axure，sketch，摹客，墨刀、xd，即時(shí)設(shè)計(jì)、碼前、MasterGo等。另外PPT、Excel也能畫(huà)。

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

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

《產(chǎn)品必會(huì)的30個(gè)Axure使用技巧》

《產(chǎn)品必會(huì)的Axure使用技巧-第二彈》

《產(chǎn)品必會(huì)的Axure使用技巧-第三彈》

另外一點(diǎn)，就是使用組件庫(kù)，頁(yè)面中的組件翻來(lái)覆去就那些，每次使用時(shí)直接拖拽組件庫(kù)即可，不用每次都畫(huà)。

我建議每個(gè)要畫(huà)原型的產(chǎn)品，都要有自己的組件庫(kù)。我也整理了Axure組件庫(kù)，文末提供了領(lǐng)取方式。

還有就是了解交互組件有哪些，以及交互設(shè)計(jì)原則。

對(duì)于原型中需要使用什么樣式的交互組件，大家可以看下這篇文章《產(chǎn)品經(jīng)理必會(huì)的30個(gè)組件（匯總）》http://www.codemsi.com/pd/5423893.html。

本文由 @王大鹿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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