01 前言
小组件在 Web 设计中容易被忽略，老旧的组件有易用性差，视觉风格与主产品风格不统一等缺点。
18年在做 web 产品的时候遇到了一个计算器组件改版需求，下面是我的改版思路。
02 发现问题
旧版计算器如图。
旧版计算器
旧版计算器的样式版本落后于当前的网站，输入框、滑柄等控件风格陈旧。
旧版计算器的问题
03 改版探索
参考了几个交易所网站的计算器，但观察后发现，这些网站的计算器各式各样，都是根据自家产品订制的，没有统一的解决方法。
竞品网站的计算器并没有统一解法
接下来思考如何从视觉上改版。
提取“主站”的视觉元素：
- 纵向标签
- 更现代的输入框、滑柄等控件
提取主站的视觉元素
使用纵向 tab，合并 “Side” 一行到输入区域，简化了区域划分且更符合逻辑。
重新布局
04 改版设计
新的布局已经出来，接下来细化视觉。颜色沿用主站主视觉蓝色，增加了更亮和更浅的蓝色。使用和主站相同的表格样式和设计组件。
改版后的计算器，采用新布局和主站相同的设计组件
05 最终效果
上图
最终版效果
06 总结
在这次计算器小改版中我运用了设计体系的思维和方法，使改版迅速合理地完成。感谢 c 译版《设计体系》给我的启发。感谢你的阅读，欢迎转发。
