2023-12-05 分类: 网站建设
加载是信息更新的反馈过程。包括人机交互的反馈,以及计算机(客户端)与服务器(后台)交互的反馈。
触发加载有两种方式:一种是用户手动触发,比如点击【朋友圈】。
另一个是系统定时任务,按照一定的频率或规则自动执行。例如,如果聊天消息的时间在1分钟内显示“刚刚”,那么定时任务可以每分钟刷新一次,时间显示模式会自动更新。
产品经理需要确定加载策略机制,以减少或分散等待时间的压力。同时优化反馈效果,缓解焦虑。
下面,我们将分别讨论移动端和Web端。
一、App加载策略机制1.整个页面同步加载
整个页面的所有内容都一次性加载给用户。网速不友好很容易“死胎”。所以加载过程中会出现白屏。
为避免空虚,常与菊花或进度条搭配使用。
2. 异步加载
可以从三个角度进行设计:
首先加载占用较少网络资源的元素模块。例如,文本和默认图标后跟图片。按重量模块加载。例如,如果模块相关,则先加载父内容,然后加载子内容。分步加载相同的模块。例如,首先加载缩略图或占位符,用户在加载较大的图像之前单击它。再比如,当加载的页面有固定框架时,可以先加载框架,再加载框架中的内容。这个加载的屏幕被称为“骨架屏幕”。
异步加载是一个比较成熟的指导思想。多用于页面内容较多,图文混杂的时候。
3. 预加载
预加载是在加载页面内容时预测用户的下一步行为,为下一步需要使用的页面预先加载内容。例如小程序开发,在网易新闻中,即使您从未打开过新闻,如果您与互联网断开连接小程序开发,您仍然可以查看新闻。
4. 延迟加载
延迟加载解决方案是,只有当图像滚动到窗口中并被用户看到时,它才会真正加载。目前淘宝、知乎等大流量网站已经采用了图片滚动的懒加载方案。
5. 分页加载
分页加载可以减轻单个加载的压力。适用于瀑布、长列表、产品列表等。
有些页面有明确的[Next]按钮,点击加载下一页。
有些是无形的分页,比如抖音的视频瀑布,在用户看来就是源源不断的信息流。
这就是为什么我们看新闻、浏览淘宝、浏览微博都出不去的原因。缺点是容易迷路,不方便快速索引定位某个内容。
6. 离线缓存加载
首先,在有网络的情况下提前加载数据,并在本地缓存。没有网络时,直接加载缓存的内容。
但是,考虑到手机的空间,应该设计一个合适的清除缓存的机制。
二、App加载界面反馈设计1.图标
1)加载图标样式
通常你可以选择传统的菊花动画。
如果我们更进一步,我们可以将品牌基因构建到指标的设计中。以飞猪的动态效果为例,无疑体现了产品之间的差异。
我们可以稍微考虑一下,选择用一些有趣的动画来分散用户的注意力。
2)图标放置
2. 加载替代形式
1)启动页面
启动app需要一个短暂的过程,启动页面的作用就是等到系统加载启动。
启动页面可以是广告空间、假日营销或品牌知名度。它可以是静态页面或动态图像。
另一种启动页面的方式是让它和首页一样,给人一种进入首页很快的感觉。
2)以跳跃或运动伪装加载
跳跃本身也需要一定的时间,所以也可以为加载争取时间。比如添加到购物车动画。
3. 支持加载时及时退出
用户有权选择不加载,也可以将加载的默认时间设置为不能提示用户重新加载。
三、pC端页面加载机制1.页面加载速度的影响
如果用户试图访问你的网站,那么你的网站应该在 10 秒内打开网站开发,如果超过这个时间,他将放弃任务的执行。
许多研究表明,用户最满意的是他们在 2 秒内打开页面的时间。如果页面等待超过 12 秒后还没有加载,那么超过 99% 的用户会关闭页面。
在我做的一个实验中,加载一个显示 10 个搜索结果的页面需要 0.4 秒,加载一个显示 30 个搜索结果的页面需要 0.9 秒。如果采用后一种方案,流量和收入各下降 20%。
这就是为什么在很多电商后台管理系统中,默认加载的数据个数是10个,而不是15个或30个。
2. 了解页面加载过程
当用户打开一个页面时,首先是页面的框架,将不需要加载的内容呈现出来,然后逐渐从服务器拉取数据,会出现页面的部分内容pC端空白。如果在App端使用H5技术打开网页,一般会给出加载条。
我们可以这样理解,打开一个基于html的静态页面,然后混入调用服务器算法的元素,不断渲染加载,呈现出我们所期待的样子。
用户的等待时间主要花在下载网页元素上,即HTML、CSS、、、、图片等。
统计显示,每增加一个元素,页面加载时间就会增加 25-40 毫秒(取决于用户的带宽)。
打开页面→HTML写的静态页面→//ajax(AJAX意思是“和XML”(异步和XML)等渲染→处理提交表单的数据,向后端对应的发起ajax请求pHp api接口 → pHp in 接收到数据后,连接服务器,服务器通过pHp中的SQL语句处理数据库关键字返回给pHp,再返回给前端,前端将数据渲染在HTML通过JS处理,最终呈现给用户。
点击事件加入购物车的一般步骤是:用户点击“加入购物车”按钮→页面获取当前商品的唯一值(如商品ID:)→JS处理点击事件,并通过ajax请求将唯一值连同用户信息传送给pHp→pHp请求连接服务器→执行数据库语句→服务器返回执行结果给pHp→pHp将执行结果传送给前端。
如果数据库语句执行成功,数据库中用户的购物车表会多出一条刚刚添加的商品数据,服务器也会返回执行成功信息(以及一个非空的数据串)给pHp,而用户的界面会显示“成功加入购物车”字样。
如果执行失败网站开发,也会将失败信息(err)传递给pHp,用户界面也会显示相应的提示。
由于当前网页使用大量的JS,浏览器在打开页面时会占用大量内存。服务端的压力得到了缓解,但是压力却转移到了客户端。
3. 如何优化页面打开速度
新闻标题:网站开发移动端和网页端的优化反馈过程及策略机制礼品册兑换网站开发建站
本文URL:https://www.cdcxhl.com/news4/299004.html
成都网站建设公司_创新互联,为您提供品牌网站建设、企业网站制作、定制开发、微信公众号、手机网站建设、用户体验
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容