交互原型設計軟體Axure在產品原型設計中的應用
交互原型設計軟體Axure在產品原型設計中的應用
前言
什麼是原型呢？
產品原型簡單的說就是產品設計成形之前的一個簡單框架，對網站來講，就是將頁面模塊、元素進行粗放式的排版和布局，深入一些，還會加入一些交互性的元素，使其更加具體、形象和生動。就我個人而言，目前使用頻率最多，最高效，交互效果最好的原型工具是Axure。今天給大家介紹一些我在工作中使用axure的經驗。主要從交互設計中涉及的三個主要步驟進行說明：
一、主要頁面原型
在進行主要頁面原型設計之前，交互設計師需要：
如何做「主要頁面原型」
1. 在建立項目的初期就開始定義Master
項目一開始啟動，如果可以稍微掌握哪些區塊未來將是共享區塊，那麼就開始建立Master，比如網站的Header / Footer / 導覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節省其它頁面設計的重複工作。
Master的定義
2.可以應用一些Axure RP library
網上有很多資源，如：http://ucdchina.com/post/6285。也可以自己製作適合產品的library。
網上的library資源
3.根據「任務流程圖」，「功能列表」將主要的頁面原型製作出來。
這時可以包括一些必要的交互動作。一些詳細的，比如出錯提示等交互可以不用考慮。
主要的頁面列表
用途：主要的頁面原型可以用於產品初期的討論會、測試以及產品介紹會。
應注意幾點：1. 不要加入視覺設計的元素。著眼於大局，不要糾結細枝末節
在製作原型的初期請把所有精力都放在流程的優化和布局設計上面吧，不要把時間浪費在視覺設計上，那樣絕對是得不償失。
因為我們的原型方案還沒有最終通過，肯定要通過多次迭代才能確定方案，太多的視覺設計就是浪費時間；
再者，如果原型做的十分逼真，在產品討論會上，視覺的元素會很快抓住大家的眼球，到時就會有領導來質疑你的界面是不是該換成藍色，按鈕是不是再精緻一些這樣的問題。沒有人會專註於你的交互設計了。
2. 最好在使用axure工具前，用紙和筆畫一些紙面原型，整理一下思路。
3. 這個過程應是快速的，迭代的。
二、頁面流程圖在確定主要頁面之後，我們可以開始細化頁面流程了。頁面流程圖有利於向大家展示自己的想法，也有利於思路的整理。畢竟axure上面的交互點是散的，通過頁面流程圖，我們可以整理所有的頁面上的交互行為，避免遺漏；在向他人展示的時候，也可以一目了然的看出需要的操作步驟是多少。
我傾向於將主要任務列出來，然後畫出所有任務的頁面流程圖。
頁面流程圖
頁面流程圖要素由於axure中沒有斜線，在表現流程的時候有些受限。我會在流程圖中表現以下幾點：
用途
可以與他人溝通流程、整理思路細化流程。
應注意的幾點- 如果項目時間有限，頁面流程可以畫在紙上。但還是建議在交互設計保留這一步。
- 為了減少溝通成本，在繪製頁面流程圖時，最好有一定的規範和標準。
三、完善原型
頁面的主要頁面和頁面流程確定之後，就可以完善原型了。這時可以叫上產品部的同事一起來完成原型的細節工作。
如何完善原型
1. 按照頁面流程中所考慮的交互過程，體現在原型上面。出錯，提示等交互細節也應有體現。這時你可能會用到變數、層等高級axure技巧。
點擊定時操作彈出層的操作
2. 增加說明
選中某個控制項，在右邊區域可以為此控制項增加說明。
增加描述
增加描述後的前台頁面，點擊黃色圖標顯示說明提示層
如果對於說明區域的屬性不滿意，可以修改屬性：
修改屬性
不過這種增加描述的方式可能會干擾整個頁面，很容易讓瀏覽者以為是一個頁面元素。也可以採取一種原始的方法為控制項增加說明文字：
文字補充說明
3. 為頁面編號
當原型不再需要修改時，我們需要為原型頁面編號，這樣有利於與視覺設計師、前端溝通。
用途測試、產品需求文檔編寫參考、視覺設計參考、前端設計參考等。
應注意的幾點1. 不要過於追求技術表現
原型有些交互效果做出來會很花費時間，我建議不要過於追求技術表現效果，可以用些文字來說明交互效果。Axure軟體的初衷是快速的設計原型，如果在一些技術方面交互設計師花費很多時間的話，就有些顧此失彼了。還是把真實的效果交給前端去實現吧。
2. 為了減少溝通成本，在完善原型時，最好有一定的規範和標準。
總結Axure其實只是一種交互工具而已，交互設計最重要的還是想法，工具只是來幫你表現想法的。不必過於追求技術，不必過於追求視覺表現。我們在把握好整個產品方向的同時，應專註於交互流程、頁面內交互、布局結構的創新和優化。
下面給大家介紹一些我工作之中記錄下來的axure技巧。
1.快速移動頁面大家有沒有感覺到，當電腦配置低，頁面元素很多的時候，移動頁面是一件極其痛苦的事情，有一個好的方法可以解決這個問題：
在非輸入狀態下，按住鍵盤「空格」鍵，界面上的滑鼠「箭頭」會變成「手」，這樣就可以很輕鬆的拖動頁面了。
2.原地複製組件
在axure中「ctrl+c」「ctrl+v」複製粘貼，會錯位複製一個組件。怎麼解決這個問題呢：
用快捷鍵「ctrl+d」可以原地複製一個組件。
3.複製動作Copy Case如下圖可以複製動作，就不用一個個的設置這麼麻煩了。
4.直接將素材或控制項轉換為Dynamic Panel（層）
很實用，特別是在製作過程中發現有些東西還是放在層中展現更好的時候，以前得新建一個層，再把它們Copy進去，現在只需要右鍵需要轉換的素材或控制項Convert>>Convert To Dynamic Panel：
5.單選群組（Radio Button Group）
您可以一次選取多個Radio Button，按下滑鼠右鍵，並選擇「Edit Radio Button>>Assign Radio Group」來設定 Radio Button 的群組關係。如此一來，當這些Radio Button輸出到Prototype 時，就會形成真正的單選用戶介面。
6.添加定位錨點
類似於網易車庫中的定位功能，點擊某一字母，頁面就會定位到同一字母所在的區域：
用Axure怎麼來實現這個功能呢？
a)首先要用「image map region」在頁面上定位一個錨點，並命名為「定位錨點位置」：
b)然後再在點擊的地方加上鏈接
如上圖，勾選「scroll to image map region」，點擊下面的「image map region」，打開對話框：
如上圖，選擇「定位錨點位置」這一項，選中「scroll vertically only」垂直滾動，最後點擊確定。
設置完成，看看效果吧。
7.下拉框（droplist）的條件（condition）這裡講關於「條件」的簡單例子。通過編輯條件，可以表現一些更高級的交互效果。
這個例子的效果是，用戶切換左邊的下拉框選項，右邊的提示文字會隨之變化。當選中的是圖書時，文本框中的文字是「請輸入圖書名稱或作者」；當選中音樂時，文本框中的文字是「請輸入音樂名稱或歌手」：
a)首先在頁面上添加以下的組件，並給下拉框添加兩個選項「圖書」和「音樂」：
b)為組件命名
c)為下拉框添加動作
選擇「OnChange」
這時會彈出選擇交互行為的對話框，如下圖。選擇add condition：
在條件選擇的對話框中如下圖設置，設置完後點擊ok：
回到選擇交互行為的對話框，這時選擇下圖這一項：
點擊上圖文本框中的「Variable and Widget value equal to Value」，打開設置變數的對話框，如下圖設置：
d)重複以上操作，為下拉框添加case2，效果如下：
好了，製作完成，大家可以看效果了：
條件和變數這一塊的功能還需要多多探索，有些功能還是比較強大的。不過在實際的操作中，大多數的富交互效果是很少用到的。
8.恢復文件Recover filesRecover files功能可以幫你找到幾天前的文件版本。
點擊file>>Recover file，打開對話框，你可以查看最近的文檔了：
選擇recover就可以恢復當時的文檔。
9.利用Axure封裝視覺標準交互設計師一般都是出線框圖為最終產物，但是往往很多產品只需要利用現成的視覺標準就可以畫出原型。為了減少流程、降低溝通成本，所以我建議交互設計師在做類似產品的時候能夠直接利用現有視覺標準進行原型的搭建，一般很多交互設計師會用Photoshop來實現視覺原型，但是效率和不可交互性還是存在很多問題，所以需要有一套完成的封裝來執行視覺標準並且產生可交互的高保真原型。
關於Axure的封裝視覺標準，詳見文章《利用Axure封裝視覺標準》
推薦閱讀：
