设计分享

分享流程

graph TD
A[制作设计规范] -->|A1| B(制作设计组件)

B -->D[更新设计规范]
B -->E[开发制作开发组件]
B -->F[更新开发规范]
E -->G[设计规范落地]

制作设计规范过程可以帮助去总结自己的项目,

熟悉自己的设计风格

个人的设计风格可以在日积月累中渐渐体现.不断地在接受外界的内容,自己其实也在不断的转化.

加深对排版的感觉

因为手机的屏幕十分有限,所以相差微小数值的内容,看起来也很不一样.

不同权重内容icon

可以理解不同的字体和不同的权重内容该怎么区分.

1. 设计语言设定包含了，设计原则、色彩系统、颜色系统、栅格系统、图形（图片、插画和icon）、字体、投影、动效等原则
   1. 规范的用处

1. 移动端和网页的端的常用font大小及icon大小
   1. 随着流行趋势的改变和手机屏幕的变大，死板的设计嵌套是肯定不行的。

1. 栅格系统的应用

   1. 网页端应用
   2. 移动端应用

2. 组件的应用及助力

1. 制作规范的常用方法以及规范在团队中的落地使用
   1. 探讨与开发对接的设计规范文档

1. 规范的用处

1. 使设计元素不那么杂乱

设计规范就是为了避免杂乱，使设计语言统一
同样是设计，不可能把淘宝的设计元素直接去套用在微信上面。
一个APP或者网站的设计可以包含数十甚至上百的页面，如果每个设计师根据自己的喜好建立了很多个pattern样式，在当前的页面看起来没问题，但是当和其他页面对比的时候才发现自己用了多少不同的样式。

较乱的组件使用

这是对开发资源的一种浪费，更是对于APP自身设计语言的破坏。

建立用户对于APP（品牌）的认知

用户在从打开APP的那一刻起，就在不断地对APP进行建立认知，就像是去熟悉一个陌生人。APP里面的设计元素和交互元素就像是陌生人发出的“语言”。这些语言不断在用户头脑中建立认知。用户知道淘宝是一个怎样怎样的APP，有着什么样的性格。

品牌认知

需要注意的是设计并不应该成为用户关注的重点

色彩系统

material design

颜色系统

一个APP的色彩系统就像是一个活动页面一样。

活动页配色

图形（图片、插画和icon）

扁平插画

image.png

渐变插画

立体插画

字体

iOS和Android系统的字体

字重

应该是也能从APP包里面导入其他的字体的吧

动效

动效曲线-page

动效曲线-插画

规范内容

2. 基础UI元素

手动输入参数

像素虚化

按钮

按钮权重

当我们设计按钮时，优先要从高度入手，再去定义宽。为了便于新手理解，我首先从高度上来匹配权重，分成高、中、低三类：

高权重：40-56pt
中权重：24-40pt
低权重：12-24pt
输入框的使用高度尺寸，常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤

高权重的按钮，类似登录页的注册、登录，购物详情页的购买，流程页中的下一步，它的最小高度应该从 40pt 开始递增，低于这个大小，那么这个按钮就很难在这个页面起到视觉支撑，因为感觉太细了。

最大宽度应该小于内容距离上下的 2 倍
而圆角的设置范围，不大于高度的 1/4

高权重

中权重

字体

英文字号

英文应用示例

在中文应用中建议使用的字号：

标题：28、24、22、20
正文：18、16、14
注释：12、11

中文应用示例

图标

高权重图标

中权重图标

低权重图标

图标尺寸

图标大小

所以，对矩形尺寸定义的建议：

最大：64、56、48
中等：44、36、32
最小：28、24、20

3. 栅格系统的应用

电脑端

image.png

移动端

外边距

列和水槽

12=24>6>8

8等分	网格	外边距	列宽	水槽
大小	8px	32px	(750-32X2-24X7)➗8=65px	24px

移动端网格系统

3. 组件的应用

Humaaans的library

为什么能够那么快速的实现这些功能？因为设计师已经事先将这些东西用了两三天或者一个星期将这些东西做成了组件。
以后随时调用就可以了。

sketch组件库

开发可以同上述一样将代码进行组件化。这样对设计和开发来说都有好处。

对设计师的意义

保持交互一致性

保持视觉风格统一

便于多设计师协作

便于修改设计

对开发者的意义

降低耦合度

降低冗余

优化性能

便于多开发协作

便于差错

便于修改

如果说让开发根据设计师的组件去制作组件的话，那就需要设计师对于前端的搭建有一定的了解。

轻度组件化

轻度组件化

组件化开发有两种不同程度的做法。

先讲讲轻度组件化。它的主要思想是使用相同的html结构和特定的class名，并且用同一段css代码定义样式，用同一个js函数来定义交互。

引用同一代码

我们来看看上面这个登录框，下面3个代码块是它大致的代码结构。输入框在其他页面肯定也会用到，那么只需要与左边框里的html结构保持一致。各处页面代码中引用同一个css和js文件，至少做到了在一处集中管理样式与交互。但如果组件的html结构发生变化，修改的工作量还是会比较大。

重度组件化

重度组件化

重度组件化的方式可以解决这个问题，不过这就不仅仅停留在思想层面，对项目的代码结构都有一定的要求。
每个组件的html结构、css样式、js交互都独立封装管理，定义好框架和加载方式，内容在加载时从外部填充。

组件的独立封装

在重度组件化的项目中，每个组件都做到了彻底的独立封装。比如这个页头组件，它的代码存在于独立的目录下，这个目录包含了它的html结构、css样式、js交互、资源图、甚至自测试模块。

那么各处页面中要加载页头组件，往往只是一条语句，将数据传入这个已存在的结构中就行了。
组件如果要与外部进行数据传递，也应该以接口形式对外开放。组件内部是个黑盒，外部只需要了解数据的输入与返回，不必关心组件内的工作原理。

4. 规范的制作及落地

完整设计规范的示例

页面规范.png

控件规范.png

icon规范.png

字体规范.png

一个完整设计规范的制作不是一天两天就可以做出来的，需要更多的思考。甚至有可能是需要一周的时间，还需要后期不断去维护。
需求文档的制作也不是那么的简单。都需要人员投入和时间投入。

框架设计规范的示例

控件规范

font&color规范

间距规范

在使用过程中，发现布局参数上，框架间距的代号应与普通间距代号区分开，否则在界面大改版无法灵活地调整界面框架的间距和尺寸参数。分离框架代号（#WG）与普通代号（#W）后，研发工程师只要修改框架间距代号的数值就能快速调整框架，并且不影响界面具体代号的效果，极大地降低过往版本迭代中要逐个参数对比修改的工作量。

制作规范过程中的难题

1. 规范文档和生产软件不能很好的联通，需要手动去查。
2. 规范是非常占工时的一项工作。
3. 规范的推广落地需要严格的执行甚至是加入考核标准。