设计

趣味插画Playful Illustration

你可能会说

活泼一点，配上有趣的插画和角色，别太严肃。

趣味插画是一种用角色、场景和夸张图形建立品牌个性的视觉方向它常与鲜明配色、圆润形状和轻量动效搭配，适合教育、创作和年轻消费产品。插画负责表达语气，不能遮挡正文、表单和主要操作。
YOUR IDEAS, IN MOTION

Plan less.
Make more.

A friendly creative board for turning tiny sparks into finished things.

See it in action
设计原则 · Principles
  • 先设计一个可识别的角色语气：颜色、字体、插画和文案表达同一种性格
  • 把夸张留给重点：大标题、成功反馈或关键插画可以跳出来，其余区域安静配合
  • 圆润不等于含糊：按钮、输入和状态仍要有清楚边界与文字
  • 动效表达因果：完成、拖动和升级可以有弹性，但不能拖慢任务

什么时候用

  • 教育、创作者和轻量效率产品：需要降低第一次使用的心理门槛
    ◡
    TODAYThree tiny wins!
    +3
  • 年轻消费和社区品牌：个性与亲近感是重要差异
    ✦Friendly, not childishClear action first
  • 产品拥有吉祥物或插画体系：角色可以贯穿空状态、反馈和引导
    ✦Friendly, not childishClear action first
  • 任务容易让人焦虑：温和语言和积极反馈能减轻压力
    ◡
    TODAYThree tiny wins!
    +3

什么时候不用

  • 过多元素同时跳动、旋转或变色：会持续打断注意力，弱化重要内容
    BOUNCE! POP! WOW!Every element shouts at the same volume
  • 将儿童化等同于友好：面向成年人的产品也应保持内容与语气的尊重
    BOUNCE! POP! WOW!Every element shouts at the same volume
  • 亮色文字缺少对比：鲜艳背景上仍需要稳定可读的文字层
    BOUNCE! POP! WOW!Every element shouts at the same volume
  • 严肃结果只用表情回应：支付、权限和错误仍要准确说明
    BOUNCE! POP! WOW!Every element shouts at the same volume
组成结构 · Anatomy
CharacterColorShapeFeedback
插画、图标和文案共同塑造可识别的品牌人格
少量高饱和颜色各自承担明确角色
友好轮廓与稳定网格配合，避免失去秩序
用有分寸的动效和语言回应完成、进步与错误
AI 提示词 · Prompt

做一个面向成年用户的习惯养成产品首页。用原创插画和轻松的反馈解释每天能完成什么，注册按钮和任务入口要清楚；整体友好有活力，但不要像儿童游戏。

典型使用场景
创作者协作工具

左右滑动查看完整示例

mochiProductStories
CREATIVE BOARD

Make the tiny thing.

A friendly place to move ideas into finished work.

Discover more
在线学习产品

左右滑动查看完整示例

picoProductStories
LEARN BY DOING

One curious step at a time.

Short lessons, useful practice and feedback that feels human.

Discover more
年轻社区首页

左右滑动查看完整示例

patchProductStories
COMMUNITY

Find your kind of people.

Small groups built around making, sharing and helping each other.

Discover more
轻量习惯应用

左右滑动查看完整示例

tiny winsProductStories
DAILY HABITS

Progress can feel light.

Choose one useful habit and celebrate the work, not perfection.

Discover more