[产品设计] [用户体验]
转载自：交互设计学堂
用户在使用App时会碰到许多特殊场景：网络异常、信息加载、页面内容为空等。如何友好的设计这些特殊场景下的App页面，对于用户体验至关重要，也是产品设计人员的基本功。
一. 网络异常
网络异常呈现在用户面前有两种情况，一种是网络切换，即从WiFi状态切换到3G/4G网络；一种是网络中断，APP与服务器的数据传输中断。
1. 网络切换
一些需要消耗大量流量的APP，用户一般只会在WiFi的网络状态下运行，如视频APP、音乐APP及直播APP。当网络状态从WiFi切换到3G/4G时，为了防止用户消耗流量，APP会采取一定的设计形式来告诉用户，网络状态切换了，请小心。
上图的QQ音乐、虾米音乐不仅提示了用户的网络状态切换了，还告诉了用户这种情况下该怎么办，是继续用流量播放还是订购免流量包。告诉用户发生了什么，遇到了什么问题，也给用户提供解决问题的办法和入口，才是好的设计。
2. 网络信号不好或网络中断
网络中断或信号不好，APP无法与服务器交换数据，这时要分两种情况考虑：无缓存数据时和有缓存数据。
① 无缓存数据时
A. 整页提示
当整个页面内容都因为网络异常导致未加载成功，采用整页提示的方式。整页异常的设计样式包括三部分：icon或者插画形式；网络异常文案；重试或者前往WiFi设置的button（或者没有button，直接点击页面空白区域）。
上图分别是闪电购和猫眼的整页异常设计，都采用了品牌形象的插画形式，不仅增添了趣味性还起到了强调品牌的作用。闪电购在button下还增加了一个入口：搞不定网络，看看小贴士。因为有部分用户可能并不清楚当前的网络中断是由于什么引起的，尤其对于小白用户来说，添加一个下贴士的入口，帮助用户解决问题。
B. 占位符提示
此种情况多出现于采用native技术架构的页面，页面框架是直接呈现的，不需要联网，APP只需要联网获取框架内的数据即可。所以页面呈现出了框架，但是没有内容的情况，这个时候会使用占位符替代未加载出来的图片，用灰色块替代未加载出来的文字。这种设计形式有一个最大的好处就是当网络中断时间很短时，用户几乎察觉不到网络中断，APP就已经恢复正常了。这就是利用设计技巧，不给用户带来额外操作成本和认知负担。此外，占位符的方式也可以作为loading的解决方案。
② 有缓存数据时
A. 列表提示
当页面有缓存数据时，可以用list的设计形式，来提示用户，网络异常，请前去检查网络设置。
B.dialog提示
除了上述list的提示形式，还有的APP采用了dialog的形式来提示用户。
上面两个页面都使用了dialog来提示用户网络异常，采用dialog不仅仅可以提示用户网络异常，还能给出“设置”的入口，让用户直接前往WiFi界面设置网络。如果仅仅是提示用户网络异常，直接用toast的会更好，因为toast不会获得用户焦点，并且不会中断用户的操作。
C.Toast提示
当网络信号不好或网络中断时，用户还在继续操作APP，为了提示用户，会在用户每次触发操作时利用toast提示用户网络异常。让用户的行为即使在网络异常时也能得到反馈。
网络异常的两种情况以及五种设计形式并不是孤立的，也不是只能单独使用，是可以配合使用的。喜马拉雅的首页即采用了list方式提示用户，同时采用了dialog的形式。
二. 加载处理
大多数App都要与服务器进行数据的交换，App向服务器发出数据请求，服务器接收到请求之后向App传输相应数据，App接收成功后显示数据内容，没有接收成功则反馈数据接收失败。在这个数据交换过程中，由于网络原因，需要花费一定时间，也就是说用户要等待加载完成，这个时候就要用到loading加载机制，它告诉用户，App正在努力为您加载数据，您稍安勿躁。
1. 用户、客户端和服务器
作为用户体验设计师，不管是产品、交互还是UI，都习惯于站在人机交互的角度去思考产品设计问题，在这个过程中往往会忽略了一个重要过程：客户端和服务器之间的数据请求和传输。
用户与客户端进行人机交互，触发某个操作，客户端会将用户触发的操作转化为相应指令，向服务器请求数据，若网络和服务器正常，服务器会返回数据到客户端，用户便能看到自己操作所引发的结果。整个过程是用户、客户端、服务器一起完成的，人与客户端之间是人机交互研究的领域，而客户端和服务器之间的数据传输更多的是开发人员所考虑的。例如，你去京东购物，点击搜索栏，输入完关键词“风衣”，点击搜索（触发了操作），京东APP会将该操作发送给服务器，服务器将所有有关风衣的信息传给京东APP，并通过列表的形式呈现。
数据传输的情况会影响到人机交互，如果数据传输遇到网络不稳定或者服务器异常，就要在人机界面体现出来，不然用户会不知所措，产生焦虑，影响用户体验，这就是产品设计要考虑网络和服务器异常时的交互设计的原因。
2. 数据加载的几种形式及对应的交互设计
① 标题loading（当前页面）
微信、钉钉等都采用了这种形式。聊天列表页的聊天记录是储存在本地的，所以页面内容不为空。这个时候加载无需获取用户的视觉焦点，只要告知用户页面正在请求新数据，所以选择在标题栏展示App正在加载是个不错的选择，加载成功则标题栏loading消失，若因为网络错误未连接服务器，则在标题栏显示未连接状态。
② 白屏loading（当前页面）
当页面内容比较单一，直接一次性加载完再显示数据。多出现在H5页面，例如微信的文章详情页。内容加载完成之前界面都会停留在loading界面。很多产品都会采用无限循环的小菊花，但进度条和有趣的动画设计，更能减轻用户等待时的焦虑感。
除了进度条+卡通动画+文案的形式，还有种更为高级的白屏loading样式。左侧的开眼APP，将自己的logo进行变换，仿佛一个眼睛在转啊转；右侧的好奇心日报APP，用铅笔和橡皮擦，将自己的品牌字母Q，进行手写和擦除。这种形式不仅增加了loading的趣味性和设计感，同时还达到了强化品牌的效果。
③ 优先加载
当有文字和图片时，图片会比文字加载的慢，这个时候往往文字先加载，图片在加载过程中使用占位符，直到图片加载成功。当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。通过先加载页面框架，设计占位符等形式可以减少用户的心理等待时长，提高产品体验。
微博采用了灰色块作为图片的占位符，而微信公众号，则在灰色块的基础上增加了无限循环的loading，除此之外，还可以使用带有产品logo或形象的图片作为占位符。
④ Skeleton Screen
它是一种将未加载出来的内容区域，用灰色的色块填充的方式。所以整个页面在加载过程中会给用户很连贯的感觉。国外的Facebook，国内的简书、微博、豆瓣都采用了这种加载形式。这种形式一般用于内容框架固定的页面（页面出现空数据的情况不宜使用）。
如下图的Facebook首页，简书的首页和发现页，页面结构固定，且内容不会为空（除非网络异常导致加载失败），就很适合用Skeleton Screen的加载形式。配合优先加载的方式，效果会更佳。
⑤ 下拉刷新加载
Twitter当年提出下拉刷新，并被广泛使用，让用户能够手动对当前页面进行更新，加载的loading样式可以做进一步设计，例如QQ将loading动画和下拉手势结合起来，增加了趣味性；豆瓣把loading做成了笑脸，给予了产品人性化的设计。
⑥ 分段加载
当新页面的内容有好几百条甚至更多时，如果一次性加载所有内容，会增加设备的负担，而且加载内容过大，加载时间会过长，同时APP自身也可以因为运算成本太高而崩溃。为了解决这个问题，产生了一种叫分段加载的形式。即：先加载最新的几十条数据，当用户继续向上滑动想浏览更多时，再加载几十条。分段加载要在PRD或者交互设计文档里明确注明，一次性加载多少条内容，如果内容以图片为主，建议加载20到30条左右，如果内容以文本为主，建议40到60条左右，今日头条每次分段加载会加载60条新闻。
⑦ 智能加载
当网络状态不好时，可以考虑加载低质量的图片，当网络良好时，则加载高质量的图片。同理，当检测到用户正在使用蜂窝数据时，则显示占位符而不显示图片，当使用WiFi时则直接加载出图片。这些设计方案都是站在用户的角度，替用户着想。
三. 页面内容为空
用户最初使用APP或者网页的时候，许多界面都呈现出“空状态”，所以很有必要将空状态纳入到新用户引导流程中。在没有内容时给予明确的指示，让用户更快推进到下一步，需要新用户花费一步或者多步，去创造内容，这种情况非常适合做引导设计。
① 避免进入死胡同
最糟糕的空页面设计是让用户感觉进入了死胡同。这样容易让用户感到不安，在混乱中可能会导致用户盲目的去寻找出口。以Modspot发帖界面为例，非常有效、并且巧妙地减少了用户的疑虑，告诉了用户开始发帖的动作入口。
② 确保界面简洁直观
好的空数据设计当然要保持界面的简洁，要尽可能干净利落的把内容传达给用户，减少认知干扰。在设计上，必须综合考虑文案描述和示意图（表意清晰，描述简洁、容易理解），才能有好的效果。
③ 突出APP的个性与风格
给用户留下好的第一印象不仅仅是界面的可用性，也要考虑到视觉风格。让用户感觉到你的APP是让人印象深刻，使用起来又很舒服的。至少与同类产品相比，能感觉到有那么一点点与众不同，对整个产品体验的预期也会有一点点不同。以下图 Khaylo Workout空数据设计来说，为整个产品的性情做了风格生的设定。
④ 鼓励用户采取行动
为了让用户再次使用的时候，不会依旧面对空数据，我们首先要做的是说服用户尽快行动起来。我们不仅仅要在用户与应用界面交互的时候告诉其将要获取什么好处，更要引导用户按其所需行动起来。
Facebook的Messenger模块，当用户第一次到达这个界面时，会看到Messenger这款产品的优势-可以发送包含图片与视频的讯息，并且速度跟短信一样的快。除此之外，用户还知道有多少Facebook好友已经在使用了。一旦用户点击了“开始安装”按钮，这就意味了空状态因此消失的可能性。安装按钮如此清晰明了，用户又何乐而不为呢？
⑤ 尽可能提供个性化内容
让自己的APP看起来更有特色，最终是为了更快向用户传达产品价值。在目标用户还没有行动之前，需要传达与用户需求与利益相匹配的内容。用户会根据APP简明扼要的描述来为空数据界面创造新内容。为新用户提供一些有效信息，促进他们能够以正确的或者更快捷的方式探索APP。
⑥ 展示成功状态
通过达成成就的方式帮助用户获得最初的成就感。当用户完成一个重要的任务的时候，这一时刻是创造产品和用户之间情感联系的重要机会，你要让用户知道，他们做的很好，要承认他们的进步，并且同用户一起庆祝。MailChimp 就是个典型，他们在新用户发布第一次邮件的过程中，不断添加有趣的、幽默的奖励来推动用户完成他们的第一封邮件的发送。
趁着庆祝用户做得很棒的同时，鼓励用户更深入的体验产品。例如，Writeupp的用户如果清理了任务列表，这当然是一个很积极主动的行为，Writeupp会告诉用户“您做的很棒！”作为鼓励。成功提示可以很好的愉悦用户，并且能够促进用户参与下一步的行动。
