设计语言系统

过去几年在设计行业工作,我学会了与不同部门一起实现同一目标。一个完整的功能齐全的产品,在眼睛上很容易,并提供一个愉快的,即使不是世界的经验。关键是遵循设计语言。请仔细阅读以了解设计语言系统以及如何开始策划设计语言系统。

建立设计语言系统

当您阅读“设计语言系统”时,您可能会将其作为设计团队应该思考的内容来刷新它,但事实并非如此,我会告诉您为什么。首先我们来定义它。

设计语言系统

这是一套提高数字生态系统和谐程度的规则或指导方针。

现在什么是数字生态系统?这只不过是相互依存的一群企业,人或事物共享一个标准化的数字平台,以实现互利的目的。为了保持这个生态系统的和谐,我们需要了解所涉及的不同群体,他们的需求和期望,以建立一个可扩展且高效的健康设计系统。这个相互依赖的企业/人/事物组是你们所有人(设计师,开发人员)进来的地方。你应该做的只是:

  • 让所有人都准备好并在同一页面上。
  • 在健康的时间间隔合作,策划一个健康的设计语言系统。
  • 请记住,在提高内部效率的同时提供良好的用户体验的集体愿望。

设计语言系统就像为你打下基础。它会缩短构建时间并提高效率。我们开始奠定基础。

工具

标准化不同团队在项目不同阶段使用的工具。通过设计,开发和验证阶段发现项目。确保每个人都知道其他团队使用的工具。用于协作的工具应易于访问,并由每个团队中的每个人达成一致。

文件夹系统

创建一个文件夹系统来组织工作。标准化命名约定。这将使查找特定文件变得更容易。找到一个适合所有团队的公式,完善命名惯例和“坚持”。

文档

记录所有这些标准化。创建一个一站式商店,以获取与系统相关的所有信息。

时尚指南

进行用户界面审计(如果在现有平台上工作)。这本质上是对构成数字产品的所有组件进行清点。您所要做的就是截取构成您的产品的所有元素和组件并对其进行分类。组件的范围从右到左,从文本到按钮,手风琴到标签。

UI审计的好处是

一致性:提供一致和有凝聚力的体验

文档:所以在缩放/重新设计/更名等时不会有任何意外。

改造:分析响应改造的可行性。

让老板了解一种通用界面语言:这对于多个人在同一个项目中工作的大型组织很重要。

设计语言系统的基础:将产品分解为原子级,从而帮助建立风格指南或模式库。

其他步骤使风格指南更有用:

工具箱

创建一个工具箱,包含所有用于设计的工具以及使用的插件。所以,当你的团队中有新成员时,他们需要的只是工具箱,并且他们被设置为保持一致性。

命名约定

与命名文件夹类似,找到适合团队使用的命名约定。按照惯例命名图层,组件和符号。

网格系统

设置最适合该产品的网格系统。这将有助于缩短设计决策时间。有一个通用的网格系统,并且可以根据每个新产品的需求自由修改。

排版和文字样式

修复印刷文字和文字风格,实现更快速的视觉设计。

模式库

这基本上就像将产品分解成可重复使用的可以分类和分组的产品。该图书馆将详细介绍每个建筑块的相互依存关系以及将影响每个建筑块的外观方式的一系列规则。这些模式将包括从文本到按钮以及手风琴到标签的所有内容。对于那里的所有开发人员,强烈建议您对模式库的贡献,因为它对代码库有着巨大的影响。

和其他设计一样,完善设计语言系统将会并且应该是一个反复的过程。从这种理解中可以看出,设计语言系统不仅仅是设计团队的益处。它对品牌,业务和最终用户都有很大的好处。

设计语言系统的好处

在这篇文章的前一部分中,我们看到了我们如何构建设计语言系统。现在让我们看看它带来的好处。

我们确定设计语言系统是一套提高数字生态系统和谐水平的规则或指导方针。数字生态系统由相互依存的一组企业,人员或事物组成,这些企业,人员或事物共享一个标准化的数字平台,以实现互惠目 将这些相互依存的团体分为三大类:品牌,用户和业务,让我们看到DLS带来的所有好处。

可识别性

DLS为数字产品创造个性。具有自身特征和其他怪癖的个性使其具有自己的身份,并使其在人口稠密的数字产品世界中得到认可。

例如:Facebook的按钮是签名交互。从2009年2月9日推出到现在,品牌已成为当务之急。即使在上下文之外使用,在第三方站点中作为网络信标,用户也可以识别“喜欢”按钮。

一致性

允许用户与一致的可交互元素集进行交互有助于定义对品牌的看法。与不一致的产品提供的零散体验相比,这总是很好。一个好的设计语言系统可以理解一致性的细微差别,并根据上下文修改元素和交互,并且不会过度一致。

真实性

对媒体表示赞赏的文章。它的独特之处并未在之前完成,与其他应用程序中的喜欢和赞扬相反。这对Medium来说是可信的。当这种真实的设计语言在整个平台中得到贯彻贯彻时,它就会为品牌创造可识别性。

用户

轻松使用和享受

这是不容易的。当用户能够轻松识别和执行其功能时,他可以与一致,轻松流畅的应用程序交互,从而提升用户体验。他的经历变得愉快和愉快。

商业

效率和成本

采用设计语言后,数字生态系统中的设计人员,开发人员和所有其他相互依赖的团队可以快速且经济高效地创建,重新创建,修改或迭代产品。最终产品将与产品生态系统整体协调一致。这种效率水平可以归功于DLS。

例如:Airbnb的设计主管Karri Saarinen建立并维护了Airbnb的设计语言系统。他的团队为DLS设定的目标是

“创造一种更美观,更易于使用的设计语言。我们希望统一设计,通过定义明确,可重用和跨平台的组件来提高效率。“

由于DLS现在已经建成,开发人员可以专注于构建功能逻辑,而不是将时间花在查看代码上。这种方法对Airbnb的团队非常有效。

稳定性和灵活性

DLS作为生态系统中每个人的指示灯。它成为生态系统中每个人都有意识地努力使未来版本与DLS保持一致。这带来了稳定性。设计语言系统应该是一个迭代过程,这确保了持续的稳定性。DLS所提供的灵活性证明,随着时间和环境的发展,它将留在这里。

统一的设计语言不应该只是一套静态规则和单个原子; 它应该是一个不断发展的生态系统。

– Karri Saarinen,设计负责人 – Airbnb。

革新

一旦DLS在产品或应用程序中实施,它就会带来更好的产品用户体验,这将有利于业务。这些机会为创新创造了更多的基础。

设计语言系统的好处是无穷无尽的,不仅可以用在数字生态系统中。阅读下一部分,阅读有关设计语言系统的示例。

一个设计语言系统的例子

在#DLS系列的前两部分中,我们看到了如何构建设计语言系统及其为品牌,用户和业务带来的好处。在这一部分,我们来看一个设计语言系统的例子,但在我们进入之前,下面是一个全面的DLS清单:

  • 适用于整个数字生态系统
  • 面向数字生态系统中每个人的工具
  • 命名约定
  • 文件夹系统
  • 文档
  • 风格指南与UI审计
  • 模式库
  • 工具箱
  • 网格系统
  • 排版和文字样式

以前讨论的设计语言系统的好处:

  • 可识别性
  • 一致性
  • 真实性
  • 使用方便
  • 成本效益
  • 提高效率
  • 稳定性和灵活性
  • 革新

现在让我们回顾一下Atlassian的设计系统。

Atlassian的设计系统

该系统从其着陆页开始,针对数字生态系统中的每个相互依赖的组织。品牌部分,营销产品本身,除了其他方面的指导标志,颜色,插图等。

  • Atlassian的设计系统以非常有效的整体思维涵盖了所有相互依赖的团体,这些文档的层次表现出包容性,并展现了他们自己的文化。
  • 他们提供可供下载的Web UI工具包。注重细节值得称赞。
  • 他们有一套记录模式,并经常不断更新此列表。他们确保在一个名为“新增功能”的部分中将这些信息传达给用户保持系统迭代的积极性,通过保持相关性增加价值。
  • 在Atlassian,他们遵循网格系统来生成视觉和谐和连贯的屏幕。网格系统已经完整记录并可供公众查看。
  • 有关字体堆栈及其用法的不同操作系统的印刷文字记录在案,也可作为Web UI工具包下载。
  • 关于品牌的部分突出了系统为其产品带来的好处。
  • 品牌部分论述了Atlassian产品应反映的个性以及文本应遵循的写作风格。这种个性赋予其产品可识别性和真实性。
Back to Top