三、完善原型

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

如何完善原型

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

②.增加說(shuō)明    

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

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

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

③. 為頁(yè)面編號(hào)    

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

用途

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

應(yīng)注意的幾點(diǎn)

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

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

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

總結(jié)

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

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

1.快速移動(dòng)頁(yè)面

大家有沒(méi)有感覺(jué)到，當(dāng)電腦配置低，頁(yè)面元素很多的時(shí)候，移動(dòng)頁(yè)面是一件極其痛苦的事情，有一個(gè)好的方法可以解決這個(gè)問(wèn)題：

在非輸入狀態(tài)下，按住鍵盤(pán)“空格”鍵，界面上的鼠標(biāo)“箭頭”會(huì)變成“手”，這樣就可以很輕松的拖動(dòng)頁(yè)面了。

2.原地復(fù)制組件

在axure中“ctrl+c”“ctrl+v”復(fù)制粘貼，會(huì)錯(cuò)位復(fù)制一個(gè)組件。怎么解決這個(gè)問(wèn)題呢：

用快捷鍵“ctrl+d”可以原地復(fù)制一個(gè)組件。

3.復(fù)制動(dòng)作Copy Case

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

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

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

5.單選群組（Radio Button Group）

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

6.添加定位錨點(diǎn)

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

用Axure怎么來(lái)實(shí)現(xiàn)這個(gè)功能呢？

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

b) 然后再在點(diǎn)擊的地方加上鏈接

如上圖，勾選“scroll to image map region”，點(diǎn)擊下面的“image map region”，打開(kāi)對(duì)話框：

如上圖，選擇“定位錨點(diǎn)位置”這一項(xiàng)，選中“scroll vertically only”垂直滾動(dòng)，最后點(diǎn)擊確定。

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

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

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

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

a) 首先在頁(yè)面上添加以下的組件，并給下拉框添加兩個(gè)選項(xiàng)“圖書(shū)”和“音樂(lè)”：

b) 為組件命名

c) 為下拉框添加動(dòng)作

選擇“OnChange”

這時(shí)會(huì)彈出選擇交互行為的對(duì)話框，如下圖。選擇add condition：

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

回到選擇交互行為的對(duì)話框，這時(shí)選擇下圖這一項(xiàng)：

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

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

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

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

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

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

點(diǎn)擊file>>Recover file，打開(kāi)對(duì)話框，你可以查看最近的文檔了：

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

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

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

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

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