Skip to content
界面图谱Interface Atlas
☰
中文

Pages

Pages are what components add up to. Each page type is broken into a structural skeleton and layout variants — from landing and sign-in pages to dashboards — showing which sections belong and why they sit in that order.

26 concepts

26 / 26 concepts
About Page关于页

A brand page explaining who you are: a mission statement sets the tone, then story and milestones build trust, and the end points to contact or careers.

Pages
Blog Index博客列表页

An index of posts by date or topic: a featured story leads, then cards show thumbnail, title, excerpt and date, with category nav and pagination.

Pages
Blog Post博客文章页

A page for one article: header with title, author and date, a body at a comfortable measure, a table of contents, and an author card with related posts below.

Pages
Calendar Page日历页

A page laying events onto a time grid with month, week and day views, click-to-edit blocks and drag-to-reschedule, anchored by today and prev/next controls.

Pages
Changelog更新日志页

A reverse-chronological record of every product change: each entry opens with a date and version, groups items into added, changed and fixed, and flags breaking changes with migration notes and links. It gives users and teams one shared source of truth for what an update changes for them.

Pages
Chat / Messaging聊天消息页

A page organized around conversations: a session list sorted by latest message, a chronological bubble thread and a composer for text and attachments.

Pages
Checkout Page结账页

The last mile of e-commerce conversion: shipping info, delivery method, payment and the order summary are arranged into one short forward-only flow — a stepper marks progress, forms are prefilled and auto-corrected, and the summary keeps totals always visible. Ask only what is necessary per step, and surface hesitation points (shipping cost, total) before they become objections.

Pages
Contact Page联系页

A page that collects messages: a short form asks only what is needed and confirms success, with email, phone and address alongside plus a brief FAQ.

Pages
Dashboard仪表盘

An admin home screen that concentrates key data and entry points into one view, organized as regional grids: header and sidebar handle navigation, while KPI cards, charts and a primary table fill the content area so users grasp system status at a glance and drill down directly. It anchors the information architecture of the product.

Pages
Documentation Page文档页

A long-lived, reading-first content page: a collapsible docs tree on one side, the article column carrying heading hierarchy, paragraphs, code blocks and callouts, and on wide screens a page TOC marking the current position. Permanent links and prev/next links chain pages into a site; search is the primary entry; the structure is stable enough to memorize.

Pages
404 Page404 页面

A fallback screen for missing addresses. It explains the situation plainly and offers home, search or recommended links for a next step.

Pages
Server Error Page服务错误页

A screen for backend failures. It states that the problem is server-side, offers retry or support, and preserves input to keep trust.

Pages
FAQ Page常见问题页

A page that groups recurring questions by topic and expands each answer. Question-style headings cut search cost and keep answers self-serve.

Pages
Feature Comparison Page功能对比页

A page that aligns several options feature by feature in one side-by-side matrix: the first column holds the comparison dimensions, each option takes a column, and users can show differences only, sort by dimension and spot a recommended pick. It serves the which-one decision by turning marketing copy into checkable evidence.

Pages
Help Center帮助中心

A self-service support page gathering docs, FAQs and contact routes: search guesses intent, articles group by topic, and contact sits at the bottom.

Pages
Landing Page落地页

A marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.

Pages
Login Page登录页

The gateway page that gets existing users in with minimal friction: an identity form (email/password) and one primary button, supported by third-party login, password recovery and a signup link. Deliberately minimal — every removed field raises conversion, and all decoration yields to the single goal of getting in fast.

Pages
Notification Center通知中心

A page aggregating alerts into a scannable list, with tabs for all, unread and mentions and rows showing icon, title, snippet and time plus bulk mark-as-read.

Pages
Onboarding新手引导

A first-run page that guides new users to one key action with short explanations, samples and progress cues, rather than every feature.

Pages
Order Confirmation订单确认页

The closing screen after a successful purchase: a clear success state, order number and delivery estimate give certainty first, then item details, totals and next actions such as invoice, tracking or continue shopping. It collects nothing new — it exists to make paid-and-on-its-way unmistakable.

Pages
Pricing Page定价页

A commercial page that makes the offer legible: it opens with a headline and billing-period toggle, the body is a row of tier cards (price, feature list, action button) with the recommended tier visually emphasized, and a comparison table plus FAQ resolve remaining doubts. The order is fixed — pick a period, pick a tier, remove hesitation.

Pages
Profile Page个人主页

An identity-centered page answering "who is this, what do they have, what do they do": cover and avatar establish visual identity, name, bio and stats follow, and tabs switch between content streams like posts, works or articles. Visitors see follow/message actions; the owner sees edit entries — same structure, different actions.

Pages
Search Page搜索页

A content-discovery page answering a query: a persistent search box on top (keeping the term, editable to re-search), type and facet filters on one side, and results ranked by relevance in the body (title + snippet + highlighted hits), continued by pagination or infinite scroll. Empty state and no-results state must be designed explicitly.

Pages
Settings Page设置页

A utility page for managing account preferences and system configuration: a stable settings nav on one side (general, notifications, security…), and rows of "label + control + hint" forms on the other — low-frequency edits, saved as they change. Organized by configuration domain rather than task flow; users locate sections by scanning titles, change, and leave.

Pages
Signup Page注册页

The conversion page turning strangers into accounts: the form keeps only the fields needed to start (email + password) and defers everything else into the product, supported by third-party signup, a password strength hint and terms consent. It shares a layout skeleton with the login page, but every design decision answers "is signing up worth it and painless?"

Pages
Team Page团队页

A page that introduces an organization through a grid of person cards: avatar, name, role and a one-line responsibility form the smallest unit, grouped by team or function, often with an open-roles link and a values narrative. It replaces the abstract we with specific, recognizable people to build trust.

Pages