数据交互的常见方式及案例

交互设计师作为整个项目贯穿始终的一根线,除了有自身对需求的理解把控以及对页面布局的拿捏以外,充分吸取各种不同的思维方式,才能让我们在打怪升级的路上越走越远。


交互设计师作为整个项目贯穿始终的一根线,除了有自身对需求的理解把控以及对页面布局的拿捏以外,充分吸取各种不同的思维方式,才能让我们在打怪升级的路上越走越远。

数据交互的常见方式及案例

特别是新人设计师,有没有这样的感觉,在有技术同学加入的交互评审中,常会被问及一些原来没有思考全面的细枝末节以及极端情况处理方案,比如“这个列表一次加载多少条?”“如果同时有2个用户在争夺最后一个名额该怎样处理?”等等。

技术大大们的思维普遍缜密,因为他们是最终实现一切数据交互的执行者。而作为交互设计师,我们很容易只注重产品需求和界面布局这些展现在用户眼前的有形的内容,而由于数据交互而引发的一些问题就容易被忽略。

什么是数据交互

目前,除了一些特别简单非联网类应用(比如计算器、闹钟等),几乎所有的应用都是联网应用,而其app客户端基本都只是负责用户的交互与数据收集与展示,真正的数据和服务均存储在云端。

数据交互的常见方式及案例

客户端数据交互原理示意

如图所示,在设计具体方案时,我们会更多的注重用户和客户端本身的交互,至于客户端和后端的交互则容易被认为是只需要技术去解决的问题。

确实数据交互是技术问题,但如果作为交互设计师能有意识的在方案中思考这些问题,能够帮助我们使方案更符合技术实现的需求,体验更流畅。

数据交互在app页面中的直接体现既是页面内容的加载方式,下面我们来了解一下主要的几种数据加载方式:

1. 整页加载

数据交互的常见方式及案例

整页加载 数据交互示意

整页加载很好理解,就是在加载一个页面时,客户端发送一个请求,服务器返回一次数据,其特点就是一次性加载完全部数据再显示。常运用于一些H5活动页面、游戏、简单网页

数据交互的常见方式及案例

整页加载案例

整页加载失败时,常见的处理方式有以下几种:

数据交互的常见方式及案例

案例1 弹窗

以弹窗方式来提示用户数据交互的错误,因为需要用户点击操作才能关闭,所以重点在于让用户明确的知道页面加载失败的原因,比如因为用户操作不妥而导致的取不到数据等。

数据交互的常见方式及案例

案例2 toast

虽然用toast形式做整页加载失败的回应方式是可行的,但是笔者认为最好应用在页面还有其他内容可操作的情况下的轻量提醒更合适,因为比如右图所示,toast提示停留时间短暂,消失后面对空荡荡的页面,用户会不知所措。

数据交互的常见方式及案例

案例3 页面提示

在页面上直接显示无数据展示的原因以及解决办法是很提倡的处理方案,优点无需赘述。

2. 分区域加载

数据交互的常见方式及案例

分区域加载 数据交互示意

分区域加载即把需要加载的内容分成不同线程同时向后端发送请求,后端也分不同线程同时/依次返回数据。

其特点是能逐步展示内容,在这个渐进的过程中降低用户的焦虑心理

同时模块间可以有关联性,先加载父内容,再加载子内容。我们来看看以下案例的处理:

数据交互的常见方式及案例

案例1

方案1的两个案例都是优先加载格式和文本等信息,消耗大且不影响页面基本功能的图片信息次要加载。

数据交互的常见方式及案例

案例2

通过方案2我们能看到对于页面内容加载更细致的处理过程:格式——文本和占位图——图片,每一个阶段的处理都赏心悦目,丝毫没有反感。

数据交互的常见方式及案例

案例3

方案3同样也是逐步加载,但是首先加载出的格式可以让用户对页面即将呈现的内容有初步了解,也是增加美感,降低焦虑的一种方式。

数据交互的常见方式及案例

案例4

前文提到过模块间的关联性,我们可以通过案例4清晰的看到数据展示上被设计过的加载顺序:首先是格式,然后是用户发布的内容,其次是用户信息。

借助以上案例对分区域加载方式的理解和启发,在页面内容的呈现上有很多细节值得我们去更多的推敲。我们也可以主动和技术商讨加载方案,以得到更好的体验。

3. 自动加载

数据交互的常见方式及案例

自动加载 数据交互示意

自动加载并不是后台自动的传输数据,实质上也是用户的一些行为触发客户端给后端发送请求。通常运用于2种场景:

  1. 频繁更新的内容、有时效性的内容
  2. 相对稳定,数据不会经常变化的页面

数据交互的常见方式及案例

案例1

最简单的案例就是例如推特这样,上滑页面看到一定位置的时候,自动提前加载后续内容。

数据交互的常见方式及案例

案例2

数据交互的常见方式及案例

案例3

另外,例如开眼精选、Hyper等内容稳定的页面,在进入时,或者有数据更新时,也会采用自动加载。

4. 智能加载

数据交互的常见方式及案例

智能加载 数据交互示意

智能加载的特点在于预加载,通过用户的某个行为,或者已有的通用数据分析来预测用户行为,并提前加载。这一点显然是产品和数据挖掘的大大们需要研究的事情。作为交互能利用智能加载的另一个特点,就是根据不同网络条件下载展示不同素材。

数据交互的常见方式及案例

案例1

例如Pinterest从列表页点击进入正文页的过渡动画,是将列表的小图直接拉大成大图,如果网络环境优,则会进一步加载大图并展示,如果网络环境欠佳,则保持用小图拉大的低质量图,以此节省资源。

数据交互的常见方式及案例

案例2

如案例2所示,在Pinterest查看图片详情时,也会根据加载状况先显示低质图,等加载完毕后用高质量图替代,如此既保证了页面功能的完整性,体验上也不会有明显的跳动。

数据交互的常见方式及案例

案例3

同样处理的如此细致的还有Mars,页面跳转很流畅,但是仔细观察会发现处于不同阶段的3张图,图片的质量是递进的。

以上,为大家浅略的解读了一下数据交互的常见方式及案例。作为交互设计师,在实际工作中并不需要对技术知识了解的多么深入,但是如果我们能够知道技术在实现时的基础原理,那么在实际方案中就能考虑的更加细致和全面,并且更加符合技术实现时的实际情况,能尽量避免交互方案与技术方案的冲突。

其实,不仅是对于技术环节,包括在与产品和视觉,每一个角色都有着自己不同的思维方式,正因为这些不同才能一步步将一个个缥缈的概念落为现实,到达用户手中。交互设计师作为整个项目贯穿始终的一根线,除了有自身对需求的理解把控以及对页面布局的拿捏以外,充分吸取各种不同的思维方式,才能让我们在打怪升级的路上越走越远。

 

作者:杰克蝶

来源:微信公众号【ME网易移动设计】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24127/

(0)
CatherineCatherine
上一篇 2017-05-07 12:48
下一篇 2017-05-07 14:46

相关推荐

  • 设计一个界面动效时,需要明确价值、遵循原则和实现交付

    坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践,对动效设计的价值、原则和实现交付开始有了更多的了解,在本文中浅薄地总结一下。

    2017-05-12
  • 『真实』两个女设计师:一个互联网新手,一个30岁面临艰难选择

    编辑:我是UE网-@Tina爱学习  责任校对:@Tina爱学习 两个真实的经验送给互联网从业的设计师。 NANA 女 产品设计师  今年三十岁 传统软件企业 图片来自:unsplash 前几天Tina问我:好久不见,最近在忙什么?我说:…

    2015-06-02
  • 2018年交互设计和用户体验设计趋势合集

    来源:沪江用户体验中心&Nick Babich,翻译丨优设陈子木设计和体验从未像现在这么重要。在过去的10年当中,设计不断适应着用户的新需求,发生了翻天覆地的变化。虽然我们不大可能预测太远的未来,但是我们仍然可以对明年的设计趋势有一个基本的猜测。今天的文章,我们将会探讨2018年影响用户体验设计领域走向的10个关键性的设计趋势,这些趋势甚至可能会持续几年。1、专注内容的体验设计近年来,设计师越来越倾向于采用极简和扁平化的设计,这种设计策...

    2018-02-06
  • 设计师设计出来的一个日本县长靠卖萌年赚12亿美元

    导读:一个县长靠卖萌年赚12亿美元,关键TA还是被设计师们设计出来的。。 ​ 说到这里后,小编又想起了未曾如约露面的那个春晚吉祥物康康(网友称猴赛雷)了。。。 ============================= IAMUE(https://ww…

    2016-02-18
  • Coding Nap:迭代式体感交互设计分享

    CodingNap是为程序员设计的一款办公室睡眠闹钟。程序员是一个不分昼夜工作的群体,十分需要短暂而高质量的睡眠。当程序员十分疲惫需要休息时,按下Coding Nap的按钮,它便为程序员设定了9分钟的睡眠之旅。同时Codin…

    2015-11-18
  • Apple Watch超细致的硬件交互设计?什么!硬件还有交互设计?

    阿西导读:交互设计在任何有与人产生交互的设备|系统中,人机交互的范围很广,但交互设计的目的是为了提升整体的用户体验. 冷锻不锈钢,炼就强韧与魅力。 产品的用途,决定产品所用的材质。Apple Watch 设计的初衷是为…

    2015-01-26
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • 使用 Sketch 3.9 快速实现响应式设计

    Sketch3.9 终于发布了原生的响应式设计解决方案。只需要设置一个属性,便可以快速实现任意尺寸的适配。 昨天晚上,Sketch发布了3.9beta版 http://www.sketchapp.com/beta/ 其中更新的一个非常重要的功能,就是是可…

    2016-06-27
  • APP UI动效设计中六个基本原则与最高原则

    app动效设计,现在已是各位APP设计师学习和临摹的方向。大家也会收集一些好看的APP动效设计作品。学习app动效设计,不是盲目的让界面动起来那么简单,一定不能滥用。要学会克制。

    2017-05-14
  • 你以为的交互,其实都有所出入

    任何职业的学习都是没有尽头的,只有越学越多,才能提高你的竞争力。多学各种知识才是王道。

    2017-05-21