设计

Notion 风Notion Style

你可能会说

像 Notion 那样，清爽、以文字为主，看着就想写字。

Notion 风是一种以文档阅读和编辑为中心的轻量界面风格它常用浅色画布、简洁图标、细分割线和按需出现的次要操作，适合笔记、知识库和协作工具。隐藏操作不能只在鼠标悬停时出现，还要让键盘和触屏用户找得到。
WorkstreamOwnerStatus
WebsiteLinReady
CampaignUmaIn progress
Press kitSamNot started
设计原则 · Principles
  • 内容即界面：编辑器就是产品本身，去掉一切多余的壳和装饰
  • emoji 可以做轻量页面图标：容易理解且有个性，但不同系统外观会变化，正式功能仍需稳定图标和文字
  • 次要操作按需出现：鼠标悬停、键盘聚焦和触屏点击都要能找到同一入口
  • 以灰阶建立文字层级：标题、正文和注释可以降低强调，但关键信息与状态仍可使用有含义的颜色
  • 细分割线配合留白分区：边界要足够清楚，复杂表格或输入控件可以使用更明确的边框

什么时候用

  • 文档、笔记和知识库，以编辑与阅读为主
    团队手册
  • 团队协作工具，需要统一任务、评论和多人内容
    3 人正在编辑
  • 个人知识库，用侧栏和页面树组织层级
    我的主页 周计划　 目标　 灵感
  • 数据有多种视图，但希望界面保持轻量
    表格看板日历

什么时候不用

  • 营销页只剩灰白骨架，缺少利益点和行动入口
    新品活动页（文档风）营销页通常还需要更明确的品牌与商品表达
  • 电商页面忽略图片、价格、规格和购买信息
    商品详情：白底、细线、小灰字电商页面还需呈现商品特征与购买信息
  • 重要操作只在 hover 时出现，触屏无法发现
    触屏无法依赖稳定悬停
  • 机械限制所有页面只能使用灰、白、黑
    品牌活动页（灰白配色）需要强品牌色时，应补充相应的视觉表达
组成结构 · Anatomy
浅灰底 #F7F7F5 白色内容区 emoji 图标 灰黑文字 #37352F 1px 细分割线 ⠿ ＋ ⋯hover 操作钮
示例使用暖灰画布；具体颜色要与主题和文字对比度一起确定
文档像一张稿纸放在灰桌上，边界很浅
可用于页面装饰和轻量分类；关键功能仍要有稳定、可识别的名称
用多级文字颜色建立层级，每一级都要在对应背景上保持可读
示例用 1px 细线分段；边界强度按内容复杂度调整
鼠标悬停、键盘聚焦时出现，触屏上则提供明确点击入口
AI 提示词 · Prompt

做一个团队项目文档界面，方便成员阅读计划、查看任务并新建内容。用清楚的侧边栏、页面层级和轻量分区组织信息；次要操作可以按需显示，但鼠标、键盘和触屏用户都要能找到。

典型使用场景
Notion 式文档页

左右滑动查看完整示例

产品团队手册
8 位成员 · 更新于 2 小时前
这本手册回答三件事：我们是谁、怎么做决定、去哪儿找资料。
本周重点
✓v2.0 发布复盘
新人入职文档更新
• 设计评审每周三下午
• 需求文档先写「为什么」
侧边栏工作区

左右滑动查看完整示例

狸小狸的工作区 ⌄
搜索
收件箱 3
收藏
新品发布计划
产品团队手册
私人
周计划
↳ 健身打卡
↳ 旅行清单
私房食谱
废纸篓
新品发布计划
⠿ 悬停任意内容块，左侧就会出现操作钮
看板数据库视图

左右滑动查看完整示例

发布任务看板 看板 ⌄
未开始 · 2
发布会演示文稿
设计
媒体邀约名单
运营
进行中 · 2
官网落地页开发
前端
定价方案终稿
产品
已完成 · 1
确定发布日期
✓ 完成
团队 Wiki 首页

左右滑动查看完整示例

小狸的知识库
今天也是井井有条的一天。
最近更新
新品发布计划2 小时前
产品团队手册昨天
私房食谱3 天前
旅行清单上周