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

24 評論 9025 瀏覽 31 收藏 5 分鐘

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

為什么要做這個東西?

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

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

把重復繁瑣的輸入工作變得更簡單!下面就是我們要的效果:

看似簡單,只需要設置計算比例不就好了嗎?(如果這樣想你就大錯特錯了?。?/p>

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

下面開始講計算器制作步驟:

1、原件準備

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

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

2、事件

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

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

(1)給比例按鈕添加事件

事件a:

  • 添加條件面板狀態處于寬度輸入時,如果輸入的是寬度,那么設置比例按鈕選中狀態為true;
  • 并將第二個面板高度輸入文本框設為(寬度輸入/比例);
  • 添加一個全局變量widthvalue,用來臨時存儲輸入的寬度值;
  • 將輸入的值設為空;
  • 獲取剛存儲的變量并設為第二個面板中寬度輸入的值

事件b:

  • 添加條件面板狀態處于高度輸入時,如果輸入的是高度,那么設置比例按鈕選中狀態為true;
  • 并將第二個面板寬度輸入文本框設為(高度輸入*比例);
  • 添加一個全局變量heightvalue,用來臨時存儲輸入的高度值;
  • 將輸入的值設為空;
  • 獲取剛存儲的變量并設為第二個面板中高度輸入的值

(2)給輸入框添加事件

面板狀態為寬度輸入時

  • 給寬度輸入文本框添加事件a

文本改變時

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

事件bcdefg……

獲取焦點時,設置面板狀態為寬度輸入(到這里寬度輸入文本框的事件就添加完了)。

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

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

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

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

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

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 求個原文件謝謝 1144270439

    來自河北 回復
  2. 求個源文件喲,謝謝大哥!578799969@qq.com

    來自重慶 回復
  3. “”很抱歉,你的作品《【內容很不錯,不過需要修改/補充部分內容,請查看正文】Axure 8.0 教程:打造一個千變萬化的自定義色板》,未通過審核。理由為文章觀點不夠豐富。“”以后不更了,很失望,還打算每天給大家準備一篇干貨,這審核。。。以后我的教程直接更在http://zack_w.oschina.io/tutorial/這里,不再在woshipm發表任何文章了

    來自重慶 回復
  4. 求個源文件喲 謝謝 ! 643099624@qq.com

    來自湖南 回復
  5. 能發一份源文件學習嗎?謝謝!475912082@qq.com

    來自廣東 回復
  6. 求源文件謝大哥,1005729178@qq.cpom

    來自北京 回復
  7. 求源文件謝大哥,1034823270@qq.cpom

    來自上海 回復
  8. 求一份源文件謝謝,525310118@qq.com

    回復
    1. 已發送到你的郵箱

      來自重慶 回復
  9. 求源文件學習謝謝!264522843@qq.com

    來自北京 回復
  10. 求源文件,謝謝 122629409@qq.com

    回復
    1. 已發送到你的郵箱

      來自重慶 回復
  11. 求源文件學習,謝謝,349554951@qq.com

    回復
    1. 已發送到你的郵箱

      來自重慶 回復
  12. 求源文件??郵箱15130846070@163.com

    回復
    1. 已發送到你的郵箱

      來自重慶 回復
  13. 求一份元件,謝謝樓主 2892135372@qq.com

    來自浙江 回復
  14. 大家需要注意如果下載demo的本地頁面沒生效可能是因為在你的axure中還需要添加那兩個全局變量

    來自重慶 回復
  15. 求份源文件學習,謝謝 879139034@qq.com

    來自湖北 回復
  16. 感覺進入了種子網站 ?

    來自廣東 回復
    1. – -是這種既視感嗎。。。是我的域名昵稱和文件命名太亂還是demo頁面太丑。。。

      來自重慶 回復
  17. 求源文件學習,謝謝,179447472@qq.com

    來自廣東 回復
    1. 已發送到你的郵箱

      來自重慶 回復
    2. 求源文件,謝謝 904071761@qq.com

      來自上海 回復