原型的目的在于清楚的表達(dá)產(chǎn)品的設(shè)計(jì)理念和功能的執(zhí)行邏輯，所以我認(rèn)為能夠達(dá)到這個(gè)目的的原型都是合格的。但如果可以把原型做的更加精致美觀些，又何樂而不為呢。然而需要注意的是，我們畢竟是負(fù)責(zé)產(chǎn)品的，不是負(fù)責(zé)界面設(shè)計(jì)的，所以哪怕是制作高保真原型，也要快。

在需求討論，功能確定階段，我們會(huì)畫線框圖，也就是低保真原型。待需求功能流程基本理清后，為保證時(shí)間效率，通常會(huì)出中保真原型圖給設(shè)計(jì)，畢竟出高保真要占用更多的時(shí)間。不過，在有些時(shí)候我們是有必要甚至必須出高保真原型，比如進(jìn)行原型測(cè)試。

這是我按照簡(jiǎn)書IOS端APP做的原型界面，兩個(gè)界面沒超過15分鐘。

原型示例

我不會(huì)告訴你我是這樣做的

準(zhǔn)備篇

素材積累

工作的時(shí)候每隔一段時(shí)間我會(huì)停下手頭的活，休息幾分鐘（番茄工作法）。一般在這幾分鐘我會(huì)站起來走兩步，然后就是看看素材類，圖片類網(wǎng)站。因?yàn)楣溥@類網(wǎng)站不用動(dòng)腦，所以放松挺不錯(cuò)。順便看到不錯(cuò)的圖片就保存下來當(dāng)素材。

列一些我常去的網(wǎng)站：

花瓣網(wǎng) http://huaban.com/

國(guó)內(nèi)知名圖片分享網(wǎng)站UI社 http://www.uishe.cn/

素材類網(wǎng)站，免費(fèi)下載psd文件easyicon http://www.easyicon.net

可以搜索你想要的各種icondribbble https://dribbble.com/

交互類作品分享平臺(tái)，國(guó)外大神常出沒于此reeoo http://reeoo.com 國(guó)外素材類網(wǎng)站，支持免費(fèi)下載

修圖小技巧

積累的圖片素材有時(shí)候不能直接用，可能背景不透明，可能填充色不對(duì)等等。所以掌握簡(jiǎn)單的修圖技巧還是需要的。通常用的比較多的就是切圖（psd文件切圖標(biāo)用），剪切，調(diào)整圖片大小，摳圖，修改填充色。

由于MAC下PS比較卡，所以我用的修圖軟件是Affinity Photo(下簡(jiǎn)稱AP)。網(wǎng)上不太容易找到AP的使用教程，這里就介紹下AP的切圖方法。其他的琢磨兩下就知道了。

psd切圖

用AP打開psd文件

創(chuàng)建切片

導(dǎo)出切片

原型設(shè)計(jì)規(guī)范

剛開始學(xué)畫原型圖時(shí)，我總是在字體的大小，顏色等等這些細(xì)節(jié)上很苦惱。如果太隨意，雖然省事，但效果實(shí)在不堪；如果扣細(xì)節(jié)，卻又要花很多時(shí)間，得不償失。

后來我發(fā)現(xiàn)，不同的產(chǎn)品原型完全可以用一套設(shè)計(jì)標(biāo)準(zhǔn)，因?yàn)椴还茉腿绾?，UI最終會(huì)針對(duì)APP出相應(yīng)的視覺設(shè)計(jì)規(guī)范。于是我制定了我的設(shè)計(jì)標(biāo)準(zhǔn)，管你什么APP，直接套，即便捷又美觀。

比如我的文字大小顏色等等是這樣設(shè)置的?？梢愿鶕?jù)自己的需要制定自己的規(guī)范。

自定義組件

雖然Axure已經(jīng)提供了一些方便使用的基本組件，但為了提高效率，我們需要自定義常用的組件。比如iPhone的navigation欄和tab欄，跟大寶似的天天見。那我就做成了組件，隨時(shí)用，隨時(shí)拖。

我的一些自定義組件

注意，自定義組件本身也是遵守原型設(shè)計(jì)規(guī)范的。另外，看到圖中方案1下面的那幾個(gè)組件了嗎？有什么用呢？待會(huì)說，先賣個(gè)關(guān)子。

Axure使用篇

常用快捷鍵

想要快速，盡然不用快捷鍵？別逗了。分享下烏金老師整理的Axure RP7.0快捷鍵中英文PC和MAC對(duì)照版http://vdisk.weibo.com/s/sRCuwKXDvAjWC

輔助線

Axure有全局輔助線和局部輔助線。全局輔助線在所有頁面都有效，局部輔助線只在當(dāng)前頁面有效。

在開始制作原型圖前，我會(huì)先布局好主要的輔助線。比如我做的原型界面是375×668（iphone6屏幕像素的一半）的大小，控件距屏幕邊緣20px寬，為方便布局，我會(huì)先設(shè)置幾條全局線。

創(chuàng)建全局輔助線

移動(dòng)左邊兩條輔助線

移動(dòng)后

選中所有輔助線，設(shè)置鎖定

這樣基礎(chǔ)的輔助線就設(shè)置好了，再在具體使用中靈活運(yùn)用局部輔助線，我們就可以愉快的布局玩耍啦。

利用輔助線快速布局

對(duì)齊分布和等間距分布想要多個(gè)控件的位置擺放合理美觀，我們常常用到對(duì)齊分布或等間距分布。

對(duì)齊分布有三種方法：

• 一，利用Axure的提示對(duì)齊線移動(dòng)控件的過程中，提示對(duì)齊線會(huì)自動(dòng)出現(xiàn)（原諒我截不了圖），按提示操作即可，很傻瓜式。
• 二，利用輔助線關(guān)于輔助線，前面已經(jīng)說到，不羅嗦了。
• 三，利用對(duì)齊動(dòng)作比如我想讓控件2對(duì)于控件1進(jìn)行左對(duì)齊，先選中控件1，再選中控件2(注意順序)，然后去點(diǎn)右上角紅圈處的對(duì)齊按鈕，選中左對(duì)齊即可?？梢杂涀?duì)齊快捷鍵，那操作就很快啦。

對(duì)于2兩個(gè)以上的需要等間距分布的控件，我們可以利用等間距操作。比如tabbar，通常有4、5個(gè)按鈕。我們?cè)谠O(shè)置好一個(gè)按鈕后，直接復(fù)制粘貼，如圖

把最兩邊的按鈕位置放好，選中全部按鈕

頂部對(duì)齊

進(jìn)行水平等間距

完成

取色

這里正是我前面賣的關(guān)子。我們制定好了規(guī)范，每個(gè)界面的背景色都是#F7F7F7，現(xiàn)在我要修改一個(gè)藍(lán)色背景的矩形組件，怎么該顏色呢？輸入色值？當(dāng)然可以，但慢啊。用取色筆？屏幕里沒有我要的顏色??？瞧我的。

我根據(jù)規(guī)范的顏色，分別自定義了矩形組件。這樣會(huì)在Axure的組件欄里顯示出來。

這些組件不是用來拖的，而是方便我取色的

接下來用取色筆就可以方便的取色啦，是不是很機(jī)智。

temp頁寫代碼講究復(fù)用，講究ctrl+c,ctrl+v。做原型也一樣，要學(xué)會(huì)“懶”。有時(shí)候某個(gè)界面的控件在其他地方也會(huì)用，對(duì)于這樣的控件，我會(huì)把它放到temp頁里。

temp頁是做作原型過程中的臨時(shí)頁面。它就像個(gè)復(fù)用池，里面的控件隨時(shí)準(zhǔn)備被我拿來ctrl+c，啦啦啦。

作者@許洵的昵稱

來源@簡(jiǎn)書

本文由 @許洵的昵稱?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。