旗下产业: A产业/ A实习/ A计划
全国统一咨询热线:010-5367 2995
首页 > 热门文章 > UI设计 > UI设计中下拉刷新设计使用技巧

UI设计中下拉刷新设计使用技巧

时间:2020-07-31来源:www.aaa-cg.com.cn点击量:作者:Sissi
时间:2020-07-31点击量:作者:Sissi



  UI设计创新技能层出不穷,UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,今天AAA教育小编就针对UI设计中下拉刷新设计使用技巧进行简单的说明。
 

  最早的下拉刷新设计源自于一款应用的设计,现在下拉刷新在人们的生活中无处不在。但即便如此也让人无法轻易忽视它带来的快感。从QQ到微博,它几乎存在于你触手可及的每一个应用当中。
 

UI设计

 

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

  下拉刷新是怎么运营的
 

  说白了,下拉刷新就是刷新指示器于下拉手势相结合的产物,同时借助下拉动效完善整个交互。

UI设计
 

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

  什么时候使用下拉刷新
 

  滑动刷新非常适合列表、卡片类的界面。这种界面通常会因为时间的变化,最先展示最新的内容,并且通常不会采用自动刷新来刷新内容。不采用自动刷新的机智的原因很简单,当你滚动到顶部的时候,如果采用自动刷新,内容会不断自动下载,对于用户而言,这样的自动显示的机制并不可控。而下拉刷新则是很好的解决了这个问题,只要在你使用下拉收拾的时候,触发刷新指示器,在进行更新,这样也给了用户选择和退出的机会。
 

UI设计

 

  什么时候不适合下拉刷新
 

  下拉刷新并非是万能的,它也有不适合用的时候;
 

  屏幕小插件,这种小插件是需要自动跟新的。
 

UI设计

 

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

UI设计
 

  低更新率的内容,如果列表中的内容并不经常更新,下拉刷新的手势几乎没有存在的意义,因为用户去刷新的几率很低,没有太大的必要。
 

  按照时间的先后顺序排列的内容。按照时间先后顺序排列的列中中,最新更新的内容排在最后,用户下拉刷新之后无法立刻看到最新跟新的内容,这样列表使用下拉刷洗就相当尴尬了。
 

  特殊类型的内容。许多需要实时更新的内容会在短短一分钟内甚至更短的时间失去时效,比如股票、服务器后台进程之类的信息,最好使用实时自动更新。
 

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

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

UI设计
 

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

  下拉刷新VS下拉按钮
 

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

UI设计
 

  可用的动效
 

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

UI设计
 

  总结
 

  下拉刷新推动着UI中的内容的更新变化,有时候甚至能够让界面更加富于娱乐,更有意思,增加了更多的趣味性。
 

  因此,您现在已经了解了与UI设计师的工作相关的主要及技能。我之前也分享过《零基础小白怎么学习UI设计》和《从小白到ui设计大咖进阶指南》等文章,如果您想了解更多的信息,可以持续关注AAA教育网站,包含有关在该领域工作的更多相关文章,也可以联系在线客服领取免费的视频课程。


 

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可先就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可推荐就业!

©2007-2021/北京漫动者教育科技有限公司版权所有
备案号:京ICP备12034770号

©2007-2022/ www.aaa-cg.com.cn 北京漫动者数字科技有限公司 备案号: 京ICP备12034770号 监督电话:010-53672995 邮箱:bjaaa@aaaedu.cc

京公网安备 11010802035704号

网站地图