用书签打开书
插图by

为变体进行空间

编辑器的一个注释: 一个列表很高兴从Yesenia Perez-Cruz的新书中展示这件摘录章节富有表现力的设计系统,现在有一本书单独出售。

让一个品牌感觉统一、有凝聚力和和谐,同时也为试验留出空间是一个艰难的平衡行为。这是设计系统中最具挑战性的方面之一。

文章继续下面

图形设计师和五角星合作伙伴Paula Scher面临着纽约公共剧院的视觉身份挑战。正如她在超越Trayerrand的谈话中解释的那样:

我开始意识到,如果你把每件事都做得一样,那么第一年之后就会很无聊。如果你为每一出戏单独改变它,剧院就会失去辨识度。在那里工作了17年后,我第一次完全明白了他们需要的是四季。

您可以采取排版和夏季节日的色彩系统,在公园节中莎士比亚,您可以通过翻转颜色来开始将其翻译成海报,但使用一些同一主题,您可以创建整个季节图形。这将成为自己的标准手册,我有大约六个不同的人全年制造这些(http://bkaprt.com/eds/04-01/)。

Scher的策略是每年保留公共剧院的视觉语言,但改变它的一些元素(图4.1-2)。颜色将被交换。文字将偏离不同的方向。将介绍新的视觉主题。结果是每个季节都以自己的方式聚集,但公共剧院的身份也是一个整体的。

十六个公共剧院海报,黑色,白色和黄色,带有倾斜的木型封锁和高对比度的人。
图4.1:2014/15赛季的海报为特色的木型风格闻名,但排版是歪曲的。调色板抑制到黄色,黑色和白色,导致与偏斜类型(http://bkaprt.com/eds/04-02/)相结合的动态外观。
使用黑色,白色和柔和的颜色与木型信件和柔和的人的柔和颜色。
图4.2:对于2018季,木材型封面在渐变颜色的领域延伸。我们在2014/15赛季中看到的灰度剪出照片持续存在,但这一次与较为柔和的色调更好的对比度(http://bkaprt.com/eds/04-03/)。

即使是最强大或彻底的计划系统也需要在某些时候考虑变化。一旦您发布了设计系统,人们会询问您如何偏离它,您将希望掌握有说服力的答案。在本章中,我将讨论一个设计系统的变化手段,如何知道您需要它以及如何以可扩展的方式管理它。

什么是变化?#section2.

我们花了大多数本书谈论在设计系统中统一,凝聚力和和谐的重要性。那么为什么我们谈论变异?到目前为止,这不是我们所设的所有目标吗?

变化是与既定模式的偏差,并且可以存在于系统的各个级别。例如,在组件级别,团队可能发现他们需要一个以略微不同的方式行事的组件;例如,也许这种特定组件需要出现在没有照片的情况下。在设计语言级别,您可能有一个具有不同受众的团队,因此他们希望调整他们的品牌标识,以便更好地为观众服务。您甚至可以在设计原则的水平上具有变化:如果一个团队正在研究与核心产品不同的产品,他们可能需要调整其原则以适应该背景。

设计系统中有三种偏差:

  • 无意的散度通常在设计人员找不到正在寻找的信息时发生的。他们可能不知道系统内存存在某种解决方案,因此他们创建了自己的风格。清晰,易于查找的文档和使用指南可以帮助您的团队避免意外变化。
  • 故意但不必要的分歧通常由设计师产生不想受到系统限制的设计者,或者相信他们有更好的解决方案。确保您的团队知道如何推回并贡献系统可以帮助减轻这种变化。
  • 故意,有意义的分歧是表达设计系统的目标。在这种情况下,发散是有意义的,因为它解决了没有现有模式解决的非常特定的用户问题。

我们希望启用故意,有意义的变化。为此,我们需要了解变体的需求和上下文。

变异的背景# section3

我们添加的每一个变化都使我们的设计系统更加复杂。因此,我们需要注意找到适当的变化时刻。变异提供了三大情境变化:品牌、受众和环境。

品牌#第四单元

如果您正在为多个品牌创建一个系统,每个品牌都有自己的品牌语言,那么您的系统需要支持变化以反映这些品牌。

这里的关键是找到常见的核心元素,然后为您应该偏离的方式设置一些标准。当我们在VOX媒体创建我们网站的设计系统时,我们经常争论哪些元素应该感觉更具表现力。如果页脚标准化,或者我们应该允许大量定制吗?我们回到了我们的核心目标:我们的用户最终访问我们的网站来消费编辑内容。因此,变化应该是每个品牌的内容,写作风格和语音的语气。

VOX媒体品牌的时事模块是不必要的变化的一个例子。它们在功能和布局中一致,但具有像边界等类型,颜色和视觉处理的变化(图4.3)。在一个非常小的区域内有很多定制设计:例如,遏制的时事通讯组件具有偏斜的背景,例如,在食者有背景图像。因为这些模块在其用户目标中是如此一致,因此我们决定统一他们的设计并创造更少的变化(图4.4)。

图4.3:旧版本的VOX媒体的时事通讯模块包含了许多不必要的视觉变化。
三个简报模块的例子,显示相同的颜色、字体和间距。
图4.4:新的,统一的时事通讯模块。

统一设计清理了一些技术债务。在以前的设计中,每个时事通讯模块都有CSS覆盖以实现不同的造型。某些模块甚至在主按钮颜色上覆盖,因此它将使用背景颜色更好地工作。小CSS覆盖,如此随时间增加。每当我们发布新的更改时,我们必须手动更新包含CSS覆盖的斑点。

简化的设计也更适当地关注通讯模块。虽然重要说明,此模块不是页面的明星。它不需要响亮的背景或花哨的形状来指挥注意力,特别是因为它围绕文章内容。该模块的变化不是表达品牌所必需的。

另一方面,考虑VOX媒体的全局标题组件的变化。当我们重新设计时边缘在美国,它的编辑团队表示希望有更多的自由来引导页面的艺术方向,引导人们关注大的特色,以及展示定制插图。我们通过创建一个报头组件(图4.5),它位于首页全局标题的顶部。它包含徽标、标语、日期和可定制的背景图像。虽然在当时这是一个一次性的组成部分,我们觉得这种变化是有价值的,因为它将加强边缘品牌的声音。

边缘的Masthead组件的示例与品红色和蓝色抽象。 边缘的Masthead组件的示例与橙色色调的城市地平线。 在像素为黑色和白色的边缘的Masthead组件的示例。
图4.5:示例边缘桅顶组件

边缘团队委员会或使原始艺术变化全天。最令人兴奋的部分是,当他们删除大功能并将这些灵活的组件使用到艺术的页面(图4.6)。发布后不久,边缘masthead甚至有一个Twitter粉丝账户(@VergeTaglines),每当图片发生变化时,这个账户就会发布消息。

边缘主页的比较,基于Masthead设计和英雄摄影的变化。 边缘主页的比较,基于Masthead设计和英雄摄影的变化。
图4.6:边缘使用两个通用组件,桅顶和单位英雄,向艺术引导其主页。

虽然这个组件是专门建造的边缘,它很快就获得了与其他品牌共享Vox的出版平台合唱的其他品牌。例如,McElroy家族网站需要传达其幽默感和阿巴拉契亚根源;Masthead成分用一个具有可爱松鼠的原始插图闪耀(图4.7)。

Mastroy家庭的Masthead组件,显示蓝色导航栏和森林的淡色例证。
图4.7:mcleroy家庭网站使用相同的桅顶组件作为边缘显示自定义插图。
芝加哥太阳时间的Masthead组件,显示了白色背景,Stark黑色文本和红色订阅按钮。
图4.8:相同的桅顶组件芝加哥阳光时间现场。

芝加哥阳光时间-Another Chorus平台网站 - 在McElroy家族的内容,音调和观众中非常不同,但Masthead组件在传达组织的高质量调查新闻和突破新闻报道中的基调(图4.8)。

为什么报头版本工作得很好,而时事通讯版本却不行?时事通讯设计上的变化纯粹是视觉上的。当我们创建它们的时候,我们并没有一个关于变异如何工作的策略;相反,我们一直在寻找机会,让这些品牌显得与众不同。相比之下,报头的变化则直接与品牌战略有关。尽管它开始是一次性的边缘,它是灵活性和有目的的,足以迁移到其他品牌。

听众# section5

下一个语境变异来自受众。如果您的产品服务不同的受众,那么所有需要不同的东西,那么您的系统可能需要适应这些需求。

Airbnb的列表页面就是一个很好的例子。除了标准的房源外,他们还有Airbnb提供的独一无二的高品质房源,价格也更高。预定加号名单的观众可能是在寻找超凡的品质和对细节的关注。

Airbnb的标准清单页面和加上列表页面都立即识别为属于同一系列,因为它们使用了许多一致的元素(图4.9)。他们都使用Airbnb的自定义字体,谷物。他们都突出了摄影。它们都使用许多相同的组件,如日期选择器。图标是相同的。

Airbnb标准上市的屏幕截图 Airbnb's Plus上市的屏幕截图
图4.9:Airbnb标准列表中的相同品牌元素(上文)在其加上列表(下面)中使用,但具有使列表风格不同的变化。

然而,有些设计选择传达了一种不同的态度。Airbnb Plus使用了更大的字体,更空的垂直空间,以及更轻的谷物。它有一个更低调的调色板,与更深的颜色呼吁行动。这些选择让Airbnb Plus感觉像是一个更优质的体验。你可以看到,他们调整了密度,重量和比例杠杆,以达到更优雅和复杂的美学。

另一方面,标准列表页面与预订模块前端和中心更具功能。Plus设计将密度和重量杠杆拉动打火机,飞速度方向。标准列表页面在元素之间的对比度较小,使其感觉更具功能。

因为他们使用相同的核心构建块 - 相同的排版,图标和组件 - 两个经历都感觉像Airbnb。但是,间距,印刷权重和颜色的变化有助于区分价格从高级列表中的标准列表。

环境#第6部分

我主要谈论为系统添加变化,以允许一系列内容音调,但您还可能需要您的系统根据环境上下文来扩展。在此上下文中的“环境”要求:您的产品将在哪里使用?这会对经验产生影响吗?环境是环绕和通知体验的各种约束和压力。这可以包括照明,环境噪声,被动或主动接合,预期的焦平级别或设备。

Shopify的Polaris设计系统最初逃离Shopify的商店管理产品。当Shopify零售团队启动一个项目来设计下一代销售点(POS)系统,他们意识到北极星的模式并不完全适合他们的需求。POS系统需要在零售空间中运行良好,通常在明亮的照明下。该应用程序需要在ARM的长度上使用,从商家远离二十四到三十六英寸。与Core Admin不同,主要交互在商家和UI之间,商家使用POS系统需要优先考虑与客户的互动而不是UI。零售团队希望商家在UI上实现“眼睛关闭”的掌握程度,因此他们可以与客户保持目光。

零售团队认为,现有的调色板只适用于浅色背景,在零售店明亮的灯光下不够清晰。字体比例也太小,不能在一臂的距离使用。为了让商家在使用POS系统时不打断与客户的眼神交流,按钮和其他UI元素需要更大。

零售团队认识到,当前的设计系统不支持各种环境场景。但在与北极星团队交谈后,他们意识到其他团队也会从他们创造的解决方案中受益。例如,仓库团队还在开发一款需要在明亮灯光下使用的应用程序。这项工作激发了北极星团队为该系统创建一个黑暗模式(图4.10)。

PolarIS设计系统中导航菜单的光和暗模式比较。
图4.10:北极星亮模式(左)和暗模式(右)。

产品团队和设计系统团队之间的这一反馈循环是如何在系统中建立正确的变化的一个很好的示例。在帮助您的用户围绕帮助您的系统更清楚地使用您的产品,并提供内容需求,并且您将解锁可扩展的表达式。

关于作者

Yesenia Perez-Cruz

Yesenia Perez-Cruz他是一位来自宾夕法尼亚州费城的设计领袖、公共演说家和作家。在她的职业生涯中,她帮助过无数的团队制定战略、设计和实施他们的品牌标识和设计系统。目前,她领导着北极星设计系统团队的一个跨职能团队购物。以前,作为产品设计高级总监vox媒体,她带领设计系统进行VOX媒体属性,包括边缘,VOX和食者。

Yesenia在世界各地的会议上一直是一个特色的发言者,比如一个参与者,设计事项和SXSW互动在Web性能,响应设计和设计系统等主题。betway必威体育平台

没意见

有话要说吗?

我们已经关闭了评论,但在我们这样做之前,你可以看到人们不得不说什么。

更多来自ALA.

Webwast.

在这摘录世界范围的废物中,格里麦戈尔恩检查了臃肿网站和不必要资产的环境影响。
行业

连接点

在创意文化的摘录中,Justin Daeer通过许多方式来浏览我们,其中一个组织的文化和设计工作会彼此发挥作用。
事业