去年一直想寫的Axure小技巧分享，終于還是動手寫了，今天主要給大家分享關(guān)于axure高保真原型的一些東東。

本文核心內(nèi)容點：
– 啥是高保真原型？（附簡單說明原型）
– Axure可以畫出什么水準的高保真？（給示例，開啟裝逼模式）
– 高保真原型圖技巧：
– 啥時候上高保真？適用場景 and 不適用場景

啥是高保真原型 ？

啥是原型，從事互聯(lián)網(wǎng)的同學(xué)，肯定非常熟悉，特別是產(chǎn)品崗?fù)瑢W(xué)。如果不是，那如下簡單講原型和高保真原型的：

原型：即產(chǎn)品草圖。從產(chǎn)品流程來看，將想法形成草圖原型，原型再有設(shè)計師形成效果圖，程序猿們根據(jù)需求和效果圖開發(fā)，出來的軟件樣子就是和效果圖差不多。原型在過程中就是產(chǎn)品最終形態(tài)的骨架。

低/中/高保真：根據(jù)圖的粗糙程度劃分，以最終效果圖為參照。保真程度越高，離最終效果圖越接近。

Axure：工具只是實現(xiàn)想法的工具。在眾多的原型軟件中，最廣泛使用的就是Axure了。

Axure可以畫出啥水準的高保真？

在這里一圖勝過千言，以下分享自己畫過低/中/高保真原型截圖。

低保真：最輕松和省時間的原型，粗獷的風(fēng)格讓我們只重視結(jié)構(gòu)和流程，原型不在乎太多設(shè)計細節(jié)。

– 示例1：一個App官網(wǎng)下載頁的低保真原型，我們甚至可以成為結(jié)果圖，突出了這個需要哪一些元素。

– 示例2：wap版本下載頁，同樣低保真，突出結(jié)構(gòu)和元素。

中保真：這類原型最常見，低保真不容易描述產(chǎn)品最終樣子，高保真容易干擾設(shè)計師，中保真匯集了各類有點，也是比較常用的。

– 示例3：本示例圖為微信酒店訂房下的系列頁面，中保真對比低保真，更能體現(xiàn)了交互細節(jié)和產(chǎn)品流程。

– 示例4：這是一個”邀請好友注冊獲取獎勵“的流程，采用中保真并強調(diào)了多個頁面的交互流程。

高保真：對比中低保真，高保真可以稱之為效果圖了，如果加深細節(jié)可以直接對著開發(fā)咯，換句話說，高保真更強調(diào)細節(jié)。

– 示例5：在校期間做的校園助手小項目，和同學(xué)的第一個5000+用戶的項目，簡直無以言必的自豪感。由于組內(nèi)無設(shè)計同學(xué)，于是要求用Axur直接先畫出類似最終效果的高保真，最后再開發(fā)。圖中除了素材，其他都是使用Axure直接繪制出來。

– 示例6：在校期間某日看到了多年未更新的老版36Kr，根據(jù)自己興趣畫了新版效果圖，也是可以直接通過Axure繪制出來。

– 示例7：近期眾包某App中“我的”頁面。

高保真的特殊技巧

高保真原型圖技巧：

– 核心內(nèi)功：目標清晰/理解設(shè)計規(guī)范

– 畫圖習(xí)慣：像素對齊/用淺色/上素材

核心：

目標清晰：不管采用低中高的原型，核心目標是交互稿就是想法的表達，產(chǎn)品流程的表達。可以采用“目標、堆疊、排序”方式來表達。目標指的是頁面目的，流程目的，都是為了實現(xiàn)某些需求。堆疊指的是為了滿足目的，一個新聞詳情頁需要哪些元素？一個登錄頁需哪些元素？建議先用思維導(dǎo)圖或者手繪出基本包含的元素，先把包含的元素列出來，不在乎樣式，正如HTML編碼里面的”內(nèi)容/樣式/結(jié)構(gòu)“，堆疊考慮的是內(nèi)容和結(jié)構(gòu)。等列出這個頁面的所有元素，那就可以開始排列了，這就涉及涉及規(guī)范和畫圖習(xí)慣了。

了解設(shè)計規(guī)范：了解不同類型產(chǎn)品的設(shè)計規(guī)范是很有必要的。比如IOS、Android、Web設(shè)計規(guī)范，或者某個產(chǎn)品常用頁面設(shè)計方法。沒人會把登錄按鈕放在賬戶密碼框的上面，了解設(shè)計規(guī)范的目標是調(diào)整好頁面結(jié)構(gòu)，將頁面元素合理的擺放。推薦《UI設(shè)計模式》和《Web信息架構(gòu)》這兩本書，總結(jié)了移動端和Web端常用的頁面設(shè)計知識。

習(xí)慣：

繪圖習(xí)慣直接影響到了畫出來的效果，如果想輕松畫出顏值較高的原型，那么可以遵守以下細節(jié)。

控制組件到素級級別：低保真原型比較粗糙是因為不在乎細節(jié)，啥事細節(jié)，就是一個頁面內(nèi)元素的寬高圓角等。所以畫高保真原型時候，最常用習(xí)慣就是計算和定義組件的寬高等屬性。 比如App基礎(chǔ)背景頁面我們可以定義為320×480(Iphone4s的對半比例)、360×640(720P屏幕的對半)等其他比例，然后在此基礎(chǔ)上，定義狀態(tài)欄高度20PX像素，xxx欄高度44Px，幾乎就是按照設(shè)計規(guī)范給的來畫組件了，自定義組件一般取10px的倍數(shù)，如狀態(tài)欄這類組件盡量復(fù)用。

善用對齊功能：對齊在Axure里面非常重要，善用Axure自帶對齊功能！

1）不同組件間距盡量對齊相同，或者10px的倍數(shù)規(guī)律。

2）2個元素間關(guān)系善用向左/右對齊，居中對齊，頁面內(nèi)元素間必須存在對齊關(guān)系（左右居中）

3) 3個元素以上，善用間距對齊。

淺色為主，慎用深色：在組件顏色選擇上，盡量采用淺色，首先是深色顯得比較重，建議關(guān)鍵組件采用深色。

圖標等采用真實素材：在低保真中，涉及圖片圖標等素材用占位符，而畫高保真時，我們可以替換為真實素材。圖標可以去Iconfont下載尋找，圖片盡量找真是素材替換。

有興趣適當配色：在不影響設(shè)計師的前提下，可以嘗試配色，但是交付設(shè)計師的交互稿最好不帶顏色。

啥時候上高保真？

并不是任何時候都適用于高保真原型，哪些場景下比較適合使用呢？

**適用場景**：

1. 不干擾設(shè)計師的前提下，想要盡量接近產(chǎn)品最終效果。
2. 涉及會議演示。
3. 做好方案對B/C端用戶直接展示，越保真效果越好。

**非適用場景**

1. 產(chǎn)品流程還在探索期，此期強調(diào)流程而不是細節(jié)，建議采用低保真。
2. 周期短，那還是重點表達清流程和適當?shù)募毠?jié)。

總結(jié)，高保真原型：

– 制作周期：較長，耗時間。

– 適用場景：流程清晰的前提下，想要接近或者定義最終效果。

**END**

Axure小心得，望能對親有所幫助，文筆粗糙請諒解，歡迎交流。

本文為作者@ygg（公眾號：yggtalk） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理社區(qū)，并經(jīng)人人都是產(chǎn)品經(jīng)理編輯，轉(zhuǎn)載請注明作者信息和本文鏈接。