原子设计

在我们的日常设计中，经常存在缺乏产品的整体的认知。在未定义整个产品的设计风格的前提下。设计出的产品往往在不同的页面有不同的设计风格。

在产品设计整合时会发现我们的产品在表现上显得较为混乱，没有规律。让用户感觉整个产品相当杂乱

在2013年网页设计师Brad Frost从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecures），进一步结合形成的生物体（Organisms）。

原子设计介绍

image

原子设计包括：

1. 原子；即页面中最小的不可分割的元素。

2. 分子；页面的UI组件。

3. 组织；由一系列UI组件组成的模块。

4. 模板；由上述组件进行排列组成页面模板。

5. 页面；将图片、文字等内容填充到模板中构成一个完整的页面。

   原子

   理解，页面，产品设计中最小且不可再做分割

   字体

   页面选中何种字体。给予特定的几种字体并说明场景，例如正文使用微软雅黑。

   文字类型

   一级标题、二级标题、三级标题、超链接、文字按钮、正文等。

   文字尺寸

   各文字类型的尺寸，常见标题与16号，正文14号

   颜色

   在明确颜色前，需要明确整个产品的颜色风格，主体颜色。

   1. 主色
   2. 辅助色
   3. 文字颜色（基于不同的文字类型，常用色#333333 #666666 #999999）
   4. 按钮颜色 （按钮、禁用按钮、文字按钮、超链）

   框架尺寸

   image

   APP 在axure中的基本尺寸为375*670

   APP页面格珊在原型表现中则为4的倍数。Margin边距则通常为28。

在PC网页端时axure基本尺寸为1366*900

在原型设计时，需要明确不同的组件的边距保持整体设计标准统一。

按钮

常见按钮类型：按钮、禁用按钮、文字按钮、禁用文字按钮、超链

按钮又可分为带图标按钮、图形按钮、简单按钮。

给予不同按钮的使用场景与尺寸，进行统一。

其他

输入框、复选框、单选框、矩形框等等

分子

分子，由最基本的原子构成的组件。例：Element

将UI组件进行定义，并统一。

例如：列表、输入组件、查询组件、选择组件等等。

以上组件的整体风格需要保持一致。且只能在约定的原子集合内进行组装。

组织

由分子与原子组成的较为复杂的单个模块。

例如：查询模块，导航栏等。

image

复杂的组织适用于指定的产品，即不同的产品组织是不可复用的。

以下示例：

image

由不同的条件搜素分子、按钮、等贴合框架基本要求组成的检索组织。

模板与页面

略

小结

在产品设计之初，需要对要设计的产品有一个完整的认识。

1. 产品的背景与文化
2. 产品的使用人群的了解
3. 希望产品以何种面貌表现给用户

产品经理在设计时，需要根据《用户体验要素》中的描述的层级从下至上进行明确设计。

image

在产品设计阶段具体到框架层、表现层时，使用原子设计基本概念从细到明进行设计。让整个产品的表现风格上趋于统一，更容易传达产品目标至用户。