aure8.0 原型设计实例：简易计算器
阅读：1
1+
很高兴，今天终于写到《axure原型40例》这套教程的最后一个案例了，40个原型40篇文章持续写了快两个月，有不少读者一直在追看我写的文章，这让我很欣慰，说明我这个理科生还是可以写文章的，哈哈哈……废话不多说，这一章就以一个简易的计算器来做个结束吧！也不要小看，计算器是简易，原型可不简易。那么该怎么样使用axure8.0来制作呢？请往下看。
第一步：拖拉摆放好相关的控件
1、一个白底黑框矩形，命名为“屏幕”，上下居中，右对齐，右边距为10；
2、19个小矩形，其中有10个数字键、加减乘除4个四则运算符号键、1个小数点键、1个AC键、1个正负号键、1个百分号键和1个等号键；
3、这19个矩形分别命名为“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“加”、“减”、“乘”、“除”、“.”、“AC”、“+/-”、“%”和“等”。
第二步：设置全局变量
1、设置全局变量FirstNum为0；
2、设置全局变量Flag为replace。
第三步：为数字键“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”添加鼠标点击时用例（9个按键的用例是一样的，做好一个复制就可以了）
当Flag为replace时
1、设置“屏幕”文字为当前元件文本；
2、设置Flag为join。
当Flag为join时
1、设置“屏幕”文字为屏幕文字连接当前元件文字。
第四步：为数字键“0”添加鼠标点击时用例
当Flag为replace或者“屏幕”为0时
1、设置“屏幕”文字为当前元件文本；
当Flag为join时
1、设置“屏幕”文字为屏幕文字连接当前元件文字。
第五步：为数字键“.”添加鼠标点击时用例
当Flag为replace或者“屏幕”为0时
1、设置“屏幕”文字为0；
2、设置Flag为join；
3、禁用“.”。
当Flag为join时
1、设置“屏幕”文字为屏幕文字连接当前元件文字。
2、禁用“.”。
第六步：为“加”、“减”、“乘”、“除”添加鼠标点击时用例（9个按键的用例是一样的，做好一个复制就可以了）
1、设置当前元件的为选中；
2、设置全局变量FirstNum的值为“屏幕”的文字；
3、设置全局变量Flag的值为replace；
4、启用“.”；
5、禁用“加”、“减”、“乘”、“除”。
第七步：为“AC”添加鼠标点击时用例
1、设置“屏幕”的文字为0；
2、设置全局变量Flag为replace；
3、启用“.”、“加”、“减”、“乘”和“除”；
4、设置“加”、“减”、“乘”和“除”的状态为false。
第八步：为“+/-”添加鼠标单击时用例
当“屏幕”的文字不包含-号时
1、设置“屏幕”的文字为-号连接屏幕的文字。
当“屏幕”的文字包含-号时
1、设置“屏幕”的文字去掉-号，即通过slice函数去掉字符串的第一个字符。
第九步：为“等”添加鼠标单击时用例
如果“加”的选中状态为ture
1、设置“屏幕”的文字为“屏幕”的文字加上FirstNum的值；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”；
4、设置“加”、“减”、“乘”和“除”的选中状态为false。
如果“减”的选中状态为ture
1、设置“屏幕”的文字为FirstNum的值减去“屏幕”的文字；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”；
4、设置“加”、“减”、“乘”和“除”的选中状态为false。
如果“乘”的选中状态为ture
1、设置“屏幕”的文字为FirstNum的值乘于“屏幕”的文字；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”；
4、设置“加”、“减”、“乘”和“除”的选中状态为false。
如果“除”的选中状态为ture
1、设置“屏幕”的文字为FirstNum的值除去“屏幕”的文字；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”；
4、设置“加”、“减”、“乘”和“除”的选中状态为false。
第十步：为“%”添加鼠标单击时用例
如果“加”的选中状态为ture
1、设置“屏幕”的文字为（“屏幕”的文字/100）+FirstNum的值；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”。
如果“减”的选中状态为ture
1、设置“屏幕”的文字为FirstNum的值-（“屏幕”的文字/100）；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”。
如果“乘”的选中状态为ture
1、设置“屏幕”的文字为FirstNum的值X（“屏幕”的文字/100）；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”。
如果“除”的选中状态为ture
1、设置“屏幕”的文字为FirstNum的值/（“屏幕”的文字/100）；
2、设置Flag的值为replace；
3、启用“.”、“加”、“减”、“乘”和“除”。
点击预览，在计算器上进行简单的加减乘除四则运算就可以看到计算效果了。同时也可以随时关注我的个人博客： http://weidublog.com ，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。
效果图： axure原型设计之简易计算器
更多原型案例： http://weidublog.com/index.php/2017/03/20/181/
来源：维度
关键字：产品经理, 产品设计, flag
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
