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

分类

全部Visual Foundations

标签

actionsaffordancealertsalignmentassetsattentionbalanceboundarybreakoutcardschartsclaritycomparisoncomplexitycomponentscompositionconsistencycontainer
Knowledge RAG

设计知识库

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

提交新原则
30 条已发布原则
Visual Foundationsdashboard / kpi

Dashboard KPI 分诊

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

指标卡不是数字展览,而是运营分诊入口。86%
Visual Foundationscomparison / layout

比较布局清晰度

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

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

对象详情布局

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

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

数据墨水优先级

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

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

焦点经济

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

焦点越多,真正的重点越弱;视觉强调必须稀缺且服务主任务。85%
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%
Visual Foundationscontainer / boundary

边界与容器清晰度

容器边界用于表达对象和区域,不应变成页面装饰的默认手段。

边界、底色和阴影都在传达层级,过多容器会让页面显得碎。82%
Visual Foundationsmodules / rhythm

模块节奏与重复

重复模块能降低认知成本,但需要用内容层级和节奏避免机械单调。

相同结构适合相同任务;变体应来自内容优先级,而不是随机样式。82%
Visual Foundationsscan / layout

扫描路径设计

页面应该支持用户按预期路径扫读,而不是让视线在多个焦点之间跳动。

视线通常沿标题、关键数据、分组和操作移动,布局应顺着这个路径组织。82%
Visual Foundationswhitespace / structure

留白作为结构

留白不是空着,而是用空气建立分隔、呼吸和注意力路径。

有效留白能减少边框、分割线和装饰,让用户自然理解区块关系。82%
Visual Foundationsdensity / dashboard

信息密度控制

高密度不是拥挤;低密度也不等于高级。密度要匹配用户任务频率和决策速度。

运营工具需要可扫描密度,营销页需要叙事节奏,两者不能混用。82%
Visual Foundationsvisual-weight / balance

视觉重量与平衡

颜色、面积、粗细、位置和阴影都会增加视觉重量,需要服务任务优先级。

视觉重量不是越大越好;它应该把注意力分配给最重要、最可操作的区域。82%
Visual Foundationsalignment / layout

对齐纪律

对齐让用户少花力气理解页面边界、内容归属和操作对象。

多个微小的不对齐会迅速让界面显得不专业,即使颜色和字体都正确。82%
Visual Foundationsspacing / rhythm

间距尺度与节奏

少量可重复的间距刻度能让页面安静、可预测,也能减少 UI 临时感。

间距应表达结构关系,而不是凭感觉逐项微调。82%
Visual Foundationsgrid / layout

网格作为决策系统

网格不是装饰线,而是决定内容跨度、对齐、响应式重排和密度的规则系统。

稳定网格能减少临时摆放,让复杂页面在桌面和移动端都保持结构感。82%
Visual Foundationsgestalt / consistency

相似性与一致性

看起来相同的元素应承担相同功能;功能不同的元素必须有清楚差异。

视觉相似性会被用户解释为功能相似性,混用样式会制造误读。82%
Visual Foundationsgestalt / grouping

邻近原则与分组

距离决定归属:相关元素靠近,不相关元素拉开,分组比边框更先发生。

用户会先依据空间距离判断元素是否属于同一组,边框和标题只是第二层确认。82%
Visual Foundationshierarchy / layout

信息层级优先

先确定用户要先看、再看和最后行动的内容,再决定字号、间距、颜色和组件强度。

有效界面不是把所有信息平均展示,而是用大小、位置、密度和对比建立清晰的阅读顺序。82%