中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請(qǐng)輸入搜索關(guān)鍵詞
知識(shí)庫 知識(shí)庫

優(yōu)網(wǎng)知識(shí)庫

探索行業(yè)前沿,共享知識(shí)寶庫

80%設(shè)計(jì)師沒理全的UI加載方式

發(fā)布日期:2025-06-04 15:06:57 瀏覽次數(shù): 841 來源:行空XKdesign
01
循环loading
循环loading图标传递信息最少,也称为不确定指示器。建议用于加载耗时1-2秒的时候,作为弱提示即可。常出现在状态栏、上拉或下拉刷新等待等等。
状态栏loading

状态栏加载是系统提示,出现在网络信号情况不好的时候。

标题栏也可以进行loading设计,比如QQ相册加载提示。


图片loading
图片加载常用loading样式简单够用,比如公众号图片加载。
若需要体验更好的图片加载,可以先采用色块占位符或模糊图像再获取完整数据。这种属于分步加载模式,优先展示加载快的数据,让用户有内容可看而不是干等。

通过程序提取面积较大的主色调,并设置几种符合产品调性的默认色,以防取色失败。需保证色彩库的颜色高级耐看,饱和度不要太高,不然很刺眼反倒引起到不好的体验。


按钮loading
按钮loading是按钮控件的状态之一,命令提交后因为网络等原因可能需要等待时间以loading样式反馈给用户。按钮loading的非模态加载形式可以保障用户浏览体验。

还有Google地图在进行搜索时,搜索框最右侧功能图标会变成loading,采用轻量的loading替换功能图标进行局部反馈提示。

除了关键任务外都建议使用非模态加载设计,比如iOS地图搜索时的局部加载,用户在等待时仍可浏览地图或选择进行其他操作。


页面刷新
上拉或下拉页面刷新,设计上有以下几种方式提升品牌感知或情感化体验。
  • 结合IP设计成趣味动画,如芒果TV、美团外卖(下拉拿红包)、遥望、知乎等。

← 5图 →

  • 结合文字LOGO图形进行设计,如得物、链家等

  • 结合产品图形进行设计,如麦麦商场的汉堡刷新动画
  • 情感化文案,如喜马拉雅每次下拉都会提示不同文案


启动页/白屏加载
产品启动页或空白页加载,一般采用品牌logo进行设计。如headspace一款正念冥想的APP启动页是logo模拟呼吸的加载动画,贴合产品且让人身心舒缓。

同样的,空白页加载也是loading占据整页,当内容呈现时间较长时出现。


toast模态加载
toast加载形式出现在画面中间,是模态加载提示,可以避免用户继续除返回外的其他操作。可以用于可以作为关键操作提交时等待提示,如手机验证码发送任务提交中、支付中等。也可以是作为异常情况下的通用处理方式。



02
进度条样式
进度条带进度信息,也称为确定指示器。常用于页面加载,可以出现在导航栏或页面中间,进度条样式根据场景进行设计。
进度页/弹窗

进度页或弹窗形式,一般在耗时大于8s的阻断型任务时做明显提醒。所以需明确进度占比减缓用户焦虑。英语流利说的课程下载页进度提示清晰,还会提供学习贴示。

软件更新进度提示,提供进度百分比,预计大概剩余时间。

另外,还可以采用分步进度提示,将后台任务转变成用户语言来告知耗时的必要性。


导航栏进度条
导航栏进度条较轻量,可等同于不确定加载指示器使用。常见于内容页加载,比如各类新闻内容页、微信公众号内容页等等。

底部导航栏进度条弱视觉,可以不干扰用户,比如视频加载、浏览器搜索加载。


进度图标

另外还有进度图标,图标样式提示弱没有进度百分比,可用于异步任务进行中。

文件下载进度图标提示。

英语流利说APP的导航图标在有任务进行时,会切换成进度图标以激励用户。

微信图片/文件发送进度。



03
等待体验优化
用户等待忍耐度

加载设计本身是为了减少用户等待感觉,针对不同等待时长使用相应加载设计:

  • <1s,无需加载动效避免引起负面效果
  • 1-2s,建议使用不确定指示器loading
  • 2-8s,需要使用带进度百分比的加载提示
  • >8s,可以设计互动贴示、场景故事动画等缓解用户焦虑,或进行加载拆分或直接转为异步加载

常见有以下几种设计方式来优化等待体验,让用户尽可能快得有内容可看:分步(渐进式)加载、骨架屏加载、预加载、智能加载、缓存加载。
分步加载
分步加载是根据内容资源加载性价比决定先后,一般图文会优先加载文字,让用户对页面内容有大概了解。适用于内容较多的复杂页面。比如AppleMusic优先加载名称,再是专辑封面。

骨架屏加载
在数据加载之前先显示页面大概框架布局,用灰色占位色块模拟。适用于页面布局较固定的情况,常见于内容型产品。


预加载/懒加载
预加载是指在用户操作之前,提前加载下个模块可能需要的数据。
而懒加载只在用户到相应位置时进行加载,避免一次性加载过多数据。通常应用在上拉下拉刷新处。
在页面加载时通常先加载首屏可见区域的图片,其他区域图片等用户滚动到时才进行加载,也是符合元素加载性价比原则。
智能加载

根据网络情况选择不同的数据加载,常见于视频播放质量的选择上,保证视频播放的流畅度。












優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個(gè)人信息保護(hù)聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問!
專屬顧問
馬上咨詢
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢