Notion 风Notion Style
你可能会说
像 Notion 那样，清爽、以文字为主，看着就想写字。
Notion 风是一种以文档阅读和编辑为中心的轻量界面风格它常用浅色画布、简洁图标、细分割线和按需出现的次要操作，适合笔记、知识库和协作工具。隐藏操作不能只在鼠标悬停时出现，还要让键盘和触屏用户找得到。
左右滑动查看完整示例
Launch plan
Everything the team needs for 12 September.
OverviewTasksNotes
WebsiteLinReady
CampaignUmaIn progress
Press kitSamNot started
设计原则 · Principles
- 内容即界面：编辑器就是产品本身，去掉一切多余的壳和装饰
- emoji 可以做轻量页面图标：容易理解且有个性，但不同系统外观会变化，正式功能仍需稳定图标和文字
- 次要操作按需出现：鼠标悬停、键盘聚焦和触屏点击都要能找到同一入口
- 以灰阶建立文字层级：标题、正文和注释可以降低强调，但关键信息与状态仍可使用有含义的颜色
- 细分割线配合留白分区：边界要足够清楚，复杂表格或输入控件可以使用更明确的边框
什么时候用
- 文档、笔记和知识库，以编辑与阅读为主团队手册
- 团队协作工具，需要统一任务、评论和多人内容3 人正在编辑
- 个人知识库，用侧栏和页面树组织层级我的主页 周计划 目标 灵感
- 数据有多种视图，但希望界面保持轻量表格看板日历
什么时候不用
- 营销页只剩灰白骨架，缺少利益点和行动入口新品活动页（文档风）营销页通常还需要更明确的品牌与商品表达
- 电商页面忽略图片、价格、规格和购买信息商品详情：白底、细线、小灰字电商页面还需呈现商品特征与购买信息
- 重要操作只在 hover 时出现，触屏无法发现触屏无法依赖稳定悬停
- 机械限制所有页面只能使用灰、白、黑品牌活动页（灰白配色）需要强品牌色时，应补充相应的视觉表达
组成结构 · Anatomy
浅灰底 #F7F7F5
白色内容区
emoji 图标
灰黑文字 #37352F
1px 细分割线
⠿ ＋ ⋯hover 操作钮
示例使用暖灰画布；具体颜色要与主题和文字对比度一起确定
文档像一张稿纸放在灰桌上，边界很浅
可用于页面装饰和轻量分类；关键功能仍要有稳定、可识别的名称
用多级文字颜色建立层级，每一级都要在对应背景上保持可读
示例用 1px 细线分段；边界强度按内容复杂度调整
鼠标悬停、键盘聚焦时出现，触屏上则提供明确点击入口
AI 提示词 · Prompt
做一个团队项目文档界面，方便成员阅读计划、查看任务并新建内容。用清楚的侧边栏、页面层级和轻量分区组织信息；次要操作可以按需显示，但鼠标、键盘和触屏用户都要能找到。
典型使用场景
Notion 式文档页
左右滑动查看完整示例
侧边栏工作区
左右滑动查看完整示例
看板数据库视图
左右滑动查看完整示例
团队 Wiki 首页
左右滑动查看完整示例