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

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

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

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

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

1. 教育你的用户

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

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

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

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

2. 取悦你的用户

空白的代码提交页面

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

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

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

空白的收藏夹

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

空白的内容页面

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

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

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

空白的任务界面

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

3. 引导用户行动

空白的项目页面

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

空白的关注列表页

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

Airbnb 的空白的历史行程页面

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

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

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

增加空白页面的投入吧

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

时间: 2024-08-05 18:41:52

如何设计空白页面,体验更好!的相关文章

如何优雅的设计APP页面?

页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求.只站在交互.只站在视觉上思考问题,从多个角度看问题,你才会学会成长. 产品设计是一个系统工程,单独拧出来其中一个流程来讲,都是割裂的,但在实际中又必须割裂出来,因为只有割裂出每个流程,把每个流程都想通想透,才能组成完整的产品设计的知识体系.那怎么来权衡整体和局部,系统和部件,也是一门大学问. 一.明确页面设计在整个产品设计中的位置 互联网产品设计的流程大致是:产品定位--需求分析--信息架构设计--流程设计--页面框架

WTF Forms – 使用 CSS 实现用户体验更好的表单

WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 input 的外贸,所以自定义控件可以正确触发文件浏览器,并且定义了点击时的样式,像复选框和单选框还有选中状态的样式. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 超赞!基于 B

HTML5 移动开发(CSS3设计移动页面样式)

1.如何创建CSS样式表 2.CSS3的卓越特性 3.基于设备属性改变样式的媒体查询 4.如何使用属性改变元标签创建更美观移动页面   层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如何编写CSS并用它为移动页面定制样式,其中包括媒体查询为特定设备定制样式表.此外还将了解一些影响移动设备内容显示的元标签 创建好的样式,可通过三种方法附加到样式表里 1.内联到标签中   [建议在测试的时候这么做] 2.内嵌于HTML的开头 3.放在一个独立文档中作为样式表  [推荐的做法]*能够提

Xsolla推出全新工具,让您体验更高效的帐户管理

今年,Xsolla为了满足客户不同需求,提高帐户管理的效率,为每一位合作伙伴制定了新的帐户界面,方便大家浏览以及管理自己的帐户,查看相关讯息.新界面的主要区域由以下几本分组成:界面,支付,项目,工具,分析,公司,用户,服务纪录和文件 .本期开始,Xsolla将为大家一一介绍新帐户的使用和功能. 货币种类增多 Xsolla的新帐户打开之后,您将看见支持4种不同种类货币的数据报告,他们是美金,欧元,卢比和乌克兰货币.相比较旧版本的界面,增加了三种货币支持,方便许多俄罗斯以及CIS国家的用户查阅货币交

如何在自己设计的页面中调用metamask-1

() 下面是cryptokitties这个游戏使用metamask的方法: 如果你没有添加metamask并且打开它,你是进不去这个游戏的,你点击开始游戏,它会一直卡在这里 然后当你打开了metamask之后,这时候无论你连接的是什么网络,这时候应该是探测到了window.web3.currentProvider !== 'undefined'了,然后你就可以进行下一步注册了 上面那样子就注册好了,这个时候你就能够进行登录了 然后点击登录后你就能够看见下面的页面弹出: 就是你想要进入这个页面你需

PDF怎么删除空白页面,你知道用什么方法吗?

PDF文件怎么删除空白页面呢?现在在使用PDF文件的人也是越来越多,但是很多人对于PDF文件并不是很了解,像PDF文件删除空白页面这样的操作更是一窍不通,其实PDF文件删除空白页面的操作还是比较简单的,下面小编就为大家操作一下PDF文件删除空白页面的操作方法.操作软件:迅捷PDF编辑器具体操作方法:1:首先我们将PDF编辑器安装到自己的电脑中,打开软件找到打开更多文件,将需要编辑的PDF文件添加到软件中.2:在软件界面的顶部找到文档,点击文档,在下面的下拉框中找到删除页面,将鼠标移动到删除页面处

UI设计之页面设计的九个要点!

刚入行的UI设计师,会做一些辅助的工作,大多数时间做的都是等待安排,完成工作.主要就是根据主设计师的设计和规范来制作下层页面,而在这个过程中有很多需要注意的地方,今天就和大家一起细数下层页面设计过程中必须要注意的要点.希望今天的UI设计教程能够帮助到大家. 在平时的工作中,会接触到很多"下层页面设计".下层页面设计就是,根据主设计师设计的主页面进行下层页面的制作.对于页面较多的网站,会经常这样分工协作.在拿到首页设计时,首先要对整体仔细确认.如果这一步没有认真做,接下来的页面就会陷入不

【Java EE 学习第70天】【数据采集系统第二天】【Action中User注入】【设计调查页面】【Action中模型赋值问题】【编辑调查】

一.Action中User注入问题 Action中可能会经常用到已经登陆的User对象,如果每次都从Session中拿会显得非常繁琐.可以想一种方法,当Action想要获取User对象的时候直接使用,这种方法还是得需要借助拦截器的力量,直接在登录拦截器中实现即可,但是登陆拦截器怎么知道该Action想要获取User对象呢?这就需要给Action加上一个接口,如果该Action是该接口的实现类,则表示该Action想要获取User对象.接口仿照HttpRequestAware接口的形式,名字为用户

通过Iframe在A网站页面内嵌入空白页面的方式,跨域获取B网站的数据返回给A网站!

以下代码只是为演示该方法具体是如何操作的,实际的意义并不大. 其实这个方法还可以解决很多方面的跨域操作,以下两点为我工作中遇到的情况! 比如A系统中打开B系统页面的时候,获取B系统页面高度,A系统中可以动态设置窗口的高度 还有A系统中打开B系统页面的时候,B系统页面进行一系列操作,操作成功后需关闭A系统窗口,就可以在操作成功后再在B系统中嵌入A系统的blank.html页面,blank.html页面打开的时候,动态关闭A系统的窗口! 下面为大家讲下是如何实现该方法的 1.在A系统下添加名称为bl