设计变得越来越复杂。设计流程需要参与产品创建的所有团队之间进行紧密的跨职能协作。拥有共享的设计语言使团队能够更有效地协作。这就是为什么许多公司在设计系统上进行投资的原因。但是,我们如何确保设计系统真正适用于你正在开发的产品并提高团队的生产效率呢?

设计系统可帮助产品团队在进行设计时考虑到系统化。但并非所有设计系统都同样有效。一些设计系统可以帮助产品团队创建连贯的体验,其他则会产生令人困惑的设计。

设计系统的有效性可以通过它如何工作来帮助实现产品的目的来衡量。在本文中,我们将尝试找到使设计系统适合你的产品开发的有利条件。

您是否清楚地了解为什么需要设计系统?

产品团队常常会尝试为他们不存在的问题创建解决方案。有些团队创建设计系统仅仅只是因为其他团队正在这样做。

产品和公司成熟度

公司具有不同级别的设计成熟度。有些公司的产品拥有数千名用户,而另一些公司则刚刚开始实施他们的产品。

从头开始创建设计系统是一项耗时的工作。快速发展的小型团队可能不需要设计系统,因为这会减慢他们的速度。一个三到五人的创业公司试图找到适合市场的产品,可能会花费大量时间来创建系统。从另一方面讲,如果资源用于构建设计系统,则不会用于构建产品。在公司确定产品的明确方向之前,投入时间来创建设计系统可能会产生大量浪费。

设计系统应该来自于大幅度提高效率的需要。只有当团队在效率方面存在实际问题而无法快速解决时,才会需要制作设计系统。首先你的团队需要达到一定的规模,并且在设计决策上产生了低效率事件(比如在技术和设计部门中),这时就需要设计系统参与进来了。

界面审核和技术堆栈

许多公司倾向于在当前界面之上构建设计系统,但是由于许多原因,这种方法并不是很好。想象一下,你的公司长期以来一直在没有系统的情况下构建产品;该产品可能在设计上存在一定程度的不一致。

因此,如果你打算引入设计系统,请先进行审核:探索现有交互,并收集产品中的所有UI元素。收集组成界面的所有元素,并将其归档以供审阅。这些评论应有助于你理解不一致的原因以及在设计过程中需要进行的更改,以避免将来出现此类问题。

设计系统是否为设计师和开发人员设定了明确的方向?

设计系统只有在从事产品工作的人员采用它时才有价值。共同的理解在采用该系统方面起着至关重要的作用。

在开始设计产品之前,必须围绕一组明确的共同目标调整团队。建立愿景,并确保每个人都朝着同一方向看齐。设计系统应为团队提供指导性方法,为其产品存在的问题构建解决方案。

列出用户的需求、目标和动机

开始使用产品时,我们要做的第一件事就是了解我们的用户是谁,以及他们的目标、需求和动机是什么。此信息应该是你要创建的设计系统的基础。

诸如用户旅程映射(user-journey mapping)和 Jobs to be Done 框架之类的工具将帮助你了解人们如何与你的产品进行交互。在设计系统上工作时,产品团队应牢记这些信息。

表达产品的目的

目的作为产品的核心应该为设计和开发决策提供依据。产品的目的应该用一句话表达。例如,如果我们正在设计一个用于快速放松的冥想应用程序,那么我们的目标是帮助使用该应用程序的人放松身心。如果我们用一句话来表达这个目的,那将是“帮助人们立即放松”。

注意,目的应该是自然而然的,而不是强制性的;否则,团队将不会相信它。

建立清晰的设计原则

扎实的设计原则是任何运行良好的系统的基础。他们应该把握好设计对公司的意义的本质,并就如何实现设计向产品团队提供实用建议。

设计原则应基于产品的原则和价值来创建。上图为Lightning Design System的设计原则。

以下是一些设计原则指南。

设计原则应真实可信

我们中的许多人都听到过诸如“简单有用”这样的原则。但是这些原则应该更佳具体化。只知道你的产品应该简单实用是无助于指导你的设计决策的。想象一下,有一个新成员加入你的团队,你需要分享在设计产品时最重要的三个指导原则。你可能会说:“我们喜欢简单的事物,努力创造简单的事物。”这句话对这个人来说跟没说一样。很难想象有人会故意创建复杂而无用的产品。

这就是为什么设计原则应该为如何解决特定产品环境中的设计问题提供实用指导。流行的博客平台Medium的设计原则之一就是“选择方向”。对应这一原则,Medium的设计团队决定限制设计视觉样式的数量,而不是设计具有无穷无尽的视觉样式的文本编辑器。这样一来,他们就能使作者专注于真正重要的事情:他们正在编写的内容。

Medium文本编辑器 Medium文本编辑器

设计原则应令人难忘

问公司里的人你的设计原则是什么。如果没有人能记住他们,那这些原则就没用。

设计原则应提供实用示例

即使是最好的设计原则也可以以不同的方式解释。没有什么比用一个真实的事例来说明该设计原则在特定环境中的应用更好的方法了。

提示有时你需要提供反例,以帮助人们理解不该做的事。

界面的设计语言有效吗?

随着团队工作于特定的产品上时,一种设计语言应运而生。界面的设计语言对用户与产品的交互方式具有重大影响。如果使用设计系统创建的产品令人困惑,并且不能帮助用户实现其目标,则该设计系统无效。

如何执行和应用设计模式

模式是可重复使用的用于解决设计问题的方案。设计模式由产品工作原理的核心理念所决定,它们构成了团队用来与用户交流的语言的基础。

模式有两种类型:“功能(functional)”和“感知(perceptual)”。

功能模式

功能模式是界面的有形构建基块。按钮、图标、文本字段等全部组合在一起,形成了我们所谓的产品。

许多因素会影响设计模式的选择,其中大多数来自产品所属的领域及其核心功能。让我们以金融产品为例。金融产品可能需要优先处理多任务和快速扫描(这需要更高的信息密度)。在如下所示的彭博(Bloomberg)界面中,密度是通过紧密的间距、紧凑的控件和良好的排版选择来实现的。

彭博(Bloomberg)终端采用密集型设计,可在屏幕上显示大量信息。 彭博(Bloomberg)终端采用密集型设计,可在屏幕上显示大量信息。

感知模式

克里斯托弗·亚历山大(Christopher Alexander)在他的著作《建筑的永恒之道(The Timeless Way of Building)》中提出了疑问,为什么有些地方感觉如此伟大,而另一些地方却感觉枯燥无味。根据他的说法,地点和建筑物给我们的感觉是特定模式的结果:感知模式。

感知模式侧重于用户的感受。颜色、排版、图标、形状和动画共同构成了产品的标识。如果没有感知模式,你将不会感觉到同一领域中的产品之间会有太大的区别。

产品中的美学、声音和语气应捕捉我们希望通过界面传达的个性和精神:

  • 我们希望如何感知我们的产品?
  • 我们的产品是严肃的还是有趣的?
  • 是功利的还是情感化的?

MailChimp的声音和音调。 MailChimp的声音和音调。

理解感知不仅受单个元素(文本、颜色、字体、空白等)的影响,还受这些元素之间的关系的影响。换句话说,仅使用颜色和字体是不够的。我们还应该意识到使产品具有某种感觉的“恰到好处”的组合。

提示在使用感知模式时,可以使用情绪板(Mood Boarding)技术。收集具有相关视觉样式的所有元素,并定义其核心视觉品牌元素。情绪板是探索不同视觉主题的绝佳工具。要制作一个情绪板,你可以使用 Pinterest 这样的数字工具,也可以将打印出来的页面布置在大型画板上。

衡量进度

实施设计系统是一个过程。并且至关重要的是要确保该系统始终有用。无论你在预测事物方面有多好,在许多情况下,都很难预测特定的变化将如何影响用户体验。这就是为什么定义指标并一直跟踪它们很重要的原因。每次发布后,请评估产品的性能。衡量定性和定量结果,并确保指标朝着正确的方向发展。

团队实践的有效性如何?

内部设计团队的工作速度如何?

从事产品工作的人员能否更快地更改产品?

有效的设计系统可使企业更快、更低成本地实现其目标。设计系统应减少实施决策,因为团队成员将准备使用产品的所有元素以及有关如何使用它们的信息。随着产品构建过程的加速,设计师将获得更多时间,他们可以在其他领域(如用户研究)进行投资。

以下是一些需要监视的区域:

  • 效率:测量新模式集成的速度以及对现有模式进行快速更改的速度。如果设计人员经常不得不引入新的组件来解决问题,则可能是设计系统不灵活的强烈信号。
  • 一致性:跨不同平台创建一致的体验的困难程度。

就设计效率而言,对工具和技术的投资至关重要。一个好的工具箱将有助于消除设计过程中的手动操作。Adobe XD 提供了两个可以提高设计效率的出色功能:组件和共享资源面板。

使用 XD,你可以创建一个主组件来定义可重复使用的UI元素,例如按钮。在用户界面中创建任何组件的实例,然后对其进行自定义。组件旨在响应式调整大小,因此你可以采用任何实例并调整组件的大小,XD 会自动为你管理组件内元素的位置和缩放。

你可以使用“资源”面板来整理要提供给团队中其他设计师的可重复使用元素的集合。要使其他人使用你定义的视觉样式和组件,请使用“共享”->“邀请编辑”邀请他们加入文档。好消息是,每个人都会利用最新的资源。每当更新设计时,都会向被邀请参加集合的团队成员通知相关更改。团队成员将能够自行决定是否进行更新。

开发人员如何轻松地编写UI?

众所周知,开发人员和设计师必须携手合作。在设计人员与开发人员之间的沟通方面,设计规范起着关键作用。设计规范中最重要的方面是清晰度:如果开发人员不理解规范该规范,则他们可能会实施与原始想法不同的东西。良好的设计规范可以减少对设计决策的错误解释。

使用Adobe XD,创建明确的规范是一个相对简单的过程。你可以使用“共享”->“开发共享”在网络上发布你的设计系统。该资源将包含有关颜色值、样式属性和可下载资源的信息。

命名约定有多好?

设计系统是否允许团队成员更高效地沟通?语言是协作的基础。设计系统中的每个元素都应有一个已知且对团队中人员有意义的名称。正确的命名约定对于要扩展的产品尤其重要,随着库中模式数量的增加,良好的命名约定可以帮助团队成员快速找到所需的内容。

以下是有关命名元素的一些技巧:

  • 设计系统语言的独特之处在于其粘性。与任何其他语言类似,我们要使用该语言才能生存。它必须成为我们日常工作中的一部分。
  • 如果团队尚未完全了解其目的,则很难为其命名。如果你很难找到合适的名称,那么很可能有些不对劲。也许是因为一个元素的目的并不清楚。
  • 从用户角度命名组件。与产品的用户和潜在用户交谈,并根据组件的引用方式命名组件。这将有助于工程师从用户的角度进行思考,并始终考虑用户。
  • 与用户一起测试你的语言。这样可以确保你定义的模块与用户的潜在行为和心理模型保持一致。

维护系统有多容易?

设计系统不是静态工具,而是公司中的生命有机体。它应该与你的产品一起成长和发展。保持系统最新状态所需的时间在其成功与否中起着关键作用。如果使设计系统保持更新变得困难,它将很快过时。

以下是需要考虑的两个重要时刻:

  • 根据公司的规模,设计系统可以是静态的也可以是动态的。最好有一个动态设计系统,该系统会随产品实时更新。同样,静态设计系统不适合拥有大型产品的公司,因为引入更改所需的时间会很长。
  • 设计系统应具有路线图(roadmap)和代办需求池(backlog)。与其他任何产品一样,创建设计系统是一个迭代的过程。

设计系统是否扩展了创意方向?

创意实验是设计过程中不可或缺的一部分。有时,有效的设计决策是基于直觉的。因此,设计系统的主要目标之一就是扩展创意方向。设计系统应鼓励从事产品工作的人员发挥创造力和自发性。

邀请所有人为系统做贡献

公司中的每个人不仅应该被允许,而且应该被鼓励为系统做出贡献。给予人们足够的自由来做出贡献,同时确保系统保持被管理着。

提示请遵循点对点审核流程。这将提高人们对设计系统的认识。

在粘性系统(Sticky System)和松散系统(Loose System)之间取得平衡

设计系统的某些用户专注于完美的一致性。但是,完美的一致性并不能保证制造出一个伟大的产品。如果你要遵循的流程是具有限制性的,则你可能会使用的设计会是通用形式的。因此,在设计的一致性和创造性之间找到平衡至关重要。

在进行创造性探索,最好先进行小规模试验。如果某些元素运行良好(例如,号召性用语按钮采用了新样式),则设计系统应该可以轻松地将更改集成到界面的其他部分。

总结

精心设计的设计系统是你产品开发的北极星。设计系统放大了设计驱动的文化,它鼓励从事产品工作的人员超越构建基块,思考其设计的目的。设计系统所展现的全局将有助于你更好地了解用户,并最终改善用户体验。