跳到主要内容
博客计算幕后花絮介绍Akamai设计系统

幕后花絮介绍Akamai设计系统

云管理器 UI 更新 - 1944x1021 横幅图片

如果您最近登录过Akamai云管理器,您可能会注意到它看起来有些不同。它的用户界面就相当于一队室内设计精灵悄悄潜入,对您家中的油漆颜色和家具进行了微小的更新,并以某种方式为那堆无处不在的杂物找到了位置。从本质上讲,这就是设计师和前端工程师团队负责同步或更新设计系统时发生的事情,但实际 过程是一个协作的过程,每一点细微差别都要经过讨论、模拟、审核,并提供给内部反馈。

这是应用程序开发人员非常熟悉的一个过程,有时会是一系列令人头疼的冲刺阶段。当我们的前端和用户体验团队处理整合Akamai品牌和设计元素的项目,以便在云管理器和Akamai控制中心之间打造更具凝聚力的体验时,他们看到了打造更轻量级用户界面的机会。在本问答中,我们将与首席高级软件工程师Jaalah Ramos一起探讨设计代币的概念、在多个平台之间创建一致性,以及这项工作将如何改善我们的整体产品设计。

问: 是什么促使我们对Akamai云管理器用户界面进行任何改动?
在Akamai于2022年收购Linode之后,随着我们的云服务和地点不断扩大,我们一直在对云管理器用户界面进行增量改动和更新,以配合产品的发布。但是,我们知道这些小改动不会直接导致我们实现云管理器和Akamai控制中心之间的设计平等,因此我们希望以此为契机,完善和重构我们的前端设计系统,而不仅仅是更改字体和一些品牌颜色。我们看到了创建设计令牌系统的机会。

问: 什么是设计代币?
设计代币就像设计和工程的积木。它们通过用代码表示颜色、字体和间距等设计决策,帮助简化和共享这些决策。从某种意义上说,它们可以作为设计和工程之间的通用语言,确保设计在不同的产品、服务和平台上保持一致。这意味着什么?我们将围绕颜色、排版和间距等方面的所有设计决策,用一个语义命名的标记来表示。这样,代币的基本价值就被抽象掉了,取而代之的是一个能描述该价值试图传达或意味着什么的名称。

除了获得一个好的语义名称,如何对标记进行分类也是我们正在研究的一个重要阶段。如何对我们创建的标记进行分类,使它们具有一致的结构?我们希望能够就如何创建令牌提供指导,从而避免混淆。 

从我们的分类法中得出的命名规则是从最通用的类别到更具体的类别排列的。这是一种有意为每个类别排序的方式,使每个类别互为基础,从而使标记具有自然、人性化的名称,如 "Button.Primary.Hover.Text"(按钮.主要.悬停.文本

问: 您发现团队对设计标记系统本身有哪些要求?
我们的许多团队都使用 TypeScript,因此我们优先创建了一个系统,通过确保所有类型信息都流向设计标记包来增强开发人员的体验。我们精心设计了类型定义的结构,以保留完整的标记分类,实现强大的自动完成和类型检查功能,同时还确保悬停时显示底层值。这样,开发人员无需查找文档或切换上下文,就能立即看到他们正在实现的颜色、间距或排版值。

问: 设计令牌系统是否一刀切?
不,完全不是!我们的设计令牌在三个层面上运行:全局、别名和特定组件,让我们可以控制大多数 CSS 属性。当设计人员更新全局颜色十六进制值或修改别名标记(如动作项目的别名标记)时,所有受影响的组件都会无缝级联变化。

尽管如此,我们还是特意为产品团队留出了空间,让他们为系统的发展献计献策。我们创建了反馈渠道,团队可以根据他们的实际实施经验提出改进建议。有时,这意味着要完全重新考虑代币结构的某些部分。这种合作方式有助于确保我们的设计系统保持实用性,并能满足实际开发需求,而不仅仅是理论上的设计原则。

问: 这对Akamai用户有什么帮助?
我们的用户既使用Akamai Cloud来管理云基础设施,又使用Akamai Control Center来管理安全产品和内容分发,因此他们经常要在不同的系统之间切换,而这些系统之前看起来和感觉上都是互不相关的。我们相信,一致的用户界面是帮助用户更快、更轻松、更成功地完成日常任务的关键。简化我们的设计系统可以消除视觉上的不一致性,减少认知负荷--你的眼睛和大脑只需更少的工作就能区分不同的系统,这只会让视觉上更吸引人,在美学上更令人满意。

问: 此次设计更新中如何考虑了可访问性更新?
数字可访问性是我的团队非常关注的一个领域,我们从客户那里收到了大量反馈,既有可行的,也有需要改进的。在进行设计更新时,我们增加了一些微妙的调整,以提高云管理器的可访问性,其中包括

  • 更新我们的表格显示!我们使用交替的行列颜色对表格显示进行了微妙的更新,从而减少了浏览计算实例、对象存储桶和其他表格信息时的眼睛疲劳。
  • 更新色调,以符合对比度标准
  • 改进排版,提高可读性
之前
之后

问: 关于这个项目的其他背景情况是什么?
这一转变源于我们的设计系统用户体验团队和云计算管理器前端开发人员之间的深入合作。这是一项历时 12 个月的真正合作,两个团队都发挥了各自的专长,克服了各种挑战,创建了一个满足所有人需求的系统。Akamai设计系统团队是这项工作的倡导者,所有其他用户体验设计师、用户体验研究人员和我们的前端团队(以及其他团队!)都为这项工作付出了大量时间,如果不向他们致敬,我就太失职了。虽然还有很多工作要做,但我们离我们的愿景已经越来越近了,那就是使用统一的视觉语言来保持我们所有产品的一致性,同时大大简化设计和实施流程。

云管理器将继续逐步采用Akamai设计系统并更新用户界面组件。您将在不久的将来看到这些更新的推出,从而在不中断的情况下增强整体体验。我们将一如既往地倾听您的反馈意见。让我们知道您对这些设计更新的看法。

注释

留下回复

您的电子邮件地址将不会被公布。 必须填写的字段被标记为*