跳到主要内容
界面图谱Interface Atlas
☰
EN

页面

页面是组件组合出来的结果。这里按页面类型拆解结构骨架和布局变体——从落地页、登录页到仪表盘,告诉你每种页面该有哪些区块,以及顺序为什么这么排。

26 个概念

26 / 26 个概念
关于页About Page

向访客解释「我们是谁、为什么做这件事」的品牌页面:开头用一句使命宣言定调,中段以创始故事、发展历程或团队照片建立信任,再用价值观与关键数据支撑,结尾导向联系、招聘或产品。

页面
博客列表页Blog Index

按时间或主题聚合文章的内容索引页:顶部先给一条编辑推荐的头条,再用卡片流或列表铺开全部文章,每项含题图、标题、摘要、分类与日期;分类导航与搜索负责收窄范围,分页或无限滚动负责继续加载。

页面
博客文章页Blog Post

围绕单篇文章组织的阅读页:文章头给出标题、作者、发布时间与预计阅读时长,正文保持一行 45~75 字符的舒适行宽,侧栏或文首提供可跳转的目录,文末用作者卡与相关文章把读者留在站内。

页面
日历页Calendar Page

用时间网格承载事件与日程的页面:以月、周、日三种尺度切换视图,事件块按起止时间定位并支持拖拽改期, 顶部有今天、前后翻页与视图切换,侧栏列出待办与冲突。 它是排期、预约与团队协调的主界面。

页面
更新日志页Changelog

按时间倒序罗列产品每次变化的页面:每条版本以日期与版本号开头,用新增、改进、修复分组呈现, 重要变更附迁移说明与链接。它让用户与团队在同一份事实源上理解「这次更新影响我什么」。

页面
聊天消息页Chat / Messaging

以对话为单位组织消息的页面:左侧会话列表按最新消息排序,右侧线程区按时间正序铺气泡, 底部输入框承担发送与附件,顶部显示对方状态与操作。 它把异步沟通的上下文留在同一条线程里,适合客服、社区与团队协作场景。

页面
结账页Checkout Page

电商转化的最后一公里:页面把收货信息、配送方式、支付方式和订单摘要组织成一条 不可回头的短流程,步骤条标示进度,表单尽量预填与自动更正,摘要常驻展示金额明细。 核心原则是每一步只问必要的信息,任何犹豫点(运费、总金额)都要提前说清楚。

页面
联系页Contact Page

收集访客留言并提供多种联系渠道的页面:主表单只问必要字段(姓名、邮箱、主题、留言),提交后给出明确成功反馈;旁边或下方并列邮箱、电话、地址与社交入口,再用简短 FAQ 拦下高频问题。

页面
仪表盘Dashboard

把关键数据与操作入口聚在一屏内的后台首页,用区域化网格组织:顶栏与侧栏负责导航, 中部依次铺指标卡、图表区和主表格,让用户打开就能看到系统当前状态并直接下钻。 它是后台产品信息架构的核心页面,密度与分区方式决定了整站的阅读节奏。

页面
文档页Documentation Page

以阅读为中心的长驻内容页面:一侧是可折叠的文档树导航,正文栏承载标题层级、段落、 代码块与提示框,宽屏下再加页内目录(TOC)标示当前阅读位置。页面靠永久链接与 上一页/下一页串联成站,搜索是第一入口,结构稳定到可以背下来。

页面
404 页面404 Page

在用户请求的地址不存在时展示的兜底页面:用一句人话说明发生了什么,提供返回首页、搜索或推荐入口,把一次失败访问转成继续浏览的机会。它不解决问题本身,但决定用户是离开还是留下。

页面
服务错误页Server Error Page

在后端异常、请求无法完成时展示的页面:不暴露内部细节,用中性语气说明是服务端问题,给出稍后重试或联系支持的路径,并尽量保留用户已输入的内容。它承担故障期间的信任维护。

页面
常见问题页FAQ Page

把用户反复提出的问题按主题归组、可逐条展开的页面:用问题式标题降低查找成本,配合锚点、搜索或分类让答案自解释,并把仍未解决的人引向人工支持。它用内容替代重复的客服沟通。

页面
功能对比页Feature Comparison Page

用并列矩阵把多个方案的功能、价格与限制逐项对齐的页面:首列固定为对比维度,各方案各占一列, 支持只看差异、按维度排序与推荐标记。它服务于「选哪个」的决策,把宣传语替换成可逐格核对的证据。

页面
帮助中心Help Center

把产品文档、常见问题与联系入口收拢到一处的自助支持页面:顶部搜索先猜意图, 主体按主题分组文章并按热度排序,底部保留联系客服与提交工单的兜底路径。 目标是让用户在打扰人工之前先自己解决问题。

页面
落地页Landing Page

围绕单一转化目标纵向组织信息的营销页面:顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪", 中段用功能区、信任区(客户 logo、评价、数据)逐层打消顾虑,末端以强视觉的行动按钮收口。 页面按说服顺序分区,每一屏都在回答用户下一步的疑问。

页面
登录页Login Page

用最小干扰让已有账号用户进入系统的门面页:核心只有身份识别表单(邮箱/密码)与一个主按钮, 辅以第三方登录、忘记密码和注册入口。页面刻意保持极简——少一个字段,转化就高一分; 所有装饰都让位于"快点进去"这一目标。

页面
通知中心Notification Center

把系统产生的提醒按来源与时间聚合成可浏览列表的页面,顶部用标签区分全部、未读、提及等视图, 每条通知展示图标、标题、正文摘要与时间,支持一键已读、批量处理与跳转原文。 它替代零散的弹窗提醒,让用户主动回看而不是被动打断。

页面
新手引导Onboarding

用分步流程把新用户从首次进入带到完成第一个关键动作的页面:通过简短说明、样例与进度提示降低陌生感,并在合适时机引导用户开始操作,而不是一次塞入全部功能。它决定用户对产品的第一印象与留存意愿。

页面
订单确认页Order Confirmation

下单成功后接住用户情绪的收尾页:用明确的成功状态、订单号与交付时间先给出确定感,再列商品明细、 金额与下一步动作(发票、物流、继续购物)。它不收集新信息,只把「钱已付、货在路上」讲清楚。

页面
定价页Pricing Page

把付费方式讲清楚的商业页面:页面通常以标题与计费周期切换开头,主体是并排的套餐卡 (价格、功能清单、行动按钮),推荐档位用视觉强调;下方补功能对比表和 FAQ 兜底疑虑。 组织逻辑是"先选周期、再选档位、最后消除犹豫"。

页面
个人主页Profile Page

以身份为中心展示"这是谁、有什么、在做什么"的页面:封面与头像建立视觉身份, 下方是姓名、简介与统计数字,再用页签切换动态、作品或文章等内容流。 他人视角配关注/私信按钮,本人视角配编辑入口,页面结构相同而操作不同。

页面
搜索页Search Page

承接查询意图并返回结果的内容发现页面:顶部常驻搜索框(保留查询词、可修改重搜), 一侧是类型与筛选器,主体按相关度排列结果条目(标题 + 摘要 + 高亮命中词), 底部用分页或无限滚动续接。空结果和无结果关键词是必须设计好的两个状态。

页面
设置页Settings Page

集中管理账号偏好与系统配置的功能页面:一侧是稳定的设置导航(通用、通知、安全等分区), 另一侧是行式表单列表——每行一个"标签 + 控件 + 说明",低频修改、即改即存。 页面按配置域分区而非按任务流组织,用户靠扫读标题定位,改完即走。

页面
注册页Signup Page

把陌生访客变成账号的转化页:表单只保留起步必需的字段(邮箱 + 密码),其余信息 延后到产品内补齐;辅以第三方注册、密码强度提示和服务条款勾选。与登录页共用 布局骨架,但每一处设计都在回答"注册这件事值不值得、麻不麻烦"。

页面
团队页Team Page

用人物卡片组介绍组织构成的页面:头像、姓名、职位与一句职责说明构成最小单元,按部门或职能分组, 常附加入职链接与价值观叙述。它把抽象的「我们」换成具体可辨认的人,用真实面孔建立信任。

页面