空白页面应该如何设计

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

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

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


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

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

1.教育你的用户

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

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

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

2. 取悦你的用户

空白的代码提交页面

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

优秀的第一印象不仅仅与可用性有关,它也与产品的调性有关。
问你自己这几个问题:

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

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

空白的内容页面

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

通过空白页面取悦用户,可以做这些:
品牌(On brand):介绍并强化你的品牌元素
亮点(Different):有创意或者展示你的幽默感
共鸣(Relatable):展示你的产品温暖人性的一面

空白的任务界面

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

3. 引导用户行动

空白的项目页面

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

空白的关注列表页

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

Airbnb 的空白的历史行程页面

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

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

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

增加空白页面的投入吧

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


以上译文仅代表原作者观点。
原作者 Dina Chaiffetz
原文 Why empty states deserve more design time
由 设计译言 原创翻译。如需转载请先联系我,并注明出处及本文地址。
如对文章翻译版权有异议,请联系我。
If you have any problem about the translation rights, please contact me.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 关注互联网,关注硅谷堂。想了解更多关于互联网岗位知识的信息,关注微信公众号:硅谷堂(ID:guigutang)或下...
    硅谷堂阅读 498评论 0 3
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • 披着黑色冑甲的军团 将天空压低 山顶被硝烟围困 飞剪挟着黄沙 摧残着疲惫的树枝 纨绔的疯牛,吹着口哨 带着锋利的刀...
    山上人家123阅读 330评论 2 16
  • 具体原理一句两句也说不清楚,网络文章: http://www.cnblogs.com/skywang12345/p...
    鱼仔_1625阅读 197评论 0 0
  • 作为一名摄影初学者,在拿到自己第一台相机的时候,这个世界的一切对你来说都是崭新的,你有太多的画面想要记录,同样的你...
    LikeAKid阅读 275评论 0 2