layers-surface

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/layers-surface

Assumes
/layers-intro
has been loaded for framework context.

The surface layer is where everything decided in the layers below becomes something a person actually encounters: words, sounds, visuals, physical affordances, motion, feedback. It is the most medium-specific layer, but the most important decisions to make first are universal — they apply regardless of whether the surface is a screen, voice interface, physical device, or service touchpoint.

Surface violations are often symptoms of deeper problems. This skill distinguishes between issues you can fix at the surface and issues that require revisiting a lower layer.

Decisions this layer needs to make:

Does the surface honour the vocabulary and objects from the conceptual model?
Is every affordance from the breadboard present — and is there surface content with no model behind it?
Does the surface convey the right emotional register for the jobs users are doing?
How does the user know what happened, what's in progress, and what went wrong?
What is most prominent, and should it be?
Is every piece of information accessible to the users who need it?

Methods:

Method	When
Working directly in the real medium (code, production UI)	When you need real feedback on real interactions. Avoids the gap between how something looks in a mockup and how it behaves in use.
High-fidelity mockups (Figma, etc.)	Exploring layout, visual hierarchy, and visual form — especially for novel patterns or stakeholder alignment.
Design system / component library	When the product has established components and tokens. Surface decisions must extend the system, not contradict it.
Style tiles	Establishing visual language early without committing to layout. Faster than high-fi for initial tone alignment.
Prototypes	Testing interaction behaviour — transitions, feedback timing, flow — that static mockups can't convey.
Copy-first	When language is the primary design material — messaging, onboarding, error states. Write copy before designing the container.

Quality signals — what good surface decisions look like:

Every term matches the ubiquitous language from the conceptual model
Every object has a consistent representation across contexts — not a shapeshifter, not masked
Every affordance from the breadboard is present; every surface element has a model behind it
Emotional register matches the emotional and social jobs from user needs
Error messages do three things: diagnose (what happened), explain (why), recover (what to do next). "Something went wrong" fails all three.
Prominence reflects importance — what the flow needs the user to notice is what stands out
Accessibility decisions are explicitly made, not left as defaults

假设已加载
/layers-intro
以了解框架背景。

表层是底层所有决策转化为用户实际可感知内容的层：文字、声音、视觉效果、物理交互方式、动效、反馈。它是最具媒介特异性的层，但首先要做出的最重要决策是通用的——无论表层是屏幕、语音界面、物理设备还是服务触点，这些决策都适用。

表层设计违规往往是更深层次问题的表现。这项技能可区分可在表层修复的问题和需要重新审视底层的问题。

该层需做出的决策：

表层是否遵循概念模型中的词汇和对象定义？
原型图（breadboard）中的每一项交互方式是否都在表层有所体现？是否存在表层内容无底层模型支撑的情况？
表层是否能传递用户完成任务所需的恰当情感基调？
用户如何知晓操作结果、进行中状态以及错误情况？
什么内容最突出，它是否应该突出？
每一项信息是否对有需求的用户都具备可访问性？

方法：

方法	适用场景
直接在真实媒介中工作（代码、生产环境UI）	当你需要获取真实交互的反馈时。避免原型设计中的效果与实际使用中的表现之间存在差距。
高保真原型（Figma等）	探索布局、视觉层级和视觉形式——尤其适用于新颖设计模式或与利益相关方对齐需求。
设计系统/组件库	当产品已有成熟组件和设计令牌时。表层决策必须扩展系统，而非与之冲突。
风格样块	在不确定布局的早期阶段建立视觉语言。比高保真原型更快速实现初始基调对齐。
交互原型	测试静态原型无法传达的交互行为——过渡效果、反馈时机、流程逻辑。
文案优先	当语言是主要设计素材时——如消息通知、引导流程、错误状态。先撰写文案，再设计承载容器。

质量信号——优质表层决策的特征：

每一个术语都与概念模型中的通用语言匹配
每一个对象在不同场景下的表现一致——不会“变形”，也不会被隐藏
原型图中的每一项交互方式都在表层有所体现；每一个表层元素都有底层模型支撑
情感基调与用户需求中的情感和社交任务匹配
错误消息需满足三点：诊断（发生了什么）、解释（原因）、恢复（下一步操作）。"Something went wrong"（“出问题了”）完全不符合这三点。
内容突出程度与其重要性匹配——流程中需要用户注意的内容会显眼呈现
可访问性决策是明确制定的，而非依赖默认设置

Guided session

引导式会话

This skill has two parts. Tell me what you need:

Audit — assess existing surface work against lower-layer decisions (Phases 1–5)
Decision inventory — work through open surface decisions (Phases 6–10)

Describe what you have, or say "guide me" to start.

Ask: "Where should I capture the work from this session?" (see

/layers-intro

for options)

Ask:

What product or feature are we working on?
What medium — screen UI, voice/conversational, physical, service touchpoints?
What do you have from the layers below? Conceptual model (objects + ubiquitous language)? Breadboard or flow? Job stories including emotional/social jobs?

这项技能包含两部分。告诉我你的需求：

审核 — 针对底层决策评估现有表层设计工作（第1-5阶段）
决策清单 — 梳理待确定的表层决策（第6-10阶段）

描述你已有的素材，或说“引导我”开始。

可提问：“我应该在哪里记录本次会话的成果？”（详见

/layers-intro

中的选项）

需询问：

我们正在处理哪个产品或功能？
采用何种媒介——屏幕UI、语音/对话界面、物理设备、服务触点？
你从底层获得了哪些素材？概念模型（对象+通用语言）？原型图或流程？包含情感/社交任务的Job Stories？

Part 1 — Audit

第一部分 — 审核

Phase 1 — Frame the surface

Does existing surface work exist — working code, deployed UI, copy, visual designs? Or is the surface not yet started? If not yet started, skip to Part 2.

Phase 2 — Vocabulary and language

Take the ubiquitous language list from the conceptual model. Ask the designer to share surface copy — labels, headings, button text, error messages, notifications, help text.

Check every term. Flag:

Direct violations — a model term used incorrectly or inconsistently ("Account" in one place, "Workspace" in another)
Unlisted terms — words on the surface not in the ubiquitous language. New terms to add to the model, or surface noise?
Tone misalignments — technically correct but tonally wrong for the emotional/social jobs

For each violation: surface fix (rewrite copy) or deeper fix (update the conceptual model vocabulary)?

Phase 3 — Object consistency

For each object in the conceptual model: where does it appear on the surface? In how many forms?

Shapeshifters — same object in significantly different visual or structural forms across contexts
Masked objects — the object appears in a form where a user couldn't recognise it as that object type

For each: is this a surface decision (establish consistent treatment) or a conceptual model problem (the object's identity is unclear even in the model)?

Phase 4 — Completeness check

Take the breadboard. For each place and affordance:

Is every affordance from the breadboard present in the surface?
Is there surface content with no corresponding breadboard element?

Additions that weren't in the breadboard are often interaction-layer decisions that slipped through — flag them and recommend revisiting

/layers-interaction-flow

Phase 5 — Emotional register

Return to job stories, particularly emotional and social jobs.

"What emotional job is the user doing here — not just the functional task, but how they want to feel?" "What social job is in play — how do they want to be perceived?"

Common misalignments:

Surface emphasises the product's benefit ("we get a referral") over the user's job ("I help a colleague")
Copy frames an interaction transactionally when the user's job is relational
Tone feels expert/clinical when the user needs to feel reassured or confident

阶段1 — 界定表层范围

是否已有现成的表层设计成果——可运行代码、已部署UI、文案、视觉设计？还是表层设计尚未启动？若尚未启动，直接跳转至第二部分。

阶段2 — 词汇与语言

提取概念模型中的通用语言列表。请设计师提供表层文案——标签、标题、按钮文本、错误消息、通知、帮助文本。

检查每一个术语，标记：

直接违规 — 模型术语使用错误或不一致（一处用“Account”，另一处用“Workspace”）
未收录术语 — 表层出现的词汇未在通用语言中。是需添加到模型的新术语，还是表层冗余内容？
基调不符 — 技术上正确，但与情感/社交任务的基调不符

针对每一项违规：判断是表层修复（重写文案）还是深层修复（更新概念模型词汇）？

阶段3 — 对象一致性

针对概念模型中的每一个对象：它在表层的哪些位置出现？有多少种表现形式？

“变形对象” — 同一对象在不同场景下的视觉或结构形式差异显著
“隐藏对象” — 对象的表现形式使用户无法识别其所属类型

针对每一种情况：判断是表层决策问题（确立统一处理方式）还是概念模型问题（对象在模型中的定义本身不清晰）？

阶段4 — 完整性检查

提取原型图。针对每一个场景和交互方式：

原型图中的每一项交互方式是否都在表层有所体现？
是否存在表层内容无对应原型图元素的情况？

原型图中未包含的新增内容往往是交互层决策的遗漏——标记这些内容，并建议重新审视

/layers-interaction-flow

。

阶段5 — 情感基调

回顾Job Stories，尤其是情感和社交任务。

“用户在此处的情感任务是什么——不仅是功能性任务，还有他们希望获得的感受？” “涉及的社交任务是什么——他们希望如何被他人看待？”

常见的不符情况：

表层强调产品利益（“我们获得推荐”）而非用户任务（“我帮助同事”）
文案将交互框定为交易性，而用户的任务是关系性的
基调专业/冷峻，而用户需要的是安心或自信

Part 2 — Decision inventory

第二部分 — 决策清单

Phase 6 — Feedback and errors

For each significant action and state transition:

"How does the user know their action worked?"
"How does the user know something is in progress?"
"How does the user know something went wrong, and what to do about it?"

Error messages must diagnose, explain, and tell the user what to do next. Flag every error state that doesn't meet all three. Produce a decision for each gap: "We need to decide how to communicate [X] to the user. The options are [Y]."

Phase 7 — Hierarchy and emphasis

For each key place:

"What is the most important thing a user needs to notice or act on here?"
"Does the current surface make that thing most prominent?"
"Is anything visually prominent that shouldn't be?"

These are medium-agnostic decisions first (what should be primary) before they become medium-specific (how to make it primary visually, audibly, or tactilely).

Phase 8 — Accessibility

Flag relevant considerations for the declared medium:

Screen UI: colour contrast, text sizing, touch targets, keyboard navigation, screen reader labels for interactive elements and images, focus management across flow steps
Voice/conversational: all information conveyed verbally (no "click the button on the left"), error recovery without visual context
Physical: reachability, tactile differentiation, visibility in varied lighting, operation without fine motor precision

Produce a list of accessibility decisions: "We need to decide how [X] will be accessible to users who [Y]."

Phase 9 — Consistency

Are similar things treated similarly? (Same actions look and behave the same; same object types represented consistently)
Are different things treated differently? (Primary vs. secondary, destructive vs. safe)
Does this surface conform to the conventions of its medium? Violating platform norms is a decision with a cost — sometimes worth it, always intentional.

Distinguish: internal inconsistencies (fix within the surface) vs. convention violations (deliberate choice or oversight — decide which).

Phase 10 — Open decisions

Produce a consolidated list of all surface decisions still to make:

Cross-layer issues to resolve first — root is in a lower layer; listed separately; require revisiting the relevant skill before the surface can be right
Surface decisions to make now — what's the decision? what are the options? what constraints apply (from lower layers, the medium, brand/consistency)?
Deferred — don't need to be made now but should be tracked

阶段6 — 反馈与错误处理

针对每一项重要操作和状态转换：

“用户如何知晓操作成功？”
“用户如何知晓操作正在进行中？”
“用户如何知晓操作出错，以及该如何处理？”

错误消息必须满足诊断、解释、告知下一步操作三点。标记所有未满足这三点的错误状态。针对每一处空白生成决策：“我们需要确定如何向用户传达[X]。可选方案为[Y]。”

阶段7 — 层级结构与重点突出

针对每一个关键场景：

“用户在此处最需要注意或执行的操作是什么？”
当前表层是否让该内容最突出？
是否存在不应突出却显眼呈现的内容？

这些首先是媒介无关的决策（确定什么是核心内容），之后才是媒介特异性决策（如何通过视觉、听觉或触觉让核心内容突出）。

阶段8 — 可访问性

针对指定媒介标记相关考量：

屏幕UI： 色彩对比度、文本大小、触摸目标、键盘导航、交互元素和图片的屏幕阅读器标签、流程步骤中的焦点管理
语音/对话界面： 所有信息均通过语音传达（无“点击左侧按钮”这类指令），无需视觉上下文即可恢复错误
物理设备： 可触及性、触觉区分度、不同光线环境下的可见性、无需精细动作即可操作

生成可访问性决策列表：“我们需要确定如何让[X]对[Y]用户具备可访问性。”

阶段9 — 一致性

相似内容是否采用相似处理方式？（相同操作的外观和行为一致；相同类型对象的表现一致）
不同内容是否采用不同处理方式？（主要操作与次要操作、破坏性操作与安全操作）
该表层是否符合其媒介的惯例？违反平台规范是一项有成本的决策——有时值得，但必须是有意为之。

区分：内部不一致（在表层内修复）与违反惯例（有意选择或疏忽——需明确判断）。

阶段10 — 待决策事项

生成所有待确定表层决策的整合列表：

需优先解决的跨层问题 — 根源在底层；单独列出；需先重新审视相关技能，才能完善表层设计
当前需确定的表层决策 — 决策内容是什么？可选方案有哪些？存在哪些约束（来自底层、媒介、品牌/一致性要求）？
可延迟决策 — 当前无需确定，但需跟踪记录

Completion

完成标志

Produce:

Audit findings — vocabulary violations, masked/shapeshifting objects, completeness gaps, emotional register misalignments — each categorised as surface fix or deeper-layer issue
Decision inventory — all open surface decisions, grouped and prioritised
Cross-layer issues — things to resolve at a lower layer before the surface can be right
What's working — surface decisions already made well; don't lose these in revision

Close with: "The surface is the layer users encounter. Everything decided below either gets honoured here or undermined here. Revisit this skill after any significant change to the conceptual model or interaction structure."

生成以下内容：

审核结果 — 词汇违规、隐藏/变形对象、完整性空白、情感基调不符——每一项都归类为表层修复或深层问题
决策清单 — 所有待确定的表层决策，按类别分组并排序优先级
跨层问题 — 需先在底层解决，才能完善表层设计的事项
有效决策 — 已做出的优质表层决策；修改时勿破坏这些内容

收尾语：“表层是用户直接接触的层。底层的所有决策要么在此得到贯彻，要么在此被削弱。概念模型或交互结构发生重大变更后，需重新使用这项技能进行审核。”