设计师与产品经理的语义养成:给1个界面元素选定1个语义令牌

0 评论 607 浏览 0 收藏 9 分钟

设计师如何迈出语义标注的第一步?不需要重构整个设计系统,只需打开设计稿,为最熟悉的错误提示选定1个语义令牌。本文拆解三个关键问题与最小可行验证方法,帮你从“画对界面”自然生长到“标对语义”,并附上防止标注过期的保鲜机制。

我在《从”画对界面”到”标对语义”》文中讲了设计师与产品经理如何理解并使用语义层基础设施来表达设计意图,从语义令牌的选定、语义域的场景标注,到约束显化的规则输入。那些内容偏”机制”,回答的是”为什么需要这样做”。

这篇我们只讲一件事:设计师最少做多少,就能开始建立”选语义”的标注能力?

答案是:打开你的设计稿,给1个界面元素选定1个语义令牌。

一、为什么要从1个界面元素开始

很多设计师看到”语义令牌”,第一反应是:

“这是不是意味着要把设计稿里所有颜色、所有状态全部重新标注一遍?”

不是的。

语义令牌不是替代Design Token,而是在色值之上加盖一层语义含义。你稿子里那个#EF4444继续保留,颜色值不变、视觉不变。变化的是:在旁边多写一行字,这个颜色,在这个场景下,意味着什么。

为什么只从1个元素开始?因为组织对抗往往来自”又要做一套新东西”的疲惫感。但如果告诉你:“不需要重新标注任何东西,只需要给你最熟悉的那个元素,选定1个语义令牌”,门槛就低了很多。

二、选定1个语义令牌:问三个问题

打开你的设计稿,找到那个最有把握的状态色,通常是错误色。以它为例。

问题1:这个元素现在用的是什么?

  1. 现有答案:一个颜色值,比如#EF4444。
  2. 需要追问到:这个色值对应的Design Token叫什么名字?(如color-error)
  3. 你的动作:确认这个元素走的是哪个Design Token,这是语义标注的锚点。

问题2:这个颜色在什么场景下使用?

  1. 现有答案:通常写着”错误提示”。
  2. 需要追问到:是系统级故障(服务挂了、数据丢了),还是用户可恢复错误(网络抖动、请求太频繁)?这两个场景的色值可能都是红色,但语义完全不同。
  3. 你的动作:把场景写具体,写到”别人不需要问你就能理解”的颗粒度。

问题3:这个场景该引用哪个语义令牌?

  1. 现有答案:通常没有。过去这就是前端”猜”的空间。
  2. 需要追问到:打开模式库的语义字典查询界面,按场景描述检索已注册令牌。系统级故障 →status.critical;可恢复错误 →status.warning。拿不准就查,查不到就发起新令牌申请,而不是自己造一个词。
  3. 你的动作:在设计稿上写下选定的语义令牌名称。

三、把选定结果写成”下游能读”的格式

选定前(你的直觉):

“这个地方要很醒目,用户必须马上处理,不能随便点掉。”

选定后(结构化语义标注):

你的动作:把这份标注贴在设计稿对应元素旁边。不需要你写YAML,不需要你懂机器规则的语法,写到这个颗粒度,下游的语义翻译环节会把它编码进契约。

四、一个你可以在自己组织里验证的案例

你们组织里一定有这样的情况:同一个红色错误提示,在不同产品或不同页面里,语义表达完全不同。

你可以做的验证动作:

  1. 打开你们的主产品,找到一处红色错误提示,截图
  2. 问自己:它是系统故障还是可恢复错误?界面上有恢复路径吗?
  3. 再打开另一个产品(或另一个页面)的同类提示,同样问自己,截图
  4. 把几张截图并排,尝试给每一处标注你认为正确的语义令牌

大概率你会发现:

  • 产品 A 是系统故障样式,但没有提供任何恢复按钮
  • 产品 B 是可恢复错误,却用了红色脉冲的致命样式,用户恐慌性刷新
  • 产品 C 的文案连是什么错误都说不清楚

这就是语义漂移:同一类界面元素,语义表达各不相同,因为从来没有人给它选定过语义令牌,AI只能按概率平均生成。

你的动作:把并排截图发在团队群里,附一句:”这个元素的语义,是否应该统一下?”这就是语义标注的起点。

五、怎么让这条标注不被遗忘

选定1个语义令牌后,最怕的是:标注躺在设计稿里,没人引用,慢慢过期。

最小可行的保鲜机制:

 

你的动作:在日历上设一个每月提醒,”检查那1个语义标注是否仍在工作”。只需要5分钟,就能确认这条标注还在链路里流通。

六、生长路径:从1个元素到语义源头

给1个元素选定1个语义令牌只是起点。设计师的语义标注能力,会沿着这条路径自然生长:

关键原则:不是”等语义字典建好了再标注”,而是”从1个元素开始,在标注中建立标准,在标准中完善基础设施”。

结语

《从画对界面到标对语义》讲了设计师与产品经理在语义令牌、语义域、约束显化中的标注职责。那些是”地图”,让你知道这片领域长什么样。

本文讲的是”第一步”:不需要标注整个设计系统,只需要打开你的稿子,给你最熟悉的那个错误提示,选定1个语义令牌,写清它在什么场景、意味着什么、绝对不能怎么用。

选定本身就是标注。当你给1个元素选定语义,你就已经从”画对界面”生长到了”标对语义”。

希望能帮到你。如果你在选定过程中遇到了有趣的发现(比如发现你们组织里同一个红色错误有三种语义身份),欢迎在评论区分享,这些真实的混乱,正是语义治理最好的起点。

下一篇会针对”语义域”展开,聊聊设计师怎么在同一个Alert组件的”系统故障”和”新功能通知”两个场景上,练习场景标注。

本文由 @魏雯 Akir 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 目前还没评论,等你发挥!