热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

正式文的页面设置(公文写作的页面设置)

这时为了保持较好的用户体验,需要给到前端一个加载占位图和加载失败的状态提示。智能加载根据用户的网络状况选择不同的加载方案。iOS的设计规范规定,要在启动APP时,设计一个启动页,来


本文作者向大家详细介绍了数据加载的相关知识。 一起看看文章吧~




在项目进行中,出现了数据加载的常见问题。 前端向服务器发送资源请求,服务器端在返回数据的过程中,由于网络和返回路径的错误等问题,资源可能无法顺利在前端显示,从而发生加载延迟和加载失败。


在这种情况下,为了保持良好的用户体验,负载必须占据位图,并向前端呈现加载失败的状态。 在解决这些问题的过程中,对数据加载有了更多的认识和梳理。


一、加载的业务场景/触发事件

(1)从后台切回到前端(一定时间内) )。


如果被剪切到后台,并根据业务需要在短时间内返回到前台,则不会加载新数据,而是会继续显示原始页面和提示符框。 如果时间间隔超过一定值,则需要添加事件以更新当前页面并加载新数据。


2 )启动APP


如果发生异常关闭、APP闪回、进程被杀害等情况,请单击“需要重新启动APP”,然后浏览启动页或直接加载首页。


(3)读取页内事件触发器)手动读取用户,自动读取系统


用户手动加载、通过下拉或单击操作刷新页面和加载新数据的系统通常在显示当前内容后立即加载和更新新内容。


4 )定时数据的更新


有些排名和限时事件需要在特定的时间更新页面和加载数据。


)5)实时消息推送


IM邮件采用实时推送机制,无需用户手动加载或更新。


二、如何加载/加载逻辑

(1)懒惰的加载和预加载


懒惰加载(通常默认使用懒惰加载) :进入页面加载数据预加载(Wi-Fi时考虑使用) :预加载数据,然后查看页面。 )2)整体加载


通过加载页面的所有内容,然后展示给用户,可以确保内容的完整性,并将其应用于需要内容完整性的页面,如购物车。 如果加载时间过长,则需要给用户提供一定的反馈和提示。


)3)块加载


可以优先加载信息类的文章,然后加载图像等,也可以根据资源的种类等前后加载。 保证用户可以最快获取内容,但部门的内容加载缓慢,可能会被用户忽略。


(4)分页负载


对于某些列表或卡信息,可以使用自动或手动分页加载。 虽然可以展示这样比较丰富的内容,但是信息的检索也需要一定的时间。


)5)分割画面加载


首先加载页面框架,滚动页面,然后加载相应的内容。 适合数据量大的页面。


)6)智能道路


根据用户的网络状况选择不同的负载计划。 在非Wi-Fi中,不加载图像和字符,而是在用户单击确认之后加载资源; 对于Wi-Fi,加载所有资源。


(7) Wi-Fi预加载读缓存


对于Wi-Fi,预先加载数据,如果没有要在本地缓存的网络,则直接加载本地缓存。 解决了在没有网络的情况下检索数据的问题,节省了流量,但占用了本地存储空间。


三、加载优化

(1)在Wi-Fi条件下,考虑预载


)2)异步处理


例如,在支付宝(Alipay )弱的网络的情况下的计费处理(客户端通知用户计费成功,记录用户的计费行为,等待网络环境变好后向服务器报告,进行计费操作)。


(3)缓存的使用


需要注意要保存的数据类型、是否要更新规则、是否要清除缓存、是否要清除规则,以及用户是否可以手动清除规则。


四、加载的业务流程设计

(1)主流程


触发事件—— (加载逻辑) ——页更新规则)表示要加载的数据量、规则) ——更新新内容——用户提示拷贝。


)2)分支过程


如果没有更多新内容,将删除空页面、页面,页面将受到限制。


)3)异常的流程


网络连接失败、更新操作频繁、网络状态切换、弱网络、服务器崩溃。


五、加载的功能流程设计

(1)功能


下拉式重新整理、按一下重新整理、系统自动重新整理、重新载入按钮。


)2)加载状态的展示


网络不正常的原因是,加载是否占了位图,加载进度条(先慢后快,有没有加载视频、加载成功和失败的提示。


六、加载占位图

(1)原理


通过css控制,可以在加载网络图像时,在未加载完成时显示本地占用位图,在加载完成时显示网络图像。


)2)设计原则


a .载入品牌要素或其他要素(提示可提示的内容) ) ) ) ) ) ) ) ) ) ) ) )。


优点:给用户带来期待,提高品牌感觉的缺点:需要匹配


b .加载颜色块:通过读取图像的颜色或默认颜色来占位符


优点:合身方便,需要提供彩色银行,画面不无聊; 缺点:需要调节颜色


c .加载布局:虽然很简单,但视觉效果可能不太好


d .加载默认的灰色图表


e .使用高斯模糊:效果很好,但是有一定的功耗,加载慢


七、启动页/闪屏

(1)使用场景


单击APP上的启动图标,距离APP首页出现还有一段时间。 时间长短取决于设备的性能和网络环境,从数百毫秒到数秒不等。 在这个空白的时间里

不让用户感到困惑或因为等待而产生焦虑。

iOS的设计规范规定,要在启动APP时,设计一个启动页,来填补这段用户等待的时间。由于APP启动的过程很短,从几百毫秒到几秒不等,所以启动页也被称为闪屏。

但是,现在的启动页不仅仅应用于这一场景。许多启动页还担负了广告展示、H5活动展示、APP跳转等功能。

(2)设计原则

快速启动类:和首屏页面类似,最大程度减少割裂感品牌类:提现品牌logo、名称、slogan等元素情感共鸣:弱化品牌元素,增进情感设计广告类:启动页展示广告位,流量变现。一般是先显示品牌页,再显示广告页,用户可以选择跳过节日类:为特定节日量身制作启动页,给用户新鲜感、亲切感其他:例如成为H5页面、其他APP入口等

(3)业务流程

启动APP——检测本地闪屏资源——-显示闪屏(同时进行登录状态、用户权限、闪屏业务检测)——点击跳转到落地页/直接进入首页。

本文由 @lemon 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议


推荐阅读
  • 一句话解决高并发的核心原则
    本文介绍了解决高并发的核心原则,即将用户访问请求尽量往前推,避免访问CDN、静态服务器、动态服务器、数据库和存储,从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例,以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]
  • 基于PgpoolII的PostgreSQL集群安装与配置教程
    本文介绍了基于PgpoolII的PostgreSQL集群的安装与配置教程。Pgpool-II是一个位于PostgreSQL服务器和PostgreSQL数据库客户端之间的中间件,提供了连接池、复制、负载均衡、缓存、看门狗、限制链接等功能,可以用于搭建高可用的PostgreSQL集群。文章详细介绍了通过yum安装Pgpool-II的步骤,并提供了相关的官方参考地址。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了如何找到并终止在8080端口上运行的进程的方法,通过使用终端命令lsof -i :8080可以获取在该端口上运行的所有进程的输出,并使用kill命令终止指定进程的运行。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
  • 计算机存储系统的层次结构及其优势
    本文介绍了计算机存储系统的层次结构,包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体,形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低,使得整体存储系统的平均价格降低。同时,高速缓存的存取速度可以和CPU的工作速度相匹配,进一步提高程序执行效率。 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • 开发笔记:计网局域网:NAT 是如何工作的?
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了计网-局域网:NAT是如何工作的?相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了操作系统的定义和功能,包括操作系统的本质、用户界面以及系统调用的分类。同时还介绍了进程和线程的区别,包括进程和线程的定义和作用。 ... [详细]
  • 网卡工作原理及网络知识分享
    本文介绍了网卡的工作原理,包括CSMA/CD、ARP欺骗等网络知识。网卡是负责整台计算机的网络通信,没有它,计算机将成为信息孤岛。文章通过一个对话的形式,生动形象地讲述了网卡的工作原理,并介绍了集线器Hub时代的网络构成。对于想学习网络知识的读者来说,本文是一篇不错的参考资料。 ... [详细]
  • 本文介绍了OkHttp3的基本使用和特性,包括支持HTTP/2、连接池、GZIP压缩、缓存等功能。同时还提到了OkHttp3的适用平台和源码阅读计划。文章还介绍了OkHttp3的请求/响应API的设计和使用方式,包括阻塞式的同步请求和带回调的异步请求。 ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了软件测试知识点之数据库压力测试方法小结相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
哈哈哈-哈哈哈-哈哈哈
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有