写作方法

Hi, 请登录

加载(Loading)页设计技巧

对于加载(loading),想必大家都不陌生。每当看到加载页中那个不停转啊转的圈圈,或者是 “Loading…”后面不停闪动的三个点点,心里都会涌起各种焦躁反感。

loading1 加载(Loading)页设计技巧

根据一份调查得出,用户能够忍受加载的最长时间在:6到8秒。8秒是一个临界值,如果加载时间在8秒以上,大部分访问者最终会选择放弃,除非他一定要打开那个页面。

loading2 加载(Loading)页设计技巧

以上三种是常见的loading方式,如果是我,我更希望看到第三种的进度条,因为我实在不知道第一个圈圈要转多久才能算加载成功,也不知道第二个点点要点到猴年马月。

手机着陆页排版多大_ps着陆页排版需要多大_着陆页排版

如果这个时候,界面除了看到“加载”以外的东西,是否就能转移用户的注意力呢?我们在看视屏前,视屏都会缓冲,在这时个候总是会放一段广告。每次我 都会忍耐加载时的广告,但是如果广告做的很棒,很吸引人,就一点都不烦躁了,甚至还能在评论里看到求加载广告的地址。网页的loading就承担了加载广 告的作用。

loading3 加载(Loading)页设计技巧

在页面局部加载时常能看到第一个圈圈的身影,不过每次看到这个圈圈都差不多,如果换一种转圈的形式,也许会觉得“这个圈圈跟别的好像不太一样”,通过好奇减少等待的焦躁。

手机着陆页排版多大_ps着陆页排版需要多大_着陆页排版

loading4 加载(Loading)页设计技巧

减少用户的焦虑,可以给个允诺,示意他们还要加载多久,告诉现在的进度(有个进程百分比),算给一个定心丸。例如以下的方式:

loading5 加载(Loading)页设计技巧

ps着陆页排版需要多大_着陆页排版_手机着陆页排版多大

其中上图最下面一种进度条又有不同的设计:

loading6 加载(Loading)页设计技巧

上面两种确定性进度条虽然都提示了现在的进程,但它们的差别是,第一种的进度条内容是纯色,第二种进度条内容有动画效果着陆页排版,如果这个进度条再某点上突 然停住了,这时候会给用户造成困扰,到底是卡死了还是这段的加载比较慢呢?如果是下一种进度条就一目了然,如果卡死,那动画效果就没了,如果依然有动画效 果,那就说明只是这一段加载比较缓慢。

手机着陆页排版多大_着陆页排版_ps着陆页排版需要多大

如果进度条再进行一些变形,不仅告诉了用户现在的加载进程,还别有一种欣赏的意味:

loading7 加载(Loading)页设计技巧

除了进度条变形外,还可以从文案或图片下手,这种形式的加载非但没给用户带来烦躁的感觉,反而觉得这个加载有一种特别的气质,不仅加深了印象,更带来了好感。

ps着陆页排版需要多大_着陆页排版_手机着陆页排版多大

试看结束,如继续查看请付费↓↓↓↓
打赏0.5元才能查看本内容,立即打赏

来源【写作训练营】自媒体,更多内容/合作请关注「辉声辉语」公众号,送10G营销资料!

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站不拥有所有权,不承担相关法律责任。如发现有侵权/违规的内容, 联系邮箱jkhui22@126.com,本站将立刻删除。

相关推荐

评论

  • 昵称 (必填)
  • 邮箱
  • 网址
二维码
评论