http://uedc.163.com/2248.html

前言

什么是原型呢？????

產品原型簡單的說就是產品設計成形之前的一個簡單框架，對網站來講，就是將頁面模塊、元素進行粗放式的排版和布局，深入一些，還會加入一些交互性的元素，使其更加具體、形象和生動。????
就我個人而言，目前使用頻率最多，最高效，交互效果最好的原型工具是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 files

Recover files功能可以幫你找到幾天前的文件版本。

點擊file>>Recover file，打開對話框，你可以查看最近的文檔了：

選擇recover就可以恢復當時的文檔。

9.利用Axure封裝視覺標準

看到的折折熊的一篇博客。

交互設計師一般都是出線框圖為最終產物，但是往往很多產品只需要利用現成的視覺標準就可以畫出原型。為了減少流程、降低溝通成本，所以我建議交互設計師在做類似產品的時候能夠直接利用現有視覺標準進行原型的搭建，一般很多交互設計師會用Photoshop來實現視覺原型，但是效率和不可交互性還是存在很多問題，所以需要有一套完成的封裝來執行視覺標準并且產生可交互的高保真原型。

具體請查看原文章：http://www.jojobox.cn/blog/article.asp?id=133

http://www.woshipm.com/tag/axure

人人都是產品經理

總結

以上是生活随笔為你收集整理的AXURE在原型设计中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。