去年一直想寫的Axure小技巧分享，終于動手寫了。還有最近打算發布文章清單中的積壓文章，加油咯，文筆爛，望噴。

@文章內容

• 啥是高保真原型？簡單說明原型
• Axure可以畫出什么水準的高保真？給示例，開啟裝逼模式
• 特殊的技巧：
  • 核心內功：目標清晰/理解設計規范
  • 畫圖習慣：像素對齊/用淺色/上素材
• 啥時候上高保真？：適用場景 and 不適用場景

啥是高保真原型 ？

謝自邀。
啥是原型，從事互聯網研發體系的同學，肯定非常熟悉，特別是產品崗同學。如果不是，那如下簡單講原型和高保真原型的：
原型：草圖。從產品流程來看，將想法形成草圖原型，原型再有設計師形成效果圖，程序猿們根據需求和效果圖開發，出來的軟件樣子就是和效果圖差不多。原型在過程中就是產品最終形態的骨架。
低/中/高保真：根據圖的粗糙程度劃分，以最終效果圖為參照。保真程度越高，離最終效果圖越接近。
Axure：工具只是實現想法的工具。在眾多的原型軟件中，最廣泛使用的就是Axure了。

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

在這里一圖勝過千言，以下分享自己畫過低/中/高保真原型截圖。
@低保真：最輕松和省時間的原型，粗獷的風格讓我們只重視結構和流程，原型不在乎太多設計細節。

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

Web下載頁.png

• 示例2：wap版本下載頁，同樣低保真，突出結構和元素。

wap下載頁.png

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

• 示例3：本示例圖為微信酒店訂房下的系列頁面，中保真對比低保真，更能體現了交互細節和產品流程。

某訂房流程.png

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

推薦好友注冊.png

@高保真：對比中低保真，高保真可以稱之為效果圖了，如果加深細節可以直接對著開發咯，換句話說，高保真更強調細節。

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

校園助手首頁.png

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

興趣36KR.png

側邊欄.png

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

眾包App我的頁面.png

高保真的特殊技巧

特殊的技巧：
- 核心內功：目標清晰/理解設計規范
- 畫圖習慣：像素對齊/用淺色/上素材

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

目標元素排列.png

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

了解設計規范.png

@習慣：
繪圖習慣直接影響到了畫出來的效果，如果想輕松畫出顏值較高的原型，那么可以遵守以下細節。
控制組件到素級級別：低保真原型比較粗糙是因為不在乎細節，啥事細節，就是一個頁面內元素的寬高圓角等。所以畫高保真原型時候，最常用習慣就是計算和定義組件的寬高等屬性。 比如App基礎背景頁面我們可以定義為320x480(Iphone4s的對半比例)、360x640(720P屏幕的對半)等其他比例，然后在此基礎上，定義狀態欄高度20PX像素，xxx欄高度44Px，幾乎就是按照設計規范給的來畫組件了，自定義組件一般取10px的倍數，如狀態欄這類組件盡量復用。

控制組件像素.png

善用對齊功能：對齊在Axure里面非常重要，善用Axure自帶對齊功能！
1）不同組件間距盡量對齊相同，或者10px的倍數規律。
2）2個元素間關系善用向左/右對齊，居中對齊，頁面內元素間必須存在對齊關系（左右居中）

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

把握間距.png

Axure的對齊.png

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

淺色為主，謹慎用深色.png

圖標等采用真實素材：在低保真中，涉及圖片圖標等素材用占位符，而畫高保真時，我們可以替換為真實素材。圖標可以去Iconfont下載尋找，圖片盡量找真是素材替換。
有興趣適當配色：在不影響設計師的前提下，可以嘗試配色，但是交付設計師的交互稿最好不帶顏色。

啥時候上高保真？

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

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

非適用場景

1. 產品流程還在探索期，此期強調流程而不是細節，建議采用低保真。
2. 周期短，那還是重點表達清流程和適當的細節。

總結，高保真原型：

• 制作周期：較長，耗時間。
• 適用場景：流程清晰的前提下，想要接近或者定義最終效果。

END

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