App中的空白页面应该如何设计Why empty states deserve more design time

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看129 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 129|回复: 1
收起左侧

App中的空白页面应该如何设计Why empty states deserve more design time

[复制链接]
rightnow 发表于 2016-10-2 05:02:32 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

在我经历的设计项目中,所有的项目成员都会要求设计师优先制作所谓的「典型页面」,常见的就是产品的首页和详情页。

而空白页面,或者说缺省数据页面(例如没有任何联系人的通讯录和没有任何聊天记录的微信),通常都是在设计过程的最后阶段才作考虑。有些时候,甚至会被遗忘。直到某个开发同学提出来,『这个页面,如果没有数据的时候,该显示什么鬼东西啊?』

今天翻译的这篇文章,作者从用户首次接触产品,还没有内容/数据/好友的情况入手,分析并总结了一些空白页面设计的思路,应该能给各位产品设计者带来灵感。下面进入译文。

用户「首次使用」你的产品时会遇到空白状态的页面,这也是用户由浅入深接触你的产品的必经之路。在这个过程中,一个优秀的空白页面应该达成三个目标:

  • 教育用户
  • 取悦用户
  • 引导用户





1、教育你的用户

App中的空白页面应该如何设计? Why empty states deserve more design time 1

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 1

空白的回收站页面——回收站里的东西将在60天后被删除

一个优秀的空白页面应该解决如下问题:

  • 何物(What):解释这个页面在说什么
  • 何地(Where):告知用户当前的位置,以及接下来可以干什么
  • 何时(When):解释此处空白在什么情况下将出现有效的数据


App中的空白页面应该如何设计? Why empty states deserve more design time 2

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 2

空白的共享链接页面——你分享的东西会出现在这里




2、取悦你的用户

App中的空白页面应该如何设计? Why empty states deserve more design time 3

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 3

空白的代码提交页面

译注:这是 Bitbucket 的代码提交记录页面,当它为空时,网站的拟人化形象——一个小桶子用幽怨的口气说道,『我这里没有任何提交记录,这让我显得毫无用处。我感到很难过。』(解决这个问题)

优秀的第一印象不仅仅与可用性有关,它也与产品的调性有关。

问你自己这几个问题:

  • 你能让用户感到新鲜或者出乎意料吗?
  • 你能让用户从心底绽开笑容吗?
  • 你能让用户感受到你产品的优秀调性吗?


App中的空白页面应该如何设计? Why empty states deserve more design time 4

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 4

空白的收藏夹

译注:一个仙人掌杵在那里,说道,『这儿看起来像是沙漠!你没有任何收藏的东西 』接下还有一个引导用户去收藏的行动按钮。

App中的空白页面应该如何设计? Why empty states deserve more design time 5

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 5

空白的内容页面

译注:一个略显苦逼的熊猫脸,说道,『我们在周围啥也没找到看起来你周围没有什么特别的事情发生。你可以过一阵子再试试这个功能。』

通过空白页面取悦用户,可以做这些:

  • 品牌(On brand):介绍并强化你的品牌元素
  • 亮点(Different):有创意或者展示你的幽默感
  • 共鸣(Relatable):展示你的产品温暖人性的一面


App中的空白页面应该如何设计? Why empty states deserve more design time 6

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 6

空白的任务界面

译注:看起来像是一个游戏的任务列表页面。一个潜水员在一条鲨鱼旁边,说道,『你还没有准备好,指挥官。回去再训练一下吧。』




3、引导用户行动

App中的空白页面应该如何设计? Why empty states deserve more design time 7

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 7

空白的项目页面

译注:一个小人若有所思的看着右上角,念道,『唔……那个蓝色的按钮肯定很重要』。

App中的空白页面应该如何设计? Why empty states deserve more design time 8

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 8

空白的关注列表页

译注:『你还没有关注任何人。关注其他人可以查看他们收集的故事。你关注得越多,Flipboard 提供的服务就更好!』接下来就是一个引导用户去关注其他人的行动按钮。

App中的空白页面应该如何设计? Why empty states deserve more design time 9

App中的空白页面应该如何设计Why empty states deserve more design time - 敏捷大拇指 - App中的空白页面应该如何设计? Why empty states deserve more design time 9

Airbnb 的空白的历史行程页面

译注:『当你结束一次旅行,你会在这看到它。』接下来就是一个引导用户去探索的行动按钮。

在空白页面上引导用户的下一步行动,需要包含这三点:

  • 动机(Motivate):向目标用户展示激励性的语言,例如:『现在就开始!』
  • 劝说(Persuade):利益点不仅要在落地页上展示。当用户与你的产品交互时,也可以反复展示利益点。
  • 直接(Direct):在一开始就向用户展示唯一且最优的路径。提供行动按钮或者给出引导。在用户初次接触 app 时并不适合让他们做选择题。你应该让初次接触的体验尽可能的简单。假如刚开始就需要用户创建一些内容,你应该提供一些模板之类的东西让用户可以借鉴。






增加空白页面的投入吧

最棒的设计通常也是最具有挑战性的——它要求在信息呈现与操作上达成精巧的平衡。但是,一个空白状态的页面就可能阻断你的用户进一步探索你所设计的精妙界面。这些空白页面难道不值得你投入更多的时间和关注吗?




作者:Dina Chaiffetz
原文: Why empty states deserve more design time
译者:@设计译言

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 推送上首页了~分享到朋友圈微博QQ空间吧~.

查看全部评分

昏戏湿 发表于 2016-10-8 22:33:42 | 显示全部楼层
引导、引导、引导!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表