文章插图
这就是我们根据这个新原则重新调整颜色命名的方式：
文章插图
文章插图
我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式 。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了 。我们决定做一些简单的维护，同时在命名方面有足够的延展性 。
文章插图
文章插图
语义颜色侧重于颜色的用途 。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策 。
文章插图
例如：在这里，颜色命名使设计师更容易做出正确的选择 。在我们的原则中， *Accent* state 用于交互元素 。
语义颜色可以适应不同的主题 。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变 。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500” 。根据用户选择的模式，将自动显示正确的颜色 。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来 。
文章插图
明暗模式下的语义颜色 Primary.Background
如果我们将来要更新颜色，使用语义颜色也会变得更容易 。假设我们想要将我们的主色更改为蓝色 。我们只需要将基础调色板中的“紫色”更新为“蓝色” 。与该颜色相关的所有语义颜色也将神奇地更新 。另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素 。
在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单 。如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方 。
文章插图
这个系统似乎很容易使用，但设计师仍然有一些问题：
- 我什么时候可以使用正常文字颜色？
- 我什么时候可以使用次级文本颜色？
- 我什么时候可以使用可交互颜色？
文章插图
点击可以查看大图Figma 中内置的语义色彩交互指南
文章插图
采用这种新的颜色系统产生了一些变化：
1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式 。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从?? Light 切换到 ?? Dark 模式 。这也使库更轻且更易于维护 。
文章插图
2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统 。我们很快就会有一个集中的配色方案来处理所有系统上的颜色 。
- cazy 竖屏
- 淘宝商品列表编辑商品在哪里？步骤是什么？
- 淘宝怎么编辑上架宝贝？一键铺货的方法是什么？
- 家庭编辑信息怎么写 家庭生活资料编辑软件
- 言实出版社总编辑 家庭生活百科全书中国言实出版社
- 挑战网游官网 网通挑战官网
- 对岗位的认识怎么答 谈谈对岗位的认识
- 怎样查看CAD图纸？
- 科普知识小文章大全
- 穿越火线夜玫瑰人物 穿越火线夜玫瑰在哪
特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。