原子设计
在我们的日常设计中，经常存在缺乏产品的整体的认知。在未定义整个产品的设计风格的前提下。设计出的产品往往在不同的页面有不同的设计风格。
在产品设计整合时会发现我们的产品在表现上显得较为混乱，没有规律。让用户感觉整个产品相当杂乱
在2013年网页设计师Brad Frost从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecures），进一步结合形成的生物体（Organisms）。
原子设计介绍
image
原子设计包括：
-
原子；即页面中最小的不可分割的元素。
-
分子；页面的UI组件。
-
组织；由一系列UI组件组成的模块。
-
模板；由上述组件进行排列组成页面模板。
-
页面；将图片、文字等内容填充到模板中构成一个完整的页面。
原子
理解，页面，产品设计中最小且不可再做分割
字体
页面选中何种字体。给予特定的几种字体并说明场景，例如正文使用微软雅黑。
文字类型
一级标题、二级标题、三级标题、超链接、文字按钮、正文等。
文字尺寸
各文字类型的尺寸，常见标题与16号，正文14号
颜色
在明确颜色前，需要明确整个产品的颜色风格，主体颜色。
- 主色
- 辅助色
- 文字颜色（基于不同的文字类型，常用色#333333 #666666 #999999）
- 按钮颜色 （按钮、禁用按钮、文字按钮、超链）
框架尺寸
image
APP 在axure中的基本尺寸为375*670
APP页面格珊在原型表现中则为4的倍数。Margin边距则通常为28。
在PC网页端时axure基本尺寸为1366*900
在原型设计时，需要明确不同的组件的边距保持整体设计标准统一。
按钮
常见按钮类型：按钮、禁用按钮、文字按钮、禁用文字按钮、超链
按钮又可分为带图标按钮、图形按钮、简单按钮。
给予不同按钮的使用场景与尺寸，进行统一。
其他
输入框、复选框、单选框、矩形框等等
分子
分子，由最基本的原子构成的组件。例：Element
将UI组件进行定义，并统一。
例如：列表、输入组件、查询组件、选择组件等等。
以上组件的整体风格需要保持一致。且只能在约定的原子集合内进行组装。
组织
由分子与原子组成的较为复杂的单个模块。
例如：查询模块，导航栏等。
image
复杂的组织适用于指定的产品，即不同的产品组织是不可复用的。
以下示例：
image
由不同的条件搜素分子、按钮、等贴合框架基本要求组成的检索组织。
模板与页面
略
小结
在产品设计之初，需要对要设计的产品有一个完整的认识。
- 产品的背景与文化
- 产品的使用人群的了解
- 希望产品以何种面貌表现给用户
产品经理在设计时，需要根据《用户体验要素》中的描述的层级从下至上进行明确设计。
image
在产品设计阶段具体到框架层、表现层时，使用原子设计基本概念从细到明进行设计。让整个产品的表现风格上趋于统一，更容易传达产品目标至用户。
网友评论