下面两张图,A是iPhone自带的计算器APP设计图,B是我做的设计优化。

我的设计调整基于给一般用户用,而不是给财务人员用,财务人员身边通常有计算器。

不同之处有:

  1. 去掉了mc、m+、m-、mr这些一般用户不会用的功能。
  2. 去除了“+/-”这个正负号功能,正号不需要,负号有“-”号就够了。
  3. 把加减乘除符号放到顶部一溜排开,虽然常用操作区域由更加集中的四四正方形变成了五三长方形,但用户更加容易形成位置记忆。
  4. 把数字排列顺序改了一下,小数字放到了上面,大数字放到了下面,虽然用管了真实计算器的财务人员可能不习惯。但普通用户应该很习惯,因为这就是我们拨打电话时数字键的位置。
  5. 把“AC”改成“C”,更加明确地表示是“取消”键(很多手机上的取消键就是“C”)。同时颜色加重,和运算符的颜色区分开。
  6. 增加“(”、“)”,以满足类似于:25×0.5+31×0.7这样的需求。我猜你平时用计算器应该是先输入25×0.5,然后把结果写下来,再输入31×0.7,得到结果后,再加上刚才写下来的那个数。

设计图中看不到的两点改变:

  1. 结果显示框里不仅仅显示结果,改为:在按“=”号之前,显示输入的计算式(根据内容多少调节字号,至少可以显示75个字符,如果再超长,前面超长的部分就不显示),按“=”号之后,显示结果。
  2. 转为横版的时候,A方案是会展示更多强大的计算功能,比如求根之类的。B方案不支持横版。

各位看官有什么意见?欢迎各种意见,一起探讨。

 

30 Responses to 设计案例探讨——iPhone计算器APP

  1. bingno says:

    感觉上加减乘除使用频率应该有很大区别,这样把所有的计算方式打平(即使有位置优先级)是否是埋没了这种区别?最好有个数据支持分析下~

  2. 邓熔 says:

    你说得对,加最常用,减其次,乘再次,除最小。但对于非职业用户,容易记忆的位置会带来更高的效率。一溜排开,最容易记忆了。

  3. 童晓白 says:

    结果显示框里不仅仅显示结果,改为:在按“=”号之前,显示输入的计算式(根据内容多少调节字号,至少可以显示75个字符,如果再超长,前面超长的部分就不显示),按“=”号之后,显示结果。
    //这一点可以优化,不管输入有多长,都可以有一个下拉展示按钮,用来校对输入的数字公式,而且能智能点,比如都是加法,那么可以竖排右对齐排列。按“=”号之后,自动(可配置)展示输入的数字公式

  4. merlyle says:

    个人感觉,容易记忆只是一方面而已。一溜排开的加减乘除很不合理。

    先不论其它,加和等是使用频率最高的,分得这么开,会给用户带来困扰。我查了下卡西欧计算器的设计,加减乘除等这五个按键的安排也挺有可取之处的。

    http://www.casio.com.cn/product/cal/finance/index_1.html

  5. Therealist says:

    个人感觉:1.加减乘除应该放在最右侧一列;
    2.把括号放在第一排,左右括号可以按左右排序更方便;
    3.加号比等号用的更加频繁,应该给一片大区域;
    4.C负责清除,放在最左下角不合理。

  6. Izzln says:

    感觉如果目标群是普通用户的话 的确加减乘除依次排开会比较容易记忆 因为对于他们而言 使用手机计算器的频率本身就不是很高 建立位置记忆的时间应该会较财务人员来得长些 括号及计算公式的显示也挺喜欢 就是AC变C感觉有点不爽 因为之前在用计算器的时候 挺长时间才搞清楚AC与C的区别 所以现在脑子里一直把AC认为才是最安全的清除键

  7. Omi says:

    同意 @Therealist 的第4条意见,C放在左下角太不符合使用习惯了~

  8. [...] 各位看官有什么意见?欢迎各种意见,一起探讨。相关话题:移动设备的交互和设计 源地址:http://www.raydeng.com/%e8%ae%be%e8%ae%a1%e6%a1%88%e4%be%8b%e6%8e%a2%e8%ae%a8%e2%80%94%e2%80%94iphon… [...]

  9. 图图网 says:

    小细节体现真正的设计

  10. netant3000 says:

    我对各点都很相同,唯独第4点有不同看法:

    我看过各种输入设备,除了电话以外,基本上都是小数字在下面,大数字在上面。这个倒是已经变成了一个基本的规律。更改这一点不仅意义不大,而且与传统规律相悖。

  11. 水泥 says:

    数盲飘过……能不能加一个% 汗~~~

  12. leo says:

    还是第一个数字排列比较舒服 ;)

  13. stanley says:

    我觉得关于计算器的这个重设计非常好,对于整个界面没有别的问题,对于横屏我认为没有必要支持,因为如果定位就是给一般用户使用的,目前功能足够,非一般用户,咱也不是,搞不清楚需求。
    倒是有个功能点值得考虑一下:经常在使用计算器的时候需要记录一个结果,做为下次计算的开始数值,能否关联一个只记录数值的列表,也许上限设定8条就足够。能够把计算器显示数值和记录中的数值方便的相互导入即可。

  14. 8thmouse says:

    个人觉得改得挺好:)

  15. tian says:

    个人感觉这个修改的理念还是比较好的,从界面上来说简单明了,去掉了那些不常用的功能,唯一的不足就是加减乘除与等号隔太远了,一般人最常用的是加号,我看其它的计算器上加号和等号都会放到手比较容易触到的位置,还有就是数字还是需要符合常规的用户输入习惯,包括我们的键盘中的小数字键盘,也是如些操作

  16. Wenkai Gu says:

    关于取消正负号,不是特别支持。正负号的意义在于,按一下变成负数,再按一下又变成正数。是个正负切换的概念。如果只用’-'号的话,或许可以表示负数,但如果改回正数的话,按什么呢?如果还是按’-'的话,就不符合简单明了的意图了。

  17. 邓熔 says:

    Wenkai Gu说得很有道理,看来想得很细。我其实不打算支持正负切换,我觉得支持对于负数的四则运算就够了。

  18. 邓熔 says:

    Stanley的建议很好,但是又复杂了。

  19. 邓熔 says:

    lzzln,很好的想法。呵呵。实际上大多数人并没有搞清AC和C的差异,你不也是花了很长时间才搞清楚吗。

  20. 邓熔 says:

    关于其他各位共同提到的“+号很常用,需要放到=号旁边”,以及“数字的位置还是应该上大下小”的建议。我会再行斟酌。谢谢。

  21. onlyseg says:

    苹果的按键虽然多,但是按键越常用越靠近下方,最通常的计算,我们实际只用到下面四排(0~9,+,-,=,.),这样更容易按到;”A/C”确实是大多数计算器的删除键,有一个习惯的问题,而且位置也和”ESC”对应起来;同意数字键盘的顺序更改,符合NOKIA的键盘顺序。

  22. nicolazj says:

    请问,lz用的什么软件做的草稿呀?

  23. ice says:

    1、对于第4点,不支持。计算器就是计算器。
    2、AC键的名称修改有必要吗?MS我们都已经看习惯了“AC”,而不是“C”。还有位置放在左下角按起来很不方便啊

  24. Anonymous says:

    C代表了清除,不属于计算操作,使用不同的颜色标识,并且放在左下角可以避免误操作,我支持lz的改动。
    同样+-x/的位置和大小应该调整,他们的使用权重不一致。

  25. roll says:

    这是为了改变而改变,没有必要。
    首先,你低估了你的用户,剥夺了他们选择的权利,要知道不光是财务才会用那几个按键的,除非你有大量的调查数据来证明可以去除这些按键,光靠臆想是不科学的。要知道我们的用户包括学生、工程师、小老板、经理、财务等等,去除功能要千万慎重,不要为你一个人做界面。个人认为,市场上最普通的计算器也带有的那几个按键就不可去除,那已经是简单的不能再简单了,再简单点那就是儿童计算器了。
    再次,要尊重用户的使用习惯,不可胡来,说真的没见过把计算符号放上面一排的,用着会很别扭。不要让人必须记住两种计算器的排布,应该尽量减小用户的使用负担。
    公式的输入显示还有点意思,让人看清前面的输入,方便核对。但括号也许就不好用了

  26. Hachaoki says:

    另外,还要考虑到常用的按钮尽量能让用户单手操作就可以完成,如等号、加号…,而不需要经常双手去操作。

  27. sponge says:

    加号的可以变变,这是次于等号的常用键,太靠左了,按起来很麻烦!

  28. 很方便,符合国人的输入习惯。

  29. Zhiqiang says:

    对我来说的确简洁方便了很多。不过关键是常用计算器是一些什么人。对我这种偶尔用一次计算器的人,只要需要的功能在上面容易找到就行了,习惯倒不是重点。不过计算机小键盘的数字键是在下面的……

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>