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

分类

全部Design Systems Page Patterns

标签

accountadminagentaialertsanalyticsassetsaudit-logbrandbrowsecardscommunitycomparisoncomponentscontractcopycrmdashboard
Knowledge RAG

设计知识库

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

提交新原则
30 条已发布原则
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%
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%
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%
Design Systems Page Patternsaccount / profile

资料与账号设置

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

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

市场浏览模式

市场浏览模式把一个高频界面判断转成可执行约束,帮助 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%