Axure之旅：不看教程，如何做出自己想要的任意效果？
今天決定開一個新坑，來講講產品經理的大殺器——Axure。
眾所周知Axure是款原型設計工具，應用十分廣泛。在國內近年來也有一些創業公司在做原型設計工具，如墨刀、mockplus等，主打簡單、易用。但是Axure依然是主流。當然了我並不是說它們不好，其實我都有用過，對於新手來說，確實是很容易上手。
但是我想提醒的一點是，很多“易用”其實是甜蜜陷阱，在這些主打簡單易用的原型工具上，很多細節其實你沒法仔細思考其中的奧妙。很多效果都是工具給你封裝好的，
目前的很多Axure教程都是按著特定的例子來的，標題一般長這樣：
Axure教程：做出類比時鐘的效果？Axure教程：如何做出滑動解鎖的效果？那我這個Axure之旅和Axure教程有啥區別呢？回到很久就以前就有人提到產品經理的道與術，
在這系列文章中，你不會看到太多的具體操作，以及那些無數你看不懂的公式（許多作者在文章中給出一個公式然鵝沒有解釋，留下一臉懵比的小白。）在這裡我想分享的是如何運用工具去創造，將你腦子裡的東西用視覺化的形式展示出來。
本文閱讀有一點難度，建議新手可以收藏，
好，接下去進入正題。
我把任意效果，都抽象為三層。
表現層：就是這個效果（元件）長什麼樣，比如我們常見的淘寶五星打分，樣子就是這樣。
邏輯層：用一個經典的句式來描述：if…then…
還是拿五星好評的例子舉例。
if我滑鼠移動到星星上then星星變成黃色
if我滑鼠移出星星then所有星星都變成白色 ……
資料層：資料層是你想展示給用戶的東西。 表現層通過邏輯層連接資料層。
一般可以用一個公式表示：
數字=星星數
用一個圖表示就是：
有了這個的關係，我們就可以分析絕大部分效果。
假設，我們要做一個這樣的效果，如圖：
分析如下：
表現層：
矩形框box文字label音量icon滑竿dynamic panel（動態面板，凡是能夠拖動、變化的東西，一般都是用這個元件做的，
好，我們照著在Axure裡畫一個：
邏輯層：
if我拖動滑塊then右邊的數字會跟著我的滑動在0到100之間變化。if我拖動滑塊到最左邊then無法繼續拖動if我拖動滑塊到最右邊then無法繼續拖動這邊有一個拖動的限制，這個我們可以通過限制動態面板的邊界實現。主要講下思路：
動態面板的x軸數值不能小於滑軌的x軸。動態面板的x軸數值不能大於滑軌的x軸與滑軌長度之和。所以設置如下：
left 大於或等於[[LVAR1.x]]
left小於或等於[[LVAR1.x+LVAR1.width]]
其中LVAR1是本地變數，指向滑軌。
這裡我們已經可以實現滑軌移動了。
這裡我們觀察到當滑塊在最左邊時候數字為0，在最右邊的時候數位為100，可以知道其實滑塊的位置占滑軌的百分比就是數字變動的規律。
那麼資料層就是：
數據層：
數字=100*滑塊占滑軌的百分比。
進一步翻譯層Axure公式就是：
數字=[[(((slider.x-slide.x)/slide.width)*100).toFixed(0)]]
解釋一下公式：
（滑塊的x值-滑軌的x值）/滑軌的寬度整個值保留0位小數
x.toFixed（y）函數，即對x保留y位小數。
至此，這個效果完美實現。
預覽
將你想達成的效果分拆為表現層、邏輯層、資料層，表現層通過拖拽元件實現，邏輯層通過事件觸發，資料層通過Axure函數實現。
開始你的Axure之旅吧！
本文由 @躚塵 原創發佈于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基於CC0協議
所以設置如下：
left 大於或等於[[LVAR1.x]]
left小於或等於[[LVAR1.x+LVAR1.width]]
其中LVAR1是本地變數，指向滑軌。
這裡我們已經可以實現滑軌移動了。
這裡我們觀察到當滑塊在最左邊時候數字為0，在最右邊的時候數位為100，可以知道其實滑塊的位置占滑軌的百分比就是數字變動的規律。
那麼資料層就是：
數據層：
數字=100*滑塊占滑軌的百分比。
進一步翻譯層Axure公式就是：
數字=[[(((slider.x-slide.x)/slide.width)*100).toFixed(0)]]
解釋一下公式：
（滑塊的x值-滑軌的x值）/滑軌的寬度整個值保留0位小數
x.toFixed（y）函數，即對x保留y位小數。
至此，這個效果完美實現。
預覽
將你想達成的效果分拆為表現層、邏輯層、資料層，表現層通過拖拽元件實現，邏輯層通過事件觸發，資料層通過Axure函數實現。
開始你的Axure之旅吧！
本文由 @躚塵 原創發佈于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基於CC0協議