恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
浅谈界面的空白状态设计(Empty State Design)
0.0°
2014-07-11 原创文章 经验/观点 原作者: 原作者 举报 44154 181 75 4

什么是空白状态(Empty State)?

空白状态只的是应用程式在“没有资料”、“空列表”、或“错误”所呈现的一个画面,空白状态会透过一些图示或文字告诉使用者怎么回事,最后引导使用者操作相关的功能。良好的应用程式会花很多心思空白状态上,引导使用者添加内容到应用上,增强使用者的黏着度

空白状态的几种形态

1.第一次使用
使用者第一次打开你的应用程式,他们对你的应用还不是很瞭解,你应该好好利用空白状态来向他们说明你的功能,透过空白状态引导他们操作。

2.使用者主动清除内容
空白状态可能是由使用者所触发,例如使用者删除了内容,或者使用者触发了一些事件(全部标示为)。这个情况很有可能是值得贺喜的,不妨在此时展现你的幽默或者鼓励使用者。

3.发生错误
空白状态发生的原因有可能是发生了错误,比较常见的状态是“404找不到网页”、“网路连线中断”,请在这个状态下让使用者能够重试并引导使用者解决所发生的问题

空白状态的任务

空白状态扮演者很重要的角色,几乎所有的内容应用都会走过这条路。其主要任务是“引导使用者顺利建立内容”,空白状态必须使用简明扼要的文字、清楚的标示告诉使用者这里会将会放置什么样的内容,并且简单告诉使用者建立内容的好处,引导、带领使用者建立内容。花点心思在这里,不要让空白状态成为使用者最后看到的状态!

  1. 告诉使用者什么样的资料会出现在这里
  2. 引导使用者如何建立内容
  3. 告诉使用者为什么要建立资料

好的空状态设计常常是

好的空状态设计会让使用者感受到,它本来就应该在那里,它不会挡住使用者的道路,而是引导使用者走在思维的路径上。

  1. 让使用者感受不到它的存在
  2. 像是导航的方式完成任务而非教导
  3. 一目瞭然

设计空白状态的要点

  1. 告诉使用者如何输入资料、包含手势操作、和内容功能
  2. 最好在一个画面就可以呈现完毕,别把满版的说明书搬出来
  3. 如果需要多个步骤才能完成,请清楚的告诉使用者有多少步骤
  4. 必须让使用者一眼就看出要做什么
  5. 如果空的状态是好的,可以在清空状态时显示些有趣的图案
  6. 空白状态只会出现在空白的情况,请确保从引导中学习到的与非空白的情况下操作经验一致
  7. 如果新增内容的方式较为复杂,请使用影片或动画取代文字

空状态设计与对话框设计有一些方面颇为相似,可以参考我写的另一篇浅谈对话框设计

空白状态与社群绑定

现在有非常多的服务都会和社群服务绑定,社群服务绑订有许多的优点,除了简化登入的麻烦、与朋友互动外,它也是一个填补空白状态的好方法。如果你正在设计一款音乐软体,社群绑定能够让你在播放清单上看到你的好朋友最近在听什么歌曲,收藏什么专辑。

良好设计的范例

你也可以在Pinterest找到很多的范例
http://www.pinterest.com/search/pins/?q=empty%20state

参考资料
http://ui-patterns.com/patterns/blankslate
http://tympanus.net/codrops/2013/01/09/designing-for-the-empty-states/
http://dclick.fourdesire.com/2013/03/15/blank-slate

更新:2014-07-11

收藏

181人已收藏

奧革士

奥革设计创办人,也是一位产品设计顾问

  • 8

    作品

  • 369

    粉丝

  • 94

    关注

  • 让 Eagle 帮你更有效的整理圖片素材與靈感
  • 让 Eagle 帮你更优雅管理图片素材
  • 那些界面动画设计需要瞭解的事情
  • 浅谈对话框设计

    猜你喜欢

      2014-07-11 原创文章 经验/观点 原作者: 原作者 举报 44154 181 75 4

      浅谈界面的空白状态设计(Empty State Design)

      0.0°

      你确定要举报浅谈界面的空白状态设计(Empty State Design)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年07月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      75
      181
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录