F6.06.1empty-state illustration设计

插画适合空状态与情绪表达

别名: 空状态插画 · 情绪插画 · mood illustration

概念解释

空收件箱、零搜索结果、第一次打开还没有内容——这些时刻页面上没有可扫的业务对象,人面对的是一块空白。插画在这里的工作是把空白说成一种状态,并给一点情绪温度:还没有、可以开始、这里以后会有东西。它不是教用户下一步点哪,也不是把列表里的每一行画成场景。适合,指的是这种「无对象可扫」的时刻;有对象可扫的时刻,插画会变成抢注意的第二套内容。

机制

空状态的认知任务很轻:确认「不是坏了,是真的空」,以及愿意留下。大面积空白会被读成加载失败或残页,一段场景画把「空」实体化,让人把这页登记为有意为之。情绪是附带产物:轻松的场景降低「我是不是做错了」的自责,沉一点的场景适合「这里以前有过东西、现在没了」。一旦页面上已经有卡片、数字、行,扫视路径就被业务对象占满,插画没有对应的认知空档,只会再插一条平行叙事。所以插画的适合范围跟着对象密度走:密度为零或接近零时它补位,密度上来它就该退。

边界

  • 出错、无权限、离线不是空,是故障。用轻松插画去暖这些时刻,会把故障说成没事。
  • 工具型、高频重复的专业界面,空也往往只需要一行字;插画的情绪在第三次以后变成噪音。
  • 品牌欢迎页可以比空状态更大胆,那是另一场「第一次见面」,不要把欢迎页的规格搬进每一次零结果。
  • 插画被点当成按钮、或文件太大拖慢空页,是另外两笔失败,不否定它在空页上的位置。

怎么落地

  • 只给「确认是空、需要一点温度」的页面配场景画:首次无内容、筛选后为零、清单被清空。有数据的页面把插画拿掉。
  • 空状态的主句仍由文字承担(为什么空),插画只负责让空白看起来是设计过的。
  • 验证办法:把插画去掉,只留那一行说明。若页面立刻像坏了或像没做完,插画在做它该做的;若信息毫无损失而只是「不够好看」,这页并不需要它。

延伸

  • 同组F6.06.2 插画不承载操作信息 · F6.06.3 插画的加载成本与信息密度不成比例
  • 相邻E6.06 空状态 · F2.07 信息密度
  • 站内检索empty-state illustration · mood illustration · empty state

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F6.06.1