界面中的“边缘场景”解析

      设计师在创建用户界面时往往会优先考虑完美业务情况，如精美的图片，合适长度的文本，丰富的内容等，但现实总是不尽如人意的，在实际使用产品的过程中，设计师无法控制用户的操作或系统的稳定性，时常会有“意外的”或“少见的”情况发生。

      当这些情况发生时，用户往往被打扰，不知所措，我们不能要求开发在代码实现阶段考虑这些场景，因此关注这些情况的重任落到了UI/UX设计师身上，设计师不仅要保证这些情况不能给产品带来负面影响，更要将其视作创造愉悦体验的机会。

      我将这些不是设计师会优先思考且容易被忽视，同时也不是业务主干线的情况统称为“边缘场景”，虽叫做边缘场景，但并非不重要，出现“边缘场景”的原因主要来自三方面：

1.产品本身   2.硬件设施  3.用户操作

下面将介绍几种实际应用中常见的一些“边缘场景”(网页和移动端可作同样思考)

一、Loading正在加载(移动端为例)

      产品需要频繁地与服务器进行数据的交换，有一段时间接收到的信息是空白，而Loading加载状态的出现意味着用户需要等待。

     《心理科学进展》2014年的一篇文章提出等待时间知觉的概念，是指人们在等待过程中对等待时长的主观感受和心理体验, 它对人们的决策行为产生影响。影响等待时间知觉的客观因素包括等待过程的填充物、等待时间的确定性、接受服务的阶段和等待的物理环境等。

以上说到的客观因素除了物理环境不能由产品决定外，其他三个因素都和产品本身有关

1.接受服务的阶段：

      用户在不同的服务阶段感知到的等待时间是不同的。

      若一个新用户首次进入某个产品要花费大量的等待时间，他会对产品的信任度降低，很有可能选择放弃；

      若即将要呈现的内容是用户所期待的，那么对精彩内容的预期会降低等待时间对用户的影响。

      因此不同阶段的加载表现形式也不一样的，这里将页面中需要用到加载的服务阶段分为以下三类：

 1）初始阶段：

      重新或首次打开产品时需要加载的内容较多，影响加载时间

      这里产生用户对产品的第一印象，必然获得用户的关注，是许多产品塑造自身品牌形象的重要区域，在移动  端称为引导页，常见的引导页的类型共有以下四种：

      品牌类：展示品牌logo，slogan，代表形象，宣传片等

      广告类：放置其他产品的广告，可获得相应的受益

      功能介绍类：向用户介绍产品的主要功能或新版本更新内容

      特殊节日类：在特殊的节假日引导页内容会随之改变，例如支付宝的生日祝福

2）新页面跳转：

      跳转页面不能使用本地缓存时，需要加载新数据，受网络环境，硬件设备，加载内容等影响花费或长或短的加载时间，是加载页面出现最多的情况。

3）当前页加载：

      不涉及页面跳转，在当前页加载内容，常见类型有导航栏加载，模态提示，控件加载

2.等待过程的填充物：

      指在等待过程中用户接收到的反馈讯息。根据反馈机制的概念，产品对人的反馈通过五感进行传递。

      这里将视觉，听觉，触觉，嗅觉这四感视为形式不一的填充物(味觉除外)

1）视觉反馈：使用最多且最重要的产品与用户的交互形式

      通常采用静态文字与动态效果相结合的表现形式，常见的类型有进度条，百分比，旋转小菊花，自定义动态插画等类型。

      进度条和百分比让等待时间可以量化，帮助用户进行时间估量，在能获取到数据加载进度时使用，如下载的百分比信息

      小菊花类无限循环加载是目前使用最广泛的数据加载样式，因为多数情况后台很难获取到数据加载进度的信息，而这类加载样式即简单又无趣，等待时间过长还会给用户带来焦虑，它不是一种优秀的加载样式，但没有更好的替代方案

      自定义插画可以结合品牌元素塑造有趣的动画形象，以吸引用户的注意力，减弱对时间的感知

2）听觉反馈：

      多数情况下作为视觉外的辅助反馈，通过不同形式的声音来传递讯息。

      非静音状态下，淘宝首页的5个Tab（首页，微淘，消息，购物车，我的淘宝）下拉刷新加载完成后会有一个俏皮的声音反馈提示用户

3）触觉反馈：

      震动是最常见的触觉反馈，用户不需要时刻关注着屏幕便能收到讯息，相比于视觉反馈，它直接作用在用户的生理和心理，更能抓住用户的注意力。但目前在加载页面的应用较少

4）嗅觉反馈：

      在互联网产品中用到嗅觉反馈的案例很少，目前没有很好的解决方案。

      但GDC 2015大会上，FeelReal展示了一款拥有嗅觉反馈的VR产品原型，嗅觉附件能够向用户鼻孔喷射味道，且多达255种味道以支持用户自行混搭和匹配。可以预见，若嗅觉反馈得以应用，定会带来颠覆式的用户体验。

      当前loading页面以视觉反馈为主，少见听觉触觉反馈。而每一种反馈都是一种信息通道，当受到外部环境影响（例如太阳光下，嘈杂环境中）或用户自身某方面存在缺陷（例如视觉障碍，听觉障碍）使得某个反馈无法很好的传递讯息时，多通道的反馈会从另外的渠道传递讯息，尽可能保证当前产品的功能体验，是未来产品发展的趋势之一。

3.等待时间的确定性：

      旋转小菊花：这类无限循环动态无法告知用户加载的进度和具体的等待时间，在等待时间稍长时，用户会认为产品运行缓慢，且单一的界面形式让用户感到无趣

      进度条，百分比：可让用户了解到加载进度，感知到产品正在努力地执行响应，不认为产品运行缓慢，对等待时间产生预期

二、404页面

      404是一种常见的http状态码，意为服务器找不到请求的网页，即当客户端浏览网站的时候，服务器无法正常返回客户的这个页面。

      当产品结构优化，部分页面被删除或用户输入的URL错误时，404页面便会如期而至。浏览器提供的默认通用错误消息通常是无意义且模糊的。

      404作为一个网页的一部分，同样遵循用户浏览其他页面时的习惯。

      当用户沮丧地来到404页面时，首先会快速扫描视觉突出的可读取性文字，若用户发现其他感兴趣的内容，会进行下一步的点击，试试看吧，也许会发现别的有价值信息。

      若页面上没有符合用户期待的页面或功能，也没有对应的其他导航，用户不知所措，相应的行为便会是关闭或返回，当用户是第一次进入该网站，这样的情况降低了用户进一步了解网站的意愿。

      因此，404页面虽然会让用户挫败，但设计者不能将其视为用户旅程的终点，而是一个表达产品性格给用户带来其他价值的机会。

这里对一个较好体验的404页面给出了以下几点建议:

1)清晰地解释清楚问题，并给用户下一步的指引

      用主次分明的排版布局说明是什么问题，为什么会这样，接下来你可以做什么

2)以普通人的口吻与用户交流

      一般错误消息对用户而言听起来可能是非常技术性的，例如域名，服务器，404这些单词，用日常生活的词汇来解释页面上的信息会更为友好

3)网站的导航保持可见

      即使出现错误也让用户明白自己被网站包围，并可随时导航至网站其他页面，相比于空白页能提高用户对网站的信赖感，就像迷路的船只总能看到点亮的灯塔

4)放置搜索栏帮助用户找到特定的内容

      直接定位到用户想去的地方，用户浏览网页有时带有目的性

5)加入情感

      用幽默，可爱等正向情感的语言或图像将信息传递给用户，缓解用户沮丧失望的心情，凸显网站的用心程度

常规案例:星巴克的404页面分析

用户进入到这个页面信息的感知顺序

      1.首先注意到最重要的提示信息，很抱歉，我们找不到你所需要的页面，以对话的口吻呈现文案，内容清晰且有礼貌，没有出现专业词汇

      2.根据F型的阅读习惯，接下来页面向用户解释为何会出现这种情况，简明扼要阐述了几种可能的情况

      3.用户可以做什么，给出了3个选项，重新输入网址；回到网站首页；使用网站地图查找内容，可直接跳转的页面用品牌绿表示链接可点击

      4.提供用户反馈的渠道

      5.和其他正常页面同样的页头页脚导航

      页面主要内容都用了我们，你这样的第一第二人称词语，更具真实和亲切感，上文给出的建议中页面满足了四条，缺少一些明显情感元素，但不影响这是一个优秀的404页面设计

特殊案例 ：404公益

      这是一个很好的设计赋能案例。在2012年，欧洲的Missing Children Europe等公司组织联合发起名为Not Found Project 项目，在404页面中刊登失踪儿童的信息，并加上转帖或分享的功能，给空置的网络空间赋予了公益价值，在这个过程中网站也通过这种形式承担了社会责任，且正向价值观的体现会让用户留下对网站的好印象。

三、空状态

      界面中未填充相关信息，不同空状态要向用户给出不同的反馈

      筛选搜索空态：需说明是什么原因导致的空态，例如有内容无数据；关键词不对，无匹配内容；筛选条件太多，没有交集；触及了一些敏感词汇等情况

      产品本身空态：产品内容可能是正在建设中或暂未到开放时间等，例如前后端对应的部分，后台网站管理者未上传内容，前台则无数据显示

      用户行为空态：用户在部分业务上没有操作或将已有数据删除，例如用户没有订单，删除了我的收藏

     

    空状态的解决思路可分为以下的主要两步

1.  解释清楚空状态的原因

    可以运用到情感化设计，充分体现品牌调性，给用户创造小小的惊喜；若是搜索筛选搜索导致的空态可提供近似的搜索内容提示用户

2. 引导用户行为

    这时候界面的内容有限，用户可进行的操作不多，是鼓励用户与您的产品进行交互的绝佳机会。引导用户浏览其他内容，或者留下反馈渠道等。

 

  Material Design给出的空状态建议：

  最基本的空白状态由非交互式图像和文本标语组成

  使用图像：

  1.具有中性或幽默的语气

  2.与您的品牌一致

  包括一个标语：

  1.有一个有用的信息

  2.与您的品牌一致

  3.传达屏幕的目的，而不显示可操作的内容

四、极端情况

      极端情况发生的概率不大但存在，处理起来不难但容易被遗忘，若在这方面出现问题，会显得产品过于粗糙，不够专业，给用户带来对产品的负面印象

1）内容过多或过少

     内容过多的处理方式：收缩展示，跳转新页面，翻页等

     内容过少有时候需要重新考虑样式

     案例：下图是我主导设计的地产经纪Saas平台经纪人的网站页面，首页房源推荐部分的房源需要地产经纪自己在后台设置，所以就会出现如图的五种情况，推荐房源有一个，两个，三个，四个，四个以上，布局样式各不相同，若只考虑普遍情况（四个以上）会出现样式混乱，布局糟糕，无法查看更多房源或点击更多无数据等情况。

2）数据过大

     将理论上可能的数据范围都考虑进去，若数据过大是用K，W，M显示还是其他的解决方案？

3）标题过长

     做好明确的字数限制给到开发

4）无数据

     当一些字段无数据时，需要用恰当的表达方式展示

五、初次使用

      当用户首次与产品发生交互时，没有历史数据做支撑，需要从场景和角色的角度考虑，了解新用户使用产品可能的操作，考虑产品是否有必要步骤需要用户完成

      以工具类产品为例，新用户进来界面主要会呈现这两种内容:

1.默认数据或内容

      提示性的默认数据可以让用户了解产品的架构，在正式使用前产生对产品的预期 ，降低未知感带来的预期心理学习成本 。缺点是无法很好地体现产品的交互步骤

      案例：新用户在初次使用进入腾讯文档时，会默认给出一个word和excel表格，展示有数据的样式，点开excel表格里面也填充了默认数据，很好地帮助用户理解产品功能

2.教程，引导操作

      不会使用最好的办法就是教用户使用，一步步引导，但引导操作的内容不宜过多，会降低用户学习的积极性，将最主要的操作交给用户，其他功能可以建立非强制性浏览的操作文档。

      案例：用户首次登录Dropbox，首页会提供新手指南以供下载，不同菜单页也会有帮助性文字及号召性按钮来引导用户操作

总结：

       以上所述都是些较为常见的“边缘场景”，而不同业务的“边缘场景”也都不一样，有些时候我们无法做到在第一遍整理产品时就考虑清楚所有问题，所以尽可能地思考归纳常见的和自己领域的“边缘场景”，有效帮助产品的质量提高。