必威体育Betway必威体育官网
当前位置:首页 > 运营推广

这个控件叫:Skeleton Screen/加载占位图

时间:2019-10-17 04:10:00来源:运营推广作者:seo实验室小编阅读:64次「手机版」
 

控件是什么

鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

Skeleton Screen(加载占位图)是近年流行的加载控件,通常表现形式是在界面上待加载区域填充灰色的占位图,与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。

facebook的Skeleton Screen

Skeleton Screen的由来

Launch Screen(启动屏幕

当你启动一个APP时,需要从手机存储器和网络加载所需的控件和多数据,由于手机性能和网络状况的差异,加载需要等待无法避免。

为了解决等待加载过程中出现白屏或者界面闪烁造成的割裂感,iOS规范中规定把界面控件框架的轮廓做成静态图片用于Launch Screen(在Google的Material design规范里被称作placeholder UI),把Launch Screen放在用户点击启动App之后和App真正正常启动完成之间做过渡,从而消灭白屏和界面闪烁,给用户一种App启动很快的错觉。(然而国内的App不遵循iOS规范,在Launch Screen里放广告,这又是另外一个商业话题了)

Launch Screen

非控件轮廓区域的内容变动很大,以上图浏览器为例,Launch Screen仅仅显示工具栏和地址栏,网页内容区域留下了大量空白,显然这不是最好的界面加载过渡方案

progress Indicator(进度指示器)

如果Launch Screen持续时间有点长,刚好用户又盯着Launch Screen大量空白的内容区域,可能会认为App出BUG了——虽然App后台正在辛劳的加载最新的数据。因此我们需要使用Progress Indicator来告知用户目前正在加载。

Progress Indicator分为Activity Indicator(活动指示器)和Progress Bar(进度条)两种,前者就是我们非常熟悉的“菊花转”。

Activity Indicator和Progress Bar

有了富含动效的Progress Indicator,用户就知道我们的App并没有出BUG,而是在辛勤的加载数据,再过不久就能正常的显示内容了。

Progress Indicator设计出发点是好的,但是带给用户的体验未必优秀。Progress Indicator的出现就意味着需要等待,当用户注意力集中在Progress Indicator时,就好像学生盯着下课前五分钟的钟表,滴答滴答,时间似乎变得更慢了。我们当然不愿意让用户望着Progress Indicator产生焦躁的情绪。

Skeleton Screen应运而生

如果我们能在加载前把内容的大概轮廓预先展现出来,然后再逐步的加载真正的内容,这样既用户一种内容正在逐渐加载即将呈现的期待,降低了焦躁情绪,又使得界面加载的过程变得更顺畅,感官上会觉得比其他加载方式更快。这就是Skeleton Screen!

Skeleton Screen与Activity Indicator对比

图片来源:https://disciullodesign.wordpress.com/2015/03/13/animation-and-the-user-experience/

Skeleton Screen这个概念最早出自Google产品总监,《Web表单设计》作者,Luke Wroblewski于2013年9月17日发表的博文《Mobile Design Details: Avoid The Spinner》里。(博文地址:http://www.lukew.com/ff/entry.asp?1797 )

目前国内有简书、领英、新浪微博头条文章页采用这个加载方案。国外有Facebook iOS版、medium、WordPress App、slack等产品采用。相信以后会有更多的App和网页会使用Skeleton Screen。

如何使用

适用于布局排版固定的内容区域

Skeleton Screen所展现的是内容的大概轮廓,如果内容布局和排版不是固定的,那么轮廓和内容布局的巨大差异,不仅不能给用户顺畅和期待感,反倒会造成落差。因此Skeleton Screen适用于布局排版固定的内容区域,例如列表、文章、个人信息。注意:如果内容区域有空页面的情况,也不建议使用Skeleton Screen。

建议配合其他加载技术一起使用

用户的网络环境是复杂的,如果加载持续时间很久,单凭Skeleton Screen起不到流畅过渡的效果,建议配合懒加载(先文字后图片)、逐条加载、预加载等技术,以达到更出色的体验。

相关阅读

这个控件叫:Text fields/输入框/文本框

相关阅读

BackgroundWorker控件,解决耗时操作与UI的分离

在 WinForms 或WPF中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面停止响应。解决的方法就是新开一个线程,

flutter控件Flexible和 Expanded的区别

Flexible和 Expanded的区别是: Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。 Flexible组件可以使Row、Column、F

WebBrowser控件的常用方法、属性和事件

1. 属性属性说明

Python 的一些练习(1)加载shapefile

pandas简介  Pandas是Python的一个结构化数据分析的利器。其中,DataFrame是比较常用的处理数据的对象,类似于一个数据库里的tabl

自定义控件中 wrap_content 属性无效的分析解决

问题 在自定义一个类似锁屏页面时间日期样式的控件,继承 View 的时候,发现在 xml 中使用 wrap_content 属性相当于使用了 match_par

分享到:

栏目导航

推荐阅读

热门阅读