今天決定開(kāi)一個(gè)新坑宋欺，來(lái)講講產(chǎn)品經(jīng)理的大殺器——Axure轰豆。
眾所周知Axure是款原型設(shè)計(jì)工具，應(yīng)用十分廣泛齿诞。在國(guó)內(nèi)近年來(lái)也有一些創(chuàng)業(yè)公司在做原型設(shè)計(jì)工具酸休，如墨刀、mockplus等祷杈，主打簡(jiǎn)單斑司、易用。但是Axure依然是主流但汞。當(dāng)然了我并不是說(shuō)它們不好宿刮，其實(shí)我都有用過(guò)，對(duì)于新手來(lái)說(shuō)特占，確實(shí)是很容易上手糙置。但是我想提醒的一點(diǎn)是，很多“易用”其實(shí)是甜蜜陷阱是目，在這些主打簡(jiǎn)單易用的原型工具上谤饭，很多細(xì)節(jié)其實(shí)你沒(méi)法仔細(xì)思考其中的奧妙。很多效果都是工具給你封裝好的，你拖一拖就完事了揉抵，這也限制了你的創(chuàng)造力亡容。你只是在利用別人給你做好的輪子，你無(wú)法創(chuàng)造一個(gè)輪子冤今。國(guó)產(chǎn)的原型工具設(shè)計(jì)出發(fā)點(diǎn)和理念很好闺兢，便利的同時(shí)就是要犧牲一點(diǎn)創(chuàng)意與成長(zhǎng)空間。
目前的很多Axure教程都是按著特定的例子來(lái)的戏罢，標(biāo)題一般長(zhǎng)這樣：
Axure教程：做出模擬時(shí)鐘的效果屋谭？
Axure教程：如何做出滑動(dòng)解鎖的效果？
那我這個(gè)Axure之旅和Axure教程有啥區(qū)別呢龟糕？回到很久就以前就有人提到產(chǎn)品經(jīng)理的道與術(shù)桐磁，是的，借用一下這個(gè)概念讲岁。我想講的是Axure的道我擂。
在這系列文章中，你不會(huì)看到太多的具體操作缓艳，以及那些無(wú)數(shù)你看不懂的公式（許多作者在文章中給出一個(gè)公式然鵝沒(méi)有解釋?zhuān)粝乱荒樸卤鹊男“仔ＤΑ＃┰谶@里我想分享的是如何運(yùn)用工具去創(chuàng)造，將你腦子里的東西用可視化的形式展示出來(lái)阶淘。
本文閱讀有一點(diǎn)難度衙吩，建議新手可以收藏，學(xué)完Axure基本操作后再來(lái)看溪窒。
好分井，接下去進(jìn)入正題。
我把任意效果霉猛，都抽象為三層尺锚。
表現(xiàn)層：
就是這個(gè)效果（組件）長(zhǎng)什么樣，比如我們常見(jiàn)的淘寶五星打分惜浅，樣子就是這樣瘫辩。
邏輯層：
用一個(gè)經(jīng)典的句式來(lái)描述：if...then...
還是拿五星好評(píng)的例子舉例。
if我鼠標(biāo)移動(dòng)到星星上then星星變成黃色
if我鼠標(biāo)移出星星then所有星星都變成白色
......
數(shù)據(jù)層：
數(shù)據(jù)層是你想展示給用戶(hù)的東西坛悉。 表現(xiàn)層通過(guò)邏輯層連接數(shù)據(jù)層伐厌。
一般可以用一個(gè)公式表示：
數(shù)字=星星數(shù)
用一個(gè)圖表示就是：
有了這個(gè)的關(guān)系，我們就可以分析絕大部分效果裸影。
假設(shè)挣轨，我們要做一個(gè)這樣的效果，如圖：
分析如下：
表現(xiàn)層：
矩形框box
文字label
音量icon
滑竿dynamic panel
（動(dòng)態(tài)面板轩猩，凡是能夠拖動(dòng)卷扮、變化的東西荡澎，一般都是用這個(gè)組件做的晤锹，因?yàn)橹挥兴型蟿?dòng)事件摩幔。這點(diǎn)就需要一點(diǎn)使用經(jīng)驗(yàn)了。）
好鞭铆，我們照著在Axure里畫(huà)一個(gè)：
邏輯層：
if我拖動(dòng)滑塊then右邊的數(shù)字會(huì)跟著我的滑動(dòng)在0到100之間變化或衡。
if我拖動(dòng)滑塊到最左邊then無(wú)法繼續(xù)拖動(dòng)
if我拖動(dòng)滑塊到最右邊then無(wú)法繼續(xù)拖動(dòng)
這邊有一個(gè)拖動(dòng)的限制，這個(gè)我們可以通過(guò)限制動(dòng)態(tài)面板的邊界實(shí)現(xiàn)车遂。主要講下思路：
動(dòng)態(tài)面板的x軸數(shù)值不能小于滑軌的x軸封断。
動(dòng)態(tài)面板的x軸數(shù)值不能大于滑軌的x軸與滑軌長(zhǎng)度之和。
所以設(shè)置如下：
left 大于或等于[[LVAR1.x]]
left小于或等于[[LVAR1.x+LVAR1.width]]
其中LVAR1是本地變量舶担，指向滑軌澄港。
這里我們已經(jīng)可以實(shí)現(xiàn)滑軌移動(dòng)了。
這里我們觀察到當(dāng)滑塊在最左邊時(shí)候數(shù)字為0柄沮，在最右邊的時(shí)候數(shù)字為100，可以知道其實(shí)滑塊的位置占滑軌的百分比就是數(shù)字變動(dòng)的規(guī)律废岂。
那么數(shù)據(jù)層就是
數(shù)據(jù)層：
數(shù)字=100*滑塊占滑軌的百分比祖搓。
進(jìn)一步翻譯成Axure公式就是
數(shù)字=[[(((slider.x-slide.x)/slide.width)*100).toFixed(0)]]
解釋一下公式：
（滑塊的x值-滑軌的x值）/滑軌的寬度整個(gè)值保留0位小數(shù)
x.toFixed(y)函數(shù)，即對(duì)x保留y位小數(shù)湖苞。
至此拯欧，這個(gè)效果完美實(shí)現(xiàn)。
預(yù)覽
總結(jié)一下：
將你想達(dá)成的效果分拆為表現(xiàn)層财骨、邏輯層镐作、數(shù)據(jù)層，表現(xiàn)層通過(guò)拖拽組件實(shí)現(xiàn)隆箩，邏輯層通過(guò)事件觸發(fā)该贾，數(shù)據(jù)層通過(guò)Axure函數(shù)實(shí)現(xiàn)。
開(kāi)始你的Axure之旅吧捌臊！
別忘了點(diǎn)個(gè)喜歡喲～
