一、前端组件化架构

 

　　在给定的软件系统中，基于组件的架构侧重于对广泛使用的功能进行关注点分离。即将不同的复杂性、关注点分离出来，分别进行处理，让每一小部分都拥有自己的关注焦点。通过定义、实现松散耦合的独立组件，将其组合到系统中，以降低整个系统的复杂度。

 

　　组件化具有一系列的优点：可重用、代码简洁、易测试等。

 

　　组件的发展过程：

 

　　风格指南(Style Guide)。对设计的文字、颜色、LOGO、ICON等设计做出规范，产出物一般为Guidline，Guidline一般为UI的规范。

 

　　模式库(Pattern Library)，即UI组件库。模式库更侧重于前端开发，对界面元素的样式进行实现，其代码可供预览使用，产出物一般为组件库UI框架等，如Bootstrap库。

 

　　设计系统(Design System)。设计系统在某种程度上结合了风格指南和模式库，并附加了一些业务特定的元素，并且进一步完善了组件化到页面模板相关的内容。

 

　　二、基础：风格指南

 

　　风格指南(Style Guide)通常是指，用于文档编写和设计的标准，或者用于特定出版物、组织或领域的通用用法。

 

　　前端风格指南是UI界面中所有元素的模块集合，以及实现这些元素的代码片段。

 

　　风格指南只是一份索引：设计、组件的列表，该列表的内容如下：

 

　　其展现形式，通常是以网站的形式来展现的。

 

　　设计人员，通过风格指南来查找对应的设计准备及常见的UI样式。

 

　　开发人员，从风格指南上复制风格的相关代码。

 

　　构建Style Guide并不是一件容易的事情， 它往往需要长期的积累。

 

　　1. 原则与模式

 

　　风格指南是一个包含了常用UI组件的设计，如按钮、表单输入元素、导航菜单、模态框和图标，以及相应的一些设计规范。

 

　　《写给大家看的设计书》中强调的四个设计元素：

 

　　亲密性，即将相关的项（组件）组织到一起

 

　　对其，每一项都应当与页面上的内容存在某种视觉联系。

 

　　重复，重复元素以体现一致性。

 

　　对比，对比产生强调，以强调产生强烈的反差

 

　　2. 色彩

 

　　颜色是设计指南中最重要的部分之一。每个应用都有自己的主色调，支付宝是蓝色的，微信是绿色的，淘宝是橙色的。

 

　　Web应用中的颜色会做如下分类：

 

　　主题色，又可以称为品牌色，用于体现产品的特性及宣传时使用。

 

　　功能色，用来展示数据和状态，以及提醒用户。在Material Design中则被称为次主题色。

 

　　中性色，用于常规页面的显示和过滤，通常是浅色和深色的变种，如白色和灰色。

 

　　在Bootstrap中定义的颜色类型如下：

 

　　primary(主题色)

 

　　secondary(次主题色)

 

　　success(成功色)

 

　　danger(危险色)

 

　　warning(警示色)

 

　　info(提示色)

 

　　3. 文字排印

 

　　对于字体而言， 在开发应用时要考虑的因素有字体大小、字体颜色、行高、字重及字体家族。对于风格指南而言，我们更关注于选择大小合适的字体。

 

　　字体大小所针对的是常用的标题h1——h6，以及普通的段落(p)。在早期的Windows系统里，某些字没有13px大小的字体，因而多数采用的是偶数。这种奇怪的习惯也被保留到今天。通常，设计人员在大于14px的Font-Size中选择合适的大小。

 

　　4. 布局

 

　　栅格设计有很多别称：网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格，等等。

 

　　在平面设计中，栅格是一种由一系列用于组织内容的橡胶直线（垂直的、水平的）组成的结构（通常是二维的），它广泛用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效的使用HTML和CSS的方法。——维基百科

 

　　栅格系统的参数根据项目的实际情况，尽量建立10的倍数或8的倍数。从某种意义上说，他是设计人员的设计与开发人员的数值化相结合的一种产物。

 

　　**CSS3弹性盒子（Flexible Box或Flexbox)**布局是CSS的模块之一，定义了一种针对用户户界面设计而优化的CSS3盒子模型。

 

　　5. 文档及其他

 

　　在文档中我们要指明：

 

　　设计人员如何使用设计指南

 

　　开发人员如何维护设计指南

 

　　如何在项目中使用设计指南

 

　　常见问题的解决方式

 

　　还应包含一系列的设计细节和规范：

 

　　使用图片规范，不同位置的图片的大小，一般采用什么格式的图片，等等。

 

　　留白间距，诸如padding默认是n*4px，即对应的4的倍数

 

　　统一的圆角大小

 

　　...

 

　　三、重用：模式库

 

　　模式库和组件库，是一个容易混淆的概念，它们是包含的关系。

 

　　模式库包含了项目、应用程序中的所有可重用元素，如组件、通用代码等；而组件库只包含应用程序中与组件相关的代码。

 

　　1. 创建组件库

 

　　从头创建一个组件库是一项复杂的工作，寻找一个已有的、不复杂的组件库，往往是一个更好的选择。

 

　　可以基于开源项目来构建组件库：从中删除不需要的组件，添加自己的组件；修改包名、祖建明，在项目内部发布。

 

　　需要考虑如下一系列因素：

 

　　组件提供怎样的方式？选择一次性引入所有组件的包，还是使用某个组件再引入某个组件？

 

　　组件如何发布？组织内部是否有相应的发布方式？是否直接使用Git服务器作为包中心？

 

　　复杂的组件是否直接使用外部组件，而非自己开发？

 

　　对于复杂的组件，是否拆分成一个或多个组件，以降低维护成本？

 

　　组件的反馈渠道。如何提供对其他项目的支持？遇到问题时如何处理，比如GitHub的管理方式是什么？

 

　　组件的发布策略。是定期发布版本，还是以语义化版本的方式发布？

 

　　创建组件库的步骤如下：

 

　　(1)创建脚手架。它可以从框架自带的工具生成，或是从其组件库修改。

 

　　(2)第一个组件。创建一个基本的组件，引入项目上，进行脚手架测试。

 

　　(3) 进行发布测试。选择合适的发布策略，发布组件库，提供快捷的使用方式。

 

　　(4)常见组件的文档中心。

 

　　(5) 提供组件示例。创建一个专门的网站，来提供组件交互访问。

 

　　(6) 持续改进。添加新的组件，修复bug，并不断优化组件库。

 

　　2. 如何维护组件库

 

　　组件的质量和数量是通过两种方式提升的：需求、新的Bug。能让一个组件变得更健壮的方式也在于此，从使用者上接受反馈。

 

　　3. 组件类型

 

　　在Material Design中将组件分为以下几类：

 

　　表单控制类，包含自动完成、输入框、单选框、选择器、滑动输入条等。

 

　　导航类，包含菜单、侧边导航、工具栏等。

 

　　布局类，包含卡片、标签页、树型选择器、栅格列表、步骤条等。

 

　　按钮和指示器类，包含按钮、图标、进度条等

 

　　弹框及对话框类，包含底部弹出框、对话框、提示框等

 

　　数据表格类，包含分页器、排序表单等。

 

　　按组件的架构进行分类：

 

　　基础UI组件。这是最小化的组件，它们不依赖于其他组件。

 

　　复合组件。由多个组件组成的组件，它们依赖于现有的组件

 

　　业务组件。带有业务功能的大量重复使用的组件。

 

　　4. 基础UI组件

 

　　遵循一个基本原则：基本组件是独立存在的。

 

　　在基础组件里，字体图标（Icon Font）相对比较复杂。字体图标相对于图片的优势：矢量地无限缩放特性、像字体一样灵活地进行样式修改、体积更少，等等。 它复杂的原因在于：为了定制图标，需要创建一个新的独立的项目来完成相关的自动化工作。可以直接使用现有的Icon库，也可以在现有Icon库的基础上，再去定制自己的Icon库。

 

　　5. 复合组件

 

　　复合组件是在多个基础的UI组件上的进一步结合。这个层级的组件相对来说比较复杂，原因是它将原本划分在业务部分的逻辑，抽象到了组件层面。

 

　　复合组件包含以下几个部分：

 

　　表格。表格往往带有复杂的交互，比如固定行、固定列、可编辑、虚拟滚动等。由于其数据量大，往往又对性能有很高的要求。

 

　　图表。图标的门槛相对比较高，并且种类繁多，对于显示、交互的要求也高，所以图表相当复杂。

 

　　富文本编辑器。几乎是最复杂的组件，其功能需求往往与Word进行对比，其代码量可能接近Word的数量级。

 

　　复合组件在一定程度上会与业务组件有一定的交集，两者间的区别在于，是否混入了业务特定（领域特定）的代码。

 

　　6. 业务组件

 

　　业务组件是在实现业务功能的过程中抽象出来的组件，其作用是在应用中服用业务逻辑。

 

　　按是否在特定领域（行业）使用，是否只能在当前项目中使用，业务组件可以分为两类：

 

　　第一类，应用相关组件，即与应用逻辑绑定的组件。比如登录组件。它们往往难以在其他系统中复用，即不通过修改参数就直接使用。对于其他系统的应用来说，直接复制代码会是一个更好、更快的选择。

 

　　第二类，领域特定组件，可以用于特定行业的组件，但并非是通用的。比如，系统中有多处地方结合了搜索表单+表格。抽取、提炼成一个组件，就会更加容易维护。

 

　　从某种意义上来说，多数情况下的提前设计是一种过度设计。如果一个组件再可见的未来（通常几星期内）会被再次使用，那么就有预留的必要。

 

　　7. 隔离：二次封装

 

　　如果没有满足自己的“轮子”，自己造一个或者直接在别人提供的组件上，添加自己需要的特性，便可以完成自己的功能。

 

　　这种二次封装的方式，并没与任何不妥。事实上，所有的组件都是在基础的HTML组件上进行二次封装。

 

　　即使我们直接使用第三方的UI库，也需要对UI组件进行封装，以隔离系统与组件的依赖。如果依赖的第三方组件库出现问题，我们只需要替换组件层，不需要进行大规模的代码修改。

 

　　四、进阶：设计系统

 

　　设计系统是一组相互关联的设计模式与共同实践的结合，以连贯组织来达成数字产品的目的。模式是重复组合以创建界面的元素，如用户流、交互、按钮、图标、颜色、排版、微观等。实践则是选择、创建、捕获、共享和使用这些模式的方法，特别是在团队中工作时。——出自Alla Kholmatova的Design Systems一书

 

　　设计系统从本质上来看是规则、约束和原则的集合，其分别由设计和代码实现。从开发人员的角度来看，它是一个尝试解决设计人员的交互一致性的系统；从设计人员的角度来看，它是一个规则的合集。

 

　　设计系统是一个开发人员与设计人员协作的产物。建立一个设计系统，意味着建立一个规则、一套规范，需要大家共同遵循这些规范。

 

　　1. 设立原则，创建模式

 

　　“造轮子”，最简单的方式便是从模仿现有的“轮子”开始。

 

　　原则要保持适当的数量，才能保证容易被记住。

 

　　在Ant Design中共出现了十个原则：亲密性、对齐、对比、重复、直截了当、简化交互、足不出户、提供邀请、巧用过渡、即时反应。

 

　　Salesforce的Lightning设计系统具有如下特点：

 

　　明晰。消除歧义。让人们看到、理解并充满信心地采取行动。

 

　　效率。简化和优化工作流程。智能地预料需求，以帮助人们更好、更智能、更快的工作

 

　　一致性。对同一个问题应用相同的解决方案，以创造熟悉度，并加强直觉。

 

　　美观。通过周到和优雅的工艺，来表现出对人们的关注的尊重。

 

　　Material Design设计系统中的原则：

 

　　配目、图形、精心设计(Bold, Graphic, Intentional)

 

　　动作来表达隐喻(Motion Provides Meaning)

 

　　灵活的根基(Flexible Foundation)

 

　　跨平台(Cross-Platform)

 

　　UX设计平台UXPin提出的创建设计原则的步骤：

 

　　(1) 寻找产品类比

 

　　(2) 在产品类比中寻找设计原则

 

　　(3) 通过用户调研，让列表变得真实

 

　　(4) 建立价值主张

 

　　(5) 抽象原则

 

　　2. 原子设计

 

　　原子设计是一种方法论，由五种不同的阶段组合而成，它们协同工作，以创建一个有层次、有计划的界面系统：

 

　　原子，即事物的基本组成部分。它是最小的单元，不能再往下细分，也就是最基本的HTML标签，比如表单标签、输入、按钮。

 

　　分子，即由原子聚合而成的粒子。在UI设计中，分子是由几个基本的HTML标签组成的简单组织，如移动Web应用的底部导航栏。

 

　　有机体，是由分子、原子或其他有机体组成的相对复杂的UI组件。它用于创建一些独立、可复用的内容，比如header、footer等。

 

　　模板，顾名思义就是整合前面的元素，构建整体的布局，它将组件在这个布局的上下文中结合到一起。比如，一个博客包含header、footer及博客内容，三者可以构建一个基本的外观。

 

　　页面。用真实的内容（数据）展示出来的最终产品，它还能测试设计系统的弹性。

 

　　3. 原子

 

　　原子是网页构成的基本元素。对于前端开发人员来说，设计系统的原子部分，便是模式库中的基础组件。有各种基础标签组成，如封装<input>标签的输入框、封装<a>、<button>构成的按钮。

 

　　4. 分子

 

　　分子是由原子构成的。它是先前提到的复合组件。

 

　　与原子级别的组件相比，分子级别的组件才是日常开发中使用最多的。

 

　　5. 有机体

 

　　有机体是由原子及分子组成的相对复杂的UI构成物。它与分子最大的区别在于，有机体级别的组件在设计的时候，体现了设计系统中的设计模式。

 

　　在Atomic Design一书中所举的粒子是：网页的头部(header)，它是包含几个具有自己独特的属性和功能的小界面。

 

　　与header同样级别的组件，基本上是业务相关的组件，比如带过滤的搜索区域、列表页、footer等。

 

　　6. 模板

 

　　原子设计的模板，和我们理解的模板是相似的。对于设计人员来说，模板更多的是粗粒度的线框图，它用于展示有机体、分子、原子之间如何相互结合。而对于开发人员来说，模板则是一些接近完成的页面的编码，只是代码中的数据是伪造的，而非真实的数据。

 

　　7. 页面

 

　　页面，是一个一个具有真实业务功能和真实数据的组件集合，是一个真实的模板。 在设计页面的时候，分别关注于设计和代码的可维护性。

 

　　8. 维护和文档

 

　　设计系统几乎都是以网站的形式存在的。网站是一个快速、有效的文档展示方式。

 

　　五、跨框架组件化

 

　　对于团队的技术决策者来说，绑定框架的实现是一种冒险的做法。

 

　　不同的框架开发方式不同，导致不同的前端框架之间的组件不能一起使用。好在这些应用都可以开发成一个Web Components(Web组件),我们可以在框架里引用这些组件。

 

　　没有跨UI框架的组件库的原因：

 

　　技术不够成熟。现有的前端框架对于Web Components的支持并不是很好。

 

　　Web Components技术重写组件不够好。