空页面设计二三事

很多年以前的404页面,大概都是“无法连接到网络”这类空洞的提示配在毫无设计感的页面上,这几年注意观察就会发现,404页面被用来做很多内容,不论是花哨的设计,还有每次出现一个寻找失踪儿童这样有意义的内容,都让我们在网络出错时的沮丧消散了一些。

和web设计一样,移动端的空白页面也越来越受到大家的重视,不单单是视觉层面的问题,空页面开始承载着更多内容,起到更多的功效。

空页面主要会在三种情况下出现:初次使用、完成或清空内容、出错。好的空状态页面要告诉用户:此处应该是什么内容,为什么没有内容,如何获得内容


初次使用:

初次使用时的空页面是三种情况下最特殊的一种,设计的好坏直接关系着用户的第一印象,是否会继续使用;同时由于是初次使用,用户下载也许也注册了账号,知道app大概是做什么的,但是并不一定知道如何使用,此时的空页面还承载着用户引导的重担。

第一种:起引导作用的空白页


第二种:提示性说明文字+操作按钮引导

第三种:直接举出范例,让用户更快速的了解信息内容


在用户首次体验的空页面时,可以尝试加入更多的创意和个性化元素,让用户迅速的了解产品格调和特点,给用户非常良好的初体验。


完成或清空内容:

用户主动触发清空内容的操作,实际表明用户知道自己在做什么,误操作的可能性不高。这时候只需要给予用户结果的反馈就可以。但是有时清空内容并没有太多实际意义,却花费时间和精力,因此我们更倾向于给用户一些正面的反馈。同时需要思考用户在使用时的心理和目标,用户是否需要频繁的清空数据,如果是的话,可以考虑给出多种空状态页面,随机出现增强趣味性。

以清空邮箱举例:

苹果默认的邮箱设计,只简单提示“没有邮件”,虽然很简约,但是和其他预装应用的设计相比未免有些缺少设计感。


Zoho Mail设计,简单的图标+文字



Inbox设计在我举的三个例子中是最有设计感的,不同的文件夹清空后配有不同的设计色,同时简单说明每个文件夹的具体功效,告诉用户这里应该是什么内容。


用户完成内容,我们以todo类应用举例。因为用户主动完成了自己规范的所有内容,此时除了明确表示已完成的意义外,大多数应用给用户以鼓励,激励用户的行为。

先看我最喜欢的todo类应用,Any.Do,当我完成首次完成任务时,不仅提示我成功,而且不忘做广告让我购买服务(当然了这只算是个完成提醒,并不是空页面)。


swipes,在用户完成任务后,页面变为恭喜页面,并有文字提示用户下一次任务的时间


老牌的日程管理软件wunderlist并未强化提示功能,只有非常小的提示消息,显示完成任务的数量。


进行完成、清空内容操作的用户,已经对我们app有了一定的了解,此时的空页面除了说明文字外,额外的增加趣味性会赢得更多的用户好感。


出错页面:

在已经出错的页面,原则上注意不要再进一步让用户焦虑,简单易懂的说明当前的情况,如果有更多的空间,可以拓展更多的信息,当用户在出错时给用户其他的操作选择。




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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,870评论 25 707
  • 下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设...
    arlene112阅读 2,291评论 0 16
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 人,就是矫情,那伪文艺的骨子里丧失的是已经不仅仅是尊严。 当泡沫遇上烟花 那双双的瞬间精华之美 在刹那间消逝 美好...
    郑重承诺阅读 287评论 0 1
  • -夏雨 时间会冲淡一切,也会加剧一切,比如:恨。 自从7岁那年,我因为某些原因留级与他同班以来,他就渐渐开始抢我的...
    365读书计划阅读 488评论 0 4