赞助商
立即赞助

5000字,超详细总结App加载设计

UI设计3年前 (2021)更新 流光
2.1K 0 0

章梳了 APP 载的一些场景,并给了相应场景的解决方法,一起来习。

文的大纲图:

5000字,超详细总结App加载设计

一、认识加载

1. 什么加载

用户客户端发出一指令后,直到客户端出反馈结果时,这段时间内算机完的一系列执行动作,可能包括客户端发出请求,服务器出响应,客户端拿到数据后算,渲染,当我们点击应用图标后,软件需将文件或者数据从 Rom 读取到 Ram,这也一加载过程。

2. 加载什么用

加载电脑接收到用户的指令然后实用户的目标所必须历的一过程,如果加载的话,算机就无法实用户的目标。

3. 加载的问题

些加载过程的时间可能会比较,甚至用户不知道此时应用卡死了还执行命令,这样就会导致用户体验降低,用户会对应用失去耐。

二、如何解决加载带来的问题

1. 梳理 App 中有哪些加载场景

要针 App 内加载场景带来问题进设计,首先肯定是先罗列出我们 App 有哪些加载场景,然后针不加载场景选取应法进设计。

下面罗列了不同 App 中常出的一些加载场景,其实我们自己设的 App 中部分加载场景也就这些,当然不同的 App 况也不完全一样,还需我们针对不同的 App 去梳理的。那么我们如何梳理呢?将那些发出指令后应用需时间处理的加载过程都罗列出,简单就把那些慢的方都找出。

常见的加载场景:

  • 应用启动
  • 登录注册
  • 传,下载
  • 载大量图片字的情况,图片列表等
  • 下拉刷新
  • 上拉加载数据
  • 赞
  • 入新页面
  • 手机付款
2. 采取对应的解决办法

梳理完了 App 加载场景后,接下来我们针不加载场景采取应解决办法即可,这里为什么是应解决办法呢?为接下来要讲解决办法也不是你想怎么用怎么用,我们要根据情况来选择。

第个办法:选用加载策略

下是些常见加载策略,我们可以针不加载场景,选用合适加载策略。

分步加载:

优先加载占网络资较小元素。如先文和默认图标后图片,图片加载完成前使用占位符显示。

懒加载(又称为延迟加载):

在网页,常常需要用到图片,而图片需要消耗较大流量。正常情况下,浏览会解析个HTML代码,然后从上到下依加载<img src=」xxx」>图片标签。如页很长,隐藏在页下图片其实已经被浏览加载了。如用户不下滚动页,没有看到这些图片,相于白白浪费了图片流量,不仅浪费了流量,速度也很慢。

但,淘宝、京东这些流非常巨的电商,商品介绍页又必须的图片,因此,这些页面的图片都「按需加载」,即用户滚动页面时显示出的时候加载图片。当网速非常的时候,用户并不能感知懒加载的动作,既省流又不影响用户浏览。

预加载:

通常应用信息流中。比如搜索结果页,也就我们常看到的列表视图。当我们「将滑到」页面底部时,页面自动请求数据,加载出下一页。所以一般浏览下图这种列表时,感觉非常流畅。因页面行了预加载。

预载是贴心的小棉袄,会揣摩户的心思,偷偷前做准备。户在看 A 页面时,客户端就在准备户可会看的 B 页面,户需要时,立刻给他,然后准备 C 页面,给户供无缝链接的感觉,代就是务端、客户端都累的够呛,耗户更多的流量。

懒加载和预加载像是相反的策略,我们到底用哪个呢?果用户需要看的列表中图很,文字少,种情况我们能使用懒加载比;果用户要看的页面并不需要花费太流量,我们预加载能就一点,或者在 wifi 下使用预加载,在 4g 网络时使用懒加载。

智能加载:

根据不同的网络状况来加载不同的数据

  • 在 WIFI 条件:优先载质量图片、优质音乐和视频。
  • 在 4G 条件下:下载行为自动终止,优先加载普通甚至停止加载图或音乐视频。
  • 在网络不通畅:默认加载低质量甚至停止加载图片或音视频。

渐进载:

我们在 PC 端浏览器看图片的时候,经是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤见,这种效果就叫做渐进式载,渐进式载够大大的升体验感。

后台载:

户在操作后,客户端立刻反馈操作成功,然后把请求放到后台与务器交互,这一过程户需要了解,需要等待,在正情况体验是非棒的。

但是在极端情况下出现一莫名其妙的状况,由是台录请求并与服务器互,所以际请求是否成功客户端是不说明的,部以操成功来显示,就导致用户误以为操成功,但际上下次来看现没有成功。

所以这种加载方式是需要根据体使用景来权衡使用的,对于一些重要的操作,建议还是使用模的方式加载,对于一些操作,如点赞、订阅、关注,可采用后加载的方式。

结

这些加载策略能在大程度上提高用户的体验,但是可以,这些加载策略除了后加载外,其的加载策略基本都是针对图片文字的加载,也就是对应于刚才列举的众多加载景中的加载大量文字图片和进入新页面这个景,因此可以出,这些加载策略能解决的加载景是比较有限的,不过这些加载景也是在应用中最频繁遇的加载景。

第二个法:提示

除了第一个法外还能做点什呢?不能加快加载速度的话,就不管了吗?显然不是,其实用户对于应用中理的加载比较慢的过程是可以理解的,因为多操作本来就需要一定的间,你要下载一个大的视频,目前还不备一下就下载好这的术,其次多加载过程慢不是应用的错,也许是用户的机卡,也许是用户的网络慢。

是我们在设计应用时也可以帮用户分担这些忧虑,尽量用户好体验,那么我们应该在这些加载过程比较慢地加入合理提示,让用户心里有数,而不是误以为手卡死了,或者应用失灵了。这些合理提示于用户体验提高是显而易见,接下来让我们看看应该如何提示用户。

提示类型:断用户操作

在有些加载场景下,我们需要断用户其他操作,用户能等待加载场景结束,为如用户执了其他操作会打断正在进加载过程,实现不了用户目标,用户新加载,那么我们如何知哪些加载场景是需要断用户操作,哪些又是不需要呢?

一般需中断用户操作的加载过程主两种况:

  • 用户接下来操作与这步操作密切相关,如这步操作未执成功则接下来操作也不能进。比如登录,退出,应用启动,手支付等,这场景确定需要我们结合具体应用功能和业务场景来确定。
  • 用户执行的操作本身不能其他操作同时行,不知道家用过微信迁移聊天记录的功能,迁移聊天记录的过程中,应用提示「请始终保持微信屏幕显示」,这时如果我们了其他事,将会打断传输过程,这种场景的确需我们发人员沟通。

我们确定了提示类型是需要断用户操作,该怎么提示用户呢?

如果中断时间比较短,我们可以使用模态提示,模态提示就屏幕中间会弹出一提示框,除了提示框以外的区域都会变灰,变灰就表其他部分都不能点击,比如下图中的登录,退出。

5000字,超详细总结App加载设计

当然也不只能用模态提示,当我们的 App 启动时,需将文件数据从 Rom 中读取到 Ram 中,这过程也比较,且用户也不能执行任何操作,几乎所的 App 都使用广告页占用这段时间的,不模态提示,所以我们还灵活运用。除了广告页,我们还可以使用品牌页,活动页占用加载过程。

5000字,超详细总结App加载设计

如果中断时间比较,我们需使用专门的页面提示用户,以引起用户的重视。

5000字,超详细总结App加载设计

注意:当加载过程需中断用户的其他操作的话,我们好给用户留下取消加载过程的按钮,当用户不加载了可以取消加载。

总的来说需要中断户操作的载场景相对中断的还是要很多的。

示类:中断户操作

如果我们的载场景需要打断户的操作,见的示方式有导航栏示户,在控件本身示户,或者页面区域示户。

5000字,超详细总结App加载设计

在导航栏对户进行示是一个错的择,但是我看了很多应,都没有将示容放到导航栏,为么?因为大分应的导航栏,是被各种搜索框占,就是各种项卡占,根本就没有空间来放示容。

5000字,超详细总结App加载设计

在控件自身示这种方式较好,可户知道他的操作针对的是哪一个对象,这种示方式一般适于有具体的操作对象的载过程,如果我要是想刷,显然就这种方式了,因为刷并没有一个具体的对象。

5000字,超详细总结App加载设计

第一个图是在拉刷时的示,第二个图是在进入页面的时候在页面中央示的,有些同可要问了,第二幅图都白屏了,难道算打断户操作的类吗?

其种情况下,我们依以点击底部菜单栏和导航栏中的 tab 栏,所以并不能打断用户的操。页面局部区域提示以说是应用中最泛的一种提示方式,几乎每个应用中,存在样的提示方式,种方式设计来最简单,也是最成熟的设计方式。

提示内容

提示内容包括文字和图。

如果是使用文字的话,文字应该尽量准确的告诉用户,应用正在加载什,不要让用户去猜。比如之前放的关于登录的截图,图中使用的是正在加载,这如果能改成登录中就更好了。关于这个提示内容,大家可以去观察一下的提示文字怎写的,收取中……,中……等等,相用户更愿这的提示内容,而不是干巴巴的正在加载。

其实大部分情况下提示内容都是使用文,使用图片会比较少,这里说是那图片,有些会有动画效,而不是那转圈圈小图标,为什么图片使用少呢?为图片占用空大,般来说有在进入新页时候有些应用会使用些可爱图片来分散用户注意力,是我相信算用户第,第,第三你图片感兴趣,时长了,再好看图片也会让用户觉没什么意思。

小结

第个办法是用户提示,这里有要补充,不管是什么形提示,如能出进度条,最好采用进度条,是能出进度条加载场景也不是很多,为我们大部分加载场景和网络有关,如网络不好话,谁知加载到什么时候呢?般来说下载,上传这类场景都可以出进度条。

总结

写了这么多其实设计加载场景本质思想并不复杂,首先找出应用加载时比较慢操作,要是慢地都算进来。然后根据加载场景来看,如能用到加载策略用加载策略,如用不了话合理提示用户,然不是说用了加载策略不用提示用户,如用了加载策略会有慢,我们样要提示用户。最后,其实大部分加载场景都有成熟解决案,我们要梳理出我们应用加载场景,然后再到应用里找灵感好了。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

现在阅读微软1998年的用户界面,就像发掘古墓一样。设计人员和开发者为整个 Windows 系统和应用程序准备了长达381页的引导内...
ui设计
字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情...
信息层级
@Fornever :上周日,我们以「哪些日常场景中,缺少一个易用的小程序」为命题,举办了光涧实验室第一场 Design Workshop「Do ...
工作坊
随着移动智能终端和云计算的快速发展,人工智能的浪潮正在悄然颠覆着我们生活的点点滴滴,VUI(Voice User Interface,语音用...
交互设计
设计是一个不断发展和变革的领域,很多时候,看似熟悉的设计趋势会在下一刻摇身一变,再次惊艳到你。灵活的创意和开放的想法...
Tubik Studio
由于工作需要,手机里安装了N个应用,但是常用的都是那几个。常常是工作中遇到具体问题了,才会翻看好多App参考,觉得自己脑...
App分析
「如此操作,你就能得到这样的结果。」在游戏当中,这种简单的逻辑并不一定总是最佳的方法。为什么这么说呢?如果外部奖励,...
Eugen Eşanu
如何验证我们的对话设计是适宜的?这时候就需要设计走查。为了让走查过程中少出错,我们可以在设计语音体验时,考虑以下几点...
经验分享