原子设计理论——实践

6.4 图标 - 系统图标

系统图标指的是在系统中某些功能没有办法用语言表示出来，就要用图标这种符号化的方式去表达它们的含义。例如点赞、打印、评分等都属于系统图标。系统图标的绘制方法比较复杂，很多细节都需要注意，之前在《图标分解 Material 规范》文章中也讲过一些知识，大家有兴趣也可以去看一下。

7.1 分子 - 组件

以上原子部分就大致讲完了，分子部分除了按钮以外的其他组件，构成了整个分子的体系。除按钮外我设计了大概50个组件这样的分子，当然可能会有更多。我设计的组件比较复杂，有三种颜色、三种高度和三种曲率，大大小小保守计算应该有1000个，都是我一个人一笔一笔画完成的。今天我就简单的介绍几个。

7.2 组件 - 侧边导航栏

之前也讲过《侧边导航栏/分页》，侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在那边就往哪边对齐。

7.3 组件 - 时间选择器

时间选择器的内容还挺多的，一个颜色有8中形式，三种颜色就是24中形式，再加上三种不同的曲率和不同的高度，组件真的还挺多的。

7.4 组件 - 消息数/头像

消息数和头像我也做了一些，分别做了一位数、两位数、三位数和超出三位数的部分。消息数和头像也跟其他组件一样，颜色上有三种、曲率上也有曲率、圆角和直角三种。

7.5 组件 - 气泡卡片

气泡卡片和文字提示小组件是最多的，我自己都没有细数，真的没有一定耐心还真的做不下去。

7.6 组件 - 文字提示

前面列举了几个比较小的组件，比较大的组件也有很多，像这个高级搜索、校验表单、表格、弹窗、手风琴、卡片式列表、表格。对话框和抽屉等等，都属于比较大的组件，就不一一进行展示了。