ink-notes
秉承Mike Rohde的速写笔记传统,在纯白色背景上呈现专业的黑色墨水视觉笔记
与速写笔记的对比
ink-notes与sketch-notes属于两种截然不同的风格。请根据需求选择合适的一种:
sketch-notes | ink-notes | |
|---|---|---|
| 背景 | 带纸张纹理的暖米色 #FAF8F0 | 纯白色 #FFFFFF,简洁无纹理 |
| 色彩搭配 | 柔和的暖色调点缀(橙色、芥末黄、鼠尾草绿、浅蓝色) | 以黑色墨水为主 + 少量用于强调语义的色彩点缀 |
| 整体氛围 | 温暖柔和,富有教育性,亲切易接近 | 专业严谨,结构清晰,类似白板演示风格 |
| 最适合的场景 | 友好的教程、新人培训、轻松的解释内容 | “前后对比”分析、技术宣言、框架类比说明 |
如果不确定该选哪种:偏向温暖友好 → 选择sketch-notes;需要严谨专业 → 选择ink-notes。
设计美学
这是一种风格严谨的手绘视觉笔记。以自信的黑色墨水线条绘制,线条略带自然抖动感,文字为手写体,仅使用少量色彩点缀来强化语义表达。整体效果如同资深视觉笔记记录者在白板上的演示——简洁有序,刻意保留手绘质感而非追求装饰性。
背景设置
- 颜色:纯白色(#FFFFFF)
- 纹理:干净无纹理,无色调偏移
色彩方案
| 角色 | 颜色 | 十六进制值 | 用途 |
|---|---|---|---|
| 背景 | 纯白色 | #FFFFFF | 作为整体画布 |
| 主要墨水色 | 几近纯黑 | #1A1A1A | 用于所有线条、文字、图形及箭头 |
| 暖色调点缀色 | 珊瑚红 | #E8655A | 用于表示风险、问题、差距或需要强调的内容 |
| 冷色调点缀色 | 柔绿青色 | #5FA8A8 | 用于表示积极面、解决方案或“改进后”的状态 |
| 中性色调点缀色 | 灰紫色 | #9B8AB5 | 用于中性标签及类别标识 |
| 柔和填充色 | 浅灰色 | #F0F0F0 | 可选,用于打造柔和的区域背景 |
色彩点缀部分在画布中的占比不得超过10%,且仅具有语义表达功能。整体结构仍以黑色墨线为主。
视觉元素
- 所有线条均为黑色墨水绘制,刻意保留轻微的抖动感
- 标题为手写体(加粗、字体较大),正文注释也为手写风格
- 简单的火柴人角色,带有富有表现力的动作姿态(如指针、思考、行走等)
- 角色上方标注其身份标签(例如“技术负责人”“合规官”)
- 思考气泡与对话气泡,边框为手绘风格
- 用于内容分组的圆角矩形框架
- 用于占位、表示“接下来内容”或空状态的长虚线矩形
- 带有小型内联标签的曲线手绘箭头
- 用于分隔对比区域(“改进前”|“改进后”)的垂直或水平分隔线
- 连接两个区域的、“思维转变”风格曲线箭头
- 底部总结语:一行手写体内容,概括核心要点
- 适度使用星号、下划线等符号来强调重点
风格准则
应该这样做
- 保持背景为纯白色,无纹理也无色调偏移
- 让黑色墨水在轮廓、文字及图形中占据主导地位
- 仅使用色彩点缀来强化语义表达
- 所有文字均为手写体,禁止使用电脑生成的字体
- 保持线条的整洁度与自信感(适度抖动即可,避免杂乱)
- 添加底部总结语,概括核心要点
- 通过明显的分隔线将内容划分为清晰的区域
- 使用虚线框来表示未来内容、空状态或占位区域
不应该这样做
- 使用暖米色或带纸张纹理的背景(那是
sketch-notes的风格范畴) - 用大面积彩色块填充区域
- 每张图片中使用超过3种色彩点缀色
- 避免使用完美的几何形状——要保留手绘的自然抖动感
- 不要添加过多的装饰性涂鸦,每个元素都必须有其意义
- 禁止使用渐变、阴影或电脑生成的字体
字体兼容性
| 内容类型 | 适用性 | 备注 |
|---|---|---|
| 对比分析 | ✓✓ | 非常适合用于“前后对比”、“传统与现代对比”等并排展示的场景 |
| 框架展示 | ✓✓ | 适用于操作系统风格的控制中心、分层架构、组织结构图等 |
| 流程图 | ✓✓ | 适合用于展示带有标签的流程步骤、工作流管道等内容 |
| 信息图 | ✓ | 适用于多区域的技术总结、宣言风格的海报 |
| 时间轴 | ✓ | 适用于手绘风格的水平箭头,搭配时代标记与重要里程碑 |
| 场景描绘 | ✗ | 不推荐使用——该风格缺乏足够的场景展示空间 |
最适合的应用场景
产品与工程相关文章、技术宣言、框架介绍、前后对比分析、操作系统级功能对比、团队与组织结构类比、演讲的视觉总结、思想领袖类文章