我们将研究设计系统的基础,以及如何确定您是否需要一个系统来改善您的数字客户体验.
到现在为止, 大多数在网络开发行业工作的人都听说过设计系统这个术语, 但如果你还没有创建或使用过, 这篇文章是写给你的.
在这篇文章中, 我将详细介绍设计系统的基础, 什么时候用,什么时候不用, 以及如何开始.
什么是设计系统?
设计系统是一套记录良好的设计规则,它规定了网站组件的外观和交互方式,以提供最佳效果 数字客户体验. 一个好的设计系统应该包括以下内容的文档:
- 颜色
- 图解
- 字体(字体)
- 摄影或图像
- 可重用组件,如表格、网格、下载按钮、动作调用
- 品牌语音语调
- 代码示例或如何实现组件.
直到我提到品牌的声音和语调, 读到这些的开发人员可能认为这看起来像一个样式表, 市场营销人员可能仍然想知道它与品牌标准文件有什么不同.
样式表和设计系统的区别
设计系统将包含样式表, 而且这些东西越可重复使用, 更好的, 但设计系统是更大的画面. 它将包含无法在样式表中显示的细节, 包括何时以及如何使用特定的样式. 例如,查看样式表不会告诉您主用例和主用例. 二次按钮, 或者移动应用程序版本的图标集之间的差异, 或者什么时候在一个按钮中包含一个图标,以及由于某些原因,如果你有多个图标,应该使用哪个图标.
适用于具有全渠道环境的大型组织, 你应该使用设计系统来定义和记录web上的不同组件, 手机(iOS和Android)和不同的微型网站. 你应该有各自的代码示例和用法示例,可能是在不同的语言中. 基于这些原因,设计系统应该存在于web应用程序本身之外.
设计系统与品牌标准的区别
品牌标准或品牌指南 为特定目的服务. 通常的目的是记录品牌细节,如品牌声音, 标志的使用(和替代版本), 图解, 排版, 等等. 一旦你记录了这些, 然后将您的标准提供给新的设计师, 作家, 代理合作伙伴和其他创造性地代表你公司的人,确保他们始终如一地将品牌和设计应用到适当的渠道上.
品牌指南没有告诉你如何在网络或移动应用程序中进行互动,以提供最佳的数字客户体验. 它们不提供代码示例,也不提供何时使用某些可重用组件.
何时使用设计系统以获得最佳的数字客户体验
尽管我热爱并提倡设计系统,但我并不认为所有的网站都需要设计系统. 如果你正在使用一个购买的或现成的主题为内容的网站, 品牌标准通常就足够了. 然而, 如果你正在创建一个自定义应用程序(web或移动), 我认为设计系统大大减少了开发时间和精力,并确保了一致性.
何时使用设计系统:
- 当你创建一个自定义的移动网页,移动或全渠道应用程序
- 当你有多个开发人员负责前端时
- 当您将设计团队与UI开发人员分开或使用承包商时.
让我们逐一看看.
1. 当您创建自定义Web、移动或全渠道应用程序时
对于自定义应用程序开发,您需要确保您的设计系统有良好的文档记录.
每种类型的应用程序都有复杂的交互,需要设计系统. 您应该以一种避免开发人员猜测在何种情况下使用何种组件的方式对每个系统进行记录. 例如:
- 什么时候使用特定的布局,特定的表格格式,什么时候使用调用操作按钮.
- 就像剧本一样, 更好的一致性(外观和交互), 品牌坚持, 什么时候使用情态动词, 当不. 将品牌延伸到.
- 从基层开始工作,工作效率更高.
2. 当你有多个开发人员负责前端控件或组件时
建立客户忠诚度的关键是一致性. 单一、突出的体验可能会吸引眼球,但并不一定会提高用户忠诚度. 根据Forrester的研究, 95%的客户使用三个或更多的渠道在单一的服务交互中与公司连接,62%的客户使用不止一个设备. 这个场景的关键部分是一致性.
个人开发者的风格偏好渗透到应用开发中并不少见. 设计系统可以消除构建数字应用的弗兰肯斯坦方法,即应用看起来像是通过各种不相关的部分组合在一起. 不仅单个开发人员的风格会导致应用程序内部或跨应用程序的不一致性, 但它也会导致CSS膨胀. 人们在不必要的时候投入了太多的时间和精力来定义风格. 设计系统提供对已经存在的设计的访问.
3. 当你将设计团队与UI开发人员或使用承包商分开时
如果产品负责人不是创造设计愿景的人, 然后,接手项目的团队需要确保他们有效地记录设计, 开发者并不是选择如何执行它的人.
想想建一所房子. 一份详细的图纸为各个承包商提供了关于基础尺寸的精确指导, 框架, 电, 管道, 暖通空调, 和更多的. 只考虑前面的例子, 对话或个人承包商偏好, 目前还不知道这所房子建成后会是什么样子,也不知道它将如何发挥作用.
设计系统创造了设计和开发的效率, 特别是对于已经或正计划为其员工和客户创建多个应用程序的组织.
Summary
设计系统是帮助定义品牌互动和促进一致的数字客户体验的重要工具. 它们比代码注释或平面布局文件更全面.
作为未来博客的前奏, 我会提到Bootstrap, 基础和材料不是设计系统. 他们的设计框架. 这些系统仍然需要有人来定义常见的交互, 品牌的声音和语气, 从设计模式的角度来看,应用程序应该如何架构.