原文：http://www.woshipm.com/rp/416782.html

目前主流的交互設(shè)計(jì)工具axure、Balsamiq Mockups、justinmind，還有國產(chǎn)的墨刀、mockplus。這些軟件我都使用過，最后還是最常用axure。這篇文章?lián)Q個(gè)角度來說一下axure的優(yōu)點(diǎn)吧。這一篇就當(dāng)做是我中繼器連載系列的第一篇了，文末有下載鏈接。

關(guān)于什么是原型，原型畫到什么程度，選什么軟件，畫高保真的必要性等等，這些已經(jīng)被人寫爛的東西我就不寫了。就從axure的三巨頭動態(tài)面板、函數(shù)、中繼器來談一談自己的看法（先表達(dá)一下對國產(chǎn)軟件的支持和尊重，下文提到的內(nèi)容絕無對國人軟件的輕視）。

其實(shí)不論用什么原型軟件，畫原型都只是一個(gè)拖拖拽拽的事，主要是選用合適的軟件時(shí)能夠從底層加深對產(chǎn)品的理解。

axure三巨頭對應(yīng)的產(chǎn)品表現(xiàn)：（整理至《用戶體驗(yàn)要素》）

一、動態(tài)面板

之前看一位老師說過，動態(tài)面板你就可以把它理解為幻燈片：在這個(gè)面板內(nèi)可以添加很多張幻燈片，經(jīng)過不同的手勢（用例）來切換。

動態(tài)面板結(jié)構(gòu)

1）在axure的右下方是整個(gè)產(chǎn)品的頁面結(jié)構(gòu)，像父級文件和子級文件一樣排列。

• 同級頁面間的并列關(guān)系

• 父子級頁面的包含關(guān)系

• 新頁面與彈出層的關(guān)系

這些在axure中都可以很好的體現(xiàn)。如果不用動態(tài)面板而是用頁面跳轉(zhuǎn)的方式來畫也可以體現(xiàn)出來。老K之前寫過畫原型的三種方式，有興趣的朋友可以自己查一下，優(yōu)劣勢各自選擇，如果加上頁面跳轉(zhuǎn)流程的話，我現(xiàn)在知道四種畫原型的方式。

2）動態(tài)面板的命名

我經(jīng)?？吹接行』锇椴恢绖討B(tài)面板和動態(tài)面板的命名方式，之前看一個(gè)段子：一個(gè)產(chǎn)品汪接手一個(gè)項(xiàng)目，之前的妹子畫原型是用水果和蔬菜命名的，讓人哭笑不得。這里可以推薦給大家一種命名方式，大駝峰，小駝峰，下劃線：

1、小駝峰式命名法（lower camel case）：

第一個(gè)單字以小寫字母開始，第二個(gè)單字的首字母大寫。例如：firstName、lastName。

2、大駝峰式命名法（upper camel case）：

每一個(gè)單字的首字母都采用大寫字母，例如：FirstName、LastName、CamelCase，也被稱為 Pascal 命名法。變種：StudlyCaps，是“駝峰式大小寫”的變種。

3、下劃線命名，例如：first_name,last_name

良好的命名方式一方面方便自己修改，另一方面有利于和開發(fā)人員的對接，改動時(shí)快速查找。

3）動態(tài)面板的功能

面板的功能很強(qiáng)大，axure常用的交互都能滿足，而且在畫原型時(shí)建議先將頁面元素排列畫好，再統(tǒng)一裝入動態(tài)面板中，再添加用例。千萬不要畫一點(diǎn)裝一點(diǎn)，相信我，我之前畫過一個(gè)50M的原型，每次F5都要點(diǎn)幾層才能看我想要的效果。

在人機(jī)交互中有一個(gè)44px原理，蘋果公司認(rèn)為44px是人手指正常觸摸屏幕的最小點(diǎn)擊區(qū)域。所以原件的尺寸大小，頁面停留時(shí)間都是產(chǎn)品人在拖拖拽拽之后可以稍微考慮一下的。比如設(shè)置圖品輪播時(shí)最佳輪播時(shí)間為3~5秒，那你的產(chǎn)品到底是3秒還是5秒呢？

小結(jié)：

1. 建議在繪制原型時(shí)不要過多使用動態(tài)面板（比如一個(gè)面板裝一個(gè)logo等），面板可以梳理出產(chǎn)品的整體架構(gòu)，濫用之后反而有礙觀瞻。

2. 不建議使用復(fù)雜的交互，既不是本職工作，還他媽費(fèi)時(shí)間。我常用到的就是最基本的跳轉(zhuǎn)，滑動，彈出。

3. 更不建議什么也不用，直接那別的產(chǎn)品的基本效果去告訴開發(fā)人員。那不叫做產(chǎn)品，叫拼產(chǎn)品。

二、函數(shù)

axure擁有豐富的函數(shù)，但是大部分時(shí)候是不會用到的。熟悉Axure的函數(shù)庫有以下幾個(gè)好處：

1. 在考慮產(chǎn)品的細(xì)節(jié)時(shí)可以更周到，包括一些非常規(guī)操作的提示；

2. 做一些復(fù)雜的交互；

3. 給猿猿們交流時(shí)有逼格一點(diǎn)；

1）比如有這樣一個(gè)表單需要填寫后提交，產(chǎn)品需要先考慮到這一段文本的長度，假如用戶輸入的是“空格”呢？

這就有了一個(gè)函數(shù)trim();(去除字符串兩端空格。)

在高保真中Axure的函數(shù)有強(qiáng)力的作用，而且我一直覺得把低保真上個(gè)色，換個(gè)樣式的根本不算高保真。真正的高保真應(yīng)該是把判定、數(shù)據(jù)傳遞等層面的東西都能模擬出來。

說幾個(gè)我常用的函數(shù)吧：

• toFixed：指定數(shù)字的小數(shù)點(diǎn)位數(shù)

• Widget.Width：獲取元件的寬度

• ceil（）：向上取整

順便貼一個(gè)axure的函數(shù)速查表吧，用的時(shí)候知道查就行了。

百度云：http://pan.baidu.com/s/1hr6ccug 密碼: drdd

小結(jié)一下：函數(shù)用到的時(shí)候不太多，但是是產(chǎn)品人往產(chǎn)品里挖掘的一個(gè)好途徑。建議沒事的時(shí)候看看函數(shù)表，用的時(shí)候知道可以畫就行了。而且axure的函數(shù)基本是通用函數(shù)，和很多變成語言接近。

三、中繼器

關(guān)于中繼器的用法不想多談了，woshipm里有很多教程。我只是談?wù)勎覍χ欣^器的一些看法。

1）先看看axure中繼器和mysql數(shù)據(jù)庫的對比吧：

這是中繼器數(shù)據(jù)集：

這是mysql數(shù)據(jù)庫的一張數(shù)據(jù)表：

其實(shí)結(jié)構(gòu)是一樣的，表的縱向?yàn)橛涗洈?shù)，橫向?yàn)樽侄螖?shù)。那他有什么暖用呢？

2）中繼器的基礎(chǔ)用法

（上圖包含三個(gè)東東：中繼器的顯示接面，右上角賦值操作，下面填充數(shù)據(jù)的數(shù)據(jù)集）

中繼器內(nèi)的原件分別命名，擺放好，讓后填充數(shù)據(jù)，賦值，就能顯示出來了。這就是中繼器的基礎(chǔ)操作。

3）復(fù)雜一些的就是數(shù)據(jù)的增刪改查，篩選，排序，分頁等等吧，在之后的教程里，盡量都能為大家寫到。

4）對中繼器的一點(diǎn)看法

感覺長期以來，很多人對中繼器都有一些誤解。覺得沒用啦，覺得難啦，說到底還是懶癌作祟吧。

我上面說到了中繼器數(shù)據(jù)集和mysql數(shù)據(jù)庫的關(guān)系，其實(shí)是想告訴大家，在使用中繼器的過程中可以對頁面的信息屬性和內(nèi)容有更清晰的判斷。

比如：我之前做一個(gè)商城的時(shí)候涉及到商品的價(jià)格，應(yīng)該使用“￥5”還是“5元”，小數(shù)點(diǎn)保留幾位小數(shù)這樣的問題。如果使用中繼器來按字段輸入的話，頁面的每一個(gè)組成元素都應(yīng)該被考慮到。“字符串的長度”“超過長度的顯示樣式”“頁面信息的排列次序”等。

5）中繼器和MVC的一點(diǎn)小關(guān)系

這個(gè)是我自己發(fā)現(xiàn)的，有興趣的可以問問猿猿們MVC的一些思想。我把這個(gè)命名為Axure的狹義MVC吧。

中繼器的三步操作 1.排列原件并命名——2.輸入數(shù)據(jù)到數(shù)據(jù)集——3.賦值到原件，頁面顯示數(shù)據(jù)

對應(yīng)了視圖（view）——模型（model）——控制器（controller），優(yōu)點(diǎn)就是你在中繼器內(nèi)排列原件時(shí)更多的注意力需要集中在各個(gè)原件的布局方式，填充數(shù)據(jù)時(shí)更多考慮數(shù)據(jù)的結(jié)構(gòu)。

小結(jié)一下：中繼器適合于多次重復(fù)的單元，并且適合做數(shù)據(jù)的傳遞。就像我上面的商品列表一樣，也許你可以復(fù)制很多個(gè)，然后分別貼圖，但是中繼器可以做到點(diǎn)擊不同的商品跳轉(zhuǎn)到該商品的詳情頁。這是看似笨重的中繼器很靈光的一面。

以上就是我對Axure三巨頭的一點(diǎn)看法，提到的關(guān)于axure優(yōu)點(diǎn)，頁就是國產(chǎn)的一些原型軟件我個(gè)人不太喜歡的地方。當(dāng)然axure也有他的缺點(diǎn)，比如元件庫單一，在線瀏覽不方便等，但這些不太影響我日常的工作。在心里支持國產(chǎn)軟件，小伙伴們根據(jù)自己的需求選擇吧。

這是上面中繼器的基礎(chǔ)操作做的商品列表頁

鏈接: http://pan.baidu.com/s/1skG9cYD 密碼: k85a

作者：浩程君，簡書：七光年。

本文由 @浩程君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理