如何设计 B 端产品的页面加载功能？

科技 2024-11-15 08:30 广东

本文授权转自：CE青年Youthce（ID：youthce）

每一个用户都不喜欢进入页面时需要长时间的等待，并且对着一个空白的页面。

因此在 iOS当中会使用大量的动效、情感化设计来引导用户多停留一些时间等待加载；在较多 app 当中，也会通过动效设计，优化页面信息的加载。

那既然页面加载很重要，对于B端产品而言，我们也需要去考虑页面的功能究竟要如何进行设计。

今天我们会聊聊页面加载功能的具体逻辑，以及B端产品的常见页面加载策略，希望能够对各位同学有所帮助～

页面加载的逻辑

在系统当中，页面加载其实是用户对系统界面进行交互后，系统会将对应的数据传给服务器，而服务器又会将内容反馈给用户的整个过程。

比如在按钮组件中，我们就需要去设定「当用户点击了按钮过后它需要长时间加载的 Loading 状态」

通过这样的做法，其实就是缓解用户等待所花费的时间，减少焦虑。

在很多C端产品中，页面加载是非常常见的。比如会有懒加载、预加载、异步加载等。

同时会使用非常多的插画设计、动效设计去降低用户所使用的焦虑。但是在桌面端中，它的思考方式会有些许不同，我们将其分为四种不同的方式。

骨架图/skeleton

骨架屏是较为常规的页面模块加载方式。

它主要适用于模块当中，加载内容需要提供占位信息时进行使用。通常会在列表、卡片类图文信息较多的页面当中进行呈现。

在用户预期上，骨架图能够帮助我们展示当中页面的大体结构，以避免在页面加载信息的过程当中出现随意跳动、乱展示的情况。

特别是在很多页面第一次加载时，由于数据内容较多，因此使用骨架图填充会更为合理。比如在有赞当中，就会使用骨架图的方式来进行页面信息的加载。而在B端后台中也更多的适用于工作台信息的加载，特别是在工作台中有数据部分的内容呈现的时候，需要格外去注意。

加载中/Spin

Spin 主要要于页面和区块当中的信息加载，通过适当的动效，能够保证页面加载时缓解用户的焦虑。

在 Spin 当中，会有许多不同的类型：基础Loading、动画Loading、进度Loading

基础Loading 更适用于页面当中的组件类级别的加载，像是在输入框内、按钮中、下拉选择... 的内容加载。

动画Loading 则偏向于区块、页面级别的加载，比如在表格页面中，就会经常使用加载的方式展示目前正在相应。

进度Loading 则更像是进度条的外露，想要更凸显目前的真实进度情况。目前在 Ant Design 5.18.0 版本当中即可支持

长时间加载

当然，在系统当中还会出现一些特殊的加载状态。比如在针对数据量较大的情况下时，我们会采取什么样的加载策略？

比如在神策数据当中，当我们在去分析后台的行为数据时，需要进行大量的计算，因此在分析完一次过后所等待的时间也会更为长久。这时候神策会给出一套更为复杂的加载策略。

首先在加载层面上，它会优先告知用户目前整体的加载进度，这对于用户的等待是非常有益的。

其次，如果你对于整体加载的时间进度不够满意，那我可以给你相应的解决策略，像是分批加载等等。

最后如果你在加载过程当中有其他的分析任务，也可以通过异步加载的方式，进行后台计算，等结果出来后会通过通知的方式进行提示。当然，在此过程中，你可以中断、退出。

异步加载

异步加载也是针对长时间加载的一种策略，比如我需要去上传较大信息的时候，我需要耗费特别多的时间。那这时候就可以采用异步加载的方式，满足用户的正常使用。

在飞书当中，我要上传飞书妙记，我要导入飞书成员，那都可以通过异步加载的方式来进行呈现。

那在设计的时候需要去考虑异步加载整体的入口以及功能之间是如何实现的。

像是在飞书妙记中，它会将其作为一个上传入口，进行快速的展现。而在导入飞书成员的时候，则会展现是将其放在后台进行加载，等完成过后通过通知的方式来告知用户（与神策相同）

-END-

文章转载：CE青年Youthce，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/Gs8cDMkabUpbL5mF82wCSQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 巫欢

终审 | 苏菁

▼


点这里，学习更多设计知识！
👇

http://mp.weixin.qq.com/s?__biz=MjM5MTg2NDA3MQ==&mid=2652215532&idx=3&sn=dbcd950a9ff292355741daf45a79466a

IXDC

IXDC是全球领先的用户体验创新盛会，致力于探索和分享设计界最前沿的思想和技术，是中国连接世界的跨界创新平台。自2009年起，IXDC发挥“设计外交”作用，搭建跨越国家、文化和语言界限的桥梁，帮助各行业人士获得应对21世纪挑战时的全球视角。

最新文章

作品集里放体验地图，八成是白费功夫

IXDC专访 | 黄婷：AI时代下的设计思维与变革

显示器还能这样设计?

感恩节 | 心怀感恩，所遇皆温柔

在国际科技巨头苏州园区办公，是怎样的体验？

IXDC专访 | 赵东恩：AI时代设计领域的变革与设计师的职业发展

蛇年蛇墩墩来啦！由冰墩墩原班人马打造。网友：换个衣服继续卖？

网易云音乐再发声！坚持创新和尊重原创

美啊直播 | 2024站酷设计周“当设计遇见科技”

这套儿童友好城市LOGO，儿童会喜欢吗？

物理学得好：摄影高级艺术信手拈来！

蔚来发布十周年纪念LOGO，这很蔚来（附品牌手册下载）

IXDC专访 | 张杨：AI与机器学习在金融产品设计中的应用

产品设计师？这么多设计岗位到底什么意思？

一点点改变，就让图标差异感拉满！

IXDC专访 | 刘妍：探索AI 时代下微软产品设计中的创新与平衡

全球首个世界绿色设计之都启动创建！

这样规划作品集，让你的效率提高2倍！

铃铃铃，这些闹钟UI看起来怎么都差不多？

从容器体验到对话设计，看看百度是如何让法律咨询变的超简单！

IXDC专访 | 黄蓉：AI在零售体验设计中的应用与未来展望

最新可口可乐圣诞广告改用AI，网友：少了点人味！

很艳，很惊艳，两大妙招盘活品牌

IXDC专访 | 任婕：AIGC技术下的新模式与职业晋升

在苹果做设计师，我学到的 10 个重要经验

日本做的网页设计确实厉害，我的设计有点献丑了！

小雪 | 苍山见雾，雪落人间

B端设计进阶！常见误区有哪些？

中厂怎么做AI，聊聊实用主义的美图

原研哉、隈研吾又出新作了！

2024金点奖概念设计获奖作品赏析！

英文LOGO设计好，省力又讨好！

从繁到简：B端如何提升用户体验

IXDC专访 | 孙瑾：AI工具在用户研究与设计流程中的提效与应用

说说说，说你AI我！

IXDC专访 | 辛欣：设计体系在产品开发中的核心作用与AI设计工具的展望

想让面试官心动？来看看这份B端UI作品集设计

中文海报，也可以很好看！

IXDC专访 | 李田原：小米汽车 SU7 背后的设计美学与用户体验设计，引领未来出行新风尚

这次真学到了：6个App亮点案例来袭！

短短3个月，国产AI视频进入4K时代？

贾樟柯《风流一代》新海报，由黄海设计！

VI | 小米品牌手册（附下载）

IXDC专访 | 冯婷：科技浪潮下，荣耀如何打造个性化美学体验

Emoji的隐藏玩法大揭秘

巴黎世家推出“天价垃圾袋”，时尚界的新宠儿！

IXDC专访 | 方贞硕：数字化技术引领小米汽车座舱HMI新纪元

评论区设计的三个维度、九个考量点

“动动嘴”就能编辑图像，豆包悄咪咪上线了这个超实用的新功能

这中文排版细节，闭眼抄！

分类

时事

民生

政务

教育

文化

科技

财富

体娱

健康

情感

旅行

百科

职场

楼市

企业

乐活

学术

汽车

时尚

创业

美食

幽默

美体

文摘

原创标签

时事社会财经军事教育体育科技汽车科学房产搞笑综艺明星音乐动漫游戏时尚健康旅游美食生活摄影宠物职场育儿情感小说曲艺文化历史三农文学娱乐电影视频图片新闻宗教电视剧纪录片广告创意壁纸头像心灵鸡汤星座命理教育培训艺术文化金融财经健康医疗美妆时尚餐饮美食母婴育儿社会新闻工业农业时事政治星座占卜幽默笑话独立短篇连载作品文化历史科技互联网

发布位置

广东北京山东江苏河南浙江山西福建河北上海四川陕西湖南安徽湖北内蒙古江西云南广西甘肃辽宁黑龙江贵州新疆重庆吉林天津海南青海宁夏西藏香港澳门台湾美国加拿大澳大利亚日本新加坡英国西班牙新西兰韩国泰国法国德国意大利缅甸菲律宾马来西亚越南荷兰柬埔寨俄罗斯巴西智利卢森堡芬兰瑞典比利时瑞士土耳其斐济挪威朝鲜尼日利亚阿根廷匈牙利爱尔兰印度老挝葡萄牙乌克兰印度尼西亚哈萨克斯坦塔吉克斯坦希腊南非蒙古奥地利肯尼亚加纳丹麦津巴布韦埃及坦桑尼亚捷克阿联酋安哥拉