基于组件的设计工做流与界面抽象

基于组件的设计工做流与界面抽象翻译自How we’re using Component Based Design，从属于笔者的Web 前端入门与工程实践。笔者以为本文对于 UI 的六层抽象很适合于前端的代码分割与概念划分，能够参考笔者在2016-个人前端之路:工具化与工程化一文中的解构设计稿这一章节。

在不少大型复杂的项目中，基于组件的设计方案（Component Based Design）每每都会被提上讨论日程。而本文则是做者在不少小型项目中使用 CBD 的感悟与经验总结，项目不管大小皆可适用基于组件的设计方案。首先，我想引用下布拉德弗罗斯特在 Atomic Design 一书中的论述，咱们在作设计的时候并不只仅是设计某个网页或者应用交互，而是在设计一个设计系统。虽然这句话被不少人奉为圭臬，可是我发现很多的使用者在具体实践时却陷入混乱，特别是那些对于产品的不一样抽象层级与相应的命名方法很是容易使得开发者手足无措。所以咱们将本身团队中基于组件的设计的完整抽象流程与你们共享。

何谓 Component Based Design？

简而言之，Component Based Design 就是将整个 UI 切分为更小的、更可控的具备清晰命名的部分。而这些细小的部分又能够划分为以下 6 个不一样的分组。

Identity:特性

首先是特性，便是项目的核心标志性元素，譬如字体、排版、主色与次生色等等。在某个项目中设计人员应该保持全部的设计都听从同一套特性规范。

Elements:元素

第二个可复用的部分是元素，譬如按钮、连接、输入框、下拉列表等等这些都是属于元素。每一个元素同时也会定义其不一样状态下的显示，譬如悬浮状态的按钮、聚焦状态的按钮以及不可用的按钮。咱们的口号是：Define Once，Reuse Throughout The Project.

Components:组件

第三个可复用的部分是组件，这也是用户屏幕当中展现的最多的块。组件便是使用了一到多个元素（Elements）的任何界面部分，典型的譬如卡片、导航栏等等。须要注意的是，组件并不必定须要模块化。

在设计组件的时候，咱们一样须要根据项目的不一样响应式尺寸来设计不一样尺寸下的组件呈现方式。

Compositions:复合

咱们逐步提升咱们的着眼点，第四个分组便是复合。复合是任何包含了多个组件的 UI 部分，它们定义了内部组件的行为范式。下图就是简单的例子，下面的这个复合定义了组件的展现内容、组件的间距、整个标题等信息。

Layout:布局

第五大类，布局，是对于设计原则的更高层抽象，典型的譬如网格系统，定义了行列之间的间隔。定义统一的布局有助于其余设计者复用现有的样式规范。

Pages:页面

最后一组便是完整的呈现页面，每一个页面包含了一系列的复合与组件的排列组合。全部超出设计预期的东西应该添加在页面这个层级，譬如若是市场的同窗说咱们的联系人页背景应该是蓝色的，那咱们就该将这个特性添加到页面这个层级，而不该该污染上述五个层级。

实例

咱们下面以一个简单的例子来阐述基于组件的设计流程。咱们产品的某个重要服务就是进行门票售卖，所以咱们须要展现三种不一样风格的门票卡片、每一个卡片的呈现方式是一致的，都会包含按钮和一些文字。换言之，这里的门票卡片就应该被设计为组件，即所谓的 Ticket-Component.

而后，咱们须要将三种卡片编为一组同时展现在组件上，此时即就是设计出了所谓的复合，Tickets-Composition，定义了每一个卡片之间的间距以及整个的标题。

项目上线的几天以后客户来消息说票卖完了，此时咱们只须要更新下 Ticket-Component 中的文字便可，而不会影响更高或者更低层次的部分。

Sketch

毫无疑问 Sketch 已经正为了 UI 设计与 UX 设计的潮流，咱们也是在 Sketch 中定义了不少的文本样式、符号等等，这样会大大有利于整个基于组件的设计工做流，使咱们更为方便地启动新项目。