Hand-drawn / Doodle 手绘涂鸦（Hand-drawn / Doodle）
Hand-drawn UI keeps the evidence of a human hand on the screen: lines wobble a pixel or two off a perfect vector, color blocks look marker-filled with uneven edges, and typography leans toward handwriting or a sans softened by slight rotation. It signals low-fi honesty, playfulness, or a deliberate escape from polished SaaS sameness. The look lives in sketchy wireframes, indie app onboarding, and landing pages that want to feel like a notebook rather than a dashboard.
手绘涂鸦 UI 把「人手的痕迹」留在屏幕上：线条会比完美矢量偏出去 1–2px，色块像马克笔涂过一样边缘不均，字体则偏向手写体，或者把无衬线体微微旋转、软化。它传递低保真、真诚或玩心的信号，是有意逃离 polished SaaS 千篇一律感的选择。这种外观常见于 sketchy 线框图、独立 App 的引导页，以及希望像笔记本而非仪表盘的落地页。
Scope: This entry covers the intentional hand-drawn / doodle visual treatment of finished UI surfaces. It is not about early-stage paper sketches or bad drawing; it is a rendered style that imitates markers, pencils, and rough ink. Sketchy wireframes (e.g. Balsamiq's default output) are a close sibling but are usually production artifacts for communication rather than shipped interface skin.
范围：本条覆盖成品 UI 界面上有意为之的手绘 / 涂鸦视觉处理。它不是早期纸面草图，也不是画得不好；而是一种模仿马克笔、铅笔和粗墨线的渲染风格。Sketchy 线框图（如 Balsamiq 的默认输出）是近亲，但通常只是沟通用的产物，而非正式上线的界面皮肤。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Wobbly, imperfect strokes歪歪扭扭的不完美线条 geometry defining定义特征
Borders and dividers visibly waver 1–3px away from a straight vector path; corners are rounded but slightly lopsided, and line endpoints often miss by a hair.
边框和分隔线明显偏离直线路径 1–3px；圆角虽然存在但微微歪斜，线段端点常常差一点没接上。
-
Marker or pencil texture马克笔或铅笔纹理 surface defining定义特征
Surfaces carry paper grain, marker bleed, or pencil hatching; flat fills have subtle opacity variation that reads as real ink rather than a digital solid.
表面带有纸张纤维、马克笔晕染或铅笔排线感；平涂色块有细微不透明度变化，读起来像真实墨水，而非数字纯色。
-
Organic, hand-filled color blocks有机的手涂色块 color defining定义特征
Color areas are lumpy and slightly misaligned with their outlines, as if filled with a broad marker that overshot the line in places.
色块凹凸不平，轮廓线略微错位，像用粗马克笔涂出去时超出了线。
-
Loose, handwriting-flavored type松散、带手写味的字体 typography defining定义特征
Text uses a handwriting or soft marker-style typeface, or a sans manually skewed and jittered so letters sit on a near-but-not-quite straight baseline.
文字使用手写体或软马克笔风格字体，也可以把无衬线体手动倾斜、抖动，让字母落在「差不多齐」的基线上。
-
Imperfect, collage-like alignment不完美、拼贴式对齐 layout supporting辅助特征
Elements sit a few pixels off a strict grid; small boxes tilt ±1–2deg, creating the casual feel of items taped to a sketchbook page.
元素偏离严格网格几个像素；小方块倾斜 ±1–2deg，像随手贴在速写本页面上的物件。
-
Warm marker palette暖调马克笔配色 color variable可变特征
Classically a paper-white or cream ground plus 2–4 marker colors such as #F15A4A red, #FBB03B yellow, #39B54A green, and #29ABE2 blue; black ink at #2B2B2B.
经典组合是纸白或米色底加 2–4 支马克笔颜色：红 #F15A4A、黄 #FBB03B、绿 #39B54A、蓝 #29ABE2；墨线用 #2B2B2B。
-
Decorative doodles装饰性涂鸦 imagery supporting辅助特征
Stars, arrows, underlines, and scribbles embellish labels and buttons like marginalia in a notebook.
星星、箭头、下划线、乱线等点缀像笔记本页边的批注一样装饰标签和按钮。
-
Vector precision矢量精确 geometry avoid避免
Crisp 1px anti-aliased lines, perfect Bézier curves, and exact alignment remove the human trace — that is the doorway to flat design or Line Art.
锐利的 1px 抗锯齿线、完美 Bézier 曲线和精确对齐会抹掉人的痕迹——那是通向扁平设计或 Line Art 的入口。
Often confused with: Line Art最容易混淆：线稿 / 单线风格（Line Art / Monoline）
Hand-drawn / Doodle手绘涂鸦（Hand-drawn / Doodle）
Line Art线稿 / 单线风格（Line Art / Monoline）
This is hand-drawn because the strokes visibly wobble, fills are organic and uneven, and the whole surface carries human imperfection — any line-like elements are rough, weighted, and often broken.
这是手绘涂鸦，因为笔触明显抖动，填充有机而不均，整个表面都带着人的不完美——任何类似线稿的元素都是粗糙、有粗细、常常断开的。
It would become Line Art if every stroke were cleaned into a precise single-weight contour with no fill, no texture, and no wobble.
如果每一根线条都被清理成精确的单粗细轮廓，没有填充、没有纹理、没有抖动，就变成 Line Art 了。
In code — optional starting points代码写法 —— 可选起点
Wobbly border using an SVG roughness filter
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="rough"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="noise"/><feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" /></filter></svg>#rough'); stroke:#2B2B2B; stroke-width:2.5px; fill:none;Marker-filled button: uneven fill + soft offset
background:#FBB03B; color:#2B2B2B; border:2.5px solid #2B2B2B; border-radius:10px 12px 9px 13px; box-shadow:2px 3px 0 rgba(0,0,0,.08); transform:rotate(-0.8deg);Handwriting type pairing
font-family: 'Caveat', 'Patrick Hand', cursive; letter-spacing:.02em; line-height:1.45;Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using a Hand-drawn / Doodle style. Defining signals: wobbly strokes that visibly waver 1–3px off a perfect path; marker or pencil texture with paper grain and subtle opacity variation; organic color blocks that overshoot their outlines like real marker fills; loose handwriting-flavored typography. Use a warm off-white paper ground such as #f7f4ed with marker accents #F15A4A, #FBB03B, #39B54A, #29ABE2, and black ink #2B2B2B. Borders should be 2–3px solid #2B2B2B with intentionally uneven radii (e.g. border-radius: 10px 12px 9px 13px). Add texture through an SVG feTurbulence displacement filter on strokes or a subtle noise overlay. Buttons and cards can tilt ±0.8–1.5deg and carry a soft offset shadow: box-shadow: 2px 3px 0 rgba(0,0,0,.08). Use a handwriting typeface such as Caveat or Patrick Hand for headings, but keep body text in a clean sans (system-ui) at 15–16px to preserve readability. Do not drift into Line Art; the decisive difference is that hand-drawn keeps fills, texture, and wobble, while Line Art is a precise contour with no fill. Preserve 4.5:1 text contrast even over textured fills, visible focus states independent of the doodle border, and reduced-motion support.
用手绘涂鸦（Hand-drawn / Doodle）风格创建界面。决定性信号：线条明显抖动、偏离完美路径 1–3px；马克笔或铅笔纹理，带纸张纤维和细微不透明度变化；有机色块像真实马克笔一样超出轮廓线；松散、带手写味的字体。底色用暖调纸白如 #f7f4ed，点缀色用 #F15A4A、#FBB03B、#39B54A、#29ABE2，墨线 #2B2B2B。边框用 2–3px 实线 #2B2B2B，圆角故意不均匀（如 border-radius: 10px 12px 9px 13px）。通过 SVG feTurbulence 位移滤镜或轻微噪点叠加给线条加纹理。按钮和卡片可倾斜 ±0.8–1.5deg，并带柔和偏移阴影：box-shadow: 2px 3px 0 rgba(0,0,0,.08)。标题用手写体如 Caveat 或 Patrick Hand，正文保持 15–16px 的干净无衬线（system-ui）以保证可读性。不要滑向 Line Art；决定性区别在于手绘涂鸦保留填充、纹理和抖动，而 Line Art 是精确无填充的轮廓。确保纹理色块上的文字对比度仍达 4.5:1，焦点指示器可见且与装饰性涂鸦边框区分开，并支持 reduced-motion。
Accessibility & misuse可访问性与误用
Handwriting fonts and wobbly strokes reduce legibility for some readers; reserve the loose type for headings and short labels, and keep body copy in a clean sans at 15–16px.
手写体和抖动线条对部分读者可读性更低；把松散字体留给标题和短标签，正文用 15–16px 的干净无衬线体。
Textured fills and marker colors can drop contrast unexpectedly; verify 4.5:1 against the lightest and darkest regions of each textured block, and never rely on roughness alone to indicate state — pair it with color, icon, or label changes.
纹理填充和马克笔颜色可能意外降低对比度；要在每块纹理的最浅区和最深区都验证 4.5:1，且永远不要把粗糙感当作唯一的状态指示器——要配合颜色、图标或标签变化。
Imperfect alignment must not break logical reading order or touch targets; keep buttons large enough (at least 44×44px) and maintain a visible, non-decorative focus indicator.
不完美对齐不能破坏阅读顺序或触控目标；按钮至少 44×44px，并保留一个可见的、非装饰性的焦点指示器。
Origin起源
The aesthetic is rooted in design-process artifacts: Balsamiq Mockups, launched by Giacomo 'Peldi' Giacobazzi in 2008, popularized the sketchy wireframe look as a deliberate low-fidelity communication tool. In the 2010s the sensibility migrated into production UI in playful indie apps and landing pages, and tools like Excalidraw (late 2010s onward) made hand-drawn diagrams a mainstream open-source convention. As a named visual style for shipped interfaces it remains more of a recurring trend than a single coined movement.
这种审美根植于设计过程的产物：Giacomo 'Peldi' Giacobazzi 2008 年推出的 Balsamiq Mockups 把 sketchy 线框图外观普及成一种刻意的低保真沟通工具。2010 年代，这种气质进入独立 App 和活泼落地页的正式界面；Excalidraw 等工具（2010 年代末起）则让手绘风图表成为主流开源约定。作为已上线界面的命名视觉风格，它更像周期性回潮，而非单一被命名的运动。