界面与交互

从用户动作到状态、呈现和反馈，解释导航、输入、布局、焦点、偏好及可访问条件。

动作怎样改变可见结果

界面让人感知系统状态并发起操作。用户输入数量，界面保存草稿、显示金额、提交请求，再依据结果显示已保存或失败。这里至少有输入中的状态、请求中的状态和已确认业务事实；把它们区分后，反馈才能准确。

呈现是根据状态生成可见内容或交互对象。事件把用户动作转成状态变化。把计算金额保存为独立状态，会增加与数量和单价同步的责任；能够准确从主要状态计算时，可以在呈现时派生。需要保留历史、昂贵结果或外部事实时，再说明为什么独立保存。

临时输入、弹窗和焦点属于当前交互；查询结果是外部事实的本地观察；账户、订单和文档内容有自己的主要所有者。界面可以乐观显示预期结果，随后必须依据真实执行结果确认、回退或解释冲突。

进行中的请求也可能交错。用户先查询“甲”再查询“乙”，甲的响应后到，直接写入会覆盖乙。保存请求身份、取消旧工作或检查结果所对应的输入，可以避免显示不属于当前选择的数据。取消失败时，结果身份检查仍有作用。

缓存中的旧结果可以减少等待，但界面要能表达新鲜度和更新中的状态。空结果、尚未加载、加载失败、权限拒绝和已删除是不同含义，不能都显示“没有内容”。

导航决定当前对象、任务和上下文。可分享地址通常保存有意义的筛选、页面或对象身份；瞬时展开状态未必需要进入地址。返回、刷新和深链接要按实际历史与状态规则解释。

操作反馈应接到用户刚才的动作。提交期间阻止不允许的重复操作，成功说明实际完成点，失败保留可以修正的输入。通知适合短时提示，需要持续处理的问题则需要在对象附近保留信息。

命令面板、快捷键和拖放提供不同输入入口，底层效果应保持一致。拖放需要可辨目标和取消路径；键盘操作应有等价入口。动画帮助辨认变化时，还要允许用户降低运动。

输入控件需要名称、当前值、约束和错误对应。字段错误放在能定位的位置，跨字段错误说明关联规则。校验反馈过早可能打断输入，过晚则增加修正成本，应依据操作节奏选择。

布局表达分组、层级和阅读顺序。视觉并列与实际键盘顺序不同，会使用户失去定位。焦点说明当前接收输入的对象；打开对话框后移入、关闭后返回合理位置，并提供关闭方法，是完整操作链的一部分。

可访问性还涉及语义和辅助技术。浏览器的原生控件提供既有名称、角色和行为；自定义控件需要补齐对应信息与键盘规则。ARIA 可以表达语义，不能自行实现交互逻辑。W3C 的官方概述用于这一限定，不承担本文页面的实际可访问性验证。W3C，WAI-ARIA 概述

分页、筛选和排序决定使用方能看到哪些数据，客户端和服务端职责要匹配。虚拟列表只创建可见区域附近的呈现对象，滚动位置、动态高度、焦点和辅助技术行为因此需要额外处理。表格的行身份应跟随数据对象，而非当前显示索引。

图表需要说明单位、范围和聚合规则，颜色不能独占关键信息。上传需要区分本地选择、传输、服务器接收、处理和可用；播放需要区分容器、编码、分片与控制界面，任何一步完成都不能替代后一步的结果。

语言、主题和运动偏好会改变呈现。偏好可以来自用户设置、系统或默认值，应说明优先关系和存储范围。服务端渲染与客户端恢复的初始值不同，可能产生瞬时变化或不一致；具体平台需要匹配其初始化规则。

本页综合 React、表单、路由、表格、图表、动效、上传、国际化和阅读体验材料。具体 DOM/CSS/React 操作在 Web 实践；文档内部编辑变换由数据与信息专题建立。本文没有通过真实用户、辅助技术或浏览器交互测试。