页面是组件组合出来的结果。这里按页面类型拆解结构骨架和布局变体——从落地页、登录页到仪表盘,告诉你每种页面该有哪些区块,以及顺序为什么这么排。
26 个概念
我们做尊重注意力的工具
我们的故事
切换形式,点团队成员或时间线节点试试
向访客解释「我们是谁、为什么做这件事」的品牌页面:开头用一句使命宣言定调,中段以创始故事、发展历程或团队照片建立信任,再用价值观与关键数据支撑,结尾导向联系、招聘或产品。
设计系统的演进路径
点分类或页码筛选文章列表
按时间或主题聚合文章的内容索引页:顶部先给一条编辑推荐的头条,再用卡片流或列表铺开全部文章,每项含题图、标题、摘要、分类与日期;分类导航与搜索负责收窄范围,分页或无限滚动负责继续加载。
设计安静的界面
引言
结构
配色
结语
林薇 · 设计工程师
谈配色
谈栅格
谈动效
点目录跳转章节,点分享复制链接
围绕单篇文章组织的阅读页:文章头给出标题、作者、发布时间与预计阅读时长,正文保持一行 45~75 字符的舒适行宽,侧栏或文首提供可跳转的目录,文末用作者卡与相关文章把读者留在站内。
选择日期、切换视图或新建事件试试
用时间网格承载事件与日程的页面:以月、周、日三种尺度切换视图,事件块按起止时间定位并支持拖拽改期, 顶部有今天、前后翻页与视图切换,侧栏列出待办与冲突。 它是排期、预约与团队协调的主界面。
更新日志
每两周发布一次
新增
改进
按类型筛选,点版本号展开
按时间倒序罗列产品每次变化的页面:每条版本以日期与版本号开头,用新增、改进、修复分组呈现, 重要变更附迁移说明与链接。它让用户与团队在同一份事实源上理解「这次更新影响我什么」。
切换会话并发送一条消息试试
以对话为单位组织消息的页面:左侧会话列表按最新消息排序,右侧线程区按时间正序铺气泡, 底部输入框承担发送与附件,顶部显示对方状态与操作。 它把异步沟通的上下文留在同一条线程里,适合客服、社区与团队协作场景。
配送:预计 3 天到达
订单摘要
运费免运费
合计¥238
点「下一步」走完三步流程;步骤条可点回退
电商转化的最后一公里:页面把收货信息、配送方式、支付方式和订单摘要组织成一条 不可回头的短流程,步骤条标示进度,表单尽量预填与自动更正,摘要常驻展示金额明细。 核心原则是每一步只问必要的信息,任何犹豫点(运费、总金额)都要提前说清楚。
和我们聊聊
工作日 1 个工作日内回复。
工作日 1 个工作日内。
空表单提交可看校验,点 FAQ 可展开
收集访客留言并提供多种联系渠道的页面:主表单只问必要字段(姓名、邮箱、主题、留言),提交后给出明确成功反馈;旁边或下方并列邮箱、电话、地址与社交入口,再用简短 FAQ 拦下高频问题。
销售额
订单量
转化率
把关键数据与操作入口聚在一屏内的后台首页,用区域化网格组织:顶栏与侧栏负责导航, 中部依次铺指标卡、图表区和主表格,让用户打开就能看到系统当前状态并直接下钻。 它是后台产品信息架构的核心页面,密度与分区方式决定了整站的阅读节奏。
指南 / 组件用法
组件用法
import { Button } from 'ui';
<Button variant="primary" />
提示:先阅读设计令牌章节再开始定制。
点左侧文档树切换页面;点右侧目录切换章节
以阅读为中心的长驻内容页面:一侧是可折叠的文档树导航,正文栏承载标题层级、段落、 代码块与提示框,宽屏下再加页内目录(TOC)标示当前阅读位置。页面靠永久链接与 上一页/下一页串联成站,搜索是第一入口,结构稳定到可以背下来。
404
找不到这个页面
地址可能拼错了,或者这个页面已经被移走。
输入搜索或点推荐链接试试
在用户请求的地址不存在时展示的兜底页面:用一句人话说明发生了什么,提供返回首页、搜索或推荐入口,把一次失败访问转成继续浏览的机会。它不解决问题本身,但决定用户是离开还是留下。
500
服务暂时出了点问题
不是你的操作问题,我们正在恢复。
点「重试」累积尝试次数,展开看详情
在后端异常、请求无法完成时展示的页面:不暴露内部细节,用中性语气说明是服务端问题,给出稍后重试或联系支持的路径,并尽量保留用户已输入的内容。它承担故障期间的信任维护。
常见问题
先看看这里,也许已经有答案。
搜索、切分类、点问题展开答案
把用户反复提出的问题按主题归组、可逐条展开的页面:用问题式标题降低查找成本,配合锚点、搜索或分类让答案自解释,并把仍未解决的人引向人工支持。它用内容替代重复的客服沟通。
哪个方案适合你?
一表看清功能差异
点方案列聚焦,点右上角只看差异
用并列矩阵把多个方案的功能、价格与限制逐项对齐的页面:首列固定为对比维度,各方案各占一列, 支持只看差异、按维度排序与推荐标记。它服务于「选哪个」的决策,把宣传语替换成可逐格核对的证据。
有什么可以帮你?
热门文章
搜索、选择主题或展开问题试试
把产品文档、常见问题与联系入口收拢到一处的自助支持页面:顶部搜索先猜意图, 主体按主题分组文章并按热度排序,底部保留联系客服与提交工单的兜底路径。 目标是让用户在打扰人工之前先自己解决问题。
更快地交付你的产品
点「免费开始」看 CTA 状态反馈
围绕单一转化目标纵向组织信息的营销页面:顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪", 中段用功能区、信任区(客户 logo、评价、数据)逐层打消顾虑,末端以强视觉的行动按钮收口。 页面按说服顺序分区,每一屏都在回答用户下一步的疑问。
登录到 Acme
没有账号?注册
多步变体:点「下一步」切换步骤
用最小干扰让已有账号用户进入系统的门面页:核心只有身份识别表单(邮箱/密码)与一个主按钮, 辅以第三方登录、忘记密码和注册入口。页面刻意保持极简——少一个字段,转化就高一分; 所有装饰都让位于"快点进去"这一目标。
把系统产生的提醒按来源与时间聚合成可浏览列表的页面,顶部用标签区分全部、未读、提及等视图, 每条通知展示图标、标题、正文摘要与时间,支持一键已读、批量处理与跳转原文。 它替代零散的弹窗提醒,让用户主动回看而不是被动打断。
欢迎使用 Atlas
一句话说明产品能帮你做什么。
点按钮推进引导
用分步流程把新用户从首次进入带到完成第一个关键动作的页面:通过简短说明、样例与进度提示降低陌生感,并在合适时机引导用户开始操作,而不是一次塞入全部功能。它决定用户对产品的第一印象与留存意愿。
支付成功
收据已发送到你的邮箱
订单号
AC-2026-0824-7781
无线降噪耳机
曜石黑 · 标准版 · ×1
硅胶保护套
深灰 · ×2
试试复制订单号、展开物流进度
下单成功后接住用户情绪的收尾页:用明确的成功状态、订单号与交付时间先给出确定感,再列商品明细、 金额与下一步动作(发票、物流、继续购物)。它不收集新信息,只把「钱已付、货在路上」讲清楚。
选择适合你的方案
¥0/月
¥49/月
¥169/月
拨动月/年开关看价格变化;点卡片选择套餐
把付费方式讲清楚的商业页面:页面通常以标题与计费周期切换开头,主体是并排的套餐卡 (价格、功能清单、行动按钮),推荐档位用视觉强调;下方补功能对比表和 FAQ 兜底疑虑。 组织逻辑是"先选周期、再选档位、最后消除犹豫"。
林小满 已认证
点「关注」切换状态;页签可切换内容
以身份为中心展示"这是谁、有什么、在做什么"的页面:封面与头像建立视觉身份, 下方是姓名、简介与统计数字,再用页签切换动态、作品或文章等内容流。 他人视角配关注/私信按钮,本人视角配编辑入口,页面结构相同而操作不同。
约 129 条结果
设计系统入门指南
从零搭建一套设计系统:令牌、组件库与文档…
docs / 入门
组件命名规范
组件命名要可预测:名词优先,避免缩写…
docs / 规范
深色模式适配清单
适配深色模式的检查清单:色彩、阴影与图片…
docs / 主题
输入关键词(如「组件」「深色」)看结果与高亮;取消全部类型看空态
承接查询意图并返回结果的内容发现页面:顶部常驻搜索框(保留查询词、可修改重搜), 一侧是类型与筛选器,主体按相关度排列结果条目(标题 + 摘要 + 高亮命中词), 底部用分页或无限滚动续接。空结果和无结果关键词是必须设计好的两个状态。
通用
团队名称
默认语言
周起始日
切换分区触发保存条;点「保存」收起
集中管理账号偏好与系统配置的功能页面:一侧是稳定的设置导航(通用、通知、安全等分区), 另一侧是行式表单列表——每行一个"标签 + 控件 + 说明",低频修改、即改即存。 页面按配置域分区而非按任务流组织,用户靠扫读标题定位,改完即走。
创建你的账号
已有账号?登录
多步变体:输入密码看强度条,勾选条款后才能提交
把陌生访客变成账号的转化页:表单只保留起步必需的字段(邮箱 + 密码),其余信息 延后到产品内补齐;辅以第三方注册、密码强度提示和服务条款勾选。与登录页共用 布局骨架,但每一处设计都在回答"注册这件事值不值得、麻不麻烦"。
做产品的人
六个人,三个职能
林舟联合创始人 · CTO
写了第一版内核,长期关注可访问性与性能预算。
用人物卡片组介绍组织构成的页面:头像、姓名、职位与一句职责说明构成最小单元,按部门或职能分组, 常附加入职链接与价值观叙述。它把抽象的「我们」换成具体可辨认的人,用真实面孔建立信任。
当前分类和列表中没有匹配项,可以扩大搜索范围。