设计模式构建设计系统

设计模式

任何的设计都是基于设计策略，或者设计原则进行的思考及制作，我们现在可以将一些设计方法总结出来，形成一个设计系统的模型框架，这样能够快速的进行设计系统的搭建，以及更高效的运用并推广它。即使在团队中可以分享给任何人，包括管理人员，产品经理，交互设计师，UI设计师，以及前台开发人员，包括ios，安卓和mobile端网页开发

设计系统框架

设计系统框架是经过我多年的设计经验总结并形成的一种设计方法，它能够快速的同步和统一团队内部成员的认知，并且提高团队设计的输出统一性以及质量。

我把这个框架分为 策略层，品牌层，控件层，组件层，模块层，页面层。

策略层

设计的原则，也叫策略。有源设计基于设计原则设计的结果。它能够很好的进行设计思考和度量。正确的规划设计结果。以及用户反馈。对设计结果有良好的预期。例如设计的方法：尼尔森十大可用性原则，格式塔组织原则。色彩构成，网格系统等等。

品牌基因层

色彩，字体，图标及风格，交互，动画(含视频)，声音的准则。

色彩: 品牌色，主色调，字体一级重要色彩，字体二级重要色色彩，字体正文色彩，辅助字体色彩。

字体: ios 中文- pingfang sc, 英文 - sf ui display ; android 中文: source hanses cn， 英文 robot;

风格: 图标风格，插画风格，文案风格，空间布局(网格系统)

交互:  统一的弹出方式，反馈方式，和提醒方式。

动画: 在合适的转场，提示的地方动画原则是，简单，有趣。

声音: 柔和，简单，短暂。

控件层

按钮 - 品牌色按钮，品牌色线性按钮，灰色线性按钮，辅助色按钮，小按钮，

图片 - 头像图，商品图，默认图（基于网格系统比例）

图标 - 导航区图标，内容区图标，标签栏及工具栏图标，缺省图标(插画)

表单 - 表单元素（单选，多选，开关，滑块，分页，关闭，输入框，下拉框）

组件层

将控件组合成具有一定任务的功能(不同的应用需要的组件式不一样的，需要根据当前应用的需求去调整组件列表)

提示反馈 - 弹框换行，弹框有操作，无标题弹框，无标题弹框换行，普通弹框，有图弹框，输入弹框

全局加载动画

分页指示器

加载更多

模块层

页面层

sku选择

分组列表

侧边滑动

分类

排序

选项卡

导航栏

搜索栏

商品列表

地区内容

模块层

将组件组合成一个简单的业务功能，我认为它就是模块。这是我和开发人员沟通后的想法。如果多种模块的话就称之为系统了:smirk:。

1. 搜索模块

2. 分享模块

3. 订单系统

3.1 购物车模块

3.2 提交订单模块

3.3 收货地址模块

3.4 支付模块

页面层

这是另外一个维度的模式，它是从用户走过的页面流程进行的补充，属于用户模式。基于业务流程的所有页面，它包含了单个或者多个模块。需要根据业务需要进行的整理。

如何更新框架

所有团队成员需要共同维护这个设计系统，在相同的场景下面的元素使用，需要按设计系统中的组件，有碰到无法从设计系统中直接获取的组件时，需要按策略层的指导进行当前场景的设计，需要符合品牌基因。设计完成后需要更新到设计系统中。并且同步给团队所有成员。

选择你所需要的模块进行使用，其实它就像是在搭积木。选择好固定的模式，就可以简单的把页面组件搭建成我们需要的应用。专注于业务和交互体验上。让产品更伟大。

如何使用设计系统

根据设计系统框架将它做成一份设计系统表单，我们去选择其中需要的部分，然后修改它，这样就能够快速形成一个新的设计语言。

将我们修改完成的设计语言作为基础，随着深入对用户和业务的熟悉不断改进升级，让他变成具有行业深度的一个设计语言系统框架。

试一试在团队内推广它

如果你看完了我所总结的这个方法，我希望你能推广到你的团队，也欢迎与我交流，我们一起完善这个设计语言系统，让未来的设计更专业更高效。

Thank You！！！