一些唠叨

大概去年5 6月份吧，开始详细了解和研究了相关设计系统（可能有其它名字吧，我是直译的）的内容。最近看到蓝湖有了和craft类似的设计规范云的工具，就想把相关的资料和应用实践的心得分享出来。希望对更多的设计师有帮助。

B端，像饿了么的element ui组件库其实已经相当完善了。大部分组件库或文档库，应用在B端或后台更方便。应用在C端，优劣参半。本文只分享C端实践设计系统中的那些事儿。

如有唠叨，敬请谅解。

关于设计系统的概念

关于概念，直接推荐书和网站，本文不介绍了。

必看：书《Design System》，中文版叫《设计体系》（Be for web公众号翻译的，英文电子版见文末附件）。

选看：网站1、 Atomic Design（中文版，阿里团队也有关于原子设计的文章）。网站2、bootstrap（虽然是前端框架，忽略具体代码就行）

本文主要聊聊网站界面清单。界面清单的梳理是上手设计系统前的准备阶段。

已有项目改版需要先梳理界面清单，新项目则可以边做边整理或直接跳过本文。

网站界面清单

interface-inventory，直译为网站界面清单。对于清单的理解，灵感来源于Atomic Design的原作者Brad Frost绘制的Interface Inventory Template。（keynote、ppt模板见文末附件）

1、梳理网站主界面

在梳理界面清单前，先梳理：网站主业务、主用户路径流程涉及界面。界面清单即为这些主界面模块的拆解。对于落地页，即各版块首页和活动页，不太建议用规范限死视觉表现，推广运营的页面变动性较大。

2、梳理界面清单框架

对于清单的框架，可根据自己的业务变通，有以下参考：element ui、Interface Inventory Template、patternlab、Nested Symbols & Auto-Updating Styleguides

图示为Interface Inventory Template的框架梳理。

3、将找出的主界面按框架具体内容，截图归类

按喜好选择梳理工具sketch/ppt/keynote等。将找到的主界面按第二步骤中的框架，分别截图整理。图示为我的某个项目的清单归类：

至此，网站界面清单的介绍结束。整理的过程，不仅是让自己对网站从业务到界面元素都有深刻熟悉，也可以向上汇报为啥需要改版。

实践过程中，会比较耗时和琐碎。

附件可供下载资料：Interface Inventory Template（keynote/ppt) 、

网盘链接：《Design System》英文版（pdf/epub/mobi）。本书我花钱买的，仅供学习交流，不希望二次销售。链接:https://pan.baidu.com/s/1-3ik3UwJ_zxCJj7jKqPhAA 密码:d747