#动效#下拉刷新趋势分析

作者: 交互同学 | 来源:发表于2017-11-19 19:36 被阅读299次

下拉刷新是什么?

       第一步,下拉,显示“提示头部界面”,这个过程提示用户“下拉刷新”;第二步,下拉到一定距离,我们认为达到了刷新的条件,提示用户可以“松手刷新”了,效果上允许用户继续下拉;第三步,用户松手,先回弹到“提示头部界面”,然后提示用户“正在加载”;第四步,加载成功。

来看看,设计师需要在这个过程中做什么?

       下拉刷新具有短时性和等待性这两大明显特征,而等待容易使用户形成一种偏负面的使用预期,我们需要降低等待的焦虑并在短时间内留个好印象。

2017年,大家都交出了怎样的成绩?

       随着交互设计的发展和移动设备性能的不断提升,动效已经成为凸显品牌、讲述故事、拉近情感、提高操作流畅性等必不可少的方式。

       先来一批升华自家图标的。

链家 微云 UC头条

        和颜色填充,形状补间相比较,一匹正在努力奔跑没有停顿的梅花鹿,就卓尔不群了。

        接下来看一组自家吉祥物的。

闲鱼 IN 美团

        小动画基本采用了吉祥物的负情绪来代替“松手刷新”,良好情绪替代“正在刷新”和“刷新成功”。其中,闲鱼的文字提醒弱化了动画表达,IN没有完整诠释“正在刷新”,美团的表现和吃喝玩乐的产品需求统一。

        还有更会玩的吗?一组喊口号的,敬请欣赏。

陆金所 网易云音乐01 网易云音乐02 网易严选 京东 携程

        陆金所和网易云音乐直指质感,前者稳重的传达了安全感,后者在不可刷新的首页留言,可刷新页面留下音符,体贴用户且和谐统一。电商网站猜用户所想,购物所需的简单快捷性价比,抓住一个点,就塑造了品牌。其中网易严选贡献了解决留白过多的好思路。携程是想要的太多,logo,提示语,口号满当当的挤在一起,忽略了此处设计的短时性。

       还有些另辟蹊径的。

今日头条 58同城

      今日头条记得自己的始源,纸媒;也记得这个动效的始源,更新页面内容。强提示“今日头条推荐引擎有8条更新”是非常好的思路,不过也和携程一样忽视了短时性,字数过多。笔者合理预测,最终这些内容产品会像今天的知乎一样,刷新提示下至,提示动态。58同城紧扣“同城”二字,为每一个城市的地标做了相似动效,更神的是有白昼之别,既然现在大家都认可,有钱赞助综艺说明厂商厉害,那么有心情搞这么个隐蔽的动效,是不是说明产品发展好呢?不管怎么说,这些“占小便宜吃大亏哟~”会让用户增加好感的。

       内容产品刷新下至,电商产品及其它会不会有新风貌呢?

淘宝 大众点评

       用户习惯已经培养好了,下拉刷新并赠送一张优惠卷也从惊喜变成了日常。一个日常的空间意味着能装下更多的内容,淘宝二楼放电影,微博二楼讲故事,用户和设计师一起成就了产品的更多可能性。

       综合以上分析,对于下拉刷新来讲,基本设计元素对用户注意力的吸引程度,动态最高,其次是颜色,最后是形状。其中又以展示产品调性的为上品。尽管动效设计受制于界面布局,交互逻辑,内容运营等,下拉刷新比较短暂且非主要界面,但二者的融合设计值得关注和探索,从细节上挖掘产品品质对用户体验的诉求。

相关文章

  • #动效#下拉刷新趋势分析

    下拉刷新是什么? 第一步,下拉,显示“提示头部界面”,这个过程提示用户“下拉刷新”;第二步,下拉到一定距离,...

  • APP动效设计

    什么是动效 动效,在APP中比较常见了,简单的如加载loading,列表下拉刷新,复杂的如应用删除时图标闪动(苹果...

  • React Native 实现 App Store Today页

    React Native 动效系列 卡片动感光效 九宫格抽奖 自定义下拉刷新动画 欢迎大家Star我们的仓库rea...

  • 丁香医生App下拉刷新的“小科普”

    日常应用App的下拉刷新,一般以动效图标的形式展示,有些是一个旋转的小圆圈,有些是以产品logo或者ip动效展示,...

  • swift:ScrollRefresh-基于MJRefresh的

    实现效果 目录结构 用法 创建普通的箭头下拉刷新 创建自定义gif动图下拉刷新 创建普通上拉加载 自定义gif动图...

  • ListView 实现下拉刷新

    ListView 实现下拉刷新ListView 实现上拉加载 我们先分析一下如何实现 ListView 下拉刷新。...

  • Flutter 实现上拉加载更多、下拉刷新

    参考:ListView下拉刷新与加载更多 文章目录 相关文章推荐 实现效果 实现分析下拉刷新上拉加载更多 源码 相...

  • 近两年的设计趋势

    1.1 动效设计和动画设计 我认为动效设计会是主要趋势,因为在几乎所有的设计领域都能用到动效,从微动效到Logo和...

  • MJRefresh下拉刷新上拉加载自定义

    下拉刷新 下拉刷新 默认 下拉刷新 动画图片 JRGifHeader.h JRGifHeader.m 下拉刷新 隐...

  • MJRefresh用法详解

    下拉刷新01-默认 下拉刷新02-动画图片 下拉刷新04-隐藏状态和时间 下拉刷新05-自定义文字 下拉刷新06-...

网友评论

    本文标题:#动效#下拉刷新趋势分析

    本文链接:https://www.haomeiwen.com/subject/wwfpvxtx.html