用Axure 8.0打造自定義比例計算器

日常設計中，版式設計隨時會遇到需要計算板塊比例或圖形比例的情況，打造一個屬於自己的計算器，方便隨時調用。把重複繁瑣的輸入工作變得更簡單！

為什麼要做這個東西？

一天在瀏覽設計網站的過程中偶然發現一個」黃金比例計算器「，我想能不能用Axure自己做一個？

日常設計中，版式設計隨時會遇到需要計算板塊比例或圖形比例的情況，打造一個屬於自己的計算器，方便隨時調用。

把重複繁瑣的輸入工作變得更簡單！下面就是我們要的效果：

看似簡單，只需要設置計算比例不就好了嗎？（如果這樣想你就大錯特錯了！）

實踐出真知！不信你自己做做，一分鐘做出來算我輸……

下面開始講計算器製作步驟：

1、原件準備

• 比例按鈕：3/4比例，白銀比例，黃金比例，鉑金比例、青銅比例
• 動態面板：包含寬度輸入、高度輸入兩個（目的是區分不同輸入狀態）

ps：養成創建元件時就命名的好習慣會更省事兒，教程裡的元件命名我也不一一去說了，完全抄不思考地作業，跟鹹魚幹有什麼區別，下面我只講邏輯過程

2、事件

設第一個面板為寬度輸入，第二個為高度輸入

並給按鈕統一設置選項組名稱

（1）給比例按鈕添加事件

事件a：

• 添加條件面板狀態處於寬度輸入時，如果輸入的是寬度，那麼設置比例按鈕選中狀態為true；
• 並將第二個面板高度輸入文本框設為（寬度輸入/比例）；
• 添加一個全局變量widthvalue，用來臨時存儲輸入的寬度值；
• 將輸入的值設為空；
• 獲取剛存儲的變量並設為第二個面板中寬度輸入的值

事件b：

• 添加條件面板狀態處於高度輸入時，如果輸入的是高度，那麼設置比例按鈕選中狀態為true；
• 並將第二個面板寬度輸入文本框設為（高度輸入*比例）；
• 添加一個全局變量heightvalue，用來臨時存儲輸入的高度值；
• 將輸入的值設為空；
• 獲取剛存儲的變量並設為第二個面板中高度輸入的值

（2）給輸入框添加事件

面板狀態為寬度輸入時

文本改變時

• 添加條件如果比例按鈕選中狀態為true，
• 將寬度輸入的值臨時存儲於全局變量widthvalue中;
• 等待200ms;
• 設置高度文本為（widthvalue/按鈕比例）；
• 設置第第二個面板（高度輸入）高度輸入文本框為（widthvalue/按鈕比例）。

事件bcdefg……

獲取焦點時，設置面板狀態為寬度輸入（到這裡寬度輸入文本框的事件就添加完了）。

高度輸入文本框：獲取焦點時，設置面板狀態為高度輸入。

面板狀態為高度輸入時，複製事件，將寬度與高度相關數據調換就好了。

沒看懂不要緊，花點時間理清邏輯就做出來了

http://zack_w.oschina.io/ratiocalculator/#g=1&p=ratiocalculator

確實需要源文件的童鞋請留言吧~

 

本文由 @Vizovanver 原創發布於人人都是產品經理。未經許可，禁止轉載。

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}