优秀的编程知识分享平台

网站首页 > 技术文章 正文

轻量级骨架屏设计，让你的页面“薄荷清新”

nanyue 2024-10-30 02:58:21 技术文章 5 ℃

I. 介绍骨架屏

定义

骨架屏是一个简单的占位图，用于在内容加载过程中给用户展示一个占位界面，让用户知道正在加载中。

产生背景

随着Web应用日益复杂，加载时间相应增长，用户往往需要很长时间才能看到完整的界面；而骨架屏就是为了缩短加载时间，提升用户体验而产生的。

II. 骨架屏的设计原则

模拟真实界面

骨架屏要体现完整的页面结构，并模拟真实的UI元素，使用户能够快速熟悉页面内容。

简单设计

骨架屏要避免过于花哨的设计，保持简洁，以提高用户的可读性和认知可靠性。

可重复使用

骨架屏应该可以在多个页面内使用，以避免在每个页面上使用不同的骨架屏，这样可以提高设计和开发效率。

III. 骨架屏的实现

使用CSS和JavaScript

使用CSS和JavaScript实现骨架屏是最常见的一种方法，通过隐藏或展示元素，以达到占位或显示的效果。

<!DOCTYPE html>
<html>
<head>
	<title>骨架屏实现demo</title>
	<style>
  .container {
      padding: 10px;
    }

    .skeleton {
      height: 50px;
      margin-bottom: 10px;
      background-color: #ddd;
      border-radius: 5px;
      animation: loading 1s ease-in-out infinite;
    }

    @keyframes loading {
      from {
          background-position: 0 0;
      }

      to {
          background-position: 100% 0;
      }
    }
  </style>
</head>
<body>
	<div class="container">
		<div class="skeleton"></div>
		<div class="skeleton"></div>
		<div class="skeleton"></div>
		<div class="skeleton"></div>
		<div class="skeleton"></div>
	</div>
	<script>
    window.addEventListener('load', function() {
      var skeletonBlocks = document.querySelectorAll('.skeleton');
      skeletonBlocks.forEach(function(block) {
        block.style.width = block.offsetWidth + 'px';
      });
    });
  </script>
</body>
</html>

预渲染技术

通过预渲染技术，将骨架屏作为静态页面一并传送给浏览器，以缩短页面加载时间。

<!DOCTYPE html>
<html>
<head>
	<title>骨架屏预渲染实现</title>
  <style>
    #container {
        padding: 10px;
      }
  
    .skeleton {
      height: 50px;
      margin-bottom: 10px;
      background-color: #ddd;
      border-radius: 5px;
      animation: loading 1s ease-in-out infinite;
    }
  
    @keyframes loading {
      from {
          background-position: 0 0;
      }

      to {
          background-position: 100% 0;
      }
    }
  </style>
</head>
<body>
	<div id="container">
		<div class="skeleton"></div>
		<div class="skeleton"></div>
		<div class="skeleton"></div>
		<div class="skeleton"></div>
		<div class="skeleton"></div>
	</div>
	<div id="content" style="display: none;">
		<!-- 正常内容 -->
		<p>这里是正常的内容</p>
	</div>
	<script type="text/javascript">
		window.onload = function(){
      setTimeout(()=>{
        document.getElementById('container').style.display = 'none';
			  document.getElementById('content').style.display = 'block';
      },1500)
		}
	</script>
</body>
</html>

模板

通过使用模板，可以更容易地生成骨架屏，以加快页面加载时间。

小程序

vant weapp Skeleton 骨架屏

IV. 骨架屏的优势

缩短加载时间

骨架屏可以吸引用户的眼球，与此同时，让用户感受到页面正在加载中，从而减少用户的焦虑感，提升用户对应用体验的满意度。

提高用户留存率

大多数用户并不在意应用程序加载的快慢，但往往会因为等待时间长而放弃访问或离开应用程序。因此，骨架屏可以大大降低用户的流失率。

提高品牌认知度

通过设计良好的骨架屏，可以提高用户对于品牌的认知度，进而增加品牌的知名度和信誉度。

V. 结论

骨架屏的应用逐渐成为设计和开发中的一项重要技术，它可以缩短页面加载时间，提升用户体验，同时还可以增加品牌认知度。

Tags：

猜你喜欢

最近发表
标签列表