为什么需要数字产品设计系统?

“数字产品设计系统”只是数字产品开发中的流行术语之一吗? —“设计冲刺”、“敏捷”、“站起来”、“精益”。本质上,数字产品设计系统不仅仅是每个设计博客中反复提及的流行语或关键词。

设计系统可以保证您的数字产品的创建具有一致性,简化设计和开发流程,并提高生产力。因此,Atlassian、Dropbox、AirBnb、Shopify 和 Audi 等大公司投资设计系统也就不足为奇了。

上面提到的只是设计系统对您的业务的一些价值。数字产品设计系统的创新有很多方面让很多人谈论这个话题。该主题如此受欢迎的一些原因包括:

开发人员不想在不同的媒体上重复相同的工作。
公司希望变得更有效率。
设计师和企业主希望他们制作的数字产品更快、更易于使用且美观。
以上都是科技界面临的共同问题,从而激励我们不断创新,开发新技术,寻找最高效的工作系统和新方法来提高设计质量。

数字世界中有许多创新是出于必要而诞生的。这意味着我们需要找到解决方案,以更巧妙、更高效的方式做事,从而创造更高价值的东西。在数字设计的世界中,这个概念变得越来越重要。设计系统是一种概念和工具,开发人员、设计师和首席执行官可以使用它来提高设计过程的速度并确保产品设计的连贯性。

但设计系统是什么意思呢?好吧,如果您来这里问这个问题,那么您来对地方了。本文将解释什么是设计系统以及它如何使您梦想的数字产品受益。我们希望本文能让您更轻松地更好地理解设计系统及其优点。

数字产品设计系统:

您的数字产品需要什么、如何以及为什么需要它?
在软件开发和设计领域,我们经常被要求提供一次性解决方案。有时我们的工作时间有限,有时我们还没有就前进的道路达成一致。这些一次性解决方案本质上并不是坏事,但如果它们没有建立在坚实的基础上,我们最终就会为累积的技术和设计债务付出代价。

视觉语言就像任何其他语言一样。如果该语言没有被所有使用该语言的人共享和理解,就会产生误解。随着产品或团队的成长,这种模式的挑战也会增加。

设计一直主要是关于系统,以及如何以可扩展和可重复的方式构建产品。从彩通颜色到飞利浦螺丝,该系统使我们能够管理混乱并创造更好的产品。数字产品可能是实施这些系统的最肥沃的土壤,但它们通常不被视为优先事项。

集成设计系统对于更好更快地构建至关重要;更好是因为有凝聚力的体验更容易让我们的用户理解,更快是因为它为我们提供了通用语言。

什么是设计系统?
“设计系统是一项投资。许多公司不会雇佣员工来专注于设计系统,直到意识到这一点时为时已晚。”GitHub 的 Diana Mounter 在她关于设计系统的精彩演讲中说道。如果您的数字产品的品牌价值侧重于:

精心打造的用户体验

为设计师提供一致且 WhatsApp 号码 易于使用的环境
扎实且多才多艺的解决问题的方法
所以系统设计是一项你也必须组织的工作。

设计系统:设计系统?
在不打开字典的情况下,让我们尝试定义这两个词:

设计→ 创建和排列图像、形状和颜色以创造具有视觉吸引力和/或功能性的东西的艺术。

系统→ 一组和谐地协同工作的事物;复杂的整体。

从这两个词的定义,你能猜出什么是设计系统吗?

设计系统由两部分组成:库和文档。您的视觉资产、徽标、字体、颜色。该设计系统还包括 UI 组件、文档和代码片段,使开发人员可以更轻松地在现有产品中使用它们。

这些是设计和代码中应用的规则、约束和原则。这些元素适用于从颜色、排版、间距和布局的所有内容。

有趣的是,设计系统还必须包括非视觉元素,例如语气、词汇、语法和音频提示。所有这些组件都是单独设计的,但组合在一起即可创建一个连贯的产品。

这个概念可以与前端和后端设计进行比较

因此,一方面我们拥有所有这些可重用组件(它们是可视的),另一方面我们拥有这些元素的代码片段,因此开发人员可以使用它们。

我们仔细理解一下,在一个设计系统中,设计时总有一些必须遵守的标准,例如用户的默认图标。对于图标的视觉外观没有固定的规则(这取决于设计师的创造力),但您的设计系统指示了创建图标所需遵循的过程。

简而言之,设计系统由可以更改的视觉(和非视觉)元素和流程组成。应该指出的是,一个好的设计系统还包括命名约定、文件结构以及在数字环境中工作的其他“形式”。因为主要目标是加快和简化设计师的工作方式;它还包括许多文件管理程序。

所以数字产品系统设计不是一个结果,而是一组结果,它会随着新产品、工具和技术的不断发展而不断发展。正如 Jina Anne 在本次会议上完美解释的那样,该系统由物理和非物理元素组成,例如设计人员和开发人员的工具、模式、组件、指南,而且通常是最难实现的几个抽象元素,例如品牌价值观、相同的工作方式、心态、共同的原则。

样式指南或模式库:有什么区别?

WhatsApp 号码

风格指南和模式库只是数字产品设计系统的一些成果。样式指南,顾名思义(样式指南),重点关注图形样式(颜色、字体、插图等)及其使用。模式库集成了功能组件及其用途。

如今,大多数设计系统都包含这两种功能,例如 Shopify 为其样式指南提供了一个“视觉效果”选项卡,为其模式库提供了一个“组件”选项卡。

Shopify — Polaris:风格指南和模式库

简而言之,风格指南和设计系统之间的主要区别在于后者的可扩展性和动态性。

风格指南是静态的、封闭的,而设计系统是动态的、可扩展的。与风格指南在特定时间交接工作的工作理念不同,在设计系统中,设计师和开发人员之间的协作仍在继续。

这给了我们一个简单的结论:设计系统支持敏捷方法,而风格指南似乎更适合瀑布方法。因此,它可以让企业节省大量的时间和金钱。

什么是好的设计系统?

一个好的设计系统当然取决于数字产品的最终执行,但一般来说,以下是一个好的设计系统的要素。

简洁明了的文档。
易于理解的规则和指南。
关于为什么做出某些决定的清晰推理(这个概念的一个很好的例子是Bulb 的设计系统,它在每个组件背后都有一个基本原理,并提供了为什么做出某些决定的背景 – 其中大部分得到了用户研究的支持)
如何开始数字产品系统设计过程?
设计系统的主要目标是促进和简化团队的工作。因此,您需要问自己的第一个问题不是“我的设计系统中应该包含什么?”但“谁将使用它以及如何使用它?”

一旦定义了目标,您就可以初步了解公司中已有的内容(哪些内容有效或无效?团队在这个主题上的成熟度水平?有哪些工具?)。这将使您更容易知道从哪里开始。

#1 目标和共同价值观
我们要去哪里?为什么?又如何呢?

在开始任何事情之前,让团队在一组共同定义的目标上保持一致非常重要。这有助于建立愿景并确保每个人都朝着同一方向努力。

这些目标会随着时间的推移而发展,这是正常的。您只需确保有效地传达变更即可。

关于共同价值观,这些理想将根据品牌的目标指导您的选择。您需要确保您的数字产品设计不会偏离这些关键值。除了品牌和产品价值观之外,您还可以确定每个团队成员必须具备的团队价值观,以便拥有相同的愿景。

ASH 团队海报是根据他们的核心价值观制作的

#2 设计原则

设计原则:设计原则和方法的集合

首先要记住的是,设计原则不仅仅 在竞争激烈的就业市场中吸引人才的 7 个招聘技巧 是产品的视觉方面。

“设计原则是一个指南库,可以帮助团队通过设计实现产品目标。”

这些原则将帮助团队做出重大的设计决策。例如,中等。他们的设计原则之一是“方向优于选择”。由于这一原则,他们没有设计具有无限颜色和字体选项的纯文本编辑器,而是选择了一种更简单的编辑器,使作者能够专注于文章的内容而不是视觉方面。

设计原则应该指导设计选择的决策。

#3 品牌标识和语言

Shopify 品牌标识

品牌标识必须符合品牌战略和目标。阿拉·霍尔马托娃 (Alla Kholmatova) 谈到“感知模式”时如下:

声音
这是一个很好的起点,但不足以以视觉形式阐明品牌的目的。我们必须更进一步,使用列表写下一些单词,然后将这些单词连接在一起,得到一个有意义的句子。

品牌中的元素需要一些规则、语法和词形变化系统。在设计系统中,这是通过指南、注意事项和使用示例来实现的。

身份指南示例 ©Backelite

这将确保设计团队使用这些语言系统的正确组合,因为它们使品牌独特且易于识别。

组件和模式

组件和模式是系统的核心。前面提到的所有元素将帮助我们创建和提供一致的体验。

这些组件就像乐高积木。它们被设计师用于绘制草图,并被开发人员用于编码。必须事先确定它们的功能。同时,模式是开发指令,允许您在所有数字产品平台上逻辑一致地使用组件。

在下图中,我们可以清楚地看到组件将使用技术和功能文档进行定义,而模式将提供有关如何使用它的建议。

#5 最佳实践
除了通常与数字产品系统设计直接相关的文档之外,还有一些最佳实践可以以更大规模和更广泛的方式形成团队工作模式。实现这一目标的方法是探索现有的最佳实践,并根据产品和团队的技能水平实施最有意义的事情。最佳实践将帮助团队塑造和发展他们的技术技能。

BBC 设计系统中的“如何做”

什么样的设计系统适合您的团队?
系统设计几乎没有标准化,因为每个团队可能都有一个与其他团队不同的独特系统。要确定哪种系统最合适,请询问以下问题:

有多少人会使用这个系统?
他们的背景是什么?他们在这个领域是否有足够的能力?
有多少产品需要对齐?有多少个平台?
使用了多少种技术(Angular、React 等)?
您希望数字产品达到什么程度的一致性?
上述问题的所有答案将帮助您确定最合适的设计系 ew 线索 统类型。阿拉·霍尔马托娃(Alla Kholmatova)在她的书中给了我们几个观点,即:

严格还是宽松?

右:爱彼迎 / 左:特德

Strict拥有全面详细的文档,设计和开发完全同步。在系统中引入新模式将有严格的流程。一个严格的系统必须是广泛的,以涵盖团队可能遇到的许多情况。

松散/灵活的系统(loose)为实验留下了更多的空间。该系统为团队提供了一个框架,同时保持了表达自由。设计师和开发人员可以自由使用或不使用它,具体取决于他们对所创建产品的具体需求。

最好在严格和宽松之间找到适当的平衡:非常严格的系统可能会让不喜欢使用它的设计师和开发人员望而却步。另一方面,如果设计体系太松了,我们还能讨论吗?

模块化还是集成?

模块化系统包含可重复使用和可互换的组件。该系统适合可扩展性高、必须适应各种用户需求的项目。缺点是这个系统通常很难实现,因为很难创建可以自动工作并且有能力的模块。

模块化系统非常适合电子商务、金融、政府网站等大型数字产品。要使用模块化系统,如果它基于原子设计原则,那就太好了。

集成系统专注于一个独特的概念。由组件组成但不可互换。该系统适用于不需要重复组件但具有经常变化的艺术活动计划(作品集、展示、营销活动等)的数字产品。

集中式还是分布式?
使用设计系统的企业在演进和可扩展性方面具有优势。在本文中,Nathan Curtis 详细介绍了不同类型的模型。这是其中两个:

您的系统设计采用哪种模型:集中式还是分布式? © 内森·柯蒂斯

在集中式模型中,一个团队负责系统并使其开发。该团队的作用是促进其他团队的工作,并且应该与他们保持密切联系,以确保系统满足他们的大部分需求。

在分布式模型中,来自多个团队的几个人负责系统。系统的采用速度更快,因为每个人都感觉参与其中,但必须有一个团队领导者负责维护系统的整体愿景。

最好邀请大家参与,并开辟提出建议的空间,这样系统才能不断完善,营造主人翁意识。

为什么您的数字产品需要设计系统?
对设计系统的需求随着设计过程中对可扩展性、效率和一致性的需求而增长。想象一下,如果您的公司有一款旧产品。随着时间的推移,团队成员很可能会在产品中产生不一致的情况。

HubSpot 报告称,当他们审核每个设计组件时,他们发现UI 中存在超过 100 种灰色阴影、6 个不同的主页按钮以及许多其他不一致之处。这可能是由于缺乏清晰的设计概要而导致团队成员之间沟通不畅或缺乏团结造成的。此外,在各种不同平台(网站、手机、平板电脑)上开发数字产品可能会造成不一致,从而导致用户体验被缩短。

本设计系统旨在通过整理框架来解决这些问题。该设计系统是图形指南的直接衍生品,但更加完善,并且更加融入团队的工作流程。

设计系统通过为团队提供更加结构化和有针对性的方式来帮助他们创建数字产品问题的解决方案。

InVision 手册将设计系统定义为“在明确标准的指导下,可重用组件的集合,可以将它们组装在一起以构建任意数量的应用程序。”

该定义强调了系统设计的三个主要原则,即:

效率
设计系统不必从头开始重复构建相同的组件,而是允许设计人员和开发人员重用组件,换句话说,提高效率。

一致性
设计系统引入了一套构建组件的共享原则和规则。结果是可以更轻松地跨多个平台创建一致的用户体验。

可扩展性
效率和一致性的提高使公司有机会构建可扩展的产品。

许多公司已经支持设计系统。 AirBnB 设计语言系统帮助他们在利益相关者之间使用通用语言创建解决方案。 IBM 等公司已宣布其 Carbon 设计系统向公众开放,这意味着任何设计师和开发人员都可以做出贡献。

具有设计系统的公司的几个例子
所以,我们已经弄清楚了是什么和为什么,让我们看看谁以及如何实施设计系统。如前所述,许多数字公司从实施设计系统中获益。

谁是这个领域的先驱?

爱彼迎
任何曾经使用 Airbnb 预订住宿的人都会熟悉该应用程序的便捷性和美观的外观。产品设计系统配合简洁的产品设计展示,消除预订住宿的尴尬。

下面,您可以看到 Airbnb 在其基于 Web 的应用程序中使用的清晰简洁的模板示例。

Airbnb的设计体系非常全面。下面,您可以看到他们关于字符大小、颜色使用和间距的规则。

Airbnb拥有世界一流的设计系统,人们立刻就能感觉到这是他们人力资源部门计划的一部分。通过与公众分享他们的资产以及其诞生的故事,他们传达了这样一个惊人的印象:爱彼迎是一个可以充分发挥设计师技能的地方。优秀的系统设计,以及有吸引力的招聘工具!

Spotify
Spotify 非常了解系统设计的重要性。作为同一个人通过多个设备使用的软件,该设计不仅易于使用,而且具有一致性。

当首席设计师Stanley Wood 于 2012 年掌舵时,他对 Spotify 产品的组件缺乏一致性感到惊讶。在接下来的 12 个月里,我们采取了重大步骤来创建Spotify 的设计系统GLUE(统一体验的全球语言)。

那么,Glue 如何改变 Spotify 设计数字产品的方式呢?

设计系统提供了一个共享平台来创建、协作和构建所需的结果,而不是由两名设计师查看同一事物并意外创建不同的解决方案。

国际商业机器公司
在本文提到的所有公司中,IBM 是最古老的。最近,该公司“感到有必要为 IBM 的实施设计指南奠定基础”。他们通过构建 IBM 设计语言来做到这一点。

上图只是 IBM 为其设计团队创建的丰富资源的一小部分。

优势? IBM设计主管乔尼·塞勒 (Joni Saylor)表示,“更新的不仅仅是 UI。”“基本上,这个概念是为了解决我们客户和用户的痛点。”

几年后,由于设计团队及其 IBM 设计语言,营销和销售带来了效益。 IBM 的设计系统是该领域最深入、最全面的资源之一。它们只能与Google 的设计系统Material Design 相媲美。

结论
现在,您对设计系统是什么以及它如何使您的业务受益有了一些了解。

设计人员和开发人员的指南,使他们能够更好地控制应用程序的不同版本。
精心策划的设计系统有助于解决设计师面临的常见问题。
您的系统设计可以创造尽可能最佳的用户体验。
除此之外,了解一些著名的数字产品如何利用设计系统,应该会让您感到有动力和灵感来创建自己的产品。许多数字产品不断发展和变化,您的品牌、消息传递以及最终的设计系统也是如此。

开始构建设计系统的最佳方式是什么?

在构建组件之前,最好进行 UI/UX 审核,以显示哪些组件正在运行,哪些组件不起作用。这还可以确保所有设计过程中的任何不一致都被发现,并且您仍然可以使用正常工作的组件。

您见过 哪些最好的设计系统?

您对于创建和发展自己的产品有什么建议吗?

请在评论中告诉我们!

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注