在很多大型复杂的项目中，基于组件的设计（ComponentBasedDesign）常常被提上讨论日程。这篇文章是笔者在很多小项目中使用CBD的感悟和经验总结。无论项目大小，都可以应用基于组件的设计方案。首先，我想引用BradFrost在《原子设计》一书中的讨论。当我们进行设计时，我们不仅仅是在设计一个网页或应用交互，而是在设计一个设计系统。虽然这句话被很多人奉为标准，但我发现很多用户在实际操作中陷入了迷茫，尤其是那些不同抽象层次和对应的产品命名方式很容易让开发者无所适从。因此，我们把我们团队中组件化设计的完整抽象过程分享给大家。什么是基于组件的设计？简而言之，ComponentBasedDesign就是把整个UI分成更小、更可控的部分，名称清晰。而这些小部件可以分为以下6个不同的组别。Identity：特征首先是特征，是项目的核心标志性元素，比如字体、排版、原色和二次色等。在一个项目中，设计人员应该使所有设计都遵循同一组功能规范。元素：元素的第二个可复用部分是元素，比如按钮、链接、输入框、下拉列表等，都属于元素。每个元素还定义了它在不同状态下的显示，例如浮动状态的按钮、聚焦状态的按钮和禁用的按钮。我们的口号是：定义一次，在整个项目中重用。Components：组件第三个可重用的部分是组件，这也是用户屏幕中显示最多的块。组件是使用一个或多个元素（Elements）的任何界面部分，通常是卡片、导航栏等。重要的是要注意组件不一定需要模块化。在设计组件的时候，我们还需要根据项目不同的响应大小，设计不同尺寸的组件展示。Compositions:作文我们逐渐提高我们的注意力，第四组是作文。组合是UI的任何部分，它由多个组件组成，这些组件定义了内部组件的行为范例。下图是一个简单的例子。下面的复合定义了组件的显示内容、组件的间距、整个标题等信息。布局：布局的第五类，布局，是对设计原则的更高层次的抽象，比如典型的网格系统，它定义了行与列之间的间隔。定义一致的布局有助于其他设计人员重用现有的样式指南。页面：最后一组页面是一个完整的展示页面，每一个页面都包含了一系列的复合体和组件的组合和组合。所有超出设计预期的东西都应该在页面级别添加。比如市场上有同学说我们联系页面的背景应该是蓝色的，那么我们就应该在页面层面添加这个特性，而不是污染上面的五个元素。水平。例子让我们用一个简单的例子来说明基于组件的设计过程。我们产品的一个重要服务是卖票，所以我们需要展示三种不同风格的票卡，每张卡的呈现方式相同，都会包含按钮和一些文字。也就是说，这里的票卡应该设计成组件，即所谓的Ticket-Component。然后，我们需要将这三张卡片组织成一个组，同时显示在组件上。这时候，我们设计了所谓的组合，Tickets-Composition，它定义了每张卡片和整体标题之间的间距。项目上线没几天，客户发来消息说门票卖完了。此时我们只需要更新Ticket-Component中的文本，不影响上层或下层部分。Sketch毫无疑问，Sketch已经走在了UI设计和UX设计的潮流中。我们还在Sketch中定义了很多文字样式、符号等，这对整个基于组件的设计工作流程会有很大的帮助，让我们更方便的开始新的项目。【本文为专栏作家“张子雄”原创文章，如需转载，请通过联系作者】点击此处阅读该作者更多好文
