文档章节

如何设计空白页面,体验更好!

JellyFlower
 JellyFlower
发布于 2015/07/02 09:35
字数 1277
阅读 182
收藏 6

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

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

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

  • 教育用户

  • 取悦用户

  • 引导用户

1. 教育你的用户

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

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

  • 何物(What):解释这个页面在说什么

  • 何地(Where):告知用户当前的位置,以及接下来可以干什么

  • 何时(When):解释此处空白在什么情况下将出现有效的数据

zm20150701 (2)

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

2. 取悦你的用户

zm20150701 (1)

空白的代码提交页面

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

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

  • 你能让用户感到新鲜或者出乎意料吗?

  • 你能让用户从心底绽开笑容吗?

  • 你能让用户感受到你产品的优秀调性吗?

zm20150701 (3)

空白的收藏夹

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

zm20150701 (4)

空白的内容页面

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

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

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

zm20150701 (5)

空白的任务界面

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

3. 引导用户行动

zm20150701 (2)

空白的项目页面

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

zm20150701 (6)

空白的关注列表页

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

zm20150701 (7)

Airbnb 的空白的历史行程页面

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

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

  • 动机(Motivate):向目标用户展示激励性的语言,例如:『现在就开始!』

  • 劝说(Persuade):利益点不仅要在落地页上展示。当用户与你的产品交互时,也可以反复展示利益点。

  • 直接(Direct):在一开始就向用户展示唯一且最优的路径。提供行动按钮或者给出引导。在用户初次接触 app 时并不适合让他们做选择题。你应该让初次接触的体验尽可能的简单。假如刚开始就需要用户创建一些内容,你应该提供一些模板之类的东西让用户可以借鉴。

增加空白页面的投入吧

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


本文转载自:http://www.uisdc.com/design-empty-data-page

JellyFlower
粉丝 11
博文 27
码字总数 17068
作品 0
长春
私信 提问
“杀死” App 的留白设计!

作者 | Christie Lenneville,用户体验设计总监 译者 | 弯月 责编 | 屠敏 出品 | CSDN(ID:CSDNNews) 以下为译文: 空白代表着宽敞,整洁,极简主义。适量的空白已成为消费者应用程序中的设...

CSDN资讯
03/04
0
0
2014 年十大网页设计趋势和预测

新的一年刚刚开启, Zing 设计团队认为这是一个很好的时间来回顾 2013 年 web 的设计场景,同时也对 2014 的 web 设计趋势做了些分析,总结出了十大网页设计趋势和预测,希望能给大家一些启发...

oschina
2014/01/13
7.9K
21
FireFox实验室提出新标签页理念并发布原始模型

到目前为止,如果我们在火狐浏览器中打开一个新标签页,其默认都是开启一个空白页面。而实际上,在我们打开新标签页时,心中所想的是上下邮箱,或是 上新浪看下新闻,或是其它什么。可以这样...

红薯
2009/03/11
302
0
小程序自定义单页面、全局导航栏

摘要: 小程序开发技巧。 作者:小白 原文:小程序自定义单页面、全局导航栏 Fundebug经授权转载,版权归原作者所有。 需求 产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏...

Fundebug
06/22
0
0
案例研究:手机APP的UI设计流程

以下内容由Mockplus(http://www.mockplus.cn)团队翻译整理,仅供学习交流。 UI设计——不仅仅是创造漂亮的图像。 面临的挑战 我为自己提供了一个绝佳的机会来训练我的视觉设计技巧,并通过...

jongde
2018/01/29
40
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
11分钟前
4
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
14分钟前
3
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
40分钟前
3
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
5
0
前端技术之:webpack热模块替换(HMR)

第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware 第二步:webpack配置中引入webpack对象 const webpack = require('webpack’); 第三步:增加devServer配置项: ho......

popgis
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部