发布于 由admin

如何在 Vue 应用中处理用户体验优化，例如骨架屏、加载动画和错误提示？

各位靓仔靓女，晚上好！我是你们今晚的Vue.js用户体验优化讲师，人称“Vue优化小能手”。今晚咱们就来聊聊如何在Vue应用里把用户体验这块儿给整明白，让你的用户用得舒心、看得顺眼。

咱们今天主要讲三个方面：骨架屏、加载动画和错误提示。这三兄弟是提升用户体验的“三板斧”，砍下去绝对有效。

第一板斧：骨架屏（Skeleton Screen）

啥是骨架屏？简单来说，就是在数据还没加载出来的时候，先给用户展示一个页面“骨架”，看起来就像是内容的“占位符”。这样用户就不会盯着白花花一片发呆，以为你的应用卡死了。

  • 为啥要用骨架屏？

    想象一下，你在一个慢速网络下打开一个电商网站，页面一片空白，啥也没有。你会不会觉得很焦虑，想立马关掉？骨架屏就是为了避免这种焦虑感，让用户知道“别急，东西正在加载，马上就好”。

  • 骨架屏怎么搞？

    1. 手动撸骨架:

    这可能是最直接的方法，就是用Vue组件自己写一套。好处是高度定制，坏处是比较繁琐。

    // Skeleton.vue
<template>
  <div class="skeleton">
    <div class="skeleton-title"></div>
    <div class="skeleton-content">
      <div class="skeleton-line"></div>
      <div class="skeleton-line"></div>
      <div class="skeleton-line"></div>
    </div>
  </div>
</template>

<style scoped>
.skeleton {
  width: 100%;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.skeleton-title {
  width: 50%;
  height: 20px;
  background-color: #ddd;
  margin-bottom: 10px;
  border-radius: 3px;
  animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-content {
  width: 100%;
}

.skeleton-line {
  width: 100%;
  height: 12px;
  background-color: #ddd;
  margin-bottom: 8px;
  border-radius: 3px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>

    然后在你的组件中使用它：

    <template>
  <div>
    <Skeleton v-if="isLoading" />
    <div v-else>
      <h1>{{ data.title }}</h1>
      <p>{{ data.content }}</p>
    </div>
  </div>
</template>

<script>
import Skeleton from './Skeleton.vue';

export default {
  components: {
    Skeleton
  },
  data() {
    return {
      isLoading: true,
      data: {}
    };
  },
  mounted() {
    setTimeout(() => {
      this.data = {
        title: '我是标题',
        content: '我是内容，巴拉巴拉巴拉...'
      };
      this.isLoading = false;
    }, 2000); // 模拟加载数据
  }
};
</script>

    2. 用现成的骨架屏组件库:

    这才是程序员的正确姿势！社区里有很多优秀的Vue骨架屏组件库，比如vue-content-placeholders、vue-skeleton-loader等。用它们可以省去很多重复劳动。

    以vue-content-placeholders为例：

    npm install vue-content-placeholders --save
    <template>
  <div>
    <content-placeholders v-if="isLoading">
      <content-placeholders-img />
      <content-placeholders-text :lines="3" />
    </content-placeholders>
    <div v-else>
      <h1>{{ data.title }}</h1>
      <p>{{ data.content }}</p>
    </div>
  </div>
</template>

<script>
import ContentPlaceholders from 'vue-content-placeholders';
import ContentPlaceholdersImg from 'vue-content-placeholders/lib/components/ContentPlaceholdersImg.vue';
import ContentPlaceholdersText from 'vue-content-placeholders/lib/components/ContentPlaceholdersText.vue';

export default {
  components: {
    ContentPlaceholders,
    ContentPlaceholdersImg,
    ContentPlaceholdersText
  },
  data() {
    return {
      isLoading: true,
      data: {}
    };
  },
  mounted() {
    setTimeout(() => {
      this.data = {
        title: '我是标题',
        content: '我是内容，巴拉巴拉巴拉...'
      };
      this.isLoading = false;
    }, 2000); // 模拟加载数据
  }
};
</script>

  • 骨架屏的注意事项：

    • 尽量模拟真实内容的布局: 骨架屏要尽量和真实内容的布局保持一致，这样用户才不会觉得突兀。
    • 动画效果要自然: 骨架屏的动画效果不要太花哨，简单的淡入淡出或者闪烁就足够了。
    • 加载完成后要平滑过渡: 数据加载完成后，骨架屏要平滑过渡到真实内容，不要让用户感觉页面跳动。

第二板斧：加载动画（Loading Animation）

骨架屏是静态的，加载动画就是动态的。它可以让用户更清楚地知道“嘿，我还在努力加载呢，请耐心等待”。

  • 为啥要用加载动画？

    加载动画可以分散用户的注意力，让他们在等待的时候不会觉得无聊。一个好的加载动画甚至可以给你的应用增加一些趣味性。

  • 加载动画怎么搞？

    1. CSS动画：

    纯CSS实现的加载动画体积小、性能好，是首选方案。

    <template>
  <div class="loading" v-if="isLoading">
    <div class="spinner">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
  <div v-else>
    <h1>{{ data.title }}</h1>
    <p>{{ data.content }}</p>
  </div>
</template>

<style scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.spinner {
  width: 50px;
  height: 50px;
  position: relative;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  top: 0;
  left: 0;
}

.dot:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: -0.16s;
}

.dot:nth-child(3) {
  bottom: 0;
  left: 0;
  animation-delay: -0.32s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style>

<script>
export default {
  data() {
    return {
      isLoading: true,
      data: {}
    };
  },
  mounted() {
    setTimeout(() => {
      this.data = {
        title: '我是标题',
        content: '我是内容，巴拉巴拉巴拉...'
      };
      this.isLoading = false;
    }, 2000); // 模拟加载数据
  }
};
</script>

    2. SVG动画：

    SVG动画可以实现更复杂的动画效果，而且可以无损缩放。

    3. GIF动画：

    GIF动画简单粗暴，但要注意控制图片大小，避免影响性能。

    4. 加载动画组件库：

    就像骨架屏一样，也有很多现成的加载动画组件库可以使用，比如vue-loading-spinner、vue-spinner等。

  • 加载动画的注意事项：

    • 不要过度使用: 加载动画只是为了缓解用户的等待焦虑，不要滥用。
    • 动画效果要简洁明了: 复杂的动画效果可能会让用户感到困惑。
    • 加载完成后要及时隐藏: 数据加载完成后，一定要及时隐藏加载动画，不要让它一直转啊转。
    • 考虑不同场景: 不同的场景可能需要不同的加载动画，比如全局加载和局部加载。

第三板斧：错误提示（Error Handling）

程序出错是难免的，关键是怎么优雅地告诉用户“出错了”，而不是让用户看到一堆乱七八糟的错误信息。

  • 为啥要用错误提示？

    清晰友好的错误提示可以帮助用户理解发生了什么，并引导他们解决问题。好的错误提示甚至可以挽救一个即将流失的用户。

  • 错误提示怎么搞？

    1. 全局错误处理：

    在Vue中，可以使用errorHandler来全局捕获错误。

    // main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.errorHandler = function (err, vm, info) {
  console.error('全局错误处理:', err, info);
  // 可以展示一个友好的错误提示
  alert('哎呀，出错了！请稍后再试。');
};

new Vue({
  render: h => h(App),
}).$mount('#app');

    2. 组件内部错误处理：

    可以使用try...catch语句来捕获组件内部的错误。

    <template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p>{{ data }}</p>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
      error: ''
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error('网络请求失败');
        }
        const data = await response.json();
        this.data = data;
      } catch (error) {
        console.error('获取数据失败:', error);
        this.error = '获取数据失败，请检查网络连接。';
      }
    }
  }
};
</script>

    3. 使用Vue.nextTick：

    有时候，在错误处理函数中直接修改DOM可能会导致一些问题。可以使用Vue.nextTick来确保DOM已经更新。

    Vue.config.errorHandler = function (err, vm, info) {
  console.error('全局错误处理:', err, info);
  Vue.nextTick(() => {
    // 在DOM更新后执行
    alert('哎呀，出错了！请稍后再试。');
  });
};

    4. 展示友好的错误信息：

    不要直接把错误信息展示给用户，要进行适当的包装。

    • 区分错误类型： 根据错误类型展示不同的错误信息，比如网络错误、服务器错误、客户端错误等。
    • 提供解决方案： 如果可以，尽量提供一些解决问题的建议，比如“请检查网络连接”、“请稍后再试”等。
    • 记录错误日志： 将错误信息记录到日志中，方便后续排查问题。

    5. 使用错误提示组件：

    可以封装一个错误提示组件，方便在不同的地方使用。

    // ErrorMessage.vue
<template>
  <div class="error-message" v-if="message">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
};
</script>

<style scoped>
.error-message {
  color: red;
  padding: 10px;
  border: 1px solid red;
  border-radius: 5px;
  margin-bottom: 10px;
}
</style>
    <template>
  <div>
    <ErrorMessage :message="error" />
    <button @click="fetchData">获取数据</button>
    <p>{{ data }}</p>
  </div>
</template>

<script>
import ErrorMessage from './ErrorMessage.vue';

export default {
  components: {
    ErrorMessage
  },
  data() {
    return {
      data: '',
      error: ''
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error('网络请求失败');
        }
        const data = await response.json();
        this.data = data;
        this.error = ''; // 清空错误信息
      } catch (error) {
        console.error('获取数据失败:', error);
        this.error = '获取数据失败，请检查网络连接。';
      }
    }
  }
};
</script>

  • 错误提示的注意事项：

    • 不要隐藏错误： 即使你不想让用户看到错误信息，也要在控制台或者日志中记录下来，方便后续排查问题。
    • 错误信息要准确： 错误信息要尽量准确地描述发生了什么，方便用户理解。
    • 错误提示要及时： 错误发生后要及时提示用户，不要让用户一直等待。
    • 错误提示要美观： 错误提示的样式要和应用的整体风格保持一致。

总结

用户体验优化手段 优点 缺点 适用场景
骨架屏 减少用户等待焦虑，提升用户感知速度，让用户知道页面正在加载 需要提前设计，增加开发工作量，如果设计不当反而会降低用户体验 所有需要较长时间加载数据的页面，特别是首次加载或者网络环境较差的情况下
加载动画 分散用户注意力，缓解等待焦虑，增加趣味性 不要过度使用，动画效果要简洁明了，加载完成后要及时隐藏 所有需要加载数据的场景，特别是局部加载或者需要更长时间加载数据的情况下
错误提示 帮助用户理解发生了什么，引导用户解决问题，挽救流失用户 不要隐藏错误，错误信息要准确、及时、美观 所有可能发生错误的场景，特别是网络请求、用户输入、数据处理等

终极奥义

记住，用户体验优化是一个持续改进的过程。要不断地测试、收集用户反馈，并根据反馈进行调整。没有一劳永逸的解决方案，只有不断地优化才能让你的应用越来越好用。

好了，今天的讲座就到这里。希望大家都能成为用户体验优化的高手，打造出让用户爱不释手的Vue应用！ 如果大家觉得讲的还行，记得点个赞，下次有机会再和大家分享其他的Vue.js技巧。 谢谢大家！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注