UI设计中下拉刷新有什么讲究?

最早的下拉刷新 设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新 的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

最早的下拉刷新设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

UI设计中下拉刷新有什么讲究?

今天的文章我们来聊聊下拉刷新要注意的各种问题以及优化的技巧。

下拉刷新是怎么运行的

简而言之,下拉刷新是刷新指示器于下拉手势想结合的产物,同时借助下拉动效完善整个交互。

UI设计中下拉刷新有什么讲究?

下拉刷新本质上是一种特定的手动刷新交互,和其他的同类操作不同的地方在于它采用了更加直觉的下拉操作。它的交互足够清晰明显,不过有的时候设计师依然会使用刷新指示器来显示自动更新的内容。不过,由于自动刷新的机制不需要用户进行任何操作,是因此自动刷新最好还是不要使用刷新指示器了。

什么时候使用下拉刷新

滑动刷新(包括下拉刷新)非常适合于列表、栅格列表和卡片集合之类界面(按照时间降序排列)。这类界面通常会随着时间推移,优先展示最新的内容,并且通常不会采用自动更新来刷新内容。不采用自动刷新的机制的原因很简单,当你滚动到顶部的时候,如果采用自动刷新,内容会不断自动下载显示,对于用户而言,这样的自动显示的机制并不可控。而下拉刷新则很好的解决了这个问题,只有在你使用下拉手势的时候,触发刷新指示器,再行更新,这样也给了用户选择和退出的机会。常见的下拉刷新用例:

UI设计中下拉刷新有什么讲究?

  • 内容流(Twitter,微博,RSS)
  • 收件箱(电子邮件,短信)

以Twitter 为例,推文是按照时间顺序排列,最新的推文在顶部,当用户下拉刷新之后,能够看到最新更新的推文。

什么时候不适合下拉刷新

下拉刷新并非万能的,它有不适宜使用的场景:

  • 屏幕小插件。这类小插件是需要自动更新的。

UI设计中下拉刷新有什么讲究?

  • 地图应用。地图上的内容通常不会以时序排列,也没有明确的方向和内容来源,用户也无法直觉推断出下拉刷新的含义。

UI设计中下拉刷新有什么讲究?

  • 无序列表。有序列表通常能够给用户以下拉更新的期望,而无序列表在这方便则不明显,也无法直观地让用户看出其中的更新。
  • 低更新率的内容。如果列表中的内容并不经常更新,下拉刷新的手势几乎没有存在的意义,因为用户去刷新列表的机率很低,也没有太大的必要。
  • 按照时间先后顺序排列的内容。按照时间先后顺序排列的列表中,最新更新的内容排在最后,用户下拉刷新之后无法立刻看到最新更新的内容,这样列表使用下拉刷新就相当尴尬了。
  • 特殊类型的内容。许多需要实时更新的内容会在短短一分钟甚至更短的时间内失去时效,诸如股票、服务器后台进程之类的信息,最好使用实时自动更新。

如何设计刷新指示器的过渡效果

下拉刷新前后两种状态需要借助过渡动效连接到一起,让用户了解界面到底发生了什么改变。刷新指示器在两种状态过渡过程中一直存在,它一直保持可见,直到刷新完成,新的内容更新出来。

UI设计中下拉刷新有什么讲究?

值得注意的是,在刷新过程中,哪怕用户针对界面有所操作,刷新指示器也不能隐藏,否则它作为指示器的作用就失去意义了。

UI设计中下拉刷新有什么讲究?

下拉刷新 vs. 刷新按钮

许多设计师和开发者将下拉刷新视作为一种节省屏幕空间的方法,毕竟它无需像刷新按钮一样占据一个固定按钮的空间。但是它的问题也同样很明显,下拉刷新没有刷新按钮那么明显直观,实现起来也更加麻烦。

UI设计中下拉刷新有什么讲究?

刷新时长

当用户手指在屏幕上向下滑动,手势触发刷新指示器,以此为视觉反馈告知用户系统已经收到请求了。下拉刷新的交互设计很大程度上是想让用户明白发生了什么,并确保程序能够正常运行。当用户熟悉下拉刷新的操作和交互的结果之后,会逐步信任这种交互。刷新指示器会持续旋转,直到数据完全更新至可用,这样可以防止混乱。

UI设计中下拉刷新有什么讲究?

可用的动效

下拉刷新的过渡动效是一个非常适合发挥创意的地方。由于它是连接两个不同状态的中间态,过渡动效可用帮助用户理解屏幕上发生了什么,精准地理解两个不同UI状态之间的差别。

UI设计中下拉刷新有什么讲究?

结语

下拉刷新推动着UI中的内容的更新变化,提供反馈,给予通知,有时候甚至能够让界面更加富于娱乐,更有意思。

 

译文来自:优设

译者:@陈子木

原文地址:uxplanet

原文作者:Nick Babich

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

(0)
CatherineCatherine
上一篇 2017-05-16 21:39
下一篇 2017-05-16 23:24

相关推荐

  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 交互动画设计案例—1688首页动效

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在…

    2015-04-24
  • 响应式网页图片库设计的九个注意事项

    响应式设计 无疑是当前网页设计 领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网站中的图片库应当如何设计呢?

    2017-05-25
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • iOS 9 GUI PSD源文件下载&iOS 9 GUI Sketch 格式下载 (iPhone)

    iOS的9 GUI(iPhone) 在iOS中9的公开发行中GUI元素的Photoshop和Sketch模板。 [button type="success" text="PSD 格式下载" url="https://s3-us-west-1.amazonaws.com/facebookdesignresources/Facebook-iOS-9-Pho…

    2015-11-12
  • 关于“用户体验动效”的十二项原则

    前言关于“用户体验动效“的十二项原则,本文分为四部分来引入说明:1. “用户体验动效” 不等于 “界面动画”;2. 实时与非实时交互的区别;3.  动效的四种可用性提升方式;4. “用户体验动效”的十二项原则。1.  “用户体验动效”不等于“界面动画”在用户界面设计中,大部分动态的效果被设计师理解为“界面动画”,事实却并非如此。在介绍“用户体验动效”的十二项原则之前,我们先明确一下二者之间的不同。大部分设计师认为,“界面动画”是为了让用...

    2018-04-01
  • SKD独家 | 英国交互设计排名

    同学们自从上次🇺🇸美国交互设计的排名一出打算去英国🇬🇧的小伙伴纷纷表示出英国版的排名👌先以交互的分类来划分一下英国的院校:以HCI为主,偏技术研发的院校有:伦敦大学学院(UCL)Human Computer Interaction(Msc)巴斯大学(Bath)Human Computer Interaction(Msc)以UX为主,偏交互装置、技术应用院校有:伦敦传媒学院(LCC)Interaction Design Communica...

    2018-04-17
  • 【设计观点】如何从商业/产品/体验/视觉多角度构建设计形态?

    目标:现时代设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态。 资料:交互设计精粹,用户体验五线谱,集创思维矩阵-纯色。 分享:星夜Design 现时代的设计师不应只看到…

    2016-08-30
  • 2018年04月05招聘岗位

    招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,15750516333 13948455099促销员20名,要求:年龄20-40岁,时间15-20天,底薪(80一120),提成+提成工资多劳多得!加微信15849572346了解工作内容,今日下午3点面试掌上明珠全体员工欢迎你的到来!招聘电话:158495723468876688内蒙古泽强医药有限公司招聘职位及岗位需求:一、人力资源专员具体要求:1、年龄2...

    2018-04-09
  • 30个笑死人的设计【UXRen译#168】

    作者:ARMIN ZAHIROVIC   |  翻译:楠木,校审:天蛙   乔布斯曾经说过:设计不仅是看上去如何,感觉如何,而是用起来如何。 一般来说,我们喜欢展示伟大的设计,但其实从糟糕的设计中也可以学到很多。我们不认为St…

    交互专题 2017-08-07