设计系统：提高网页设计效率

就网页设计而言，设计系统是创建有效数字产品所需的有组织方法、工具和原则的汇编。它就像一个宇宙--每个部分都有自己的位置，并作为一个整体和谐地发挥作用。使用系统进行设计的核心目的是确保所有用户体验活动的一致性，而不受产品或团队的影响。

设计系统可用于多种不同类型的项目，从网站和移动应用程序到企业级软件程序。设计系统为设计师提供清晰的结构，帮助他们了解在创建新事物时需要考虑的要素。这包括排版、调色板和用户界面组件等战术决策，以及与内容布局、导航流和客户服务操作相关的更多战略考虑。最终，实施一个成功的设计系统可以确保团队中的每个人都能加快工作速度，同时保持对生产结果的卓越质量控制。

构成这些系统的组件通常被称为 "构件"，因为它们构成了产品体验中所有交互的基础，从屏幕和视觉元素（如按钮和图标）到文案风格（如语法规则或用户通过聊天平台和通信渠道发送信息时使用的关键词）。每个组件都能与其他模块集成，因此可以根据不同组织的要求将不同方面连接在一起。此外，呈现预定义的惯例可促进所有相关领域的统一性，从而大规模提供一致的可用性。

‍

1. 排版系统
2. 网格和列系统
3. 配色系统  
4. 图标系统
5. 用户界面组件系统
6. 代码模块库
7. 品牌资产库
8. 响应式设计框架  
9. 风格指南出处  
10. 结构布局模板
    

1. 创建更快的设计流程：一个好的设计系统可以让网页设计人员在创建新元素时更容易快速确定要应用的样式，而不是每次都要从头开始摸索，从而节省时间。这样还能使整个网站或应用程序的外观和感觉更加一致，从而在不影响质量的情况下节省宝贵的项目时间。
   ‍
2. 更新和变更全球化：拥有一个界面中使用的所有数字组件的集中列表，可以大大简化任何类型的更新或更改，减轻压力。例如，如果需要在网站的每个页面上添加更多饱和度或更改字体大小，可以在一个地方一次性完成，省去了繁琐的手工劳动。
   ‍
3. 重复使用现有组件：将网页设计存储到一个系统中，意味着任何已制作好的组件都可以随时重复使用，从而降低了在试图重新制作已经完成的东西时出现错误的风险，并通过设计系统中的以前条目加快了网速检索，缩短了最后期限。
   

• 目前使用的设计系统超过三十万种，是网页设计项目中最受欢迎和最有效的解决方案。
• 约 75% 的成功网站在其工作流程中集成了某种设计系统。
• 与以前的传统方法相比，使用设计系统的公司最多可节省 50%的开发时间。
• 利用设计系统可以将原型设计的速度至少提高正常时间的 1/3，让用户比以往任何时候都能更快地测试新创意。
• 设计系统增强了团队间的统一性、一致性和协作性，同时也极大地提高了多个平台上的品牌识别度。
• 现代 "设计系统 "的迭代最早出现在 2016 年，谷歌推出的 Material Design 获得了巨大的商业成功。  
• 据估计，所有已知星系中的三分之一都可以纳入有关 "设计系统 "和网页设计的普通入门指南中！
  

说到网页设计，"设计 "系统在相当长的一段时间内一直是其核心。尽管它在不断发展和演变，但其最初的目的却始终如一。那么，设计系统究竟是什么呢？长话短说，它是一个独立组件的集合，形成一个总体风格指南，并在创建数字产品时提供结构。

在网页设计中，定义明确的设计系统并不总是规范的概念，它最初只是一些更基本的东西，比如按类型或应用领域将相关元素组织成模块。在某些网站上，这包括单个图像、按钮、导航结构和文本。直到 2000 年代以后，字体和其他视觉语言元素才被纳入考虑范围--这使得设计师们在 "设计 "这一概念上有了更多的创意。

设计师们很快就意识到，使用统一的调色板可以提高效率，从而为他们提供了充分的空间来扩展项目，而不是每次在更大的项目上重新发明常用功能。随着技术的发展，各种工具（如模式库）也在不断进步，主要重点转向在整个用户体验中保持一致，无论手头的任务有多大或多或少；由于这种一致性，用户能够更好地浏览网站，同时也让设计师能够设计出视觉上令人愉悦的菜单，而不是像以前那样，从不同来源获得杂乱无章的菜单。

随着设计系统的发展，精确度变得越来越重要--例如，考虑到不同地区的可访问性水平，调色板现在可以在一定范围内浮动；在讨论这些不断变化的设计系统时，图标几何构成了另一个重要话题--毕竟，谁会希望在形状怪异的六边形旁边出现比例怪异的矩形呢？不酷！为了避免干扰用户流程，我们制定了大量标准，确保形状保持相似的对称性，在颜色选择上也有助于保持整体统一，尤其是在通过应用图案或渐变等将注意力从这些结构边缘吸引开时，我们就更能放心了。

但幸运的是，最近制定的协议允许每个人在自己的供应链（设计人员 > 开发人员 > 营销人员等）中分工合作。