手绘涂鸦Hand-drawn

核心特征

• 黑色边框使用不对称圆角，像手画的线条
• 纸白底，可叠加笔记本横线
• 荧光笔黄色块高亮关键词
• 标题与数字使用 Caveat 手写字体
• 卡片轻微旋转，打破规整的网格

色板与字体

英文

Caveat（自托管）

中文

系统黑体或手写体：苹方 / 微软雅黑；中文标题可用系统楷体

说明

手写英文可用 Caveat、Patrick Hand 或 Kalam；中文手写字体体积大，真实项目建议做子集并仅用于大标题。

起源与代表作

年代：2010 年代后在插画化品牌与笔记类产品中常见（Excalidraw 2020 年带火手绘白板）

手绘质感的界面很早就用于线框原型：Balsamiq Mockups 在 2008 年前后推出，刻意用草图风格提醒大家别纠结细节。2020 年开源白板 Excalidraw 发布，基于 rough.js 渲染手绘线条，让这种风格进入大量协作与文档产品。如今它也被用在插画化的品牌官网、教育产品与轻松话题的落地页，用来传递亲切与不完美的创作感。

AI 设计提示词 · Prompt

手绘涂鸦（Hand-drawn）风格界面：页面背景纸白 #FFFDF6，可叠加间距 28px、颜色 rgba(80,120,200,0.12) 的笔记本横线。文字铅笔黑 #222222，次要文字 #555555。所有按钮、卡片与输入框使用 2px 黑色边框，圆角写成不对称的多值形式：border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px，使边角看起来像手画。主按钮荧光黄 #FFE066 底、黑字；次按钮白底黑字。标题、Logo 与数字使用 Caveat 700，标题 46px，行高 1.05；正文使用系统黑体 13–14px。关键词用荧光笔效果：background: linear-gradient(transparent 55%, #FFE066 55%)。三张卡片依次旋转 -1.2deg、1deg、-0.6deg，第二张卡片底色便签黄 #FFF4C2。底部用 2px 虚线分隔，图标保持 emoji 或简单线条。所有正文对比度不低于 4.5:1，高亮色块上的文字必须保持纯黑。

A Hand-drawn interface: page background paper white #FFFDF6, optionally overlaid with notebook rules every 28px in rgba(80,120,200,0.12). Text is pencil black #222222, secondary text #555555. All buttons, cards and inputs use a 2px black border with asymmetric corner radii written as border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px so the corners look drawn by hand. The primary button is highlighter yellow #FFE066 with black text; the secondary button is white with black text. Headings, the logo and numbers use Caveat 700, headings at 46px with a line height of 1.05; body text uses a system sans-serif at 13–14px. Keywords get a highlighter effect: background: linear-gradient(transparent 55%, #FFE066 55%). The three cards are rotated -1.2deg, 1deg and -0.6deg, and the second card uses sticky-note yellow #FFF4C2. The bottom area is divided by a 2px dashed line, and icons stay as emoji or simple line drawings. Keep all body contrast at least 4.5:1 and keep text on highlighted blocks pure black.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #fffdf6;
  --ds-text: #222222;
  --ds-muted: #555555;
  --ds-highlight: #ffe066;
  --ds-note: #fff4c2;
  --ds-border: 2px solid #222222;
  --ds-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --ds-tilt: -1.2deg;
}

适合与不适合

和相近风格的区别

• 孟菲斯：手绘涂鸦靠不规则的黑色线条和荧光笔高亮，像随手画的笔记；孟菲斯用几何图案与多色撞色堆出热闹，图形规整、来自 1980 年代。
• 新野兽派：两者都有黑色粗描边。新野兽派是规整的直线、硬投影和高饱和色块；手绘涂鸦的线条歪斜不规则，用纸白底和荧光笔，更像草图。

常见踩坑

• 手写字体只适合大标题与短词，正文改用无衬线字体，否则中文与小字号下可读性很差
• 不对称圆角的数值很大，在窄元素上会被按比例缩小，需要在真实尺寸下检查边角是否仍有手画的参差感
• 卡片旋转会让文字边缘出现锯齿，旋转角度控制在 1.5deg 以内，并避免对包含小号文字的大块区域整体旋转
• 荧光笔高亮的底色必须配纯黑文字；若在高亮上放浅色字，对比度会远低于 4.5:1，也要避免纯靠颜色传达重点

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题