Notion 风Notion Style
设计风格用文档式排版保持界面轻量有序
Notion 风以浅色画布、内容排版、简洁图标和按需出现的次要操作为主，适合文档、笔记和协作工具。隐藏操作还要兼顾键盘和触屏，不能只在鼠标悬停时出现。
Launch plan
Everything the team needs for 12 September.
OverviewTasksNotes
WebsiteLinReady
CampaignUmaIn progress
Press kitSamNot started
设计原则 · Principles
- 内容即界面：编辑器就是产品本身，去掉一切多余的壳和装饰页面即文档▏光标就在这打字
- emoji 可以做轻量页面图标：容易理解且有个性，但不同系统外观会变化，正式功能仍需稳定图标和文字发布计划 食谱 读书笔记
- 次要操作按需出现：鼠标悬停、键盘聚焦和触屏点击都要能找到同一入口⠿ ＋ ⋯一个内容块
- 以灰阶建立文字层级：标题、正文和注释可以降低强调，但关键信息与状态仍可使用有含义的颜色标题用最深的灰正文浅一号注释再浅一号
- 细分割线配合留白分区：边界要足够清楚，复杂表格或输入控件可以使用更明确的边框
什么时候用
- 文档、笔记和知识库，以编辑与阅读为主团队手册
- 团队协作工具，需要统一任务、评论和多人内容3 人正在编辑
- 个人知识库，用侧栏和页面树组织层级我的主页 周计划 目标 灵感
- 数据有多种视图，但希望界面保持轻量表格看板日历
什么时候不用
- 营销页只剩灰白骨架，缺少利益点和行动入口新品大促（文档风）营销页要冲击力，素雅撑不起转化
- 电商页面忽略图片、价格、规格和购买信息商品详情：白底、细线、小灰字电商要的是食欲和冲动，不是清淡
- 重要操作只在 hover 时出现，触屏无法发现手机没有 hover，操作钮永远藏着
- 机械限制所有页面只能使用灰、白、黑品牌活动页（灰扑扑）需要强品牌色时，灰白黑太素
组成结构 · Anatomy
浅灰底 #F7F7F5
白色内容区
emoji 图标
灰黑文字 #37352F
1px 细分割线
⠿ ＋ ⋯hover 操作钮
1浅灰底Gray Canvas示例使用暖灰画布；具体颜色要与主题和文字对比度一起确定
2白色内容区Page文档像一张稿纸躺在灰桌上，边界若有若无
3emoji 图标Emoji Icon可用于页面装饰和轻量分类；关键功能仍要有稳定、可识别的名称
4灰黑文字Ink用多级文字颜色建立层级，每一级都要在对应背景上保持可读
5细分割线Divider示例用 1px 细线分段；边界强度按内容复杂度调整
6按需操作钮Context Actions鼠标悬停、键盘聚焦时出现，触屏上则提供明确点击入口
AI 提示词 · Prompt
Notion 风文档工具界面，浅灰底白卡片，emoji 图标，灰阶文字层级，1px 细分割线，hover 才出现的操作按钮，Notion style doc UI, light gray canvas with white page, emoji icons, muted gray text hierarchy, hairline dividers, hover-reveal actions典型使用场景
Notion 式文档页
侧边栏工作区
看板数据库视图
团队 Wiki 首页