特殊情况下的APP设计—20170801早读课

  • A+
所属分类:产品设计

特殊情况下的APP设计—20170801早读课

小早说:6个要素做好APP设计。

91助手创始人熊俊先生说过,互联网公司最大的浪费是做出了一款没有人用的产品。一款互联网产品,之所以被设计和开发出来,都是为了满足人们的需求。我们这帮互联网原住民,能用去哪儿买机票,airbnb租房,京东购买生活所需,用饿了么点外卖,还能用得到APP来进行碎片化时间的学习。这些产品都或多或少的满足了我们的需求,让生活更便捷更美好。

所以作为产品的设计人员,每天都在考虑用户需要什么,怎么样的产品功能能解决用户的需求,这个点很重要。但是我们也都知道,仅仅做到这点也是不够的,因为用户在使用产品时不止会遇到正常的流程。还会遇到没网、没内容、服务器异常、内容加载失败、token失效、加载时间过长等等一系列的问题。这些只占产品20%的特殊情况,一旦处理不当,就会降低用户体验,从而影响到公司利益。这也是我决定要写《特殊情况下的APP设计》系列文章的原因,想站在交互设计师的立场,以用户体验为设计为理念,来试图系统性的解决这些问题。

首先我们来解决为什么在产品设计阶段,考虑特殊情况下的APP设计这件事很重要。

1.这件事为什么重要?

曾经使用某个银行类APP,当点击某个button,按理说页面应该会跳转至另一个页面,但是出现在手机里的是一个空白页面,上面有个加载的小菊花。这是加载过程,只不过设计的形式让人觉得简单粗暴了点,不会有太大的问题,但是接下来的几分钟内,页面一直停留在这。而且也找不到任何取消或退出当前操作的入口,只能含恨强制退出,然后重新进入。

这是银行APP,线上做得不好,可以去线下营业厅办理业务。但是如果这是一个社交软件,或者一款UGC的APP,很多用户会毫不犹豫的卸载它,因为替代的产品太多了,看看如今的共享单车就知道了。不考虑特殊情况下的APP设计的产品,会损失目标用户。不仅如此,还会让用户在网上或线下讨论你的产品,降低了品牌和产品的用户口碑,最后直接影响公司利益。

总结一下,特殊情况下的APP设计的不好会影响用户体验,而差的用户体验会让产品损失用户;形成差的口碑,增加营销成本;最后直接影响到公司利益。你说,特殊情况下的APP设计,重不重要。

2.为什么会出现这么多的特殊情况?

完美的产品应该是没有任何异常情况,用户能够顺利的找到自己想要的信息或者功能。但是现实生活中不存在完美,互联网产品也是。设备性能不足,网速有限,网络环境多变,程序bug、token失效、服务器异常等等,都会导致产品出现特殊或异常情况。

3.存在哪些特殊情况?

只要不是用户完成自己任务需要进行的页面操作,我都把它归为特殊情况下。具体包含以下页面内容:

APP启动页面的设计

注册登录页面的设计

空页面(缺省状态)的设计

加载loading的设计

未登录状态下的设计

加载失败的设计

 

①:如何设计启动页面?

 

心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒。所以初次见面所展示的形象真的很重要。同理,用户在使用APP时,每次启动呈现在用户面前的界面重要程度不言而喻,而这个界面就是大家熟知的启动页。

1.启动页是什么?

在iOS的规范中,启动页的英文叫Launch Screen,指的是启动APP时呈现的第一个界面。其实这种描述不够严谨,从启动APP到APP首页的出现之前的页面,都可以称为启动页(新手引导页除外:用户第一次使用APP,有可能还会出现新手引导页)。引导页也是一个重要的话题,我们先按下不表,以后再聊。

由于APP启动的过程很短,从几百毫秒到几秒不等,所以启动页也被称为闪屏。

2.为什么要有启动页面?

了解我的人可能都知道,经常说的一句话就是“需求决定功能,功能决定设计形式”,这是我做产品的一个价值观。每种设计形式的出现都是有它背后的逻辑和机制的,了解了这个Why,能让我们做产品的时候变得更智慧。

那为什么会存在启动页这种形式?

首先目前的APP所相关的两大平台Android和iOS,是用Java和swift这些编程语言写出来的,而计算机的元器件只有开和关这两种状态。当启动APP时,设备(手机、平板等)需要将编程语言进行编译成计算机能够读懂的二进制语言,计算机只认识1和0(对应元器件的开和关)。这个编译过程需要时间,同时,启动过程还存在向服务器请求数据的情况,这也需要时间。也就是说,在点击启动APP图标,到APP首页的出现,是存在一个时间,这个时间的长短取决于设备的性能和网络环境,从几百毫秒到几秒不等。

在这段空白时间,为了不让用户感到困惑或因为等待而产生焦虑。iOS的设计规范规定,要在启动APP时,设计一个启动页,来填补这段用户等待的时间。

3.启动页该怎么设计?

按照功能和达成目的的维度,我将启动页分为了五类,分别是快速启动类、品牌类、情感共鸣类、广告类、节日类。

①快速启动类

对于启动页的设计,官方是有明确规定的,iOS的设计规范是这么描述的:

“为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。”

查看原文:https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/

国外的APP大多采用这种方案,它的最大好处是,启动页和首页很相似,过度自然,用户感觉不到有启动这个过程,用户体验很棒。

Instagram

Foodie

Path

Facebook

如果首页的框架和内容是变化的,不固定的,那怎么办?不要慌,还是有办法的:采用和首页颜色接近的图来作为启动页。如“VSCO”等。

VSCO

如果是在国外,这篇文章讲到这就要结束了,因为记住一条方法论就行“设计一张和首屏相似的页面作为启动页,如果首屏内容是动态的,则采用和首屏整体最接近的颜色作为启动页”

但是国内的APP决定要走出一条自己的路,所以有了下面的五花八门的启动页。

②品牌类

尽管苹果明确提出,启动页不是你品牌展示的窗口,但将启动页做成“品牌logo+名称+slogan”成了国内最主流的启动页设计。放几张图,大家自行感受。

有道云笔记&UC浏览器

上图的两个例子是目前国内APP最主流的方式,这种形式一是没有设计,二是启动页和首屏有明显的割裂感,真的不如直接用一张和首屏相似的图片作为启动页。

那如果真的要在启动这么短的时间内来强调公司或品牌,可以有更好的方案,Uber启动页利用品牌元素进行动态变化的设计,品牌元素从出现,到变化,再到消失一气呵成,而且和首屏的衔接过渡的也很自然,在确保体验的前提下,也起到了强化品牌的作用。我从Uber的这种做法提炼出了三个思路,一是除了静态图片还可以考虑动态展示的形式;二是将启动页做得更具设计感;三让启动页和首屏的过度动画更自然。可以作为品牌类启动页设计的方法论来用。

再来看几个例子:

XY&开眼

轻芒阅读&一个

开眼和轻芒阅读等APP,也将启动页作为强调品牌的载体。通过体现场景感来充分体现了品牌的调性,而且兼顾了设计的美感。值得大家借鉴。

③情感共鸣类

情感共鸣类的启动页其实很难,所以这么做得产品很少。但是一旦成功,会在用户心智上打下很深的烙印。

微信&陌陌

不需要在启动页写上名称、logo、slogan,用户在看到图片的时候就知道这是什么产品。微信的这张启动页可以说是相当成功,充分的体现了一个熟人社交软件的调性。用这种形式的启动页要注意两点,一是图片要符合产品调性,具有故事性,像微信和陌陌,都是一个孤单的背影,暗示着人们是社交动物,需要和人交流;二是尽量不要更换,像微信的这张图就从来没换过,陌陌的启动图片也一直是背影+风景的风格,这样容易在用户心中形成统一的认知。

④广告展示类

还有一类APP,会将启动页作为变现的渠道,将启动页做成广告页。而且一般是先显示品牌页,再显示广告页,如下:

有道翻译官

微博

广告类的启动页,其实已经完全违背了iOS对Launch Screen的定位,而且广告页的显示时长长三秒到五秒不等,反而延长了用户启动APP的等待时间。

但是这种形式会给公司带来直接利益,尤其对于一些盈利模式不清晰产品,这种形式无疑是一种很好的变现手段。在牺牲用户体验的基础上换取一定的利益,这没有对错,只有适不适合。

如果接到需求,要将品牌页做成广告页面,至少可以做到这几点,来适当的提升用户体验。

一是让品牌页和广告页之间在设计上统一,避免割裂感,例如上方的微博和有道翻译官,都采用保持底部logo元素不变,只变化页面的一部分,从而保持两张界面的统一性;二是在广告页的右下角放置跳过的button,最好在button上显示倒计时,还能在跳过的button上加上loading的效果;第三,可以考虑每天只在第一次启动APP时才出现广告,减少广告出现的次数等等。

加上倒计时以及loading效果,都是为了让用户在心理上感觉时间过得快一点,从而提高体验;提供跳过的button是让用户能够主动选择跳过广告;将跳过放在界面的右下角,是为了方便用户单手操作;广告页只在每天第一次启动APP时显示,是为了避免多次出现可能会对用户带来厌烦的情绪,反而适得其反。

⑤节日类

情人节、五一劳动节、六一儿童节等等,都成了APP启动页展示自我的地方,在重要节日将启动页设计成节日海报类,不仅可以做到情感化的表达,有趣的节日启动页还能成为用户间的谈资,增加产品的口碑。

饿了么&UC浏览器

4.其他可能性

除了上述五种常见的启动页,其实启动页还有更多的可能性。在生日的当天,给你送上生日祝福;成为一次暖心的活动H5的入口页面等等。

支付宝&QQ(生日祝福)

UC浏览器&未知(活动入口)

你是否还能想到其他的可能性?欢迎留言,或者可以加入小密圈一起讨论。

总结:今天介绍了启动页的多种形式以及它们的作用,有为了商业利益放广告的,也有为了情怀放充满意境图片的,还有强调品牌的,做情感化设计的...。但是,不管一个产品的启动页呈现哪种形式,都不应该忘了启动页存在的根本原因:为了减少用户在等待APP启动时的焦虑感。而iOS官方为此提供的解决方法是将启动页设计成和首屏相似,以此让用户在心理认为APP启动很快。

当你接到要将启动页做成广告或者活动入口等需求时,作为一名产品设计师,有义务向提出该需求的同事说明iOS的推荐做法。在此前提下,尽量确保在用户体验和公司利益之间,找到最好的平衡点。这也是身为一名用户体验设计师的价值所在。

 

②:注册登录页设计

朋友说某个APP不错,下载后正准备好好体验一番,却被糟糕的注册登录页面弄的精疲力竭,无奈最终只能放弃。注册登录流程能让用户扭头就走,也能让产品获得新用户的芳心。

一个合格的注册登录页面,应该是具有清晰的操作流程,良好的交互细节和美观的视觉设计。

1.清晰的操作流程

APP的注册登录有三种流程:

①无需注册登录

常见于系统自带的工具类APP,像经常使用的闹钟、日历、计算器等等;一些简单的第三方APP:乐流,榫卯等。

这些APP的特点都是功能相对单一,比较“轻”,不需要记录用户信息或行为历史。

计算器&榫卯

②非强制登录

有注册登录的流程,但是用户不需要注册登录也能使用产品的部分功能,也就是所谓的支持游客模式。

内容类、购物类、娱乐类等都会使用这种形式。

非强制登录又有两种设计流程,一种是先展现出注册登录页,但是允许用户跳过。

网易云音乐&豆瓣

另一种是直接展示产品功能,当用户想深入使用某些功能时用户得选择注册登录。

开眼&same

③强制登录

用户必须先进行注册登录,才能正常使用产品功能。社交类、2B类、工作类的产品会使用这种流程。

强制注册登录的流程会影响用户的转化率,所以产品不是严重依赖于账号系统的话,尽量采用非强制登录的方式。

path&企业微信

2.不同的注册登录方式

①邮箱

最开始的时候注册登录是基于PC的,也就是基于网页,PC时代的互联网产品多使用邮箱作为唯一ID。所以邮箱注册成为主流,而且注册过程中需要验证邮箱也很方便,用户直接在PC端就可以完成所有操作。

现在很多APP依然保持着邮箱注册的方式。

②.手机号

随着移动互联网的到来,人们触网的主要设备已经从PC逐渐转移到智能手机。

加上手机号码的实名制、全球通业务的普及,使得手机号码也具有了唯一标示性。而且在移动互联网时代,用手机号码作为登录ID,并用短信验证码的形式来验证ID,这些操作流程都基于手机端,特别方便快捷。所以手机号码逐渐取代邮箱成为APP注册登录的主流方式。

③.用户名

早期用户名注册登录还很常见,但是随着第三方登录的普及,以及用户名登录自身的缺陷:“只能区别用户的ID,并不能获取到用户的联系信息”,用户名注册登录的方式已经退出主流。目前很多产品会将用户名作为昵称来用,而不是作为注册登录的ID来使用。

④.第三方账号

邮箱、手机号、用户名,都属于自建账号体系的方式,除此之外还有一种方式:第三方账号登录。用户不需要输入注册登录信息,直接选择第三方账号就能完成登录。国内常见的第三方账号有微博、微信、QQ、豆瓣、人人等,国外常见的第三方账号有Facebook,Twitter,Google等。

现在国内除了超级APP之外的APP基本都支持第三方账号登录,这样能简化用户注册登录的流程,提高APP的用户转化率。

这四种方式各有优劣,但总的来讲,通过手机号注册登录会更方便,通过获取验证码输入四位或六位数字就能完成注册登录。

3.注重交互细节

APP的优秀与否,由很多因素决定,而良好的交互细节是每一个优秀APP的共同品质。只有从用户场景出发,并从用户的视角来思考产品,才能设计出打动人心的APP。

①用显示/隐藏icon代替输入两遍密码

为了确保密码输入正确,很多APP需要用户输入两遍密码来确定密码输入无误,但这无疑增加了用户的工作量。替代方案是在密码输入框右侧增加一个“显示/隐藏icon”,让用户在输入完一遍密码后可以选择点开“显示/隐藏icon”来确保密码输入无误,减少用户的工作量。

issuu&in

②弹出相对应的输入键盘

点开邮箱输入框,弹出带有@的英文输入键盘。

点开手机号输入框,弹出九宫格数字输入键盘。

点开密码输入框,弹出英文输入键盘。

这是很小的细节,虽然用户可能不知道哪里不对,但是他能体会到好不好用。一个APP注意了这点,那用户就会觉得这个APP好用。而另一个APP没有做到这点,无论点击哪个输入框弹出的都是九宫格中文输入键盘,用户就会觉得这个APP不太好用。

作为设计师,要知道用户觉得不好用的原因是什么,这样才能对症下药,改善用户体验。

③对手机号码进行3 4 4的分布。

这个规则不仅适用于手机号码,包括银行账号、转账金额等等。

这是因为人的短期记忆是有限的,即一次只能记住有限的东西,如果强制记住很长的东西,短期记忆就很容易出错。

所以将数字以4或者3为单位分组,有利于用户阅读、编辑、校对手机号码。

淘宝&Facebook

④登录时增加一键清空icon。

在登录的时候偶尔会出现输入错误,如果没有这个清除的icon,用户只能按键盘中的清除按钮,需要一直按住直到输入框为空。

一个是只需要点一次就能清空,一个需要长按一段时间或者连续按多次才能清空,孰优孰劣可想而知。

dosnap&nice

⑤清晰的错误反馈。

当用户输入错误信息时,最好利用临时框的形式提示用户。而不是不做反应让用户自己去猜到底是怎么回事。

临时框也有两种形式,一种是下图左侧的对话框形式,这需要用户点击确认才能进行下一步操作。一种是toast的形式,弹出一两秒后自动消失。个人更倾向于第二种形式,因为第一种形式相当于强制中断了用户的操作,用户需要点击确认才能回到原来的操作流程。而toast则起到了提示的效果,并且没有打扰到用户。下图右侧的airbnb,在用户输错密码时,不光有底部的临时框提示,还将整个登录页面的背景色油绿色变为醒目的橙色,这种设计在提示用户的前提下,还做到了赏心悦目,是个不错的设计思路。

QQ&airbnb

4.美观的视觉设计

紧密:通过元素的远近将相似元素分为一组。

对齐:通过对齐,规范元素的排版 。

简约:注册登录页面的背景尽量简约,从而让主体信息更加突出。

对比:将重要的内容放大,增加色块背景;将相对次要的内容缩小,降低明度等从而使得信息层级清晰。

均衡:注册登录页面几乎都是沿着中心线左右对称的,信息是左右均衡摆放的。否者会导致页面不平衡。

品牌调性和产品定位:视觉风格要能体现出品牌调性,也要做到符合产品的定位。

平时收藏的一些视觉不错的注册登录页面:

bilibili&facebook

未知&UBER

总结:早期互联网产品多使用邮箱或用户名登录,这是PC时代人围绕设备走的特性决定的,而现在是移动互联网时代,是设备围绕人走,手机号自然成了主流的注册登录方式。而现在,如果你的产品没有自建账号系统的需求,请直接使用第三方登录的方式,其快捷简单的操作,无疑是成本最小的注册登录方式。

如果之前是邮箱注册登录的产品,建议后期加入绑定手机号码功能,在允许用户使用邮箱登录的前提下,也提供手机号快捷注册登录的方式,还可以增加第三方登录的方式。毕竟注册登录属于产品需求,并不是用户需求,尽可能降低用户在注册登录时的成本,能提高新用户的转化率,帮助产品成功。

在满足产品需求的前提下,让注册登录有一个清晰的操作流程;良好的交互细节;美观的视觉设计,是做好注册登录页的葵花宝典。

 

③:如何处理加载页面?

 

大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败。在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁。好的loading设计能减弱用户的等待焦虑,不合理的loading设计会让用户骂爹骂娘了。

1.用户、客户端和服务器

作为用户体验设计师,不管是产品、交互还是UI,都习惯于站在人机交互的角度去思考产品设计问题,在这个过程中往往会忽略了一个重要过程:客户端和服务器之间的数据请求和传输。先看下面这张图。

用户、客户端、服务器

用户与客户端进行人机交互,触发某个操作,客户端会将用户触发的操作转化为相应指令,向服务器请求数据,若网络和服务器正常,服务器会返回数据到客户端,用户便能看到自己操作所引发的结果。整个过程是用户、客户端、服务器一起完成的,人与客户端之间是人机交互研究的领域,而客户端和服务器之间的数据传输更多的是开发人员所考虑的。

举例来说,你去京东购物,点击搜索栏,输入完关键词“风衣”,点击搜索(触发了操作),京东APP会将该操作发送给服务器,服务器将所有有关风衣的信息传给京东APP,并通过列表的形式呈现。

既然数据传输是开发人员考虑的问题,身为设计师是不是就不用考虑了?当然不是,原因很简单:数据传输的情况会影响到人机交互。例如,如果数据传输遇到网络不稳定或者服务器异常,就要在人机界面体现出来,不然用户会不知所措,产生焦虑,影响用户体验,这就是UED要考虑网络和服务器异常时的交互设计的原因。再比如,一个页面包含很多信息,即使网络稳定,也要加载不少时间,那怎样通过交互设计来缓解用户的焦虑。

2.数据加载的几种形式及对应的交互设计

①标题loading(当前页面)

微信&钉钉

微信、钉钉等都采用了这种形式。聊天列表页的聊天记录是储存在本地的,所以页面内容不为空。这个时候加载无需获取用户的视觉焦点,只要告知用户页面正在请求新数据,所以选择在标题栏展示App正在加载是个不错的选择,加载成功则标题栏loading消失,若因为网络错误未连接服务器,则在标题栏显示未连接状态。

②白屏loading(当前页面)

当页面内容比较单一,直接一次性加载完再显示数据。多出现在H5页面,例如微信的文章详情页。内容加载完成之前界面都会停留在loading界面。很多产品都会采用无限循环的小菊花,但进度条和有趣的动画设计,更能减轻用户等待时的焦虑感。

微信&美团

除了进度条+卡通动画+文案的形式,还有种更为高级的白屏loading样式。

左侧的开眼APP,将自己的logo进行变换,仿佛一个眼睛在转啊转;右侧的好奇心日报APP,用铅笔和橡皮擦,将自己的品牌字母Q,进行手写和擦除。这种形式不仅增加了loading的趣味性和设计感,同时还达到了强化品牌的效果,大家可以借鉴使用。

开眼&好奇心日报

③.优先加载

当有文字和图片时,图片会比文字加载的慢,这个时候往往文字先加载,图片在加载过程中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。

通过先加载页面框架,设计占位符等形式可以减少用户的心理等待时长,提高产品体验。

微博&微信

微博采用了灰色块作为图片的占位符,而微信公众号,则在灰色块的基础上增加了无限循环的loading,除此之外,还可以使用带有产品logo或形象的图片作为占位符。

④.Skeleton Screen

这种加载形式你可能没听过,但是一定见过。它是一种将未加载出来的内容区域,用灰色的色块填充的方式。所以整个页面在加载过程中会给用户很连贯的感觉。

国外的Facebook,国内的简书、微博、豆瓣都采用了这种加载形式。

这种形式一般用于内容框架固定的页面,如果页面可能会出现空数据的情况也不宜使用。像下图的Facebook首页,简书的首页和发现页,页面结构固定,且内容不会为空(除非网络异常导致加载失败),就很适合用Skeleton Screen的加载形式。配合前面讲的优先加载的方式,效果会更佳。

Facebook&简书

⑤.下拉刷新加载

Twitter当年提出下拉刷新,并被广泛使用,让用户能够手动对当前页面进行更新,加载的loading样式可以做进一步设计,例如QQ将loading动画和下拉手势结合起来,增加了趣味性;豆瓣把loading做成了笑脸,给予了产品人性化的设计。

豆瓣&QQ

⑥.分段加载

当新页面的内容有好几百条甚至更多时,如果一次性加载所有内容,会增加设备的负担,而且加载内容过大,加载时间会过长,同时APP自身也可以因为运算成本太高而崩溃。为了解决这个问题,产生了一种叫分段加载的形式。即:先加载最新的几十条数据,当用户继续向上滑动想浏览更多时,再加载几十条。

分段加载要在PRD或者交互设计文档里明确注明,一次性加载多少条内容,如果内容以图片为主,建议加载20到30条左右,如果内容以文本为主,建议40到60条左右,这是本人的设计习惯,大家可以借鉴。我无聊的数了数今日头条每次分段加载会加载60条新闻。

same&知乎

⑦.智能加载

当网络状态不好时,可以考虑加载低质量的图片,当网络良好时,则加载高质量的图片。

同理,当检测到用户正在使用蜂窝数据时,则显示占位符而不显示图片,当使用WiFi时则直接加载出图片。这些设计方案都是站在用户的角度,替用户着想,为用户带来价值,用户才会真正喜欢上你的产品。

知乎

3.关于加载的更多思考

由于存在网速不快、网络异常、服务器异常、bug等情况,让用户等待的情况是必不可少的。但是我们都知道,等待会产生焦虑感,分分钟卸载你的产品,除了用上文介绍的其中loading,还有没有其他方式来降低或缓解用户的焦虑感?

第一:优化App的加载算法,使得App与服务器数据传输的时间减短。这个需要开发人员的精益求精了。这个是从根本上解决了问题,因为直接减少了加载数据的时间,也就减少了用户需要等待的时间。

第二:采用预加载和智能加载的方式。拿阅读App打比方,当用户在看第一页的时候,App在后台加载完后面的几页,等用户翻到第二页的时候就不需要等待加载了,因为App已经帮用户提前加载好了。

这种加载机制对用户体验特别好,但是存在一个问题,就是要预测用户行为,加载其他数据,这样会消耗不少流量,所以建议在WiFi网络环境下采取这种预加载机制,而在蜂窝网络状态下则不采用预加载机制。这个要和开发人员讨论沟通,确保预加载机制完美运行。

第三:异步处理。这一点做得好的App莫过于Instagram,不知道你有没有发现,用Instagram的时候会觉得特别流畅,即使在网络不好的情况下。这是为什么?因为在网络不好的情况下,你给好友点了赞,Instagram并不会提示你网络不好,操作失败,而是提示你点赞成功了,其实它只是将你点赞的操作记录了下来,等网络一好就将点赞的行为上传到服务器,从而完成点赞行为。这就是让产品自己去解决问题,而不是把问题抛给用户。

微信也采用了异步处理,发布朋友圈时,你不用等所有文字和照片都上传完毕,点击上传后,就可以进行其他操作,微信会在后台自行将文字图片上传到服务器,不用用户等待切不打扰用户。

第四:设计有趣的loading动画,如上文介绍的美团APP奔跑的小人,这是提升产品情感的重要手段。如果能和自身品牌元素结合起来,同时能反映出产品的调性,那就再好不过了,如上文提到的开眼和好奇心日报APP。

回到文章的开头,作为产品设计人员,不应该把视野局限在人与客户端之间的交互,也要把客户端和服务端之间的数据传输考虑进来,站在用户、客户端和服务器闭环的角度去思考产品,只有这样,才能设计出体验更好的数据加载方案,而不会有失偏颇。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: