Axure優雅裝逼指南：開啟原型高顏值形態

文章摘要：目標元素排列.png 瞭解設計規範低保真原型比較粗糙是因為不在乎細節

作者寄語 / 一直想寫的Axure小技巧分享，終於動手寫了。望能對親有所幫助，文筆粗糙請諒解。

內容目錄：

啥時候上高保真？：適用場景 and 不適用場景

啥是高保真原型？

啥是原型，從事網際網路研發體系的同學，肯定非常熟悉，特別是產品崗同學。如果不是，那如下簡單講原型和高保真原型的：

原型：草圖。從產品流程來看，將想法形成草圖原型，原型再有設計師形成效果圖，程式猿們根據需求和效果圖開發，出來的軟體樣子就是和效果圖差不多。原型在過程中就是產品最終形態的骨架。

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

Axure：工具只是實現想法的工具。在眾多的原型軟體中，最廣泛使用的就是Axure了。

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

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

@低保真：最輕鬆和省時間的原型，粗獷的風格讓我們只重視結構和流程，原型不在乎太多設計細節。

Web下載頁.png

wap下載頁.png

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

某訂房流程.png

推薦好友註冊.png

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

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

校園助手首頁.png

興趣36KR.png

側邊欄.png

眾包App我的頁面.png

高保真的特殊技巧

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

@核心：

目標清晰：不管採用低中高的原型，核心目標是互動稿就是想法的表達，產品流程的表達。可以採用「目標、堆疊、排序」方式來表達。目標指的是頁面目的，流程目的，都是爲了實現某些需求。堆疊指的是爲了滿足目的，一個新聞詳情頁需要哪些元素？一個登入頁需哪些元素？建議先用思維導圖或者手繪出基本包含的元素，先把包含的元素列出來，不在乎樣式，正如HTML編碼裏面的」內容/樣式/結構「，堆疊考慮的是內容和結構。

等列出這個頁面的所有元素，那就可以開始排列了，這就涉及涉及規範和畫圖習慣了。

目標元素排列.png

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

瞭解設計規範.png

@習慣：
繪圖習慣直接影響到了畫出來的效果，如果想輕鬆畫出顏值較高的原型，那麼可以遵守以下細節。

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