UX设计技能包

展示用户当前位置及操作影响范围，包括面包屑、区域和标签。适用于设计深层导航或多分区布局。

在页眉或页脚提供货币、语言、地区和单位选择器。适用于设计区域切换器或产品级偏好设置控件。

提供视图模式、行选择、批量操作、排序、筛选及搜索等表格交互模式，适用于设计数据表、列表或文件浏览器。

将实时网页精确重建为 Figma、Penpot 或代码，并验证还原度。适用于复刻页面或检查重建结果与原页面的差异。

实现粘性头部、底部工具栏、浮动操作按钮及表格表头固定。用于决定用户滚动时哪些界面元素保持可见。

基于比例的字体缩放系统，确保所有字号相互关联。适用于定义字体大小或排版令牌，解决排版随意的问题。

提供模态框、抽屉、底部弹窗和气泡提示等组件，明确其作用域与阻塞级别。适用于设计对话框、确认提示、侧边面板或操作菜单。

确保按钮、输入框、徽章等组件在圆角、颜色逻辑、阴影、边框和间距上保持一致。适用于构建或审查组件库时使用。

在共享上下文中切换标签视图。适用于设计包含多个数据视图的标签布局、设置页面、详情视图或仪表板。

通过大小、颜色、字重和位置突出关键信息。适用于设计按钮组、CTA、卡片、仪表盘及包含主要操作的布局。

基于品牌色自动生成完整 UI 调色板，包含状态变体、品牌灰阶及语义色彩。适用于构建或扩展颜色系统。

基于格式塔原理对控件进行分组，帮助用户直观识别组件归属。适用于布局组件、导航栏、工具栏、表单或仪表盘等场景。

提供语义化 HTML5、SEO 基础、Alt 文本及渐进增强等最佳实践，适用于构建 Web UI、审查标记或优化搜索引擎表现。

基于尼尔森十大可用性原则，用于界面审计、交互流程设计、错误提示编写及可用性审查。

同步展示表格与地图、图表或时间线，支持双向选择联动。适用于需同时查看数据多种可视化表示的场景。

将移动、平板和桌面视为不同设计范式而非单一缩放布局。适用于设计响应式界面或确定各断点展示内容。

为非开发者领域的专家提供设置方案，涵盖专业术语、合理默认值及概念分组。适用于设计设置面板、求解器配置或约束编辑器。

通过阴影和分层效果提升元素视觉高度。适用于设计卡片、下拉菜单、模态框、提示框等浮动组件。

根据平台和用户类型匹配信息密度。适用于设计数据表格、仪表盘或工具栏，以及将桌面产品适配移动端。

统一营销站点与产品的令牌层，解决两者在密度和规模上的差异及组件共享问题。

通过边框、高度或填充区分界面元素，并利用透明度表示状态。适用于设计卡片、面板、列表行及工具栏等容器组件。

提供辅助文本、占位符、验证及提交行为指导。适用于设计或审查表单、输入框及数据录入界面。

将 UI/UX 任务按品牌、令牌、布局、组件、打磨和无障碍性进行路由编排。适用于设计审查、界面构建或多维度审计等复杂工作。

提供 Toast、内联错误、横幅及恢复路径。适用于设计错误状态、成功确认、异步反馈或就地编辑场景。

从URL或DESIGN.md提取设计令牌与决策，生成UI规范。适用于基于现有品牌构建界面、审计设计系统或修复视觉不一致问题。

确保界面符合 WCAG 2.2 AA 标准及欧洲无障碍法案要求，适用于设计、开发或审查用户界面时的无障碍检查。

执行 Lighthouse 审计并监控 Core Web Vitals（LCP、CLS、INP）。适用于优化页面加载速度、布局偏移、输入延迟及渲染阻塞资源。

提供语义化颜色方案，每种颜色仅代表一种含义，并为错误状态提供明确的解决指引。适用于设计状态指示器、验证逻辑、警报或错误界面。

避免内部滚动容器；若不可避免，每次仅允许单轴滚动。适用于页面内可能滚动的布局、表格或面板。

选择并复用统一的布局范式（如信息流、看板、表格等），包含落地页叙事框架，适用于页面结构设计与模板构建。

基于基础颜色派生静止、悬停、激活、聚焦、禁用和加载等状态，适用于设计按钮、链接、输入框及任何可点击组件。

为间距、控件高度及媒体查询等场景提供 rem、px 或相对单位的最佳实践，确保布局在文本放大时依然稳定。

提供开关、动态图标及成功反馈等小型目的性动画，适用于设计交互反馈、成功状态或加载效果。

通过旋转指示器、骨架屏和交错显示管理等待时间，适用于设计加载状态、异步数据及优化慢接口体验。

使用 Dembrandt 从实时网站中提取颜色、排版、间距、组件及 W3C 设计令牌，适用于获取真实设计参数或构建设计系统。

定义基础调色板并决定深色模式支持策略，涵盖浅色、深色或双模式场景，以及何时引入主题选择器。

优化命名规范、导航结构及UI数据映射，为不可逆操作提供确认机制。适用于大型应用的结构设计与实体命名。

提供顶栏、侧边栏、应用启动器及状态栏等持久化界面组件，适用于设计多应用导航架构。

确保卡片、行、瓦片和单元格在内容长度变化时保持固定槽位模型并对齐。适用于构建或审查任何重复组件。

将迪士尼动画原则与电影技法应用于 UI 动效。适用于设计页面过渡、滚动动画及新手引导动效。

为全天候使用工具的专家设计高密度、线性且状态一目了然的UI。适用于调度、仓储、物流及排班等B2B运营工具的设计。

提供卡片、抽屉、轮播等源自物理世界的界面模式，适用于设计布局结构、手势交互及导航范式。