#Daily UI# Day004 Calculator 设计过

背景介绍

Daily UI DAY4 的任务是做一个计算器，感觉原意大概是要做一款集加减乘除的计算器，看了很多其他的设计，都很漂亮很简洁大方，自己做的话1234567890+-*/大概也是那样的布局吧，突然想起上个学期的一个想法，然而执行力极低的我几乎要把它忘掉了。趁有这个任务把那个想法稍微实现一下好了。

家里是药店，中药西药都有售，西药的价格比较简单，都是一瓶或者一盒。可是中药的价格却不是，有些特别轻是以克为单位，稍微重些以10克为单位，有些以两为单位，斤的很少，但也有。去年放假回家在家帮忙的时候竟觉得自己也是退化了，6块钱10克的可冲水喝的菊花，8块钱10克的银花，4.5一两的枸杞，这几个数我直到开学还会记混。直接说买几两几克的还好，最心塞的是大部分人上来一问完价格就会直接“给我来10块吧”，每次都弄好久，假装很细心地把药品包装好！其实是因为心里一直在算啊啊啊，又觉得拿旁边的那个高调发声的计算器来算的话简直会LOW到爆，然后就磨蹭好久哈。那时候一直想着要开发一个APP能定单价后选择输入价格或者输入数量就可以直接算出相应的值。然而这个想法一直拖到再次放假还是没有实现，那就借这一次先做一下设计吧，开发的就再说吧。。。

交互设计

这个想法最主要的就是涉及几个奇怪参数，定价、定价的单位、支付的钱数和购买的数量，前两个是必须定下的，后两个任选一个填写，剩下的就是需要计算的结果。用户需要填写三项，比较麻烦，但这是不可必免的，只能尽量让这个过程更快更清晰。它们的填写并不像加减乘除那样有一个绝对的顺序，所以可能需要用户去一个一个点着选择，但是想一想这个过程觉得好可怕，我得【点单价>输入单价>点单位>选择单位>点支付或数量>输入数值>结果】！啊！还不如直接心算得了。

怎么简化流程？我想一般都会先输入单价和单位，才是客人要买的钱数或数量，那么其实他们还是可以有顺序输入的，那我直接在键盘区域加入一个“下一项”的按钮，那么用户在输入数值的时候顺带马上点“下一项”就会方便许多，不用再移动到上方去选择参数相应区域，“下一项”按钮可以一直在四个输入区一直循环，这样的话可以跳过（解决了第三个支付钱数可能就是我要的结果的问题），不小心跳过的话也可以“嗒嗒嗒”点三次回到上个数值。当然输入区域还是可以点击的咯，不用白不用。

接下来是比较棘手的单位问题，最初十分坚定的是要用滚动选择的方法来设计这个输入，操作方便，甚至在想输入定价要不要也用这个滚动，但这个实在不可能，0.1-10.0就会有100个选项，操作就算再流畅也需要手指滚好几轮吧，那这个还是得输入数值。那么单位，如果直接在显示区域滚动，那不就违背了“下一项”按钮的初衷了，我还是得移动手指到上方去点击单位项并且还要在那个区域滑动手指，好费劲哦！所以，把滚动选项放到数字键盘区吧，好像还行。

手指左右滑动选择单位

可是我发现只有单位这一项是需要滚动选择的（数量的单位可以默认跟单位一样）。我有必要在键盘区为这么一项选择铺出1/5的区域吗？而且它应该只有4个值啊（克、十克、两、斤）。果断放弃吧。而且这么一个小项目，又点击又滑动的也是很奇怪。

那还是点击输入，可是只有4个值，我专门为些做文字键盘简直不可能！那采用“下一项”按钮的方法？设置一个“换单位”的按钮，反正最多也是“嗒嗒嗒”点三次。先这样吧。

界面设计

其实交互设计的过程一直是和界面交替着的，感觉这样其实不好。设计最开始陷入奇怪的配色过程，因为一直很想试试经典的蓝粉配，感觉很好看啊，就试试吧。然后就一直在想键盘区的配色要不要跟着变化，那岂不是很乱。可是单色的话我要先粉色还是蓝色呢哈哈哈。。。纠结后决定！我还是先用黑色吧，所以前面浪费了好长一段时间。

蓝粉配色的输入区

然后就是说明文字要放哪，像上图肯定是不行了，占用太多空间了，我要放1234567890等呢。那就直接放到框内吧，想起注册登录时一般都会有特别浅色的说明文字在input里，然后用户开始输入后消失，但是我这个吧，有四个输入区，感觉好乱哦，而且四者很容易混（在定说明文字的时候就纠结了一会），所以开始输入后去掉说明文字就会变成，4.5/十克/支付/50克，好奇怪的内容，很容易不知道自己正在输入的是什么。

没有数值时显示说明文字，输入数值后说明文字透明度降低

那我就在输入的时候把说明文字变淡？好吧，一个字，乱。还是乖乖把说明文字显示着吧，可以小点。

最终效果

最后就是这样了。首次输入的时候点击定价，输入数值>下一个>换单位>下一个>数值>得到结果。再加入一个小功能，该输入数值的时候“换单位”按钮变淡（表示不可点击），该换单位时数字区和“取消”按钮变淡。

Demo演示

app 操作动画

感觉还是需要有个操作演示才能说清楚，在网上找了各种做GIF的方法，最后还是KEYNOTE拯救了我。Keynote简直神器，自带动画简直舒服到不要不要的。虽然单Demo演示就做了一个多小时，但都值啦，有动画还是比较直观的。

最后

很小很简单的一个APP设计，但过程中还是纠结了许多的，使得这个Daily UI的训练过程不仅限于设计，交互上也思考了许多。虽然觉得最后不是最优解，功能的用处很小，也不一定会去开发出来，但做完后还是很满足的。

第一次写设计过程，好啰嗦，写完后感觉其实也没写什么。

可能性

这样的设计开发出来还是不好用吧。输入定价和单位还是太麻烦了，其实正确做法应该是把药品信息全都事先导入，然后计算的时候选择药品名，再输入数量或支付钱数就直接算出，但问题在于如果药品种类太多在手机上也不好选择，那扫码呢？就像超市的结账系统一样，也是通过条形码获得商品价钱。但是需要称重量买的东西都是散装的，不可能都贴上条形码，就像在超市买米还是得先在米区装一袋称完后贴上有条形码的标签【而且这种情境下好像并不能实现“我要买10块钱米，你称给我”】。但至少我可以将一条一条的单价数据存入一个一个的条形码或者二维码，贴在特定的散装区，我只要扫码就能获取数据自动填入“定价”和“单位”，接下来只要输入一项就可以得到结果。所以药品种类多的话可以扫码的方式替换手动选择。但需要付出的成本是将需要让数据与码一一对应，还需要一一贴到相应的药品上，工程量还是挺大的。

那么，再开点脑洞，用语音输入好吧。甚至三项操作都可以直接由语音来实现，如“10块银花”“100克银花”，简单的一句话可以获取三个信息，首先，定位“块”字或“克”字，这也确定了填的是第三项（支付）还是第四项（数量），这个字前面的内容就是数值，这个字后面的就是药品名，通过药品名检索数据就可获得相应定价和单位。输入区获得三项值啦，结果当然就出来了，所以不需要去生成二维码，也不需要贴，只要几个字就可得到结果。想想竟觉得好方便啊我的天！然而！我普通话好差，我爹妈普通话也好差，“14块”怎么办？！所以，全文结束了。

把明天的任务ICON也做了，但没认真做，ICON实在是...总觉得有时候花多久都做不出来，有时候有一个好的想法一下子就有产出了，然而还是不知道如何是好。太令人捉摸不透了。

英文版： https://medium.com/@wykay_z/design-processing-of-daily-ui-004-calculator-32757a2ebe45

Daily UI: http://weibo.com/p/1008087c8674a8467bd94ef3290de6dc656be0?k=Daily+UI&from=501&_from_=huati_topic