三、完善原型

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

如何完善原型

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

②.增加說明    

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

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

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

③. 為頁面編號    

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

用途

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

應(yīng)注意的幾點

①.不要過于追求技術(shù)表現(xiàn)    

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

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

總結(jié)

Axure其實只是一種交互工具而已，交互設(shè)計最重要的還是想法，工具只是來幫你表現(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ù)制動作Copy Case

如下圖可以復(fù)制動作，就不用一個個的設(shè)置這么麻煩了。

4.直接將素材或控件轉(zhuǎn)換為Dynamic Panel（層）

很實用，特別是在制作過程中發(fā)現(xiàn)有些東西還是放在層中展現(xiàn)更好的時候，以前得新建一個層，再把它們Copy進去，現(xiàn)在只需要右鍵需要轉(zhuǎn)換的素材或控件Convert>>Convert To Dynamic Panel：

5.單選群組（Radio Button Group）

您可以一次選取多個Radio Button，按下鼠標(biāo)右鍵，并選擇“Edit Radio Button>>;Assign Radio Group”來設(shè)定 Radio Button 的群組關(guān)系。如此一來，當(dāng)這些Radio Button輸出到Prototype 時，就會形成真正的單選用戶接口。

6.添加定位錨點

類似于中的定位功能，點擊某一字母，頁面就會定位到同一字母所在的區(qū)域：

用Axure怎么來實現(xiàn)這個功能呢？

a) 首先要用“image map region”在頁面上定位一個錨點，并命名為“定位錨點位置”：

b) 然后再在點擊的地方加上鏈接

如上圖，勾選“scroll to image map region”，點擊下面的“image map region”，打開對話框：

如上圖，選擇“定位錨點位置”這一項，選中“scroll vertically only”垂直滾動，最后點擊確定。

設(shè)置完成，看看效果吧。

7.下拉框（droplist）的條件（condition）

這里講關(guān)于“條件”的簡單例子。通過編輯條件，可以表現(xiàn)一些更高級的交互效果。

這個例子的效果是，用戶切換左邊的下拉框選項，右邊的提示文字會隨之變化。當(dāng)選中的是圖書時，文本框中的文字是“請輸入圖書名稱或作者”；當(dāng)選中音樂時，文本框中的文字是“請輸入音樂名稱或歌手”：

a) 首先在頁面上添加以下的組件，并給下拉框添加兩個選項“圖書”和“音樂”：

b) 為組件命名

c) 為下拉框添加動作

選擇“OnChange”

這時會彈出選擇交互行為的對話框，如下圖。選擇add condition：

在條件選擇的對話框中如下圖設(shè)置，設(shè)置完后點擊ok：

回到選擇交互行為的對話框，這時選擇下圖這一項：

點擊上圖文本框中的“Variable and Widget value equal to Value”，打開設(shè)置變量的對話框，如下圖設(shè)置：

d)重復(fù)以上操作，為下拉框添加case2，效果如下：

好了，制作完成，大家可以看效果了：

條件和變量這一塊的功能還需要多多探索，有些功能還是比較強大的。不過在實際的操作中，大多數(shù)的富交互效果是很少用到的。

8.恢復(fù)文件Recover files

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

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

選擇recover就可以恢復(fù)當(dāng)時的文檔。

9.利用Axure封裝視覺標(biāo)準(zhǔn)

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

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

本文轉(zhuǎn)發(fā)自