用可用性测试来决定,而不是照搬趋势清单
Figma 的 2026 年概览记录了沉浸式 3D、实验性导航、鲜明色彩、动效、游戏化和 AI 辅助体验。这些是探索方向,不等于每个站点都应复制。服务页和账户页通常更受益于可预测的路径。
在选择呈现方式前先写清页面的工作(page job)。将常规版本与趋势驱动版本在相同任务和相同成功度量上比较。仅仅获得注意并不等于成功。
命名主要动作,并在无需悬停、手势或教程情况下,使其标签、位置和结果可理解。
保留通往核心内容的常规路线,并提供在证据不足时易于移除增强功能的方式。
围绕内容与组件构建响应式系统
响应式设计仍然非常有价值,因为屏幕尺寸不能预测用户意图或输入方式。Google 建议使用以内容为驱动的断点,避免横向溢出,并不要仅因布局窄就隐藏信息。采用“先小屏、再扩展”的思路,当内容需要更多空间时再放宽。
容器查询(container queries)可以让组件根据其父容器提供的空间自适应,因此同一个卡片能在主列和侧栏都工作。容器查询并不取代媒体查询:MDN 将网格、flex 与视口媒体查询描述为回退方法。
在宽屏上约束长文本行宽,并确认缩放不会导致列被裁切或出现水平滚动。
为图片提供尺寸信息,以便浏览器在图片加载前分配空间,减少布局移动。
将可访问性优先的交互作为一条持久方向
可访问性优先的设计关注人们如何操作站点,因此比视觉流行更持久。WCAG 2.2 是 W3C 的 Recommendation(推荐规范)。其新准则提供了具体的评审情形:在 AA 级别,作者创建的内容不得完全遮挡键盘焦点;拖拽需要提供简单的指针替代方式;指针目标在 AA 级别(除非有例外)应有至少 24 × 24 CSS 像素的最小尺寸。
把这些情形转化为系统规则。不要让页眉、Cookie 控件、聊天启动器或横幅遮挡焦点。展示明确的焦点态。在列表可通过拖拽重排序时,提供另一种简单操作。WCAG 2.2 还涵盖帮助、重复输入和可访问认证。与安全相关的例外可能适用;在做出合规承诺或处理高风险流程时,请取得合格的安全与可访问性评审。
在每种布局下用 Tab 键遍历关键流程,确认聚焦控件可见且易识别。
测量紧凑图标控件及其间距,特别是在菜单和表单中。
支持密码管理器和粘贴可以减少认知负担;在未经过合格安全评审前不要削弱控件。
把动效当作可选引导
动效可以阐明已保存的确认、展开面板或下一步。但当动效延迟决策、重复转移注意力或成为理解状态变化的唯一方式时,就会损害可用性。这些体验是方向,不是必须项。
尊重用户减少非必要动效的请求。MDN 文档记录了 prefers-reduced-motion 用来检测用户偏好,从而移除、减少或替换动效。保留信息与完成反馈,但用低调的视觉变化替代大尺度平移、视差或自动播放效果。
说明每个动画传达了哪些信息;若无实际信息则移除它。
在操作系统层级启用 reduced motion(减少动效)并验证页面仍然有意义。
把速度与稳定性作为设计验收标准
性能是设计约束,而不是收尾任务。Google 目前的 Core Web Vitals 是用于加载的 Largest Contentful Paint、用于响应性的 Interaction to Next Paint,以及用于视觉稳定性的 Cumulative Layout Shift。建议目标是在第 75 百分位时:LCP 不超过 2.5 秒,INP 不超过 200 毫秒,CLS 不超过 0.1,需按移动与桌面分段审查。它们是有用的目标,但不能替代任务测试。
在添加视频首屏、自定义字体、图像序列、客户端特效或第三方助手前先设定预算。实验室测试能够在发布前捕捉回归,但现场测量是必需的,因为用户条件各异。
为图片、嵌入、广告和后加载的界面元素预留空间。
在构建时使用实验室检查,发布后使用真实用户数据;分别审查移动端和桌面端。
把沉浸式、实验性和 AI 驱动界面视为有条件的实验
3D、非线性导航、视觉叙事和对话式助手在能减少静态内容无法消除的不确定性时会有所帮助。但当访客需要价格、已知目的地、表单或答案时,它们作为默认方案很差。增强加载或失败时,应保留直接路径、纯文本描述和可用的操作流程。
先对最小可行版本进行原型设计。定义什么情形会证明保留该增强是合理的,例如更少的错误选择或更快找到答案。记录资产重量、脚本执行、维护成本、供应商依赖、隐私审查和可访问替代方案。引人注目的演示并不能证明因果关系。
在沉浸层或助手不可用时,保留核心文案、主要导航和主要操作的可用性。
限制早期曝光、比较结果,并保留撤销决策。
把设计变更当作有弹性的产品变更来运行
一次布局变更可能改变资源交付、JavaScript 行为、同意工具和外部服务。把重设计作为一次生产变更来对待。Status Is UP 支持主动的可用性优化与修复:在发布前识别薄弱依赖、设定检查点、准备回滚并修复重复的交付风险。这与在用户受影响后才等待停机不同。
在新路径通过任务、可访问性与性能检查前保留旧路径。指定谁可以暂停某个功能。内容、浏览器、供应商或活动发生变化时要重新检查。
在广泛发布前检查关键流程、资源、表单、同意行为和依赖项。
记录已测试的回退路径、决策责任人与预期的访客状态。
