本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Notion 官网首页设计稿。打开即可对照版面结构与组件层级。
Notion 首页最先建立的是一种被整理过的工作台秩序。白色背景承载的信息并不少，但没有元素急于抢占注意力。页面虽然讨论 AI，首屏却避开宇宙、光束和抽象粒子，转而将一段真实的产品工作画面放大至接近满幅。这个选择把 AI 放回既有的写作、搜索与分派场景：它不是独立展厅里的新奇展品，而是桌面上已经开始参与工作的角色。
顶部导航很薄，黑色 Notion 标志靠左，产品、下载、解决方案、资源等入口横向铺开。右侧的“Request a demo”保持文字链接的轻量，“Get Notion free”则以黑底白字、圆角较小的按钮落下。两种入口的音量并不相同，恰好区分企业采购与个人试用。导航下的大标题“Where teams and agents …”没有被长段解释包围，正文只提示捕捉上下文、找到答案、自动处理任务三件事；两枚行动按钮留在下方，首屏的视觉重心始终交给那张正在运作的产品界面。
产品录像在这一段承担可信度，而非另置一张概念海报。画面中页面、对话和内容处理的过程连续出现，即使未逐字阅读英文，也能辨认输入、搜索、结果与协作之间的关系。它因此更接近被推到眼前的一块屏幕，而不是被精修到脱离使用现场的广告图。画面复杂度略高，却也准确回应了 Notion 需要证明的能力：系统能够接住复杂工作，而不只是展示漂亮留白。
随后，页面没有直接展开功能清单，而以 Capture、Find、Automate 三张近乎正方形的大卡，将叙事收束为三步。卡片采用白色与极浅灰底、细边框和克制圆角；标题是粗、宽、笔画干净的无衬线字，说明文字则退为较小的常规字重。文字像稳固的标牌，始终让位给截图。黑色集中在标题、边框与关键按钮，蓝、黄、红等颜色仅从产品界面内露出，颜色的解释权被留给正在发生的内容。
卡片里的视觉语言也更接近组件组合，而非装饰性插画：页片、搜索结果条、输入框和小标签可以层层叠放。圆角、轻阴影、遮挡与细窄描边足以说明前后层级，并未追逐玻璃质感。尤其在“Find”卡中，提问框和附带引用的答案被压缩为最小视觉单元，对应“Get answers, instantly—with citations”。引用被直接纳入画面，强调回答不仅追求速度，也应能被追溯；这一细节比抽象的可靠性标语更有分量。
“See what Notion can do”将前三步拆成更小的任务：分拣产品反馈、在 Slack 中处理支持单、响应安全告警、生成周报、辅助开发工具。版式从大卡收紧为便于扫读的案例卡，如同抽屉被逐格拉开。每张卡的标题以动词开头，回避抽象岗位与遥远愿景。这一段不要求访客先接受 Agent 改变一切的主张，只把下一封支持消息、下一条反馈可能少一次转交的情境放到眼前。
动效同样被控制在说明过程的位置。首屏视频是最明显的运动来源；卡片内的叠层、光标和对话框更像停在下一步之前的提示。持续漂浮会削弱工具型系统的稳定感，完全静止又容易使页面沦为说明书。首页取其间：运动负责呈现操作，暂停后仍留下清楚、可阅读的版面结构。
客户标志、使用者引语和数字排在功能介绍之后，形成一段后置的背书，而非开场的胸牌。“The most ambitious companies run on Notion”之下，品牌名以单色和整齐节奏出现；肖像邻接引语，数字则由重复的横向信息带组织。证据被延后，意味着页面先说明产品能做什么，再提示哪些团队正在使用它。对于产品线不断延展的平台，这一顺序避免 Logo 墙变成没有对象的装饰。
整页的关键不在单张卡片的样式，而在信息密度的调度。留白为段落换气，黑白维持全局秩序，间或露出的彩色界面证明其中确有日常工作发生。Notion 没有因 AI 重造一套视觉语言；首页把页面、数据库、评论与任务重新编排为一条可由 AI 接手的路径。最终呈现依然像 Notion：一张熟悉的白纸，只是多了一位会自行翻页的协作者。