设计系统的视觉突破

我们尊重代码API。但是颜色,类型和空间呢?

发行设计系统系列中的6个排名第4:
输出|节奏|版本|破|依存关系|处理

设计系统会建立基本的视觉风格,这是必不可少的。这些选择(颜色,版式,空间等)经过严格指定,并有望稳定,可预测地逐个发布。当采用者升级时,设计系统不应意外破坏其功能。

所以,问问自己...

采用者能否升级到次要版本,以确保其用户界面不会由于系统的视觉变化而中断?

语义版本控制(SemVer)提供了明确的标准,可以使用主要,次要和补丁名称在各个发行版之间传达变更。我遇到的每个设计系统都使用SemVer,并监视其程序包的应用程序编程接口或API中的更改。对于开发人员编写JavaScript道具和HTML标记,这是熟悉的领域。中断您的API,您的下一个版本必须将该版本增加到下一个主要版本,例如从1.4.0到2.0.0。

指定构成视觉样式的界面使我们难以为继。定义清晰,简单的规则来监控样式更改非常困难。系统制造商努力阐明“改变这种风格会破坏采用者的用户界面”与“改变这种风格不会改变”的原因或原因。很少有系统团队记录这种标准。我问:“哪些特定类型的视觉变化会为​​您触发主要版本?”他们的回答是:\\(ツ)_ /¯。

在本文中,我建议至少应使用“颜色”,“版式”和“空格”作为构成重大更改的条件。也需要考虑其他属性。设计系统可以定义,记录和传达这些标准,以便采用者可以放心地逐个版本升级。

破色

大多数系统团队在调整主按钮的背景颜色时都感到安全。也许他们的动机是改善与通常为白色的文本标签的对比。他们说:“让蓝绿色稍微变深。” “我们会将按钮的可访问颜色对比度从AA提升到AAA。”

调整主按钮的背景色

当然,采用团队不应该覆盖标准主按钮的颜色设置。覆盖系统选择会切断与系统的连接。那时,采用者是自己的。因此,调整主按钮背景色的阴影是安全的,而且不是一项重大更改。

但是,在其他地方更改颜色可能会使收养者陷入危险。请考虑以下情形。

示例:自定义背景上的系统文本

想象一下,一个系统团队对交互式蓝色进行了微调以提高色彩对比度。 v1.4.0的交互式蓝色可在白色背景上访问,但在木炭背景上无法访问。

通过contrast-grid.eightshapes.com进行颜色对比检查

因此,对于v1.5.0,该团队将交互式蓝色调整为更亮,更饱和的色调,可同时应用于白色和木炭。

在不可预测的背景上调整幻影按钮标签的文本颜色

但是,采用者已根据浅灰色背景上的该颜色使用了Ghost按钮。更改系统后,将无法访问标签的文本颜色对比。您的系统破坏了产品。

示例:带有自定义覆盖文本的系统背景

同样,假设系统使Card组件的背景颜色变暗。卡的内容区域包括“安全”内容容器区域,采用者可以在其中插入所需的任何内容和标记。

调整卡片的背景颜色以允许包含自定义内容

在这个大概安全的区域中,采用者添加了次要文本,该文本虽然略微适中,但通过了颜色对比测试。更改系统后,将无法再访问颜色对比度。您的系统破坏了产品。

想象一下,您的系统的次要发行版包含这些调整。向后兼容,你说?他们相信升级没有风险吗?不!您的系统破坏了他们的产品!

因此,请评估更改的颜色属性以确定系统是否发生更改,例如:

  • 可能出现在采用者的背景颜色,图像或其他纹理上方的文本颜色。
  • 采用者文字颜色覆盖的背景颜色。
  • 背景色,边框色,文本色,框阴影或其他属性在另一个组件的边缘或内容的旁边,上方或下方组成的其他属性,以减少元素之间的对比度。

辅助功能驱动了这些示例。也存在审美风险,因为故意进行的系统更改可能会破坏产品设计师实现的多彩和谐。在整个界面中,色彩交互比比皆是,这是系统设计师无法控制或无法看到的。

要点:开始使用颜色标准中断变更对话。传达风险更容易,可以客观地衡量,并且与激发激情的可访问性相关。有了一些条件,您就可以继续处理其他问题。

打破版式(通过包装)

排版是任何视觉风格的核心方面。团队希望做到正确。调整表盘的方法有很多:字体系列,字体粗细,字体大小,文本转换,行高,字母间距等等。

如果系统调整版式,并非所有人都有遭受破坏的风险。对于内容丰富的体验,每个元素的内容都可能是不可预测的,长度是可变的,并且可以包装并响应视口宽度的变化。

对于更密集的接口,排版必须精确。设计师花了几个小时来微调版式,将标签排列在紧凑的区域。如果您调整系统的版式,它们的元素可能会以意想不到的方式包裹或裁剪。

示例:包装标签太糟糕了

想象一下,您的系统将选项卡的labelfont-weight调整为从正常到粗体。

次要版本升级后,无响应的选项卡会自动换行。不好。

采用者升级。它们现有的无响应选项卡超出了分配的空间,因此它们进行了包装。阴森!您的系统破坏了产品。

示例:字母间距混乱

品牌准则不断发展,产生了新的标题层次和样式。因此,您的系统会通过增加每个标题的字母间距来适应。

一名采用者升级了其密集的单页放射学应用程序,该应用程序已翻译成14种语言,由多种控制面板组成,每个控制面板都充满了表单元素和标题。他们升级了,UI充满了无法预测的标题。他们召开了一次危机会议。出于诚意,他们邀请了后端数据工程师!您的系统破坏了他们的产品!

调整系统字体可能很危险。对您来说,这是一种令人耳目一新的印刷技术,可轻松地在整个图书馆中部署。对于他们来说,文本开始出现异常。他们怪你。也许他们在#system-design Slack频道中激怒了您。没有人需要。

总结:在1.0.0之前,请努力进行实验,以完善和确定适合客户需求的字体样式。一旦1.0.0通过,请保持稳定的基础并谨慎考虑更改。考虑为下一个主要版本保留危险的转变。在此之前,逐步添加包含的功能,例如用于仅对文章副本进行样式设置的长格式文本组件。

打破空间和大小

至少您可以看到颜色和版式。空间和大小?很难将它们定义为可具体重用的方法,更不用说监视变更了。

在HTML中,当您更改组件的框模型属性(填充,边距,宽度,高度,显示,框大小,位置,左,右,上,下)时,可能会影响将该组件与其他页面元素排列在一起的布局组成。

示例1:删除垂直间距

您的系统团队决定删除以边距底部形式应用的垂直间距表单控件。这会影响