原子设计理论——实践

7.7 组件 - 基础列表

把头像和上面用原子设计配置过的文字组合在一起，就可以形成像基础列表这样的大组件了。

7.8 组件 - 卡片式列表

下面都是组件展示了，也就不过多强调组件的重要性了。

8.1 模块 - 导航栏

以上原子设计理论中原子和分子所包含的内容就大致讲完了。接下来在原子设计理论中，分子集合组成在一起并形成组织，影射到UI构成中就可以简单理解为模块。对于模块的定义可没有那么简单，例如大家熟知的Ant Design，它体系由上面讲的这几部分构成的，而实际却没有办法解决不同业务层的问题，因为他们没有对模块再进行规范，又或者有规范但没有公开化或开源。我定义的业务层导航栏模块，也是把它拆分成三种颜色（黑白彩）、三种曲率（圆角/直角/有曲率）、三种高度（32/40/48），以适应不同的业务需求，并把导航栏中的细小模块再进行拆分，例如搜索功能我做了几种样式，导航功能的多种不同组合等。

8.2 模块 - 导航栏（交互）

当然了光从导航栏的属性与功能划分上来进行设计，还是远远不够的，这样单层面的设计没有办法适应各种业务需求。因此我在导航栏菜单的交互方式上定义了三种样式，分别是：无二级、内容少和内容多等，以适应不同的业务需求。业务层导航栏菜单的交互我之前想做300个，后来是由于沉没成本和时间成本不能把控的问题，就放弃了，不过后期可以融资搞一下这块。

8.3 模块 - 焦点图

业务层按照业务主要会划分为展示型网站和功能性网站两种，由于功能性网站基本没有焦点图这样的需求，针对焦点图这个需求，主要是用于展示型网站的。我设计的焦点图样式没有多少，也是由于沉没成本的原因，差不多设计了50个，相对都是比较基础的样式。但很多样化，有文字型、表单型、搜索型、设备型、产品型、引导型等等。

8.4 模块 - 底部

导航栏和焦点图两个模块组合起来构成了头部这样的一个模块组，那相对的有头部是不是就要有底部啊，底部我也有设计它的样式，但不多就30个左右，一般网页底部没有太大要求，把要突出的信息都突出出来就行了。包含：Logo、导航、电话、备案、二维码和其他信息等。