移动应用的三种空状态界面设计
来源:互联网 发布:郑州必信网络 编辑:程序博客网 时间:2024/06/10 06:03
Buffer
Timehop
Dropbox(真的很暖心的赶脚,我喜欢 – 译者C7210)
2.用户清空数据
想想邮件或信息的收件箱,多数时候是满的叭,里面有几百封未读邮件也不奇怪。不过不同类型的用户有着不同的需求和用法,有些人确实会阅读其中的大部分内容。
不管你是哪类用户,其实我们在心里或多或少都会有将“待处理对象”归零的欲望(回想一下你看到App Store图标右上角的待更新应用数量图标时的赶脚)。从这个角度讲,将待处理信息进行归零其实是一种没有太多实际意义但却很容易花费时间精力进行操作的任务,有时人们做这件事只是出于那一点点强迫症。这种时候,不妨给他们一点正面的情绪回馈,在空状态界面中给这些用户一点小小的“回报”。
下面我们来看看Sparrow、Gmail以及iOS原生的邮件客户端在这方面的做法。
当邮件被清空之后,Sparrow会在界面中展示一个传统“收件箱”的图标,下面的标题是“零邮件”,形象、干净、简单,多少可以让人产生一点没有多大实际意义的成就感。
Gmail则在这种最基本的做法之上又进了一步,他们的设计师在空收件箱页面中放了一个微笑着的太阳,通过对人类情绪的模仿,为产品赋予了人格,使用户从情感上感受到愉悦。
而且他们在文案的处理上也很贴心:“你当前没有邮件要处理了,开心的享受这一天叭!”
在这里强烈推荐阅读“为产品赋予人格 – 情感化设计的组成要素及实践案例”一文。
而相比之下,iOS自带的邮件应用就缺乏这方面的积极回馈了,用户在这个空状态界面中很容易产生疑虑:我是否已经真的清空了收件箱,还是我的网络连接有问题?或是别的什么状况导致我看不到收件箱里的其他邮件?任何一点疑虑都会导致认知上的负担,进而影响产品的整体体验。
3.出错
“出错”多数是由网络连接的中断引起的。可以试着在这种情况下提供一些更有用的或是更具亲和力的内容,而不是一堆丑陋的出错信息。让用户在非常规用例中看到你的设计,他们就会感知到当前的状况是在可预计范围之内的,从而放松下来。
接下来我们对比一下Chrome、Opera Mini和Safari这三款浏览器在这方面的表现叭。
Chrome提供了大量的、似乎只有技术人员才看得懂的出错信息;普通用户甚至不会有兴趣花时间在移动设备上阅读这样的内容。
Opera Mini只提供了一个模态对话框一样的控件,整个风格看上去非常生硬,不过文案相对简单易懂了些。
而Safari的处理方式则漂亮了很多,它通过简单直白的语言向用户解释了当前的状况,整个界面的视觉风格似乎是有意在柔化“出错”所带来的负面效应。
当发生网络连接问题时,人们很容易产生非常消极的感受,这种情况下,最不该做的就是通过大段晦涩的文字以及生硬的视觉风格来加剧用户的焦虑感。
当然,出错的情况不止会发生在浏览器当中。再次以Gmail的iPhone客户端为例,他们同样使用了情感化的元素来呈现出错信息——一个看上去不那么开心的小云朵——似乎应用自身也很理解用户当前的感受。
相比之下,Instagram和Youtube的反馈方式在态度上略显消极。
总结
其实,无论你的产品是否需要网络连接,或者它根本就不是iOS应用,这当中的一些基本道理都是相通的:留意那些用户无法获取任何内容的状态,给用户某种形式的反馈。我们进一步将本文内容抽象为三条简单的设计原则:
没有数据时,引导用户创建内容。
思考目标用户在使用产品时的心理与目标。他们是否会频繁的清空数据?如果是的话,进行相应的设计;你甚至可以准备一些不同的空状态内容来随机展示。
发生错误时,不要让用户进一步焦虑。通过你的设计弱化用户心中的负面感受,降低他们对坏状况的感知。
- 移动应用的三种空状态界面设计
- 移动应用的空状态界面设计
- 移动应用的空状态界面设计
- 移动应用界面设计的尺寸规范
- 具有引导性的移动应用界面设计模式
- 具有引导性的移动应用界面设计模式
- 具有引导性的移动应用界面设计模式
- 具有引导性的移动应用界面设计模式
- 移动应用界面设计的尺寸设置及规范
- 移动应用界面设计的尺寸设置及规范
- 移动应用界面设计的尺寸设置及规范
- 【总结】移动应用界面设计的尺寸设置及规范
- 移动应用界面设计的尺寸设置及规范
- 移动应用界面设计的尺寸设置及规范
- 移动界面设计的一些心得
- 移动界面设计的一些心得
- 移动设备的界面设计尺寸
- 全新的移动界面设计素材
- 创业
- 快速修改程序支持iphone5
- 2012年华为净利润超爱立信3倍
- 第七章 图
- Ubuntu 文本文件和Windows文本文件的转化
- 移动应用的三种空状态界面设计
- java程序员菜鸟进阶(六)《HTTP权威指南》之HTTP相关概念详解
- KNN及相似性搜索的参考资料
- Qt 中如何实现对图片设置透明色显示 .
- PHP 获取 主机地址 和脚本文件的绝对路径
- Excuses, Excuses! UVa409 字符串
- 使用迭代器寻找和删除 string 对象中所有的大写字符。
- 如何创建 PowerPoint 的 MFC 自动化客户端
- Qt之动态语言切换