轻量级骨架屏设计，让你的页面“薄荷清新”-阿里云开发者社区

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

2024-01-24 111

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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. 结论

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

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

I. 介绍骨架屏

定义

产生背景