用书签打开书本
插图的

为变化腾出空间

编者按: 一个列表很高兴向大家介绍这一章的节选表现设计系统,现在可在单独的一本书上找到。

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

继续下面的条

平面设计师和Pentagram合作伙伴Paula Scher在纽约公共剧院的视觉识别方面面临着这一挑战。正如她在Beyond Tellerand的一次谈话中所解释的:

我开始意识到,如果你把一切都做得一样的话,第一年之后就很无聊了。如果你为每出戏单独更改,剧院就失去了可识别性。我在这里工作了17年,这是我第一次在这里工作,现在我要做的是他们需要的季节。

你可以为夏天的节日,公园里的莎士比亚节,使用排版和颜色系统,你可以开始把它转化为海报,通过摇摆的颜色,但使用一些相同的主题,你可以创造出整个季节的图形。这将成为它自己的标准手册我有六个不同的人一年制作这些(http://bkaprt.com/eds/04-01/)。

舍尔的策略是每年保留公共剧院的视觉语言,但要改变一些元素(图4.1 - 2)。颜色会被调换。文本会向不同的方向倾斜。将引入新的视觉主题。其结果是,每一季都以自己的方式连贯在一起,但公共剧院作为一个整体的身份也是如此。

十六幅黑色、白色和黄色的公共剧场海报,带有倾斜的木质字体和高对比度的人物形象。
图4.1当前位置2014/15季的海报采用了公共剧院著名的木质风格,但字体是扭曲的。调色板被限制为黄色、黑色和白色,当与倾斜的类型结合使用时,会产生动态外观(http://bkaprt.com/eds/04-02/)。
12个公共剧院海报,使用黑色,白色和柔和的颜色与木材类型的字体和柔和的人物形象。
图4.2:2018赛季,木质字体扩展到渐变色领域。我们在2014/15赛季看到的灰阶剪影照片依然存在,但这次对比度降低,以更好地适应更柔和的色调(http://bkaprt.com/eds/04-03/).

即使是最稳健或计划最周密的系统,也需要考虑到某个时刻的变化。一旦你发布了一个设计系统,人们会问你如何偏离它,你会希望得到有说服力的答案。在本章中,我将讨论变化对设计系统意味着什么,如何知道何时需要它,以及如何以可伸缩的方式管理它。

变化是什么?#第二节

我们在本书的大部分时间里都在谈论设计系统中的统一、凝聚力和和谐的重要性。那么我们为什么要讨论变异呢?这和我们到目前为止所设定的目标不一致吗?

变化是对已建立模式的偏离,它可以存在于系统的每个级别。例如,在组件级别,团队可能会发现他们需要一个组件以略微不同的方式行事;例如,这个特定组件可能需要在没有照片的情况下出现。在设计语言层面上,你的团队可能拥有不同的受众,所以他们希望调整自己的品牌标识以更好地服务于这些受众。您甚至可以在设计原则的层次上有所变化:如果一个团队正在开发的产品在功能上与您的核心产品不同,那么他们可能需要调整他们的原则以适应环境。

在设计系统中会出现三种偏差:

  • 无意发散通常发生在设计师找不到他们要找的信息的时候。他们可能不知道系统中存在某种解决方案,所以他们创建自己的风格。清晰、易于查找的文档和使用指南可以帮助您的团队避免无意的变化。
  • 有意但不必要的分歧通常是因为设计师不想被系统束缚,或者认为他们有更好的解决方案。确保您的团队知道如何推动并为系统做出贡献,可以帮助缓解这种变化。
  • 有意的、有意义的分歧是表达性设计系统的目标。在这种情况下,分歧是有意义的,因为它解决了一个现有模式无法解决的非常特定的用户问题。

我们想要实现有意的,有意义的变化。要做到这一点,我们需要了解变化的需要和环境。

环境的变化#第三节

我们添加的每一个变体都使我们的设计系统更加复杂。因此,我们需要注意寻找合适的变化时机。变化服务于三大语境变化:品牌、受众和环境。

品牌#第四节

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

这里的关键是找到共同的核心元素,然后为如何偏离设定一些标准。当我们在Vox Media为我们的网站创建设计系统时,我们经常讨论哪些元素更有表现力。页脚应该标准化,还是允许大量的定制?我们回到了我们的核心目标:我们的用户最终访问我们的网站是为了消费编辑内容。因此,这些变化应该服务于每个品牌的内容、写作风格和语气。

跨Vox媒体品牌的时事通讯模块就是一个不必要变化的例子。它们在功能和布局上是一致的,但在类型、颜色和像边框这样的视觉处理上有所不同(图4.3)。在一个非常小的区域内有相当多的定制设计:例如,Curbed的时事通讯组件有一个倾斜的背景,而Eater的有一个背景图像。因为这些模块的用户目标是一致的,所以我们决定统一它们的设计,减少变化(图4.4)。

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

统一设计清理了一些技术债务。在之前的设计中,每个newsletter模块都有CSS覆盖以实现不同的样式。一些模块甚至覆盖了主按钮的颜色,以便它能更好地与背景色一起工作。像这样的小CSS覆盖会随着时间的推移而增加。每当我们发布一个新的更改时,我们必须手动更新包含CSS覆盖的位置。

流线型的设计也更加恰当地强调了新闻稿模块。虽然很重要,但这个模块并不是页面的明星。它不需要响亮的背景或花哨的形状来吸引注意力,特别是因为它被放置在文章内容周围。这个模块的变化对于表达品牌是不必要的。

另一方面,考虑Vox Media的全局标题组件的变化。当我们重新设计边缘,它的编辑团队直言不讳地表示,希望有更多的空间来指导页面的艺术,引导人们关注大功能,并展示定制插图。我们通过创建一个刊头组件来解决这个问题(图4.5)它位于主页上全局标题的顶部。它包含徽标、标语、日期和可自定义的背景图像。虽然在当时这是一个一次性的组成部分,但我们认为这种变化是有价值的,因为它将加强边缘的品牌声音。

具有洋红色和蓝色抽象的Verge报头组件的示例。 the Verge的报头组件的例子,带有橙色的城市天际线。 这是一个黑白像素化的Verge报头组件的例子。
图4.5:的例子边缘报头的组件

边缘团队委托或制作原始艺术,整天变化。最令人兴奋的是,他们可以使用报头和一个英雄,当他们放下一个大的功能,并使用这些灵活的组件来艺术指导页面(图4.6)。发射后不久,the边缘masthead甚至有一个Twitter粉丝帐户(@VergeTaglines),每当图片改变时都会发Twitter。

对比the Verge的主页,根据报头设计和英雄照片而改变。 对比the Verge的主页,根据报头设计和英雄照片而改变。
图4.6:边缘使用两个通用组件,刊头和一个英雄,艺术指导其主页。

尽管该组件是专门为边缘不久,它就获得了与其他品牌共享Vox的出版平台Chorus更广泛的应用。例如,McElroy家族网站需要传达它的幽默感和阿巴拉契亚的根源;刊头部分闪耀着一幅原始插图,其中有一只可爱的松鼠(图4.7)。

McElroy家族的报头组件,显示蓝色导航栏和森林的彩色插图。
图4.7:控件使用相同的报头组件边缘显示自定义插图。
《芝加哥太阳时报》的报头组件,显示白色背景、纯黑色文字和红色订阅按钮。
图4.8:控件上相同的报头组件芝加哥太阳时报网站。

芝加哥太阳时报-另一个合唱平台网站在内容、语调和观众方面与麦克罗伊家族有很大不同,但刊头部分在传达该组织高质量调查性新闻和突发新闻报道的语调方面同样有价值(图4.8)。

为什么刊头的变化工作良好,而时事通讯的变化没有?通讯设计上的变化纯粹是视觉上的。当我们创建它们的时候,我们并没有一个策略来说明变化应该如何工作;相反,我们在寻找任何机会来让品牌感觉与众不同。相比之下,刊头的变化直接与品牌战略联系在一起。尽管它开始只是边缘,它的灵活性和目的性足以转移到其他品牌。

观众#第五节

下一个语境变化来自观众。如果你的产品服务于不同的受众,他们都需要不同的东西,那么你的系统可能需要适应这些需求。

Airbnb的列表页面就是一个很好的例子。除了标准房源外,他们还拥有Airbnb Plus独一无二的高品质租房,价格更高。预订附加列表的观众可能希望获得卓越的质量和对细节的关注。

Airbnb的标准列表页和Plus列表页都可以立即识别为属于同一个系列,因为它们使用了许多一致的元素(图4.9). 他们都使用Airbnb的定制字体,麦片。他们都强调摄影。它们都使用许多相同的组件,比如日期选择器。图像是一样的。

AirBnB标准房源的截图 AirBnB Plus上市截图
图4.9:Airbnb的标准列表(上)中的相同品牌元素在其Plus列表(下)中使用,但会有不同的列表样式。

然而,一些设计选择传达了不同的态度。Airbnb Plus采用了更大的字体、更通风的垂直空间和更轻的谷物重量。它有一个更低调的调色板,有一个更深的呼吁行动的颜色。这些选择让Airbnb Plus感觉更为奢华。你可以看到他们已经调整了密度,重量和比例杠杆,以实现更优雅和复杂的审美。

另一方面,标准的列表页面功能更强,预订模块位于前台和中心。Plus的设计将密度和重量杠杆拉向更轻、更轻飘的方向。标准的清单页面元素之间的大小对比更小,使它看起来更实用。

因为它们使用相同的核心构建块相同的字体、图像和组件,这两种体验都让人感觉像Airbnb。但是,间距、排版重量和颜色的变化有助于区分标准列表和高级列表。

环境#第六节

我主要讨论的是在一个系统中添加变体以允许一系列内容音调,但您可能还需要您的系统根据环境上下文进行缩放。“环境”在这里问:你的产品将在哪里使用?这会对体验产生影响吗?环境是围绕和告知一种体验的各种约束和压力。包括照明、环境噪声、被动或主动接合、预期焦距或设备。

Shopify的北极星设计系统最初源于Shopify的店铺管理产品。当Shopify Retail团队开始设计下一代产品时销售点(POS)系统,他们意识到北极星的模式并不完全符合他们的需要。POS系统需要在零售场所工作,通常在明亮的灯光下。该应用程序需要在一臂的距离使用,距离商家24到36英寸。与主要在商家和UI之间进行交互的核心管理不同,使用POS系统的商家需要优先考虑与客户的交互,而不是UI。零售团队希望商家能够“闭上眼睛”掌握UI,这样他们就可以与客户保持眼神交流。

零售团队认为,现有的调色板只在浅色背景下工作,在零售店明亮的灯光下不够清晰。字体比例尺也太小,不能用在等长的地方。而且,为了让商家在使用POS系统时不致于与客户发生目光接触,按钮和其他用户界面元素需要大得多。

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

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

产品团队和设计系统团队之间的反馈循环是如何在系统中构建正确变体的一个很好的例子。围绕帮助用户更清晰地浏览产品和满足内容需求来构建系统,你就可以解锁可伸缩表达。

关于作者

耶塞尼亚·佩雷斯·克鲁兹

耶塞尼亚·佩雷斯·克鲁兹他是宾夕法尼亚州费城的一位设计领袖、演说家和作家。在她的整个职业生涯中,她帮助无数的团队制定、设计和实施他们的品牌标识和设计系统。目前,她在北极星设计系统团队中领导一个跨职能团队Shopify。曾任公司产品设计高级总监Vox媒体她负责Vox媒体的设计系统,包括the Verge、Vox和Eater。

Yesenia已经成为世界各地会议的特色演讲者,如一个事件,设计事项,和SXSW互动的主题,如web性能,响应式设计,和设计系统。betway必威体育平台

没有评论

有什么要说的吗?

我们已经关闭了评论,但是你可以看到在我们关闭评论之前人们都说了些什么。

更多来自阿拉巴马州

待做的工作

“设计价值”摘自吉姆·卡尔巴赫(Jim Kalbach)的《待完成的工作》(Jobs To Done)一书,该书就创建以工作为导向的路线图和使用工作故事解决特定设计问题提出了建议。

betway必威app

语音驱动的内容挑战了许多可用性测试方法。普雷斯顿因此将它们转化为媒体自身的机会和优势。
内容

跨文化设计

在这段跨文化设计的摘录中,Senongo Akpem讨论了排版的许多方面,当你想要达到一个全球的受众时必须考虑。
设计