目前主流的交互設(shè)計(jì)工具axure槐沼、Balsamiq Mockups曙蒸、justinmind，還有國(guó)產(chǎn)的墨刀岗钩、mockplus纽窟。這些軟件我都使用過，最后還是最常用axure兼吓。這篇文章?lián)Q個(gè)角度來說一下axure的優(yōu)點(diǎn)吧臂港。這一篇就當(dāng)做是我中繼器連載系列的第一篇了，文末有下載鏈接。
關(guān)于什么是原型审孽，原型畫到什么程度县袱，選什么軟件，畫高保真的必要性等等佑力，這些已經(jīng)被人寫爛的東西我就不寫了式散。就從axure的三巨頭動(dòng)態(tài)面板、函數(shù)打颤、中繼器來談一談自己的看法（先表達(dá)一下對(duì)國(guó)產(chǎn)軟件的支持和尊重暴拄，下文提到的內(nèi)容絕無對(duì)國(guó)人軟件的輕視）。
其實(shí)不論用什么原型軟件编饺，畫原型都只是一個(gè)拖拖拽拽的事乖篷，主要是選用合適的軟件時(shí)能夠從底層加深對(duì)產(chǎn)品的理解。
axure三巨頭對(duì)應(yīng)的產(chǎn)品表現(xiàn)：（整理至《用戶體驗(yàn)要素》）
一透且、動(dòng)態(tài)面板
之前看一位老師說過撕蔼，動(dòng)態(tài)面板你就可以把它理解為幻燈片：在這個(gè)面板內(nèi)可以添加很多張幻燈片，經(jīng)過不同的手勢(shì)（用例）來切換石蔗。
動(dòng)態(tài)面板結(jié)構(gòu)
1）在axure的右下方是整個(gè)產(chǎn)品的頁(yè)面結(jié)構(gòu)罕邀，像父級(jí)文件和子級(jí)文件一樣排列。
同級(jí)頁(yè)面間的并列關(guān)系
父子級(jí)頁(yè)面的包含關(guān)系
新頁(yè)面與彈出層的關(guān)系
這些在axure中都可以很好的體現(xiàn)养距。如果不用動(dòng)態(tài)面板而是用頁(yè)面跳轉(zhuǎn)的方式來畫也可以體現(xiàn)出來诉探。老K之前寫過畫原型的三種方式，有興趣的朋友可以自己查一下棍厌，優(yōu)劣勢(shì)各自選擇肾胯，如果加上頁(yè)面跳轉(zhuǎn)流程的話，我現(xiàn)在知道四種畫原型的方式耘纱。
2）動(dòng)態(tài)面板的命名
我經(jīng)尘炊牵看到有小伙伴不知道動(dòng)態(tài)面板和動(dòng)態(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ā)人員的對(duì)接炒事，改動(dòng)時(shí)快速查找臀栈。
3）動(dòng)態(tài)面板的功能
面板的功能很強(qiáng)大，axure常用的交互都能滿足挠乳，而且在畫原型時(shí)建議先將頁(yè)面元素排列畫好权薯，再統(tǒng)一裝入動(dòng)態(tài)面板中，再添加用例睡扬。千萬(wàn)不要畫一點(diǎn)裝一點(diǎn)盟蚣，相信我，我之前畫過一個(gè)50M的原型卖怜，每次F5都要點(diǎn)幾層才能看我想要的效果屎开。
在人機(jī)交互中有一個(gè)44px原理，蘋果公司認(rèn)為44px是人手指正常觸摸屏幕的最小點(diǎn)擊區(qū)域马靠。所以原件的尺寸大小奄抽，頁(yè)面停留時(shí)間都是產(chǎn)品人在拖拖拽拽之后可以稍微考慮一下的。比如設(shè)置圖品輪播時(shí)最佳輪播時(shí)間為3~5秒甩鳄，那你的產(chǎn)品到底是3秒還是5秒呢逞度？
小結(jié)：
建議在繪制原型時(shí)不要過多使用動(dòng)態(tài)面板（比如一個(gè)面板裝一個(gè)logo等），面板可以梳理出產(chǎn)品的整體架構(gòu)妙啃，濫用之后反而有礙觀瞻档泽。
不建議使用復(fù)雜的交互，既不是本職工作揖赴，還他媽費(fèi)時(shí)間茁瘦。我常用到的就是最基本的跳轉(zhuǎn)，滑動(dòng)储笑，彈出。
更不建議什么也不用圆恤，直接那別的產(chǎn)品的基本效果去告訴開發(fā)人員突倍。那不叫做產(chǎn)品腔稀，叫拼產(chǎn)品。
二羽历、函數(shù)
axure擁有豐富的函數(shù)焊虏，但是大部分時(shí)候是不會(huì)用到的。熟悉Axure的函數(shù)庫(kù)有以下幾個(gè)好處：
在考慮產(chǎn)品的細(xì)節(jié)時(shí)可以更周到秕磷，包括一些非常規(guī)操作的提示诵闭；
做一些復(fù)雜的交互；
給猿猿們交流時(shí)有逼格一點(diǎn)澎嚣；
1）比如有這樣一個(gè)表單需要填寫后提交疏尿，產(chǎn)品需要先考慮到這一段文本的長(zhǎng)度，假如用戶輸入的是“空格”呢易桃？
這就有了一個(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ù)叫榕，和很多變成語(yǔ)言接近。
三姊舵、中繼器
關(guān)于中繼器的用法不想多談了晰绎，woshipm里有很多教程。我只是談?wù)勎覍?duì)中繼器的一些看法括丁。
1）先看看axure中繼器和mysql數(shù)據(jù)庫(kù)的對(duì)比吧：
這是中繼器數(shù)據(jù)集：
這是mysql數(shù)據(jù)庫(kù)的一張數(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ù)的增刪改查唉窃，篩選耙饰，排序，分頁(yè)等等吧纹份，在之后的教程里苟跪，盡量都能為大家寫到。
4）對(duì)中繼器的一點(diǎn)看法
感覺長(zhǎng)期以來蔓涧，很多人對(duì)中繼器都有一些誤解件已。覺得沒用啦，覺得難啦蠢笋，說到底還是懶癌作祟吧拨齐。
我上面說到了中繼器數(shù)據(jù)集和mysql數(shù)據(jù)庫(kù)的關(guān)系，其實(shí)是想告訴大家昨寞，在使用中繼器的過程中可以對(duì)頁(yè)面的信息屬性和內(nèi)容有更清晰的判斷瞻惋。
比如：我之前做一個(gè)商城的時(shí)候涉及到商品的價(jià)格，應(yīng)該使用“￥5”還是“5元”援岩，小數(shù)點(diǎn)保留幾位小數(shù)這樣的問題歼狼。如果使用中繼器來按字段輸入的話，頁(yè)面的每一個(gè)組成元素都應(yīng)該被考慮到享怀∮鸱澹“字符串的長(zhǎng)度”“超過長(zhǎng)度的顯示樣式”“頁(yè)面信息的排列次序”等。
5）中繼器和MVC的一點(diǎn)小關(guān)系
這個(gè)是我自己發(fā)現(xiàn)的添瓷，有興趣的可以問問猿猿們MVC的一些思想梅屉。我把這個(gè)命名為Axure的狹義MVC吧。
中繼器的三步操作 1.排列原件并命名——2.輸入數(shù)據(jù)到數(shù)據(jù)集——3.賦值到原件鳞贷，頁(yè)面顯示數(shù)據(jù)
對(duì)應(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)到該商品的詳情頁(yè)迅箩。這是看似笨重的中繼器很靈光的一面溉愁。
以上就是我對(duì)Axure三巨頭的一點(diǎn)看法，提到的關(guān)于axure優(yōu)點(diǎn)饲趋，頁(yè)就是國(guó)產(chǎn)的一些原型軟件我個(gè)人不太喜歡的地方叉钥。當(dāng)然axure也有他的缺點(diǎn)罢缸，比如元件庫(kù)單一，在線瀏覽不方便等投队，但這些不太影響我日常的工作。在心里支持國(guó)產(chǎn)軟件爵川，小伙伴們根據(jù)自己的需求選擇吧敷鸦。
這是上面中繼器的基礎(chǔ)操作做的商品列表頁(yè)
鏈接: http://pan.baidu.com/s/1skG9cYD 密碼: k85a
相關(guān)文章：
wx：chenhot1寝贡，歡迎交流扒披。
