mcpField
L
layers-surface

layers-surface

github.com/jamiemill设计与 UI3132.0k 次安装22 周前更新
代码仓库

关于 layers-surface

layers-surface 是用于检查或设计用户可见层的设计技能,适用于屏幕、语音、实体产品和服务触点。它帮助设计师区分表层问题与需要回到概念模型或交互流程解决的问题。

主要功能

  1. 01词汇与术语检查
  2. 02对象一致性审查
  3. 03操作入口完整性检查
  4. 04错误反馈与恢复审查
  5. 05视觉层级与无障碍检查
  6. 06适用于多种媒介的表层设计方法

适用场景

  1. 01检查标签是否符合产品的共享词汇
  2. 02发现缺少底层模型或流程的控件
  3. 03改进错误提示和恢复指引
  4. 04检查屏幕或语音界面的无障碍性与重点呈现

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/jamiemill/layers-skills --skill layers-surface

安装后在 Claude Code 中输入/layers-surface确认已加载。

详细介绍

/layers-surface

假设已加载 /layers-intro。此技能是一套技巧库,而非脚本——请参阅其中的“如何使用这些技能”。

表层是下层的所有决策最终化为人们实际接触到的内容之处:文字、声音、视觉效果、物理 affordance、动态效果和反馈。这是最依赖具体媒介的层,但最重要的决策首先具有普适性——无论表层是屏幕、语音界面、实体设备还是服务接触点,这些决策都适用。

表层问题往往是更深层问题的症状。这里的核心准则,是区分哪些问题可以在表层解决,哪些问题需要重新审视更底层的层次。


本层的决策

  • 表层是否遵循概念模型中的词汇和对象
  • 交互草图中的每个 affordance 是否都已呈现——以及是否有任何表层元素背后没有模型支撑
  • 情绪基调是否适合用户正在完成的任务
  • 用户如何了解发生了什么、正在进行什么,以及出了什么问题
  • 哪些内容最醒目,以及是否应该如此
  • 需要这些功能的用户是否都能无障碍地使用

准则——保持表层可靠的关键

  • 表层修复还是更深层的问题。 关键判断:这是文案或布局需要调整,还是概念模型或交互流程中的根本问题所导致的症状?词汇错误可能只需改写——也可能是模型从未确定该术语。将更深层的问题交回相应技能处理,而不是只修补症状。
  • 术语与通用语言一致。 标记直接违规的情况(模型术语使用不一致)、未列出的术语(模型中没有的表层用词——应加入模型,或作为噪声移除),以及语气不匹配的情况。
  • 对象一致性。 不应出现变形对象(同一对象在不同场景中呈现出显著不同的形式),也不应出现被遮蔽的对象(用户无法辨认对象类型的形式)。
  • 双向完整性。 交互草图中的每个 affordance 都应呈现;任何表层元素都不应在没有模型或流程支撑的情况下存在(这类问题是遗漏的交互决策——转交给 /layers-interaction-flow)。
  • 错误应能诊断、解释并帮助恢复。 “出了点问题”这句话三项都做不到。标记每个未能同时满足这三项的错误状态。
  • 醒目程度应体现重要性。 流程要求用户注意的内容应当突出;不该突出的内容则不应醒目。
  • 无障碍设计应经过明确决策,而非默认处理。
  • 情绪基调应与用户需求中的情感和社交任务相匹配——而不是把产品的利益包装成用户的利益。

技巧

这里有两类工作:依据下方各层审查现有界面,以及处理尚未解决的界面决策。根据实际情况选择即可。

技巧用途
词汇检查对照通用语言列表,检查每个标签、标题、按钮、错误、通知和帮助文本。
对象一致性检查针对每个模型对象,检查它出现在哪里、以几种形式出现。找出变形对象和被掩盖的对象。
完整性检查双向对照面包板与界面:找出缺失的操作入口,以及没有模型支撑的界面元素。
情感基调检查回顾情感和社交需求,找出语气、表达方式或重点与之不一致之处。
反馈与错误清单对每个操作和状态转换,检查用户如何知道操作已成功、正在进行或失败,以及接下来该做什么。
层级审查针对每个关键位置,明确用户必须注意什么或采取什么行动,并检查界面是否将其突出呈现。先确定主要内容,再决定如何提示。
无障碍检查按媒介分别检查:屏幕(对比度、尺寸、触控目标、键盘、屏幕阅读器标签、焦点),语音(所有信息是否都通过语音传达、能否在缺少视觉信息时恢复),实体(触及范围、触觉区分、照明、是否需要精细动作)。
一致性检查相似事物采用相似处理,不同事物采用不同处理;遵循媒介惯例,或有意打破惯例。
制作(真实媒介、线框图、风格板、原型、设计系统、文案优先)在制作界面而非审查界面时使用。真实交互反馈用代码实现;布局和层级用线框图呈现;早期语气探索用风格板;时序和动态效果用原型;扩展现有设计系统,但不要与之矛盾;语言是主要素材时,先写文案。

与设计师协作

先从底层明确媒介和已有内容——概念模型(对象 + 通用语言)、面包板,以及包含情感和社交需求的工作故事。如果已有界面,就审查它;如果没有,就处理尚未解决的决策。

根据当前关注点选择合适的技巧——术语感觉不对时进行词汇检查,用户不知道发生了什么时整理反馈清单,默认设置尚未经过审视时进行无障碍检查。不必一口气做完全部十项。

只记录必要结论:审查发现(每项标记为界面修复或更深层问题)、按优先级分组的待定界面决策(包括选项和约束)、需要优先解决的跨层问题,以及已经奏效、需要在修订中保留的内容。

界面要么遵循下层已确定的内容,要么削弱它。每当概念模型或交互结构发生重大变化后,都要重新审视。

评论

支持 Markdown