axure8.0原型设计实例:简易计算器

2017年5月10日
5+
阅读:282

很高兴,今天终于写到《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/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/05/10/701/

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注