个人参与的工作及贡献
参与了原型设计工具的对比与选择工作
参与了产品设计理念的讨论
参与了对产品整体结构的确认工作
协助确定了产品的布局排版
对交互效果以及功能进行了反复调试
参与了使用文档的文案编写工作
简介与平台选择
Wolfram Alpha
Wolfram Alpha是由Wolfram Research开发的计算搜索引擎。该在线服务提供了有关事实性问题的答案,而不是通常的搜索引擎所提供的链接列表。Wolfram Alpha于2009年5月18日发布,基于以前的产品Mathematica,该计算平台集成了代数,数值,符号,统计计算功能以及图形显示功能
Wolfram Alpha提供的答案不包含链接,而是包含图形,图表,表格和图形。它不仅会提供确切的答案,还会显示一个有序的页面,其中包含来自经过验证的来源的其他信息。
这种基于数学模型和算法的搜索引擎可能是语义网中的理想选择。
原型设计理念
经过短时间的讨论,并结合我们团队的开发经历,最终决定选择计算器题目进行设计。和普通的计算器一样,主界面包含基础按键[1]和算式输入框[2-1]和结果输出框[2-2],方便普通用户在日常生活中,可以快速的使用本产品进行简单的计算。
其次我们加入了一个扩展界面[4],用于显示从WolframAlpha获取的科学计算过程与计算结果、函数图形等,用于满足专业用户的科学计算需求。
理想支持平台
初期界面设计风格简谱,计划用于Web端和Windows、Linux、MacOS、Android9.0+、IOS等主流系统。其中对于屏幕尺寸狭小的移动端,计划使用滑动方式来拉出扩展界面。
原型设计工具的选择
理念及思路
我们在设计原型的时候一是要提升原型设计的合理性,二是要减少原型设计所占用的时间。因此,我们队伍在明确了产品需求之后各司其职分工合作。
对目前常用的原型设计工具进行横向对比
我们分别依次尝试了墨刀,Axure,Mockplus等软件,从他们的特色功能、性价比、学习曲线等多个角度进行了分析。
Axure
AxureAxure RP是美国AxureSoftware Solution公司旗舰产品,是一款快速的产品原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的APP原型设计工具,它比一般创建静态的原型设计工具要快速、高效。它具有强大的交互效果,同时方便多人协作,有着便利的版本控制管理和动态面板,此外还有丰富的控件元素。
但相较而言,Axure的学习成本较高,熟练掌握所需要的时间更长,它的价格也是劝退我们的一个理由。
墨刀
墨刀的定位是主要用于设计移动APP原型,其控件的拖拉、大小的调整,都会自然去匹配相应的母版大小,非常人性化。再者,墨刀提供了强大的共享创建功能,方便用户的手机上预览原型。
但我们认为缺点在于对交互效果、控件组合、操作面板的选择都不如Axure灵活,内置交互效果包括点击、滑动、滚动等,做高保真原型的时候不够用;另外,效果切换因为是采用连线的方式,有时会让用户产生错乱的感觉。
Mockplus
Mockplus是一款简洁快速的原型设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手的特点简直是为我们这样的初学者量身打造,而且它的功能够用并能够很好地表达自己的设计,满足众多的工作需求。有别于Axure的繁复,Mockplus致力于快速构建和迭代原型,为设计者提供简洁高效的设计方式。相较于Axure的厚重,Mockplus更显轻盈。而且它的学习成本较低,学习曲线平滑,方便我们快速上手完成任务,同时它的价格也是十分亲民,假如日后有需求的话我们购买起来负担会小很多。
综合考虑,我们最终选择了Mockplus作为我们团队的开发工具。
界面模块与功能介绍
主界面
1.按钮组(对应模块介绍图模块1)
主界面上的最大的交互集成模块,由30个按钮组成,其中包括26个常用数学按钮和4个特殊按钮。按钮排列参考了一些人体工学文献,每一个按钮单独绑定了逻辑函数与动画效果,按钮个体之间相对独立,用户可以通过点击按钮操作程序。
26个常用数学按钮
用户可以通过点击,来对输入框的算式追加输入,起到和从键盘输入一样的效果。
这些按钮包括:
-
数字按钮 $[0-9],[.]$ 和 $[00]$;
-
特殊符号按钮 $[pi],[e]$;
-
运算符号按钮 [^]$,[\%],[(],[)],[!],[/],[*],[-],[+]$;
-
三角函数按钮 $[sin],[cos],[tan]$;
4个特殊按钮
特殊按键判定的并不是简单的输入,而是特殊的逻辑操作。
-
按钮 $[清空]$(对应模块介绍图中组件[1-1] ):
-
正如名字所述,按下后会清空输入区和输出区的内容。按钮配色为红色,用来区分于其他按键,并且红色可以让人引起注意,一定程度上防止误触。
-
-
按钮 $[退格]$(对应模块介绍图中组件[1-2]):
-
按下功能是使输入区中的算式退一格。配色为深灰色,同理区分其他的按键。
-
-
按钮 $[>]$(对应模块介绍图中组件[1-3]):
-
这个是扩展界面的展开按钮,点击一下后会在主窗口右侧展开一个扩展界面(如模块介绍图-展开所示),展开之后按钮变成 $[<]$ 收回模式,再次按下可以收回扩展界面。
-
-
按钮 $[=]$(对应模块介绍图中组件[1-4]):
-
等于号按钮,在按下后程序将输入区中内容传入后端计算,并将计算结果显示在输入区下方的输出区。
-
2.文字框
这里是程序与用户的信息交互区域和主要显示模块,负责显示和记录用户的输入和简要计算结果的输出。由输入区和输出区两个文本区域组成,其中输入区是用户可以编辑的,用户可以通过按钮或者键盘在其中输入算式,而输出区是只读组件,用户只能复制其中内容。
-
输入区(对应模块介绍图中组件[2-1]):
-
输入区是显示用户的输入和可以让用户直接编辑的区域,使用万用编码(UTF-8)。一般的计算器如果想成功得到计算结果,用户必须输入符合算式规则的语句。但是由于我们的计算器基于WolframAlphaAPI,所以理论上算式模糊或者自然语言描述依旧可以得到计算结果。
-
-
输出区(对应模块介绍图中组件[2-2]):
-
输出区用于显示算式的最终结果,在按下等于号之后,将后端传来的输入区计算结果直接显示出来,同样适用万用编码。用户可以通过右键输出区快速复制计算结果。
-
3.作者信息
区域由一些指向外部链接的按钮组成,其中包括我们的各种联系方式。
扩展界面
扩展界面只包含一个模块——扩展模块(对应界面模块介绍_展开中模块[4])。
扩展模块负责显示从WolframAlphaAPI获取的全部计算过程、科学计算结果等,采用响应式布局。
通过点击按钮 $[>]/[<]$ 可以展开或者收回扩展模块。
用户调研
原型演示
参考文献
[1] 章曲,谷林.人体工程学[M].北京:北京理工大学出版社,2009:12-17.
[2] Manuel Mateo,Marc Tarral,Pedro M. Rodríguez,Asun Galera.Ergonomics as basis for a decision support system in the printing industry [J]. Central European Journal of Operations Research, 2020, Vol.28 (4), pp.685-706.