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

分类

全部Design Systems Page PatternsInteraction Responsive MotionVisual Foundations

标签

actionsalignmentbreakpointscomparisoncomplexitycontainercontextdecisiondetaildisclosuredocsempty-stategeospatialgridhierarchylayoutmapmobile
Knowledge RAG

设计知识库

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

提交新原则
19 条已发布原则
Design Systems Page Patternsdocs / toc

文档目录布局

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

长文档需要同时显示当前位置、章节结构和相关下一步。85%
Interaction Responsive Motionmobile / actions

移动端底部行动栏

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

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

比较布局清晰度

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

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

对象详情布局

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

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

地图与地理空间布局

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

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

上下文操作位置

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

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

全宽与容器布局选择

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

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

空状态构图

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

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

空间渐进披露

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

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

区块节奏变化

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

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

响应式布局稳定性

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

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

页面模式选择

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

错误页面模式会让好组件也服务错目标。82%
Interaction Responsive Motionbreakpoints / responsive

断点重组而非缩放

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

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

移动端优先堆叠

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

小屏空间有限,最重要的信息、控件和反馈需要靠前且不重叠。82%
Visual Foundationsscan / layout

扫描路径设计

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

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

对齐纪律

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

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

间距尺度与节奏

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

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

网格作为决策系统

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

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

信息层级优先

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

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