App6种常见的数据加载设计

2023-11-12

 

设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?

  今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

  一、6种常见的数据加载模式

  目前APP设计中,合理的数据加载方式,主要分如下六种:1.全屏加载 2.优先加载 3.整页加载 4.自动加载 5.智能加载 6.离线加载,这六种方式,适用于不同的需求场景,也适用于不同类型的APP,让我们来一一解读。

App6种常见的数据加载设计,互联网的一些事
App6种常见的数据加载设计,互联网的一些事

  1. 全屏加载

  全屏加载就是整个屏幕白屏进行数据加载,一般会有菊花转配合,常用于手机网页的加载中。

App6种常见的数据加载设计,互联网的一些事 App6种常见的数据加载设计,互联网的一些事

  网易新闻 Feedly

  优点是能保证内容的整体性,全部加载完才能够系统化的阅读。

  缺点比较明显,就是有非常强烈的等待感,3s以上会产生焦躁情绪,所以在地铁等信号不好的地方,使用手机网页获取内容实在是比较灾难的一件事情。

  一般这种情况会配合有明确进度标识的进度条。

  2.优先加载

  如果一个页面有图片有文字,加载图片比较慢的情况下,可以先把文字都加载出来,保证用户可以顺畅阅读,然后再加载比较费流量的图片。如果是用这一种加载方式,活动页什么的,千万不能重要信息全部放在头图上,导致加载不出来。重要操作也不能用图片按钮,否则也会有操作显示不出来的风险。

App6种常见的数据加载设计,互联网的一些事 App6种常见的数据加载设计,互联网的一些事

  淘宝 网易新闻

  优点是可以帮助用户快速阅读内容,了解信息。

  缺点是也许会丢失掉重要的关键信息,无法建立信息获取的闭环。

  这种加载形式更加适用于内容阅读型的APP。

  3.整页加载

  当当前页与下一页是整页切换的时候,可以考虑采用整页加载的形式,但是要保证每个页面的数据量不是特别的大。

  优点是能保证每个页面的完整性,体验比较整体。

  缺点是不好保证整页的加载效率,且有可能影响浏览的流畅度。

  一般适用于宫格图片模式、全屏图片模式、网状详情页模式。

  4.自动加载

  自动加载适用于长列表的情况,可以设定规则,默认加载20条,滚动第20条的时候,自动再加载20条。用这种手法,可以营造一种无极限浏览的错觉,很容易的把用户吸引住,一直向下滚,一直向下滚。

App6种常见的数据加载设计,互联网的一些事 App6种常见的数据加载设计,互联网的一些事

  新浪微博 今天头条

  优点是把用户代入无尽浏览模式,让用户一直向下滚动,不需要手动点击下一页。

  缺点是没有尽头,容易迷失,不方便快速索引定位到某个内容。

  适用于瀑布流、长列表、商品列表等情况。

  5.智能加载

  当用户处于WiFi下时,不会受限于流量和访问速度,大可以加载大图片、大图标,甚至直接播放视频动画,但是如果用户处于非WiFi的模式下,则需要差异化的处理成小图或者无图模式,视频和动画直接用一个占位符标识就好了,这种根据网络状况,智能调整的加载方式,叫做智能加载。

App6种常见的数据加载设计,互联网的一些事 App6种常见的数据加载设计,互联网的一些事

  淘宝

  例如淘宝APP,当网络切换到GPRS或3G的时候,首先会提醒用户网络变化,然后查看商品详情的时候,图片从自动下载,变换成点击加载,并且加载的只是精简版图文详情,防止多图造成的流浪浪费。

  优点是根据具体场景来控件流量和加载速度。

  缺点是不一定真实有效的命中用户需求,所以还是需要给予用户一定的查看详情的入口,或者是设置项。

  适用于有大量图片或视频的APP,如电商类或在线视频类APP。

  6.离线加载

  当用户没网的时候,往往很多功能都不能用了,内容也无法加载出来,导致APP变得根本不可用,这时候就要考虑预加载+离线缓存的设计了。首先在有网的时候把数据提前加载下来,缓存到本地,当没网的时候,直接加载已经缓存下来的内容。一般会提供给用户选择,是否开启有WiFi的情况下预加载功能,或者是否开始WiFi下全部离线缓存的功能。这样就能保证在地铁上,过个隧道就看不了内容的尴尬了。

App6种常见的数据加载设计,互联网的一些事 App6种常见的数据加载设计,互联网的一些事

  窄播 今日头条

  优点是解决了没网获取数据的问题,且节约了流量,保证了流畅。

  缺点是占用本地存储空间,而且有时候预加载的内容根本没有用到。

  适用于小说阅读、新闻阅读、视频类APP。

  二、4种减少等待感的具体手法

  1. 用非模态的加载方式

  尽量使用非模态的加载方式,就是加载的过程是不打算用户,不需要等待加载完就可以做别的事情的,如下示意:

App6种常见的数据加载设计,互联网的一些事

  用非模态的加载方式,用户可以利用做别的事情,打发等待的时间,而不用傻傻等待数据加载完成,大大降低了等待的焦躁感。即便是模态的加载,也要给一个取消的选项,放在不耐烦的情况下还没法取消。

  2. 情趣化的加载动画

  加载的过程如此的枯燥乏味,为什么我们不能做点什么让用户觉得好受一点呢?有创意的设计师们设计了各种呆萌可爱的加载动画。

App6种常见的数据加载设计,互联网的一些事

  Google的加载动画

App6种常见的数据加载设计,互联网的一些事

  Digg的加载动画

App6种常见的数据加载设计,互联网的一些事

  这些加载动画让等待的过程变成了一种享受,用户能感受到设计师的情怀,体会新鲜有趣的等待过程。提升了产品情趣化的设计语言,让等待的焦躁感一扫而空。

  3. 漫长加载告知进度

  如果是时间较长的加载过程,最好能清晰的告知过程进度,这时候就需要采用有进度的加载设计了。

App6种常见的数据加载设计,互联网的一些事 App6种常见的数据加载设计,互联网的一些事

  百度APP Dropbox

  浏览器的进度条是一种较为常见的进度告知设计,通过这个进度告知,让用户有了更加明确的知情权,也能更好的预期到加载完成的时间

  但即便是小小的进度条,也有很多的设计技巧在里面。一个非常经典的体验设问,同样是3s的加载时间,匀速的进度条、先慢后快的进度条、先快后慢的进度条,哪个让用户感觉上最快?经过科学的实验证实,先慢后快的进度条是让用户心理感受上最快的设计。这是因为用户最容易记住最后一瞬间的感觉,如果最后一瞬间,感知到了快,就觉得顺畅了。

  4. 尽量提前加载

  尽可能的利用预加载或有WiFi的情况下离线缓存的方式,把内容提前加载下来,这样能做到最大限度的降低加载给用户带来的卡顿感。如果能判断出来用户下一步要做的事情,提前帮用户加载相应的内容,肯定是最符合需求场景的事情。当我开始读第一页的时候,第二页第三页就开始陆续缓存下来了

  最后,不得不说,细微之处见真章,看似不起眼的数据加载,往往都是程序员哥哥一时兴起随便定义的,都含有这么多设计门道,作为体验设计师的你,如果不了解个中奥妙,你是否有足够的信心拍着胸脯说你能对体验负责呢?总结一下,6种常见的数据加载模式:1.全屏加载 2.优先加载 3.整页加载 4.自动加载 5.智能加载 6.离线加载,4种减少等待感的具体手法——1.用模态的加载方式 2.情趣化的加载动画 3.漫长加载告知进度 4.尽量提前加载。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

App6种常见的数据加载设计 的相关文章

  • 【uni-app】uniapp 实现一键登录 超详细记录~

    uniapp 实现一键登录 一 前置条件 开通uniCloud 开通一键登录功能 二 一键登录代码 云函数代码 三 其他条件 四 遇到过什么问题 如何处理 本地函数同个局域网 错误码 五 官网给出的错误码 参考的文档 官网 一键登录unia
  • Android 开发中ScrollView无法上下滚动

    本节目录 问题 解决办法 问题 因项目需要做一个App出来 所以最近在学Android Studio开发 但是我在利用ScrollView实现内容上下滚动的时候出现了一个问题 就是无法将超出页面的内容进行上下滑动 设计UI界面如下 这里的T
  • 学习笔记(01):MySQL数据库从入门到搞定实战-DDL之数据库

    立即学习 https edu csdn net course play 27328 362512 utm source blogtoedu SQL 结构化查询语言 用于访问和操作数据库 主要包括数据定义 数据操纵 数据查询和数据控制 DDL
  • js实现贪吃蛇小游戏

  • 为什么MVC不是一种设计模式

    比较Backbone和Ext4 x在MVC实现上的差异 大漠穷秋 前言 圣人云 不想做妈咪的小姐不是好码农 每一个码农的心中都有一个终极理想 那就是有一天不用再Coding 在成为妈咪的道路上 设计模式 被认为是一项必备的技能 因此 经常有
  • git 解决冲突之 theirs & ours

    git merge 从feature分支合并到master分支 git checkout master git merge feature Auto merging Document CONFLICT content Merge confl
  • iOS App上架流程

    前言 作为一名IOS开发者 把开发出来的App上传到App Store是必须的 下面就来详细介绍下具体流程 1 打开苹果开发者中心 https developer apple com 打开后点击 Member Center 如果你的电脑没有
  • 【数电】如何使用74LS112(或74LS74)构成一个十四分频器(模七计数器)

    IT精英们 大家都学过数字电子技术吧 尽管这东西没用 不过这些基础课程对思维的培养还是很有好处的 我不爱上课 但不代表我不喜欢数电 我们实验课老师为了加强实验难度 把实验题改掉了 用74LS112 或者74LS74 设计一个十四分频器 原来
  • uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!

    uni app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别 文章目录 1 官网Popup 弹出层链接 2 属性不同 3 属性对照 4 弹出的方式 5 uView特有属性 1 官网Popup 弹出层链接 uni
  • 有特别有创意的网站设计案例

    有人说 UI 设计师集艺术性与科学性于一身 不仅需要对工具的使用熟练 更需要对美术艺术有一定的基础了解 如果想要成为优秀的 UI 设计师是一个需要磨砺的过程 需要不断的学习和积累 多看多练多感受 其中对于优质的设计案例的收集和练习是重要的
  • iOS App上传到苹果应用市场构建版本的图文教程

    使用hbuilderx的h5 或uniapp框架写的前端 进行云打包ios应用 会生成一个ipa后缀的应用文件 这个文件是没有办法像安卓应用那样直接安装在手机上面的 需要上架到苹果应用商店 用户才能下载安装使用 因此 我们这篇文章讲详细介绍
  • Android基于BroadcastReceiver和Service、SoundPool开发的防过充助手app

    前段时间换了一个小米4C手机 可是发现它的充电充满没有提醒 上一个手机换了就是因为不爱惜电池 让它过充的次数多了 虽然听别人说小米4c手机充电器是智能充电器 有保护作用 但我自己还是不放心 于是就亲手写了一个防过充小应用 已经在使用 可以达
  • 老嫂子的保姆级科普 选择视频剪辑软件就从阅读本文开始

    选错一款视频剪辑软件 是种什么样的体验 就好像新婚当晚 发现老婆是人妖一样 浪费了感情 又错付了青春 新手在学习视频剪辑的初期 需要花费大量精力去熟悉剪辑软件的基础功能 而软件挑选本身没有对错可言 适合自己的才是最好的 因此 本文仅从事实与
  • 制作一个“生日快乐”App,来自程序员的生日礼物~

    点击上方 码农的后花园 选择 星标 公众号 精选文章 第一时间送达 之前给大家制作了一个来自程序员的表白神器 本期带大家做一个 生日快乐 App 来自程序员的生日礼物 不要再说程序员不懂浪漫咯 往期精彩 Android App 开发的三种姿
  • App登录状态维持

    转载地址 http www jianshu com p 4b6b04244773 目前APP大都支持长登录 就是用户登录一次后 如果用户没有主动注销 清除APP缓存数据或卸载APP 就在一段时间内或一直保持登录状态 一般情况下 有以下三种方
  • 什么是反向代理服务器

    我们常会看到 反向代理服务器 这个名词 例如常看到文章上说 nginx 是一个反向代理服务器 varnish 是一个反向代理服务器 下面就了解下这个概念 含义 反向代理服务器 有两个概念 一是 代理服务器 二是 反向 代理服务器 比较好理解
  • swift项目桥接通过cocoapods pod下来的第三方oc文件引入不成功

    最近想试着开始写学着swift项目了 然后就在用cocoapods pod下来的第三方框架的时候出现了问题 先以为是自己创建桥接文件后 配置出错了 但是网上的那些文章都还是能把桥接文件处理好 言归正传 先上图 pod的文件和桥接header
  • uniapp-安卓APP开发时使用手机调试

    调试 1 手机打开开发者模式 华为手机举列 gt 设置 gt 关于手机 gt 版本号 多次连续点击 版本号 就会提示 已 打开开发者模式 2 华为手机举列 gt 设置 gt 系统和更新 gt 开发人员选项 gt 打开 USB调试 进入 调试
  • [2024]基于springboot的租房(房屋租赁)小程序设计

    目录 一 整体目录 示范 文档含项目技术介绍 E R图 数据字典 项目功能介绍与截图等 二 运行截图 三 代码部分 示范 四 数据库表 示范 数据库表有注释 可以导出数据字典及更新数据库时间 欢迎交流学习 五 主要技术介绍 六 项目调试学习
  • 电脑快速打开计算器的方法

    大家好 我是爱你三千遍斯塔克 我们平常在运算时 经常要要使用计算器 那么计算器有什么快速打开方法吗 这里有一些参考方法 可供大家进行参考 希望对大家有帮助 希望你喜欢我的内容 记得关注我哦 我会继续为大家带来更好的作 1 win R 打开运

随机推荐

  • 网页中插入图片的代码

    本文转载至 http www luke99 com celuechuangyi 2011 05 6912 html 如何在网页中插入图片呢 只要有图片的地址 就可以通过代码设置而放入我们的网页的 代码具体如下 img src 其中蓝色部分为
  • 牛客网题集——Min Value(逻辑)

    Min Value 牛客网测试平台 题意 一个由 N 个数组成的序列 a1 a2 a3 an 1 an 从中任选两个数 ai 和 aj 使得 ai aj 的绝对值最小 并且计算出 i j 的值 其中 i j 输入描述 输入第一行包含一个正整
  • 调用高德地图展示车辆行驶轨迹

    如何在页面中使用高德地图并分页展示多段历史轨迹 引入高德地图的JavaScript API 打开index html key 后面的内容是你自己在高德上申请 的key 引入高德组件 配置webpack 找到webpack base conf
  • 【Java日期时间】@JsonFormat与@DateTimeFormat注解的区分和使用

    目录标题 JsonFormat与 DateTimeFormat注解的区分和使用 1 背景 2 JsonFormat代码示例 步骤 注意 3 DateTimeFormat代码示例 步骤 注意 总结 JsonFormat与 DateTimeFo
  • QWizardPage、QWizard

    QWizardPage 一 描述 QWizard 代表一个向导 每个页面都是一个 QWizardPage Page 提供了五个可以重新实现以提供自定义行为的虚函数 当用户单击向导的 Next 按钮时 将调用 initializePage 来
  • 连接数据库超时设置autoReconnect=true

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 1 问题现象 com MySQL jdbc CommunicationsException The last packet successfully received fr
  • 2021-07-26

    解决 Action client not connected arm gripper controller follow joint trajectory ERROR 1627267012 953273779 3804 152000000
  • cin中输入空格断开的解决方法

    cin中输入空格断开的解决方法 cin gt gt a 此时输入 hello world cout lt
  • LaTeX添加包

    将包文件夹放入 CTEX MiKTeX tex latex目录中
  • Head First的MVC之歌(英文版)

    MVC之歌 歌名 模型 视图 控制器 ModelViewController 词曲 James Dempsey https pan baidu com s 1PXDVDqRQVpKcZ1bQwCLNLQ 请大佬 翻译并唱 出来
  • 和为 K 的最少斐波那契数字数目(贪心)

    题目描述 给你数字 k 请你返回和为 k 的斐波那契数字的最少数目 其中 每个斐波那契数字都可以被使用多次 斐波那契数字定义为 F1 1 F2 1 Fn Fn 1 Fn 2 其中 n gt 2 数据保证对于给定的 k 一定能找到可行解 示例
  • 增强网关设计与使用

    增强网关 目的 整合错误码 对外显示友好 对内便于快速定位问题 记录出错请求 依照错误码制定处理策略 设计 状态码格式 示例 E01001B002 解析 E 统一前缀 表明异常 01 应用标识 001 功能域 B 错误类型 002 错误码
  • vue 3.0新特性之reactive与ref

    vue 3 0新特性 参考 https www cnblogs com Highdoudou p 9993870 html https www cnblogs com ljx20180807 p 9987822 html 性能优化 观察者机
  • Allegro自动备份PCB设计文件的方法

    受到误删原理图的影响 立刻把PCB的自动备份功能设置一下 和原理图备份不一样的是PCB备份文件和源文件的格式相同 只是名称不一样 这个名称是自己设置的 步骤如下 点击 Setup gt User Preferences 弹出 User Pr
  • Linux 端 Kaggle 数据集下载:API 下载

    Linux 端 Kaggle 数据集下载 API 下载 一 准备好 kaggle json 文件 1 登录 Kaggle 官网 2 点击右上角头像 gt Your Profile gt Account gt Create New Token
  • Pandas_设置单元格条件格式1——指定值字体变色、指定值设置背景色

    转载于 https www cnblogs com wodexk p 10801344 html
  • 普通工程师和高级工程师的差别在哪里?如何快速突破?

    作者 王拥军 编辑 迷鹿 王拥军 毕业于天津大学计算机系 拥有从计算机硬件到操作系统安全 从后台服务器到客户端的全平台工作经历 目前在腾讯自选股从事互联网证券软件研发管理 对上市公司及创业团队的产品 文化 经营等具有独到的见解 个人公众号
  • linux设置系统时间

    我们一般使用 date s 命令来修改系统时间 比如将系统时间设定成20066年10月19日的命令如下 date s 10 19 2006 将系统时间设定成下午1点12分0秒的命令如下 date s 13 12 00 注意 这里说的是系统时
  • 【字节面试题】小于n的最大数

    标题 小于n的最大数 题目描述 给定一个数你 入23121 给定一个数组A如 2 4 9 求由A中元素组成的 小于n的最大数 如小于23121的最大数是22999 思路 1 把数组排序 2 把int转换成字节数组 从第一个开始变量 如2 从
  • App6种常见的数据加载设计

    设计师在进行APP设计的设计时 往往会更加专注于界面长什么样 界面和界面之间怎么跳转 给予用户什么样的操作反馈 却偏偏特别容易忽略掉一个比较重要的环节 就是APP数据加载中的设计 所以会导致我们看到的APP 往往有着华丽的启动界面 然后就是