国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

页面加载功能设计总结

发布时间:2019/06/29标签:   项目总结      设计原则    点击量:

原标题: 页面加载功能设计总结

去年我写过一篇文章返回功能应该怎么设计,ui设计扁平化,今年反其道而行,来聊聊产品中的“前进”功能。关于“前进”,我们很难给出一个准确的定义。狭义上的“前进”指的是用户触发某个交互动作进入一个新页面。如何在进入一个新页面的过程中给予用户良好的体验呢?我们可以从以下三个方面进行分析:指示器、方向顺序

指示器

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

Image title

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

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

Image title

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

Image title

2) 品牌基因植入

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

Image title

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

Image title

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

Image title

方向

页面在水平方向上跳转目前来说依然是主流,分为左右平移覆盖平移两种。

Image title

当然不管是哪种,“从右到左”的页面跳转方式大行其道的原因是它这符合用户对于一个线性操作流程的的直观感受。

Image title

目前也有很多产品选择在竖直方向上加载页面,以从下往上居多。那么竖直方向和水平方向的区别在哪呢?这个在上面也提到过,水平方向的页面流符合用户对于操作流程的直观感受。例如,在购买火车票流程,用户的主流程是:选择车次-选择座位等级-填写订单-付款-订票结果。对于这样的主流程,我们选择从左到右的页面流,而新增乘车人信息我们可以看成是这个主流程中的一个支流,从底部弹出更加合适。

交互设计一定要符合用户的心理认知。如果这个页面从底部弹出,会给用户一个暗示:这个页面是底部弹出的,那么我下拉是否就可以关闭这个页面呢?还是以“新增乘车人”页面为例,这里还是秉持着iOS右滑返回的机制。这个就造成了一个“手指向右,页面向下”的奇葩交互样式,明显有悖于用户的认知。当然也有处理很好的,可以看下网易云音乐歌曲评论页,点击返回按钮页面是向下关闭的,手指右滑页面是右滑关闭的,做了区分

Image title

有用户觉得手指右滑返回上一界面非常的方便。

向右返回上一个页面的确很方便,但是页面向下不合理。

版权信息Copyright ? IT技术教程 版权所有??? ICP备案编号:鲁ICP备09013610号