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

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

這是我按照簡書IOS端APP做的原型界面，兩個界面沒超過15分鐘。

原型示例

我不會告訴你我是這樣做的

準(zhǔn)備篇

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

列一些我常去的網(wǎng)站：
花瓣網(wǎng) http://huaban.com/
國內(nèi)知名圖片分享網(wǎng)站UI社 http://www.uishe.cn/ 素材類網(wǎng)站，免費下載psd文件
easyicon http://www.easyicon.net 可以搜索你想要的各種icon
dribbble https://dribbble.com/ 交互類作品分享平臺，國外大神常出沒于此
reeoo http://reeoo.com 國外素材類網(wǎng)站，支持免費下載

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

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

用AP打開psd文件

創(chuàng)建切片

導(dǎo)出切片

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

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

比如我的文字大小顏色等等是這樣設(shè)置的。可以根據(jù)自己的需要制定自己的規(guī)范。

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

我的一些自定義組件

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

Axure使用篇

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

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

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

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

移動左邊兩條輔助線

移動后

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

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

利用輔助線快速布局

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

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

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

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

頂部對齊

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

完成

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

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

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

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

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

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

轉(zhuǎn)自：http://www.jianshu.com/p/6824fe2568fb

總結(jié)

以上是生活随笔為你收集整理的快速制作高保真原型不得不知的小技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。