[交互设计]帮助音信/操作的4个相互格局

去年我写过一篇文章返回功能应该怎么设计,今年反其道而行,来聊聊产品中的“前进”功能。

在后台型的系统中,因为复杂的交互和错综复杂的信息关联性,常常在一个核心任务流中需要插入辅助操作,或者展示重要的但不是主流程中必须要的辅助信息。那么下面介绍四种常用到的关于处理辅助操作和展示辅助信息的交互模式。

渐进式渲染

前端工程师关注网页性能,关于网页渐进式加载;就是说,我们想要浏览器尽可能地显示内容。这个非常重要,尤其是在慢速网络条件下用户访问大量内容的网页。及时地给用户一些视觉反馈是极好的,就像进度指示器。
HTML页面就是一个进度指示器。当浏览器逐步加载页面,页头,导航条,顶部logo等等,都作为视觉反馈于等待页面的用户,这提高了整体的用户体验。

图片 1

一、气泡

在页面中很快地给用户提供轻量级的信息和操作

轻量级的,一般在页面中,有少量信息由于空间的原因,或者为了信息的简洁清晰,采取部分展示,隐藏冗余信息的做法;还有一些使用场景是为了隐藏必要的但是非重要的辅助信息;也常常用在对一个操作或者元素的简短解释。

通过鼠标移到特定的区域,或者点击该区域,从而触发相关的信息展示或操作。此方式仅限于非常少量的信息展示,以及非常简单的交互操作。

把样式放在页面底部

如果把样式放在页面底部,根据你的浏览器和你如何加载页面的方式,会有两种不同的副作用,一个是白屏,另一个是无样式内容css闪烁

关于“前进”,我们很难给出一个准确的定义。狭义上的“前进”指的是用户触发某个交互动作进入一个新页面。如何在进入一个新页面的过程中给予用户良好的体验呢?

二、对话框

指引用户操作,展示少量的细节详情,进行比较轻量级的操作

在后台型的系统中,对话框被使用的频率非常高。原因是因为对话框用户触发和关闭的成本较低,没有上下文/前后页面切换和加载的成本,不会让你觉得进入了一个新的页面。用户可以在一个页面的大量条目中,快速来回切换查看多个条目的详细信息,从而减少因为新开页面或跳转至其他地方带来的适应成本。

然而在弹出框中,一般不建议有复杂的交互以及大信息量展示。同时避免在一个弹出框中,又出现一个弹层。

白屏

当浏览器加载了所有的部件,它等待页面底部不必要的style样式也下载完才开始渲染他们,styles样式并不会影响下载时间,但是它影响渲染的开始时间。

我们可以从以下三个方面进行分析:指示器、方向和顺序。

三、抽屉式弹层

介于弹出框与新开页面之间的一个过渡方式

作为普通对话框的一个扩展形式,可视区相对普通对话框更大,可以承载比弹出框更多信息的展示以及更加复杂的操作,而相对新开一个页面来得轻量和低成本。

无样式内容闪烁

对于样式放页面底部的情况,另一些浏览器的行为并不会造成白屏,而是无样式内容闪烁。当在底部的styles样式下载完成之前,浏览器并不会等待样式下载完,就去渲染展示内容,页面首先加载无样式的页面内容,最后当样式下载完成并解析,浏览器会重新渲染页面,这就引起了无样式内容闪烁现象;

图片 2

四、独立页面

承载任何复杂的交互和最大量的信息,更加专注于当下

在后台型产品中,「使用效率」在交互中被放置在一个很重要的位置。我们常常为了效率,恨不得把所有信息和复杂操作都通过弹窗来实现,因为触发成本低,避免用户在产品使用中在多页面中来回切换。

然而,如果一个交互太复杂,需要许多步才能完成,并且操作比较重要和谨慎,那么它需要一个足以承载它复杂程度的页面来显示。因为用户需要在这个场景下停留时间很久,弹框的轻量级的特性反而会让用户有不安全感,并且用户容易误操作使得任务中断,而一个普通的页面反而更能让用户专注在当前。

因此我们不必排斥通过新页面来作为辅助手段,当用户没有明确的需求要在多个事项中频繁查看或来回跳转时,那么新开一个页面用来展示明细,让用户更加专注于当前的操作,会是一个不错的选择。

前端工程师需要做什么

把与页面渲染相关的styles放到页面顶部(head头中),把渲染无关的styles,等页面加载渲染完,再做些努力动态加载他们

指示器

用户每次进入一个新页面都要从后台请求数据,数据返回到页面完成渲染,内容才会展示出来。这个过程需要时间,需要用户去等待。指示器的作用就是填补用户等待的时间,减少用户因等待而产生的焦虑情绪。

  1. 告诉用户系统当前的状态

防止用户焦虑首先我们要告诉用户页面加载的过程正在进行。如果我们不提示用户,那么用户看到的就是一尘不变的白屏。就像下图的酷我音乐一样,用户点击进入“直播页”,没有任何元素提示用户页面内容正在加载中。一旦你不知道自己所等待的流程是否正在进行,那么等待就是漫无目的的,焦虑情绪也会产生。

图片 3

作为对比我们可以看一下飞猪的处理方式,这里使用了一个loading动效弹框告诉了用户页面正在加载中。及时告诉用户系统当前的状态可以很好的起到安抚用户的作用。

图片 4

  1. 品牌基因植入

指示器的样式并没有特殊的要求,虽然大部分的产品使用的都是上面所提到的loading弹框,但是指示器样式和载体并不只限于此。我们可以选择进度条,也可以将loading的动效放到标题栏。

图片 5

如果我们更进一步,可以将品牌基因植入指示器的设计中。还是以飞猪的loading动效为例,这里采用了飞猪logo的形状。当然选择传统的菊花动效同样可以,但是这个无法体现产品之间的差异性。

指示器在产品中出现的场景会很多,我们可以花点心思,做的尽量精致一点。很多产品都选择通过一些有趣的动效分散用户在等待过程中的注意力。

图片 6

方向