Design Systems分享了2020年清晰度大会的亮点。

2020年改变了我们工作和沟通的方式。随着聚会成为过去，Design Systems团队今年参加了我们的第一次虚拟会议。说实话，没那么糟。

Clarity Conference是一个专注于设计系统的会议，来自亚马逊、Atlassian、谷歌和Zendesk等公司的设计师和技术人员聚集在一起，建立网络并分享想法。在本月的时事通讯中，我们将回顾会议的一些重要内容。

视角的重要性

本运煤船|宝宝大

Ben的演讲集中在品牌定位如何影响设计决策。无论你是从零开始创建一个品牌，还是通过一个设计系统来表达它，本有一些建议:

坚定你的观点

要大胆，要有立场。确保你的品牌说的和做的一致。

坚持自己的观点

拥有它。不断地改变你的品牌来吸引别人会弊大于利。单一品牌并不适合所有人，这没关系。当人们相信你就是你所说的那个人，他们就可以选择是否与你的品牌建立联系。

你个人的观点很重要

即使你不是目标人群，你对品牌的看法也很重要。你首先是一个人，然后才是一个设计师。

不要让任何事情溜走

细节决定成败。一切都很重要。

这份工作应该很有趣

永远记住，你是一个设计师，你每天都要做一些有趣的事情。会有艰难的对话，但要保持积极的态度，坚持下去。

色彩对比之外的可访问性

Allison肖|个人网站|Zendesk

虽然对于一个团队来说，色彩对比有时是最容易也最困难的事情，但我们很容易忘记，还有许多其他方面的可访问性是你可以并且应该考虑的。

可访问性是关于人的

Allison首先提醒我们易用性始于人。在这样做的过程中，他们为我们提供了一些有趣的方法来思考可访问性，通常是引用微软的包容性设计准则。

残疾的人

艾莉森将残疾分为几种类型:

• 情境——想象一下你一只手抱着孩子，另一只手拿着手机。
• 暂时的——想象一下你的手臂骨折了，打了石膏或吊带。
• 永久-想象失去一条肢体。

这是一种独特的方式，使残疾与每个人都有联系。

包容

Allison接着谈到包容性设计不仅仅适用于残疾人，而是适用于所有人。例如，遥控器最初是为行动不便的人设计的，让他们保持坐姿，人行道上的切口是为坐轮椅的人设计的。然而，这些创新使我们所有人受益。

倒

为了使产品具有可访问爱游戏全站下载性和包容性，WC3指出它应该:

• 可感知的-内容不能对用户使用它的方式是不可见的
• 可操作的任何人都可以使用你的产品爱游戏全站下载
• 可以理解的人们期望你的产品以可预测的方式工作爱游戏全站下载
• 健壮的-通过广泛的技术，包括辅助技术来访问

简单

最后，艾莉森谈到了包容性产品应该如何简单。爱游戏全站下载他们接着说，“直观设计”是一个神话，产品设计应该植根于一致性和可用性。爱游戏全站下载一致的产品建立在先验知爱游戏全站下载识的基础上，映射到用户的概念模型，并缩小知识差距。

超越颜色对比

在对可访问性有了基本的了解之后，Allison列出了一份最佳实践清单，除了颜色对比之外，还帮助我们创造出美丽、简单和包容的产品。爱游戏全站下载

性能

“如果速度慢，那就糟透了。”你不能总是修正业绩，但你可以通过修正来帮助人们感知性能．

规模

更大的UI更容易使用。它更容易点击，也更容易阅读。

语言

• 语言提供了清晰度。使用它!
• 如果没有必要，不要收集比赛信息。
• 如果没有必要，不要收集你的姓氏。
  • 世界各地的名字惯例各不相同。
  • 确保设计考虑到不同的句子结构或更长的字符数。
• 不要用通用的he，用复数代词代替。
• 不要在无关紧要的时候引起人们对性别的注意。
• 除非绝对必要，否则不要收集性信息。
  • 如果必须，总是让人们自我认同。
• 不要拐弯抹角地说残疾。
• 使用非定向语言。屏幕阅读器没有方向的概念。
  • 避免给那些没有点击的用户使用“点击这里”这样的字眼。
• 避免在cta和链接中显示“了解更多”，这样屏幕阅读器就可以告诉用户他们可能正在学习什么。
• 始终使用标签，尤其是图标。

计算颜色:CSS变量的动态主题

Una Kravets|个人网站|谷歌Chrome

Una向我们展示了如何用简单的CSS创建动态颜色主题!

CSS变量

Una简要介绍了一些CSS变量，包括currentColor而且@ property但最终关注的是——var ()

Una演示了如何将hsl(色调、饱和度和亮度)颜色值分解为单独的变量，从而使我们能够创建动态调色板。

从品牌颜色开始

——colorBrand: hsl(265, 100%， 47%);

将品牌颜色分成不同的部分

注意-h， -s，和-l。

               ——colorBrand-h: 265;——colorBrand-s: 100%;——colorBrand-l: 47%;

使用变量定义动态品牌颜色

               ——colorBrand: hsl(var(——colorBrand-h)， var(——colorBrand-s)， var(——colorBrand-l));

创造变化

定义了动态品牌颜色后，您可以使用颜色理论为不同用途创建颜色的变化，例如:

• 按钮
• 卡的口音
• 明暗模式
• 甚至是浏览器艺术

看看其中的互补和三元变化codepen寻找灵感。

让它易于访问

动态颜色主题也有可访问性的好处。通过创建对比度阈值，我们可以查看品牌颜色的光度(hsl中的“L”)，并相应地设置文本颜色。

               :根{——contrastThreshold: 45%｝

               .element {——switchContrast: calc((var(——colorBrand-l) - var(——compastthreshold)) * -100);颜色:hsl(0, 0%， var(——switchContrast));｝

浏览器支持

虽然——var()得到了很好的支持，但是存在一个postCSS polyfill回退可用。

多平台设计系统概论

丹尼尔银行|个人网站|亚马逊

Danny首先提到，只有不到10%的公共设计系统支持网络以外的平台。他接着问道:“由于许多产品跨越多个平台，我们如何将其爱游戏全站下载他平台整合到我们的设计系统中?”

考虑内聚而不是一致性

作为一个优秀的平台公民，使用原生约定并不意味着你要在一致性上妥协。应用程序不需要在所有平台上看起来完全相同，以提供内聚的体验。

对齐

定义一套坚如磐石的基础(原则、品牌、内容策略等)。

表达设计令牌中的视觉基础，这些令牌可以被各自的平台使用。

让团队在跨平台组件定义上保持一致。例如，Banner在不同平台上的外观和实现可能有所不同。但是，Banner在IOS、Android和网页平台上的意义应该是相同的。这项工作将具有挑战性，因为许多组件可能已经以特定于平台的方式存在，需要进行调整以反映新的心理模型。对于新组件，Danny建议在编写任何代码之前先从所有平台的文档开始。

系统应该支持创造者

如果我们消除了产品开发的准入障碍，创作者就可以自主地为所有平台创造体验。爱游戏全站下载这将导致跨组织和团队的分布式创建，从而减少对模型的依赖，从而拥有完整的多平台体验。然后，团队可以从客户出发，不考虑平台，同时为所有平台进行构建。

对设计系统团队有问题、反馈或想法吗?给我们发邮件或者查看我们的wiki页面了解更多关于这个团队的信息。

如果您想取消订阅本通讯，请发送电子邮件至design-systems-newsletter + unsubscrib爱游戏体育官网首页e@www.aqdar-uae.com。