UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
知识库社区设计原则只发布审核通过的知识进入 Agent RAG。
投稿

分类

全部Design Systems Page PatternsInteraction Responsive MotionTypography Color AccessibilityVisual Foundations

标签

accessibilityaccountactionsadminaffordanceagentaialertsanalyticsanimationariaassetsattentionaudit-logauthenticationbrandbreakoutbreakpoints
Knowledge RAG

设计知识库

由社区维护、审核后发布,并在 Agent 页面创作前被 RAG 检索为设计约束。

提交新原则
96 条已发布原则
Design Systems Page Patternsai / generation

AI 生成进度模式

AI 生成进度模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

AI 生成需要让用户知道系统正在做什么、还能做什么、失败后如何恢复。88%
Design Systems Page Patternstokens / editor

Token 编辑器模式

Token 编辑器模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

Token 编辑器需要让设计决策、引用关系和影响范围可见。87%
Design Systems Page Patternsdocumentation / design-system

设计系统文档页

设计系统文档页把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

设计系统文档要同时支持查找、理解、复制和判断是否适用。87%
Design Systems Page Patternssettings / ia

设置页信息架构

设置页信息架构把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

设置页应该按用户意图和风险分组,而不是按数据库字段或内部组织结构。87%
Interaction Responsive Motionmodal / focus

弹窗焦点管理

弹窗焦点管理把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

弹窗改变了交互上下文,必须管理焦点、背景可达性和关闭路径。
87%
Design Systems Page Patternscommunity / library

社区资源投稿流程

社区资源投稿流程把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

社区资源需要降低投稿门槛,同时用审核和来源说明保护质量。86%
Design Systems Page Patternsaudit-log / timeline

审计日志时间线

审计日志时间线把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

审计日志需要回答谁、何时、对什么、做了什么、影响是什么。86%
Design Systems Page Patternssearch / filters

搜索结果与分面筛选

搜索结果与分面筛选把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

搜索界面需要让用户理解结果为何出现,以及如何缩小或放宽范围。86%
Design Systems Page Patternsgovernance / review

组件治理审核流

组件治理审核流把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

设计系统需要记录组件为何新增、如何复用、何时弃用,而不是只维护组件清单。86%
Design Systems Page Patternsai / prompt

Prompt 构建界面

Prompt 构建界面把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

Prompt 构建器应帮助用户表达目标、上下文、约束和输出格式,而不是只给一个大文本框。86%
Design Systems Page Patternsanalytics / drilldown

分析 Drill-down 工作流

分析 Drill-down 工作流把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

分析界面应从异常和问题入口深入到原因,而不是只展示图表集合。86%
Design Systems Page Patternsadmin / list-detail

后台列表详情模式

后台列表详情模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

后台管理通常从列表筛选进入详情处理,两个页面必须共享状态和操作语义。86%
Interaction Responsive Motiongesture / mobile

触控手势替代路径

触控手势替代路径把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

滑动、捏合和长按不能成为完成任务的唯一方式。86%
Interaction Responsive Motionloading / skeleton

骨架屏层级

骨架屏层级把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

骨架屏应预告真实内容结构,而不是制造额外视觉噪音。86%
Interaction Responsive Motiontables / bulk-actions

表格批量操作模型

表格批量操作模型把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

批量操作需要清楚表达选中数量、作用范围、风险和完成反馈。86%
Interaction Responsive Motiondrag-drop / accessibility

拖拽替代控件

拖拽替代控件把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

拖拽适合直接操作,但排序、移动和上传必须有非拖拽路径。86%
Interaction Responsive Motiondanger / confirmation

破坏性操作确认

破坏性操作确认把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

确认只应保护不可逆或高影响动作,且必须说明对象和后果。86%
Interaction Responsive Motionkeyboard / navigation

键盘优先导航

键盘优先导航把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

可键盘完成的界面通常也更清晰,因为焦点顺序暴露了真实任务结构。86%
Typography Color Accessibilityforms / input

触控键盘与输入目的

触控键盘与输入目的把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

移动端输入字段应匹配正确键盘、自动完成和输入目的,减少错误和操作成本。86%
Typography Color Accessibilitymotion / reduced-motion

减少动效可访问性

减少动效可访问性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

动画和过渡需要尊重用户的减少动态偏好,并提供不依赖动效的信息路径。86%
Typography Color Accessibilityforms / labels

表单标签持久可见

表单标签持久可见把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

表单字段标签应在输入前后都可见,帮助用户确认字段含义和上下文。86%
Typography Color Accessibilitycharts / accessibility

图表可访问编码

图表可访问编码把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

图表不能只靠颜色区分类别和状态,需要文字、形状、线型或直接标签辅助。86%
Typography Color Accessibilitystatus / aria

状态消息公告

状态消息公告把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

状态变化只靠颜色、toast 或视觉位置变化,会让部分用户错过关键反馈。86%
Typography Color Accessibilityauthentication / accessibility

可访问认证流程

可访问认证流程把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

安全流程也要降低认知负担,帮助用户完成而不是考验用户。86%
Typography Color Accessibilityforms / errors

错误摘要模式

错误摘要模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

用户需要先知道有多少错误、在哪里、如何修复,而不是逐行搜索红字。86%
Typography Color Accessibilitytarget-size / touch

目标尺寸与间隔

目标尺寸与间隔把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

点击目标要有足够尺寸和间隔,尤其在移动端、工具栏和密集列表中。86%
Typography Color Accessibilityfocus / keyboard

焦点顺序与阅读顺序

焦点顺序与阅读顺序把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

可见布局和辅助技术顺序不一致,会破坏导航和理解。86%
Visual Foundationsdashboard / kpi

Dashboard KPI 分诊

Dashboard KPI 分诊把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

指标卡不是数字展览,而是运营分诊入口。86%
Design Systems Page Patternsnotifications / inbox

通知中心模式

通知中心模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

通知中心应帮助用户分辨重要性、来源、是否已处理和下一步。85%
Design Systems Page Patternsdocs / toc

文档目录布局

文档目录布局把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

长文档需要同时显示当前位置、章节结构和相关下一步。85%
Design Systems Page Patternsempty-state / projects

空项目开始状态

空项目开始状态把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

空项目页应把用户带进第一个真实成果,而不是展示产品功能说明。85%
Design Systems Page Patternspricing / comparison

价格套餐比较

价格套餐比较把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

价格页的核心是帮助用户判断适合哪一档,而不是堆满营销形容词。85%
Design Systems Page Patternsonboarding / setup

渐进式引导设置

渐进式引导设置把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

引导不应一次性索取所有信息,而应尽快让用户看到可用结果。85%
Interaction Responsive Motionmobile / actions

移动端底部行动栏

移动端底部行动栏把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

移动端关键行动应靠近拇指区域,但不能遮挡内容、错误或系统导航。85%
Interaction Responsive Motionfeedback / toast

Toast 与行内反馈选择

Toast 与行内反馈选择把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

反馈位置应匹配反馈对象;toast 适合全局短状态,行内反馈适合字段和局部修复。85%
Interaction Responsive Motionwizard / progress

向导步骤进度

向导步骤进度把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

向导需要让用户知道当前位置、剩余工作、可返回性和保存状态。85%
Interaction Responsive Motionfilters / state

筛选与查询状态保留

筛选与查询状态保留把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

筛选结果是用户构建的工作上下文,刷新、返回和分享时应尽量保留。85%
Interaction Responsive Motionresponsive / navigation

响应式导航折叠

响应式导航折叠把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

导航折叠不是隐藏所有入口,而是按任务频率和当前位置重新排序。85%
Interaction Responsive Motionundo / editing

撤销与可逆性

撤销与可逆性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

可逆操作让用户敢于探索,减少确认弹窗和中断。85%
Typography Color Accessibilitylinks / contrast

链接对比与可供性

链接对比与可供性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

链接是导航承诺,用户必须能在阅读流中快速识别可点击文本。85%
Visual Foundationscomparison / layout

比较布局清晰度

比较布局清晰度把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

比较的价值来自同一维度上的差异可见,而不是对象本身卡片更漂亮。85%
Visual Foundationsdetail / object

对象详情布局

对象详情布局把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

详情页应围绕对象身份、状态、关键属性和可执行操作组织,而不是平均展示所有字段。85%
Visual Foundationsdata / charts

数据墨水优先级

数据墨水优先级把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

图表和指标的视觉墨水应该先服务数据、阈值和异常,而不是装饰网格。85%
Visual Foundationshierarchy / focus

焦点经济

焦点经济把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

焦点越多,真正的重点越弱;视觉强调必须稀缺且服务主任务。85%
Design Systems Page Patternsaccount / profile

资料与账号设置

资料与账号设置把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

个人资料、登录安全、通知和计费属于不同风险等级,应分区处理。84%
Design Systems Page Patternsmarketplace / browse

市场浏览模式

市场浏览模式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

市场页需要同时支持发现、比较、信任判断和安装/购买行动。84%
Interaction Responsive Motionlatency / microinteraction

低延迟微交互

低延迟微交互把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

微交互的目标是确认输入和状态变化,而不是让界面显得忙碌。84%
Interaction Responsive Motionpagination / scroll

无限滚动与分页选择

无限滚动与分页选择把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

浏览型列表可连续滚动,任务型列表通常需要定位、选择、返回和总量感。84%
Interaction Responsive Motionrealtime / collaboration

实时协作存在感

实时协作存在感把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

协作界面需要让用户知道谁在场、谁在编辑、冲突如何处理。84%
Interaction Responsive Motionfeedback / latency

乐观更新反馈

乐观更新反馈把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

乐观更新要让界面快起来,同时让失败和回滚不会让用户困惑。84%
Interaction Responsive Motioncommand / shortcuts

命令面板安全性

命令面板安全性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

命令面板适合快速行动,但必须让作用对象、风险和结果足够明确。84%
Typography Color Accessibilitycognitive-load / copy

降低认知负担的文案

降低认知负担的文案把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

用户不应该为了完成任务记住系统状态、上一屏信息或隐含规则。84%
Typography Color Accessibilitycontent / plain-language

清晰语言

清晰语言把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

可理解性是可访问性的一部分,复杂文案会增加所有人的认知负担。84%
Typography Color Accessibilitylocale / language

语言与本地化格式

语言与本地化格式把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

日期、数字、货币、单位和语言方向要符合用户地区习惯并避免歧义。84%
Typography Color Accessibilityforms / placeholder

占位符不能替代标签

占位符不能替代标签把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

占位符适合展示格式示例,不适合作为唯一说明或关键指导。84%
Typography Color Accessibilityicons / aria

图标可访问名称

图标可访问名称把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

只有图标的按钮和状态必须有可访问名称,装饰图标则应从辅助技术中隐藏。84%
Typography Color Accessibilitydark-mode / contrast

深色模式对比调校

深色模式对比调校把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

深色模式不是反转颜色,需要重新检查文本、边框、状态色和阴影层级。84%
Typography Color Accessibilitytypography / spacing

文本间距韧性

文本间距韧性把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

界面应能承受用户调整行高、字距、字号或浏览器缩放后仍不遮挡内容。84%
Typography Color Accessibilityforms / redundant-entry

减少重复输入

减少重复输入把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

重复输入增加认知负担、错误率和放弃率,尤其影响辅助技术用户。84%
Visual Foundationsmedia / crop

媒体裁切意图

媒体裁切意图把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

图片是信息对象,不只是纹理;裁切错误会损害信任和理解。84%
Visual Foundationsmap / geospatial

地图与地理空间布局

地图与地理空间布局把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

地理空间界面的核心是位置、范围、对象和选择状态之间的同步。84%
Visual Foundationscharts / dashboard

可读 Dashboard 图表

可读 Dashboard 图表把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

运营图表经常被快速扫读,小图可读性比表现形式更重要。84%
Visual Foundationsactions / context

上下文操作位置

上下文操作位置把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

按钮位置会被用户理解为作用范围:行内、卡片内、区块级、全局操作不可混淆。84%
Visual Foundationsdensity / content

内容密度阶梯

内容密度阶梯把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

密度不是页面整体属性,而是随任务深度变化的阶梯。84%
Visual Foundationsgrid / breakout

网格中的突破区域

网格中的突破区域把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

少量突破网格的媒体或证明区能制造节奏,但主体信息仍要回到稳定对齐。84%
Visual Foundationsmotion / hierarchy

用动效表达层级

用动效表达层级把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

有用的动效让用户理解发生了什么、从哪里来、要看哪里。84%
Visual Foundationslayout / container

全宽与容器布局选择

全宽与容器布局选择把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

页面宽度本身就是信息架构决策,不能所有内容都塞进同一个最大宽度。84%
Visual Foundationsicons / affordance

图标与文字可供性平衡

图标与文字可供性平衡把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

图标不是万能语言;可供性来自图标、标签、位置和反馈共同作用。84%
Visual Foundationsempty-state / onboarding

空状态构图

空状态构图把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

空状态不是插画占位,而是用户进入工作流的第一步。84%
Visual Foundationsdisclosure / layout

空间渐进披露

空间渐进披露把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

渐进披露不只是隐藏内容,而是在空间上安排任务入口、关键结果和高级选项的先后层级。84%
Visual Foundationsgrouping / labels

视觉分组与标签

视觉分组与标签把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

复杂页面中的分组需要短标签、稳定位置和可扫描边界来降低理解成本。84%
Visual Foundationsrhythm / sections

区块节奏变化

区块节奏变化把一个高频界面判断转成可执行约束,帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

长页面需要在密度、对齐、媒体比例和留白上变化,但不能换掉整个设计系统。84%
Design Systems Page Patternsassets / images

按页面类型选择视觉资产

视觉资产应揭示真实产品、场景、玩法或人物,而不是只提供模糊氛围。

用户需要检查对象时,图片必须具体、清楚、相关。82%
Design Systems Page Patternsresponsive / stability

响应式布局稳定性

固定格式 UI 元素需要稳定尺寸和响应式约束,避免内容变化引起跳动或重叠。

看板、棋盘、工具栏、计数器和按钮组都应预先定义尺寸规则。82%
Design Systems Page Patternsrag / agent

RAG 检索到生成的使用规则

知识库命中应转化为设计约束,而不是把知识条目原文写进页面可见文案。

RAG 的作用是提高决策质量和可追溯性,不是让页面背诵理论。82%
Design Systems Page Patternspage-pattern / layout

页面模式选择

先判断页面任务是营销、运营、阅读、配置、交易还是创作,再选择布局模式。

错误页面模式会让好组件也服务错目标。82%
Design Systems Page Patternsecommerce / product

电商产品决策流

电商页面应帮助用户判断产品、比较差异、确认信任并完成购买。

购买决策需要图片、价格、规格、库存、评价、配送和退换信息共同支持。82%
Design Systems Page Patternslanding / hero

落地页首屏信号

落地页首屏必须明确品牌/产品/人物/场所是什么,并露出下一段内容线索。

首屏不是只展示氛围,而是给出身份、价值和下一步探索路径。82%
Design Systems Page Patternscrm / workflow

CRM 工作流页面

CRM 页面应围绕线索、客户、阶段、负责人和下一步行动组织,而不是围绕装饰性区块。

CRM 的核心价值是让用户快速判断客户状态并推进下一步。82%
Design Systems Page Patternsdashboard / alerts

Dashboard 层级与告警

Dashboard 应先显示状态总览,再显示异常、趋势、明细和行动入口。

指标不是越多越好,最重要的是帮助用户判断是否需要行动。82%
Design Systems Page Patternssaas / crm

运营工具密度模式

SaaS、CRM 和后台工具应优先支持重复扫描、比较和操作,而不是营销叙事。

工具首屏应显示工作对象、状态和下一步,而不是占满屏幕的宣传区。82%
Design Systems Page Patternscopy / brand

品牌语气与界面文案

界面文案应帮助用户行动,品牌语气要克制地嵌入按钮、状态和说明。

品牌表达不能牺牲清晰度,尤其在错误、支付、审核和危险操作中。82%
Design Systems Page Patternscomponents / contract

组件一致性契约

组件需要明确 props、状态、尺寸和禁止组合,才能在页面间保持一致。

组件不是视觉截图,而是一组可复用行为和约束。82%
Design Systems Page Patternstokens / design-system

设计 Token 治理

Token 要表达角色和约束,不只是把色值、字号和间距集中保存。

可维护 token 需要命名、范围、默认值和禁止用法,才能被人和 Agent 共同使用。82%
Interaction Responsive Motioninputs / controls

输入模式与控件匹配

控件类型应匹配决策方式:开关用于二元,分段用于模式,菜单用于多选项,滑杆用于连续数值。

错误控件会增加理解成本,并让用户不确定选择是否可逆。82%
Interaction Responsive Motiontables / responsive

响应式表格与比较

表格用于比较,响应式处理必须保留列关系、排序和关键操作。

把表格随意改成卡片会损失比较能力,需要按数据任务选择模式。82%
Interaction Responsive Motionloading / performance

感知性能与加载结构

加载状态应保留布局骨架,让用户知道将出现什么,而不是只显示孤立 spinner。

稳定骨架能降低等待焦虑并避免内容出现时的布局跳动。82%
Interaction Responsive Motionmotion / animation

克制且有目的的动效

动效应解释状态变化、空间关系或反馈,而不是单纯制造热闹。

过度动效会打断任务,尤其在高密度工具中。82%
Interaction Responsive Motionbreakpoints / responsive

断点重组而非缩放

响应式设计应在断点重组布局关系,而不是用 viewport 比例缩放所有元素。

缩放字号和容器会带来不可控溢出,重组结构更稳定。82%
Interaction Responsive Motionmobile / responsive

移动端优先堆叠

移动端不是桌面的缩小版,应按任务优先级重新堆叠内容和操作。

小屏空间有限,最重要的信息、控件和反馈需要靠前且不重叠。82%
Interaction Responsive Motionprogressive-disclosure / complexity

按任务风险渐进披露

低频、危险或高级设置应延后展示,高频任务保持直接可达。

渐进披露不是隐藏功能,而是按决策时机安排复杂度。82%
Interaction Responsive Motionfeedback / states

系统连续性的反馈状态

加载、保存、生成、审核、失败都需要可见状态,让用户知道系统仍在响应。

缺少反馈会让用户重复点击或以为数据丢失。82%
Interaction Responsive Motioncards / panels

卡片与面板的密度和可供性

卡片应表示对象,面板应表示工具或上下文;两者需要不同密度和交互提示。

可点击对象必须可识别,纯信息容器不应伪装成按钮。82%
Interaction Responsive Motionbuttons / actions

按钮优先级与操作分离

主操作、次操作、危险操作和导航链接要有清晰差异,避免用户误点。

按钮样式体现决策成本和风险,而不只是视觉偏好。82%
Interaction Responsive Motionforms / workflow

表单流程与校验

表单应按用户心智顺序组织字段,并在关键节点给出可恢复反馈。

好的表单把复杂任务拆成可完成步骤,而不是把所有字段平铺给用户。82%
Interaction Responsive Motionnavigation / wayfinding

导航地标与当前状态

用户需要知道自己在哪里、能去哪、当前筛选或页面属于哪个范围。

导航不是链接堆砌,而是产品结构和当前位置的持续提示。82%