原型设计工具比较及实践

基于WolframAlphaAPI的科学计算器原型设计

个人参与的贡献以及工作

  • 下载体验三种原型设计工具,进行初步设计。
  • 与队友进行充分协商,合并研究结果。
  • 撰写README文档,
  • 最终商讨合并。

简介与平台选择

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.

posted @ 2020-04-19 15:44  shiluo  阅读(158)  评论(0编辑  收藏  举报