用Axure 8.0打造自定義比例計算器
日常設計中,版式設計隨時會遇到需要計算板塊比例或圖形比例的情況,打造一個屬于自己的計算器,方便隨時調用。把重復繁瑣的輸入工作變得更簡單!
為什么要做這個東西?
一天在瀏覽設計網站的過程中偶然發現一個”黃金比例計算器“,我想能不能用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?原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
求個原文件謝謝 1144270439
求個源文件喲,謝謝大哥!578799969@qq.com
“”很抱歉,你的作品《【內容很不錯,不過需要修改/補充部分內容,請查看正文】Axure 8.0 教程:打造一個千變萬化的自定義色板》,未通過審核。理由為文章觀點不夠豐富。“”以后不更了,很失望,還打算每天給大家準備一篇干貨,這審核。。。以后我的教程直接更在http://zack_w.oschina.io/tutorial/這里,不再在woshipm發表任何文章了
求個源文件喲 謝謝 ! 643099624@qq.com
能發一份源文件學習嗎?謝謝!475912082@qq.com
求源文件謝大哥,1005729178@qq.cpom
求源文件謝大哥,1034823270@qq.cpom
求一份源文件謝謝,525310118@qq.com
已發送到你的郵箱
求源文件學習謝謝!264522843@qq.com
求源文件,謝謝 122629409@qq.com
已發送到你的郵箱
求源文件學習,謝謝,349554951@qq.com
已發送到你的郵箱
求源文件??郵箱15130846070@163.com
已發送到你的郵箱
求一份元件,謝謝樓主 2892135372@qq.com
大家需要注意如果下載demo的本地頁面沒生效可能是因為在你的axure中還需要添加那兩個全局變量
求份源文件學習,謝謝 879139034@qq.com
感覺進入了種子網站 ?
– -是這種既視感嗎。。。是我的域名昵稱和文件命名太亂還是demo頁面太丑。。。
求源文件學習,謝謝,179447472@qq.com
已發送到你的郵箱
求源文件,謝謝 904071761@qq.com