善用“谎言”应对无线网络环境,让你开发的应用看起来更流畅

根据测试,应用最佳的响应时间应当在10ms内,会给用户十分流畅的交互体验,而如果这个时间超过了1s,那将是非常糟糕的。不过,一旦应用需要读取网络内容,10ms就变成了完全无法实现的目标——在标准网络环境下,3G网络的初始延迟值在600~3500ms,4G网络在300~600ms,再加上内容的传输时间,所以,无线网络速率成了应用开发者们不得不面对的难题。虽然不少开发者都会在产品发布前进行网络测试,但问题在于,现实中的网络环境要比实验室中复杂的多。

这就需要产品在设计时不仅从技术层面去优化其网络响应和内容解析,还需要利用一些小技巧去让用户不会明显感觉到网络延迟带来的影响, Luke Wroblewski就分享了一些设计方案。

他提到了Google Search for iOS的做法——它在许多交互行为之后都引入了动画效果,而非直接到内容的索引,这会给用户带来一种应用反应迅速的感觉,而实际上,在这个过程中,它正在从网上搜索和下载内容。

optimistic-actions1

这个技巧也常常被用于触摸交互的设计,例如当用户对屏幕或功能键做出点击操作时,应用首先会呈现一个表示接受到触摸的动画反馈或是UI元素的变化,而其真正的功能调用时间就被隐藏了。

Instagram的联合创始人Mike Krieger也曾分享过他们类似的设计方法,例如,Instagram中,当你点“赞”的功能时,应用首先是将桃心变成红色,然后再向服务器发生相应的命令。同样的设计也适用于评论和退出操作,用户在发表评论后,评论就直接显示在图片下方了,不过实际上,这条评论内容还未传送到服务器上,真正地显示给他人。

optimistic-actions2

投票应用Polar也采用了类似的“欺诈”手段——当你创建一个投票页面后,它瞬间就展现在你的面前,不过实际上这只是一个本地效果而已,此后它才将数据传输到服务器端。

除了这种优先展示本地效果后进行服务器响应的欺骗性技巧外,Instagram还有一些功能上的设计:

  1. 在浏览器中,图片的加载顺序是从上之下的,或是按时间顺序加载的。而Instagram则选择了优先加载用户滑动至页面的图片。同时,他们还会判断哪些是更受欢迎的内容,进行优先加载。
  2. 我此前一直以为Instagram的图片是在点击上传后才开始上传的,但Mike Krieger透露,实际上在用户选择完滤镜后,选择地理位置,相关人物的过程中,Instagram就已经开始上传图片了。所以感觉到的Instagram上传速度要比实际快很多。当然,在中国又是另一种情形了。
  3. 如果是一个新用户,在注册Instagram时需要在注册页面停留一段时间,这时,Instagram就已经开始加载公共区的图片页面了,同样的做法也被用在用户打开Instagram后在其他页面操作时。

inline-instragram-speed-2_thumb

总结起来,需要网络服务的应用在设计时,不仅可以通过在内容加载过程中添加交互效果来让用户体验到流畅性,还可以采用优先显示本地效果后服务器响应或预判用户行为提前传输数据等欺骗性手段来给用户带来更好的体验。

订阅更多文章