# 手绘涂鸦（Hand-drawn Doodle UI）

镜语 · 版式与界面 / 材质与质感

- 别名：手绘风网页、涂鸦风、笔记本风、Sketchy UI、Doodle Style
- 口语：「像在本子上画出来的网页」「边框歪歪扭扭手画的」「有箭头和圈圈的可爱主页」
- 一句话：歪歪扭扭的手画边框、横线本背景、箭头和圈画，像在笔记本上画的
- 是什么：手绘涂鸦风让界面看起来像画在笔记本上：边框是歪歪扭扭的手画线，背景是横线本，标题下面有一道马克笔下划线，旁边画着箭头、星星和圈圈，照片用胶带贴着。Rough.js 等开源库专门用来生成这种「草图感」图形
- 缺了就不像：手画的歪边框；笔记本背景；手写字
- 加了更像：箭头和圈画；胶带贴照片；马克笔下划线；略微倾斜
- 适合用在：插画师、学生、教育类和手作品牌的主页；视频里的知识讲解、手账风包装；原型和草图阶段的展示，提示「这还是草稿」
- 看哪里：看卡片边框：四个角的弧度都不一样，像手画的。点照片会翻到背面看手写备注；点「关注」后，粉丝数周围会被一笔圈起来。字体是手写感的字
- 注意：手写字体用于大段正文会难读，正文可用普通字体；每个元素都歪、都加涂鸦，会显得凌乱
- 描述示例：做一个手绘涂鸦风格（Hand-drawn Doodle）的个人主页：米白色横线本背景，左侧一条红色页边线；所有卡片和按钮的边框是 2px 黑色手画线，用不规则圆角模拟歪扭；标题用手写感字体，下面一道橙色马克笔波浪下划线；头像旁画一个弯曲的箭头；作品照片像拍立得一样贴在本子上，顶部有黄色半透明胶带，每张略微倾斜，点击翻面显示手写备注；按钮填浅粉色，关注后用一笔手画椭圆圈住粉丝数
- 易混：
  - [拼贴剪报](https://idea.ameng.dev/terms/collage-zine.md)：拼贴剪报用剪下来的现成材料；手绘涂鸦靠自己画的线
  - [黏土拟态](https://idea.ameng.dev/terms/claymorphism.md)：黏土拟态也很可爱，但是圆润立体；手绘涂鸦是平面的线条
- 相关：[马克笔手绘](https://idea.ameng.dev/terms/marker-sketch.md)、[圈出重点](https://idea.ameng.dev/terms/circle-annotation.md)

## 来源与延伸阅读

- [Wikipedia · Doodle](https://en.wikipedia.org/wiki/Doodle)
- [Rough.js · 手绘草图风格图形库](https://roughjs.com/)

网页版（含演示）：https://idea.ameng.dev/terms/doodle-ui