AXURE在原型設(shè)計(jì)中的應(yīng)用

AXURE在原型設(shè)計(jì)中的應(yīng)用前言什么是原型呢？

產(chǎn)品原型簡單的說就是產(chǎn)品設(shè)計(jì)成形之前的一個簡單框架，對網(wǎng)站來講，就是將頁面模塊、元素進(jìn)行粗放式的排版和布局，深入一些，還會加入一些交互性的元素，使其更加具體、形象和生動。

就我個人而言，目前使用頻率最多，最高效，交互效果最好的原型工具是axure。今天給大家介紹一些我在工作中使用axure的經(jīng)驗(yàn)。主要從交互設(shè)計(jì)中涉及的三個主要步驟進(jìn)行說明：

一、主要頁面原型在進(jìn)行主要頁面原型設(shè)計(jì)之前，交互設(shè)計(jì)師需要：

一份主要的任務(wù)流程圖（此處指的不是“業(yè)務(wù)邏輯流程圖”，而是根據(jù)“業(yè)務(wù)邏輯”產(chǎn)生的“任務(wù)流程”。任務(wù)流程可由產(chǎn)品或是交互出，根據(jù)各個公司或項(xiàng)目的具體情況而定。）一份主要功能列表（一般由產(chǎn)品經(jīng)理提供）網(wǎng)站信息架構(gòu)（信息架構(gòu)在一些公司是需要交互設(shè)計(jì)師來完成的）對于前期調(diào)研結(jié)果的理解如何做“主要頁面原型”1.在建立項(xiàng)目的初期就開始定義Master

項(xiàng)目一開始啟動，如果可以稍微掌握哪些區(qū)塊未來將是共享區(qū)塊，那么就開始建立Master，比如網(wǎng)站的Header/Footer/導(dǎo)覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節(jié)省其它頁面設(shè)計(jì)的重復(fù)工作。

Master的定義

2.可以應(yīng)用一些AxureRPlibrary

網(wǎng)上有很多資源，也可以自己制作適合產(chǎn)品的library。

網(wǎng)上的library資源

3.根據(jù)“任務(wù)流程圖”，“功能列表”將主要的頁面原型制作出來。

這時可以包括一些必要的交互動作。一些詳細(xì)的，比如出錯提示等交互可以不用考慮。

主要的頁面列表

用途：主要的頁面原型可以用于產(chǎn)品初期的討論會、測試以及產(chǎn)品介紹會。

應(yīng)注意幾點(diǎn)：1.不要加入視覺設(shè)計(jì)的元素。著眼于大局，不要糾結(jié)細(xì)枝末節(jié)

在制作原型的初期請把所有精力都放在流程的優(yōu)化和布局設(shè)計(jì)上面吧，不要把時間浪費(fèi)在視覺設(shè)計(jì)上，那樣絕對是得不償失。

因?yàn)槲覀兊脑头桨高€沒有最終通過，肯定要通過多次迭代才能確定方案，太多的視覺設(shè)計(jì)就是浪費(fèi)時間；

再者，如果原型做的十分逼真，在產(chǎn)品討論會上，視覺的元素會很快抓住大家的眼球，到時就會有領(lǐng)導(dǎo)來質(zhì)疑你的界面是不是該換成藍(lán)色，按鈕是不是再精致一些這樣的問題。沒有人會專注于你的交互設(shè)計(jì)了。

2.最好在使用axure工具前，用紙和筆畫一些紙面原型，整理一下思路。

3.這個過程應(yīng)是快速的，迭代的。

二、頁面流程圖在確定主要頁面之后，我們可以開始細(xì)化頁面流程了。頁面流程圖有利于向大家展示自己的想法，也有利于思路的整理。畢竟axure上面的交互點(diǎn)是散的，通過頁面流程圖，我們可以整理所有的頁面上的交互行為，避免遺漏；在向他人展示的時候，也可以一目了然的看出需要的操作步驟是多少。

我傾向于將主要任務(wù)列出來，然后畫出所有任務(wù)的頁面流程圖。

頁面流程圖

頁面流程圖要素由于axure中沒有斜線，在表現(xiàn)流程的時候有些受限。我會在流程圖中表現(xiàn)以下幾點(diǎn)：

操作步驟的名稱和編號

開始和結(jié)束

頁面的名字點(diǎn)擊的位置

操作說明和箭頭

步驟序號

用途可以與他人溝通流程、整理思路細(xì)化流程。

應(yīng)注意的幾點(diǎn)如果項(xiàng)目時間有限，頁面流程可以畫在紙上。但還是建議在交互設(shè)計(jì)保留這一步。為了減少溝通成本，在繪制頁面流程圖時，最好有一定的規(guī)范和標(biāo)準(zhǔn)。

三、完善原型頁面的主要頁面和頁面流程確定之后，就可以完善原型了。這時可以叫上產(chǎn)品部的同事一起來完成原型的細(xì)節(jié)工作。

如何完善原型1.按照頁面流程中所考慮的交互過程，體現(xiàn)在原型上面。出錯，提示等交互細(xì)節(jié)也應(yīng)有體現(xiàn)。這時你可能會用到變量、層等高級axure技巧。

點(diǎn)擊定時操作彈出層的操作

2.增加說明

選中某個控件，在右邊區(qū)域可以為此控件增加說明。

增加描述

增加描述后的前臺頁面，點(diǎn)擊黃色圖標(biāo)顯示說明提示層

如果對于說明區(qū)域的屬性不滿意，可以修改屬性：

修改屬性

不過這種增加描述的方式可能會干擾整個頁面，很容易讓瀏覽者以為是一個頁面元素。也可以采取一種原始的方法為控件增加說明文字：

文字補(bǔ)充說明

3.為頁面編號

當(dāng)原型不再需要修改時，我們需要為原型頁面編號，這樣有利于與視覺設(shè)計(jì)師、前端溝通。

用途測試、產(chǎn)品需求文檔編寫參考、視覺設(shè)計(jì)參考、前端設(shè)計(jì)參考等。

應(yīng)注意的幾點(diǎn)1.不要過于追求技術(shù)表現(xiàn)

原型有些交互效果做出來會很花費(fèi)時間，我建議不要過于追求技術(shù)表現(xiàn)效果，可以用些文字來說明交互效果。Axure軟件的初衷是快速的設(shè)計(jì)原型，如果在一些技術(shù)方面交互設(shè)計(jì)師花費(fèi)很多時間的話，就有些顧此失彼了。還是把真實(shí)的效果交給前端去實(shí)現(xiàn)吧。

2.為了減少溝通成本，在完善原型時，最好有一定的規(guī)范和標(biāo)準(zhǔn)。

總結(jié)Axure其實(shí)只是一種交互工具而已，交互設(shè)計(jì)最重要的還是想法，工具只是來幫你表現(xiàn)想法的。不必過于追求技術(shù)，不必過于追求視覺表現(xiàn)。我們在把握好整個產(chǎn)品方向的同時，應(yīng)專注于交互流程、頁面內(nèi)交互、布局結(jié)構(gòu)的創(chuàng)新和優(yōu)化。

下面給大家介紹一些我工作之中記錄下來的axure技巧。

1.快速移動頁面大家有沒有感覺到，當(dāng)電腦配置低，頁面元素很多的時候，移動頁面是一件極其痛苦的事情，有一個好的方法可以解決這個問題：在非輸入狀態(tài)下，按住鍵盤“空格”鍵，界面上的鼠標(biāo)“箭頭”會變成“手”，這樣就可以很輕松的拖動頁面了。2.原地復(fù)制組件在axure中“ctrl+c”“ctrl+v”復(fù)制粘貼，會錯位復(fù)制一個組件。怎么解決這個問題呢：用快捷鍵“ctrl+d”可以原地復(fù)制一個組件。3.復(fù)制動作CopyCase如下圖可以復(fù)制動作，就不用一個個的設(shè)置這么麻煩了。4.直接將素材或控件轉(zhuǎn)換為DynamicPanel（層）很實(shí)用，特別是在制作過程中發(fā)現(xiàn)有些東西還是放在層中展現(xiàn)更好的時候，以前得新建一個層，再把它們Copy進(jìn)去，現(xiàn)在只需要右鍵需要轉(zhuǎn)換的素材或控件Convert>>ConvertToDynamicPanel：5.單選群組（RadioButtonGroup）您可以一次選取多個RadioButton，按下鼠標(biāo)右鍵，并選擇“EditRadioButton>>AssignRadioGroup”來設(shè)定RadioButton的群組關(guān)系。如此一來，當(dāng)這些RadioButton輸出到Prototype時，就會形成真正的單選用戶接口。6.添加定位錨點(diǎn)類似于網(wǎng)易車庫中的定位功能，點(diǎn)擊某一字母，頁面就會定位到同一字母所在的區(qū)域：用Axure怎么來實(shí)現(xiàn)這個功能呢？a)首先要用“imagemapregion”在頁面上定位一個錨點(diǎn)，并命名為“定位錨點(diǎn)位置”：b)然后再在點(diǎn)擊的地方加上鏈接如上圖，勾選“scrolltoimagemapregion”，點(diǎn)擊下面的“imagemapregion”，打開對話框：如上圖，選擇“定位錨點(diǎn)位置”這一項(xiàng)，選中“scrollverticallyonly”垂直滾動，最后點(diǎn)擊確定。設(shè)置完成，看看效果吧。7.下拉框（droplist）的條件（condition）這里講關(guān)于“條件”的簡單例子。通過編輯條件，可以表現(xiàn)一些更高級的交互效果。這個例子的效果是，用戶切換左邊的下拉框選項(xiàng)，右邊的提示文字會隨之變化。當(dāng)選中的是圖書時，文本框中的文字是“請輸入圖書名稱或作者”；當(dāng)選中音樂時，文本框中的文字是“請輸入音樂名稱或歌手”：a)首先在頁面上添加以下的組件，并給下拉框添加兩個選項(xiàng)“圖書”和“音樂”：

b)為組件命名c)為下拉框添加動作選擇“OnChange”這時會彈出選擇交互行為的對話框，如下圖。選擇addcondition：在條件選擇的對話框中如下圖設(shè)置，設(shè)置完后點(diǎn)擊ok：回到選擇交互行為的對話框，這時選擇下圖這一項(xiàng)：點(diǎn)擊上圖文本框中的“VariableandWidgetvalueequaltoValue”，打開設(shè)置變量的對話框，如下圖設(shè)置：d)重復(fù)以上操作，為下拉框添加case2，效果如下：好了，制作完成，大家可以看效果了：條件和變量這一塊的功能還需要多多探索，有些功能還是比較強(qiáng)大的。不過在實(shí)際的操作中，大多數(shù)的富交互效果是很少用到的。8.恢復(fù)文件RecoverfilesRecoverfiles功能可以幫你找到幾天前的文件版本。點(diǎn)擊file>>Recoverfile，打開對話框，你可以查看最近的文檔了：選擇recov