【产品设计-小程序】小胖工具箱系列—计算器

基于微信的小程序 小胖工具箱01 - 计算器

已经上线了,可以去试一下,有bug什么的也可以直接提:)
微信小程序直接搜:一个学习用的小房间
目前计算器功能完整,接下来设计开发的是To Do List 待办清单
我这边主要涉及到到是构思和设计,开发实现这块前后端以及优化微调都由@我教你跳伞咯

产品考虑

整合日常常用工具类产品,轻量化,基础功能,日常,设计年轻化。
计算器这块的规划没有考虑科学计算器,还是满足日常做一些简单计算和换算使用,适用一些口算心算也可以完成的场景,追求一个效率化,使用微信时不用切换app来进行计算行为。
功能等同于一些第三方输入法的自动运算功能,输入框内输入计算过程显示答案。

具体要求:
1.可以使用0~9以及小数点进行常规的数学四则运算(加减乘除)
2.可以进行运算结果的正负切换
3.可以进行运算结果及计算过程中的百分比转换
4.输入错误时可以退格回删除
5.可以清除当前输入和计算结果
6.正常显示以上要求前提下追求较舒适的视觉感

工具

基于个人习惯的本次使用到的工具如下:
1.印象笔记
一款笔记类应用,我使用的是专业版。日常的工作笔记、脑图、分析报表、markdown等都可以覆盖。
2.墨刀
一款轻量的原型设计应用,我使用的是付费版。针对移动端更友好一些,熟悉Axure的化会很容易上手,出图更快。
3.Sketch
苹果系统下的UIUE设计应用,我使用的版本是59。因为承担了界面设计的职责,这是我目前用的最多的设计类应用,同样,对移动端更友好。
4.蓝湖
一款设计开发写作类工具,个人团队的话免费版足以。主要是高保真的切图上传自动标注,部分代码参考等作用

原型

在这里插入图片描述

设计图

有考虑根据系统是否在暗黑模式下的适应稿
所以包括了Normal和Dark两套高保真
在这里插入图片描述

优化情况

优化的过程还是比较有意思的,简单表述一下做个记录
做这个工具箱的契机是和朋友摸索小程序朋友自己做了个计算器表示成就感爆棚,类似于“我摸透了我天下第一”
然后有了这个想法
规划的时候发现可以做的太多了,计算器,汇率,日历备忘,待办事项,天气,记账感概现在便利的工具太多了
因为是自己的产品不涉及公司也不涉及商业运营就比较自由
简单分类后考虑先做一些不涉及到后台处理或者数据缓存的,比如计算器,算完就完事儿了,对数据保留的需求不大,就会容易一些。
确定先做计算器就理逻辑,然后开整
我这边主要还是一边细化需求一边找bug一边改视觉

运算中是否考虑括号的功能

最初就是简单的数字按钮,考虑要不要提供小括号功能的时候遇到了一些分歧
这个功能和其他功能会有交叉,所以纠结了一下
如果提供括号:需要增加按钮位置,用户误操作的可能性增加,自动补全右侧括号的化退格也会有影响
如果不提供括号:无法更改既定的运算顺序,永远只保留先乘除后加减的顺序,正负切换在没有隐形括号的情况下对乘除也将不起效果
最后决定的还是不增加括号这个功能,简化基本功能,如有需要,以后再考虑。

按钮的点击效果是否必要,怎么实现

从视觉角度来说我觉得计算器是一个按钮点击为主的工具
所有的输入都是由单独的按钮点击来触发的
如果没有按下/点击效果就比较奇怪
那就考虑两个形式
1.按钮现在其实是底色+icon的形式。点击时icon变化
2.点击时icon不变化,给出底色(即点击区)
实践出真知,icon变化考虑了两个方法,icon加阴影点击时icon移动显示阴影给一个假效果。因为我不是font awesome不能直接变化,第二个方法是考虑换Font Awesome
为了让自己省力点,后者我直接毙了,然后效果看了一下,前者如果实现效果也不好。所以选择了第二点,改变底色。
直接偷懒的做法就是用现成的,会产生一个丑陋的不是正方形的底色
需要换成比较漂亮的圆形,又产生了新的问题

是否重新切图,是考虑代码实现还是把透明icon按钮切成带有圆形的底色,考虑精灵图这类方法。

在这里插入图片描述
大概是想达成这个效果,切图大小主要影响的就是尺寸和颜色数。从我的角度出发肯定是希望能够不改变切图的情况下达成。那么就涉及到开发实现的问题,怎么在使用现有透明底切图的情况下,加一层,点击时也能进行颜色改变。(本问题已经解决)

也有一些一直在纠结的问题还需要解决

正负号和百分号作用只作用于结果还是算式也可以使用,以什么形式
是否需要增加按钮提示音效
上部显示区域是否过于紧凑
按钮区域过大,单手操作比较费劲

猜你喜欢

转载自blog.csdn.net/fairycode/article/details/109024881