把easyui的alert样式替换为bootstrap模态框样式_如何构建设计系统为团队赋能

weixin_39604276

于 2020-11-21 00:13:42 发布

阅读量286

点赞数

文章标签：把easyui的alert样式替换为bootstrap模态框样式

设计系统是什么？

随着行业的不断发展与成熟，商业场景和产品形态的日益丰富，越来越多的团队开始搭建自己的设计系统，并基于业务形成一套整体的解决方案和实践模式，帮助团队不断的去提升效率和创新力。如何在设计时保障客户体验的一致性，持续提高团队的设计效率，不断提升设计开发一体化、自动化的程度，Design System 将成为团队高效协作的必然选择。

各大公司的设计系统

Design System 究竟是什么？我想不同的团队依据自身的使用方式和业务情况都有着各自的理解和阐述；如果你想了解什么是设计系统，Alla Kholmatova 的《Design Systems》书中有一个很好的阐述，即 Design System 是一套服务于数字化产品设计的完整解决方案，包括设计模式和实践方法。

Design System 的发展与演变，四个重要的时刻不得不说，分别是：Christopher Alexander 的《A Pattern language》，Jenifer Tidwell 的《Designing Interfaces》，与 Brad Frost 的《Atomic Design》，Google 的 Material Design。

设计系统的重要时刻

《A Pattern language》一书中首次提出「模式」的概念，将其建筑模式语言称为「空间的种子」。《Designing Interfaces》则以设计模式的形式总结处理界面设计法则，展现了常见设计问题的解决办法及其在实践当中的运用。2013 年时，美国的前端工程师 Brad Forst 的「原子设计（Atomic Design）」则是分层级、有条理地创建设计系统的方法。Google 的 Material Design 更是将设计系统一次数字化的实践与创新。

我们为什么要做设计系统？

30 多种文本样式
各种风格的图标
20 多种不同的卡片投影
10 几种不同大小的按钮
20 几种不同边距的模态框
成千上万行自定义 CSS

为什么要做设计系统？主要的原因有几个，首先，UI 与交互模式并不统一，用户体验并不友好，导致增加了用户的认知与负担，降低了用户的使用效率与频率。

其次，为了更好的沉淀品牌文化，为商业赋能。截止2019年，公司产品已服务于上千家企业，每天有数以万计的客户在使用我们的产品，公司产品给客户和企业带来了极大的价值，但是设计语言并不是那么匹配产品价值，整体风格并不时尚，大方，灵活。甚至有些陈旧，死板。

再次，随着公司企业级服务产品的不断丰富，多产品功能复杂，业务产品频繁变动，业务类型的重复性等现状，为了提升设计师与开发者的工作效率，让他们不再仅凭借着记忆与经验重复地造轮子，让设计师和开发者的心思从「像素」中解放出来，让他们有更多的时间考虑「用户」。所以设计系统的构建显得尤为迫切。

小团队如何搭建自己的设计系统？

罗马不是一日建成的，当你决定要开始这件事时，你就需要明白，要想从 0-1 搭建属于自己的设计系统，关乎的并不仅仅是UI，UE，而是决定着整个设计和产品的打造方式。

我们可能会花一些时间去收集，并定义它们。这个过程可能不那么有趣，但是可以让未来的产品设计师更加专注于有意义的事情。这就是创建一个设计系统的意义所在。推敲一个细节一次，你就可以把你全部的产品开发团队解放出来，让他们专注于解决客户的实际问题。不要想一次做到完美，而是像做一个产品，从前期的调研规划，到实施落地与后期的迭代与优化。

第一阶段：前期规划：目标，原则与模式

如果把设计系统比作一栋楼房，那么前期规划就是你的规划图与地基，规划图决定着你的最终的样子，地基决定你的房子有多牢靠。我们需要对核心价值观达成共识，这是遇到困难和矛盾时可以依靠的标准，这是一个团队责任维护的共同理想。

设计原则：清晰，高效，统一，美观

清晰，功能优先级、可视化层次更加清晰

高效，更好的用户体验，提升使用效率

统一，减轻用户的认知负担

美观，赏心悦目

在 B 端市场，效率才是产品的目标，因为 B 端产品的价值在于在尽量短的时间内抓住用户痛点，很多 C 端所谓美观的产品设计实际使用起来便会令人感到乏味无聊，看上去精彩绝伦的用户界面在很多时候会难以认知和记忆。

我们在重新设计产品的许多细节时，这些原则帮助我们保持一致和专注。你可以修改按钮颜色、线宽、页眉尺寸，但是你不能改变你的基本信仰，在设计的这些方面，你必须保持坚定。

设计模式：什么是设计模式？Christopher Alexande 对模式的定义是：当遇到某个反复问题时，就相应解决方案的核心内容给出的描述。模式可以描述成某个已有领域的最佳实践。对于人机交互界面的设计来说，模式可以让任务变得简单、有成就感、和掌控感。设计模式是界面的可重复的、可重用的部分。一个文本输入框不是模式，不过，一个文本输入框加上它旁边一小片帮助文字的空间关系可能是一个模式。模式是相互关联的，它们共同构成了产品界面的语言。

UI 专家 Bill Scott 和 Theresa Neil 通过《Designing Web Interfaces》一书中详细地展示了 75 种富交互构建 Web 界面的模式，作者把各种最佳实践总结为 6 个重要原理，所以我们的团队就直接引用了这些模式。分别是：直截了当、简化交互、足不出户、提供邀请、使用变换和即时反应，这是被验证了经典原理。包括苹果公司、蚂蚁设计，都将这些原理，奉为自家产品的设计指导。

《Designing Web Interfaces》

第二阶段：实施阶段：明确架构设计，设计范围与体验策略

样式库：「Atomic Design」

Brad Forst 的「原子设计（Atomic Design）」

选一套适合的方式，开始搭建你的架构与砖瓦。架构设计是最消耗时间与心力的阶段，特别是对于一些已经成型的体量大的产品而言，功能流程复杂，一致性差，以怎样的规则去梳理可复用的组件，以怎样的粒度去划分组件层级，怎样确保划分方式具有足够的灵活性与实用性。

对于组件的粒度划分，目前最经典的理论是「原子化设计（Atomic Design）」，所以我们选择「原子化设计」作为我们的架构，我们把过去已有的页面拆解为最小颗粒，提取共性，然后重统一，组成了组件，构成了典型页面与模版。摒弃难用和陈旧的设计，并根据自身业务调整和补充不能满足的部分。我们通过 5 个层面：原子、分子、组织、模板和页面，一步步组成最终页面，以保持设计的整体统一，构筑了一套设计系统。

Atoms（原子）界面中小到无法再拆分的元素，是建造建筑的砖瓦。比如： buttons，icon，inputs，drop-downs 等。每一种都附带所有状态，如：Normal，Hover，Active 和 Disable 。

Molecules（分子）是原子的组合。如：input 组件。

Organisms（组织）是分子组合成的页面中的独立部分。相对复杂一点。如：导航栏，卡片。

Templates（模板）将组织放在页面布局中，重点是确定页面的结构。而非具体内容。这个阶段需要确定的是图片大小、标题长度、正文文字面积大小等。

Pages（页面）是一系列模式的典型页面，是页面的最终真实样子。Pages 是检验 design system 会否合理的有效方式。

Design system 1.0 雏形

这些已经足够设计师快速协作，迅速搭建出精美的页面，也可以使工程师与产品经理在没有设计师的情况下按规范搭建出不会出错的页面。这让我们团队的生产力立即爆发了出来，并同时让我们的设计工作紧密一致了。

业务组件：

如果你的业务很复杂，业务类型重复。设计系统中仅有基础组件就很有可能不能满足你的需求了，那么就需要用原子分子去搭建业务组件，业务组件是什么？比如为了满足业务需求特意设计的时间控件，筛选器，属性下拉列表，邮箱发送设置，分桶设置等。这些反复出现又功能明确的界面，如果没有一个维护，就会导致后期的迭代困难，难以追溯。

分桶设置面板

模式库：

前面已经说过了设计模式，那么模式库是通过设计准则约束的一系列特定的交互模式。例如，新建流程，编辑流程，查看流程，删除流程，这就是一些典型的交互模式。我们把相同的操作统一模式，规范样式，整合在一起。让用户在使用整个产品中不会出现不一致的操作，要知道，毕竟学习需要付出劳动，复杂的新界面对于用户来说，意味着繁重的认知和负担。记得对模式进行改造，去适应具体的用户和需求。