Web 计算器小组件优化

01 前言

小组件在 Web 设计中容易被忽略，老旧的组件有易用性差，视觉风格与主产品风格不统一等缺点。

18年在做 web 产品的时候遇到了一个计算器组件改版需求，下面是我的改版思路。

02 发现问题

旧版计算器如图。

旧版计算器

旧版计算器的样式版本落后于当前的网站，输入框、滑柄等控件风格陈旧。

旧版计算器的问题

03 改版探索

参考了几个交易所网站的计算器，但观察后发现，这些网站的计算器各式各样，都是根据自家产品订制的，没有统一的解决方法。

竞品网站的计算器并没有统一解法

接下来思考如何从视觉上改版。

提取“主站”的视觉元素：

- 纵向标签

- 更现代的输入框、滑柄等控件

提取主站的视觉元素

使用纵向 tab，合并 “Side” 一行到输入区域，简化了区域划分且更符合逻辑。

重新布局

04 改版设计

新的布局已经出来，接下来细化视觉。颜色沿用主站主视觉蓝色，增加了更亮和更浅的蓝色。使用和主站相同的表格样式和设计组件。

改版后的计算器，采用新布局和主站相同的设计组件

05 最终效果

上图

最终版效果

06 总结

在这次计算器小改版中我运用了设计体系的思维和方法，使改版迅速合理地完成。感谢 c 译版《设计体系》给我的启发。感谢你的阅读，欢迎转发。