如何用细节提升用户体验?
前端给用户反馈是提升用户体验的重要部分,根据场景选择不同的方式可以有效地提升产品的易用性和用户满意度。以下是常见的方法:
1. 视觉反馈
用户执行了某些操作后,需要即时确认操作结果。例如:按钮点击、数据提交、页面加载等。同时,在加载过程中,避免空白页面带来的不适感。
1.1 按钮状态变化
🌰:用户点击按钮后按钮变为不可点击,并显示“提交中...”。
<template><el-button :loading="isSubmitting" @click="handleSubmit">{{ isSubmitting ? '提交中...' : '提交' }}</el-button>
</template><script>
import { ref } from 'vue';export default {setup() {const isSubmitting = ref(false);const handleSubmit = async () => {isSubmitting.value = true;// 模拟耗时操作await new Promise(resolve => setTimeout(resolve, 2000));isSubmitting.value = false;alert('提交成功!');};return { isSubmitting, handleSubmit };},
};
</script>
适用场景:数据提交、文件上传等耗时操作。
1.2 骨架屏
🌰:页面加载时显示骨架屏代替真实内容。
<template><div><el-skeleton v-if="loading" :rows="5" /><div v-else>加载完成的内容</div></div>
</template><script>
import { ref, onMounted } from 'vue';
export default {setup() {const loading = ref(true);onMounted(() => {// 模拟加载数据setTimeout(() => {loading.value = false;}, 2000);});return { loading };},
};
</script>
适用场景:页面加载、图片加载等需要较长时间的操作。
1.3 占位符
🌰:图片加载失败时显示默认占位符。
<template><el-image src="invalid-url.jpg" :fallback="defaultImage" alt="图片加载失败" />
</template><script>
export default {data() {return {defaultImage: 'https://via.placeholder.com/150',};},
};
</script>
2. 声音反馈
用户操作需要即时感知但不便通过视觉传达。例如:移动端设备、盲人用户辅助、警报系统等。
2.1 提示音、警告音等
表单提交成功时:
const audio = new Audio('/success.mp3');
audio.play();
用户输入错误密码时:
const audio = new Audio('/error.mp3');
audio.play();
3. 文本提示
需要向用户提供明确的操作结果或错误原因。
3.1 通知栏提示
🌰:数据保存成功后,页面右上角弹出提示。
ElMessage.success('保存成功!');
3.2 错误信息
🌰:表单校验错误高亮
<template><el-form ref="formRef" :model="form" :rules="rules" label-width="100px"><!-- 邮箱输入项 --><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" /></el-form-item><!-- 提交按钮 --><el-form-item><el-button type="primary" @click="handleSubmit">提交</el-button></el-form-item></el-form>
</template><script>
import { reactive, ref } from 'vue';export default {setup() {const form = reactive({email: '',});const formRef = ref(null);// 校验规则const rules = {email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },],};// 提交表单const handleSubmit = () => {// 调用校验方法formRef.value.validate((valid) => {if (valid) {alert('提交成功!');} else {alert('校验失败,请检查输入内容!');}});};return { form, rules, formRef, handleSubmit };},
};
</script>
适用场景:表单提交失败时,高亮显示错误字段。
4. 进度条
用户操作需要较长时间完成,需要明确告知用户操作的进度。
分为:
- 线性进度条:文件上传、任务进度显示。
- 环形进度条:图表渲染、复杂计算加载。
<template><div><h2>线形进度条</h2><el-progress :percentage="uploadProgress" /><h2>圆形进度条</h2><el-progress :percentage="loadingProgress" type="circle" /><div style="margin-top: 20px;"><!-- 按钮控制进度条模拟 --><el-button type="primary" @click="startUpload">开始上传</el-button><el-button type="success" @click="startLoading">开始加载</el-button></div></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 定义上传进度和加载进度const uploadProgress = ref(0);const loadingProgress = ref(0);let uploadInterval = null;let loadingInterval = null;// 模拟上传进度const startUpload = () => {clearInterval(uploadInterval);uploadProgress.value = 0;uploadInterval = setInterval(() => {if (uploadProgress.value >= 100) {clearInterval(uploadInterval);alert('上传完成!');} else {uploadProgress.value += 10; // 每次增加 10%}}, 500);};// 模拟加载进度const startLoading = () => {clearInterval(loadingInterval);loadingProgress.value = 0;loadingInterval = setInterval(() => {if (loadingProgress.value >= 100) {clearInterval(loadingInterval);alert('加载完成!');} else {loadingProgress.value += 15; // 每次增加 15%}}, 400);};return {uploadProgress,loadingProgress,startUpload,startLoading,};},
};
</script>
加载过程中展示:
5. 弹窗反馈
需要用户主动关注并采取操作时。
5.1 确认对话框
<template><el-button type="danger" @click="confirmDelete">删除</el-button>
</template><script>
import { ElMessageBox } from 'element-plus';export default {setup() {const confirmDelete = () => {ElMessageBox.confirm('确定要删除吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {alert('删除成功!');}).catch(() => {alert('已取消删除');});};return { confirmDelete };},
};
</script>
5.2 信息弹窗
用户登录成功后弹出欢迎信息。
ElMessageBox.alert('欢迎回来!', '登录成功');
6. 微交互
需要提升用户体验的小型反馈,如鼠标悬停、点击等。
6.1 鼠标悬停效果
🌰:用户悬停到商品卡片上,显示“加入购物车”按钮。
<template><div class="product-card" @mouseover="showButton = true" @mouseleave="showButton = false"><img src="https://via.placeholder.com/150" alt="商品" /><el-button v-if="showButton" type="primary" size="mini"> 加入购物车 </el-button></div>
</template><script>
import { ref } from 'vue';
export default {setup() {const showButton = ref(false);return { showButton };},
};
</script>
适用场景:商品展示、菜单交互。
总结:
以上使用 Vue 3 和 Element Plus 组件库实现的一些简单方式,可以根据不同场景选择合适的反馈方式,提升用户体验!
相关文章:
如何用细节提升用户体验?
前端给用户反馈是提升用户体验的重要部分,根据场景选择不同的方式可以有效地提升产品的易用性和用户满意度。以下是常见的方法: 1. 视觉反馈 用户执行了某些操作后,需要即时确认操作结果。例如:按钮点击、数据提交、页面加载等。…...
容器设计模式:Sidecar
文章目录 容器设计模式:Sidecar 模式1. 什么是 Sidecar 模式?2. Sidecar 模式的原理2.1 工作机制2.2 常见用途 3. Sidecar 模式示例示例:日志收集 4. Sidecar 模式的架构图图例: 5. Sidecar 模式的优点6. Sidecar 模式的局限性7. …...
深入剖析MyBatis的架构原理
架构设计 简要画出 MyBatis 的架构图 >> Mybatis 的功能架构分为哪三层? API 接口层 提供给外部使用的接口 API,开发人员通过这些本地 API 来操纵数据库。接口层一接收到调用请求就会调用数据处理层来完成具体的数据处理。MyBatis 和数据库的…...
深入C语言文件操作:从库函数到系统调用
引言 文件操作是编程中不可或缺的一部分,尤其在C语言中,文件操作不仅是处理数据的基本手段,也是连接程序与外部世界的重要桥梁。C语言提供了丰富的库函数来处理文件,如 fopen、fclose、fread、fwrite 等。然而,这些库…...
【Linux】shell脚本二
2、接收用户的参数 shell脚本已经内设了用于接收用户输入参数的变量,变量之间可以使用空格隔开。 如:./test.sh one two three four $0:对应的是当前shell脚本程序的名称,即test.sh$#:对应的是总共有几个参数&#…...
从万维网到人工智能:改变生活的11项技术里程碑
1984 年 1 月 24 日,苹果公司推出了 Macintosh 128K,从此永远改变了个人电脑的面貌。 史蒂夫・乔布斯(Steve Jobs)这款小巧且用户友好的电脑向全世界引入了图形用户界面,标志着个人技术发展历程中的一个关键时刻。 从…...
Hyperledger Fabric 2.x 环境搭建
Hyperledger Fabric 是一个开源的企业级许可分布式账本技术(Distributed Ledger Technology,DLT)平台,专为在企业环境中使用而设计,与其他流行的分布式账本或区块链平台相比,它有一些主要的区别。 环境准备…...
【Maven】自定义Maven插件
场景: 1、自定义一个插件目标 timer,用于显示当前日期时间。 2、将 timer 绑定到 validate 阶段。 调研 1、maven-clean-plugin 下载 maven-clean-plugin 插件的源码,在本地使用 IDEA 打开 可以看到,maven-clean-plugin 插件是…...
修改vscode中emmet中jsx和tsx语法中className的扩展符号从单引号到双引号 - HTML代码补全 - 单引号双引号
效果图 实现步骤 文件 > 首选项 > 设置搜索“”在settings.json中修改,增加 "emmet.syntaxProfiles": {"html": {"attr_quotes": "single"},"jsx": {"attr_quotes": "double","…...
数据结构day3作业
一、完整功能【顺序表】的创建 【seqList.h】 #ifndef __SEQLIST_H__ #define __SEQLIST_H__#include <stdio.h> #include <string.h> #include <stdlib.h>//宏定义,线性表的最大容量 #define MAX 30//类型重定义,表示要存放数据的类…...
pydub AudioSegment实现音频重采样 - python 实现
DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。 需要更多数据资源和技术解决方案,知识星球: “DataBall - X 数据球(free)” -------------------------------------------------------------…...
C++多线程常用方法
在 C 中,线程相关功能主要通过头文件提供的类和函数来实现,以下是一些常用的线程接口方法和使用技巧: std::thread类 构造函数: 可以通过传入可调用对象(如函数指针、函数对象、lambda 表达式等)来创建一…...
【网络安全】Web Timing 和竞争条件攻击:揭开隐藏的攻击面
Web Timing 和竞争条件攻击:揭开隐藏的攻击面 在传统的 Web 应用中,漏洞的发现和利用通常相对容易理解。如果代码存在问题,我们可以通过发送特定输入来强制 Web 应用执行非预期的操作。这种情况下,输入和输出之间往往有直接关系&…...
12月最新编程语言排行榜
“岁末将至,2024年的编程世界又发生了哪些变化?是Python依然稳坐王座,还是有新语言杀出重围?让我们一起看看12月最新编程语言排行榜,寻找未来技术的风向标。” 今年,哪些编程语言成为行业焦点?…...
迭代器模式
迭代器模式 迭代器模式(Iterator Pattern)是一种行为设计模式,它提供了一种方法来访问一个聚合对象中的各个元素,而又不暴露其内部的表示。这种模式允许你逐个访问对象中的元素,而无需知道其底层的数据结构。迭代器模…...
探秘 WB 实验:AI 助力攻克操作难关
在生物学研究的浩瀚领域中,WB 实验犹如一座关键的灯塔,照亮了我们探索蛋白质世界的道路。今天,就让我们一同深入了解 WB 实验的全貌,以及 AI 如何在其中发挥神奇作用,帮助我们应对实际操作中的重重挑战。 WB 实验&…...
labelimg使用指南
YOLOv8目标检测(一)_检测流程梳理:YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集:YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型:YOLOv8目标检测(三)_训…...
车载终端_智能车载终端定制_农机/出租车/叉车/驾培车载终端MTK方案
车载终端集成了先进的技术和卓越的性能,采用了联发科的高效低功耗ARM处理器,具备八核架构,主频高达2.0GHz,基于12nm制程工艺,不仅性能强劲,而且功耗控制出色。基本配置为4GB内存与64GB存储,用户…...
Unity中Pico实现透视
1.参照Pico官方【透视 | PICO 开发者平台】文档设置。 2.额外的需要将主相机的post processing禁用。...
elk部署与实战案例
**ELK Stack** 是一个非常强大的日志处理和分析平台,由 **Elasticsearch**、**Logstash** 和 **Kibana** 三个组件组成。它被广泛应用于日志收集、搜索、分析和可视化。ELK 可以处理大量数据,并帮助用户从中提取有价值的信息。以下是一个从部署到实际应用…...
Isaac Gym, Sim, Lab
本文仅为个人学习笔记,文章参考请见参考资料部分,主要目的是进行多场景并行仿真测试,笔记中大部分内容都是针对于这个目标。 参考资料 常见问题 — Isaac Lab 文档 https://github.com/isaac-sim/IsaacLab 一. Gym, Sim, Lab 之间的关系 Is…...
活着就好20241217
亲爱的朋友们,大家早上好!🌞 今天是17号,星期二,2024年12月的第十七天,同时也是第50周的第八天,农历甲辰[龙]年十一月初十三日。在这晨光熹微的美好时刻,愿那温暖而明媚的阳光轻轻拂…...
第十六章:IO流 (java.io包中)
一、理解 1. 简单而言:流就是内存与存储设备之间传输数据的通道、管道。 2. 分类: (1) 按方向 ( 以 JVM 虚拟机为参照物 ) 【重点】 输入流:将 < 存储设备 > 中的内容读入到 < 内存 > 中。 输出流:将 < 内…...
Introduction to NoSQL Systems
What is NoSQL NoSQL database are no-tabular非數據表格 database that store data differently than relational tables 其數據的存儲方式與關係型表格不同 Database that provide a mechanism機制 for data storage retrieval 檢索 that is modelled in means other than …...
【JVM】JVM基础教程(四)
上一章:【JVM】JVM基础教程(三)-CSDN博客 目录 自动垃圾回收 方法区的回收 方法区回收条件 手动触发回收 堆回收 如何判断堆上的对象可以回收? 可以给对象引用赋值null,切断引用 引用计数法 循环引用缺点 查…...
前端实现在线预览excel文件
在前端开发中,经常会遇到需要在线预览各种文件的需求。本文将介绍如何使用前端技术实现在线预览 Excel 文件的功能。 一、基于微软office服务的excel预览 获取要预览的 Excel 文件的 URL(例如存储在 OneDrive 或 SharePoint 上的文件)。 使…...
Python 写的《桌面时钟》屏保
原代码: # 日历式时钟 # 导入所需的库 # 作者:Hoye # 日期:2024年12月16日 # 功能:显示当前日期、星期、时间,并显示模拟时钟 import tkinter as tk from tkinter import ttk import time import math import sysdef …...
计算机视觉单阶段实例分割实践指南与综述
概述 原文地址:https://towardsdatascience.com/single-stage-instance-segmentation-a-review-1eeb66e0cc49 实例分割是一项具有挑战性的计算机视觉任务,需要预测对象实例及其每像素分割掩码。这使其成为语义分割和目标检测的混合体。 自 Mask R-CNN …...
Axios结合Typescript 二次封装完整详细场景使用案例
Axios 是一个基于 promise 的 HTTP 客户端,用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求,例如设置统一的请求前缀、头部、超时时间,统一处理请求和响应的格式,以及错误处理等。 以下是一个使用 TypeScrip…...
C++面试:HTTP1.0/1.1,HTTP2.0,HTPP3.0的区别
1.你对HTTP1.0/1.1,HTTP2.0,HTPP3.0有什么了解? 答:HTTP1.0: ①属于无连接式,每次发送HTTP请求都需要建立TCP连接。 ②会造成发送时的对头阻塞,当上一个请求没有应答,当前的请求就会…...
使用 Docker Compose 部署 Redis 主从与 Sentinel 高可用集群
文章目录 使用 Docker Compose 部署 Redis 主从与 Sentinel 高可用集群Redis 主从架构简介Redis Sentinel 简介配置文件1. 主节点配置 (redis-master.conf)2. 从节点配置 (redis-slave1.conf 和 redis-slave2.conf)redis-slave1.confredis-slave2.conf3. Sentinel 配置 (sentin…...
【Java】4、虚拟机 JVM
目录 Java内存区域详解(重点) JVM垃圾回收详解(重点) 类文件结构详解 类加载过程详解 类加载器详解(重点) 最重要的JVM参数总结 JDK监控和故障处理工具总结 JVM线上问题排查和性能调优案例 参考: JVM 核心技术 32 讲 深入浅出 Java 虚拟机...
Vue3之组合式API详解
Vue 3引入了一种新的API风格——组合式API(Composition API),旨在提升组件的逻辑复用性和可维护性。本文将详细阐述Vue 3中的组合式API,包括其定义、特点、使用场景、优势等,并给出具体的示例代码。 一、定义 组合式…...
Flutter编译Module was compiled with an incompatible version of Kotlin错误解决
文章目录 编译报错如下解决方法修复方案 编译报错如下 e: C:/Users/YUAN/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.9.20/e58b4816ac517e9cc5df1db051120c63d4cde669/kotlin-stdlib-1.9 .20.jar!/META-INF/kotlin-stdlib-jdk8.kotlin_module:…...
Uniapp插件如何通过NFC读取多种证卡信息?
nfc读卡uniapp插件,由中软高科进行开发,主要是通过NFC读取居民身份证、港澳台居住证、外国人居住证、护照等证卡的信息。经过多个版本的升级更新,目前性能已趋于稳定,并且读卡速度较之最初版本有了大的提升。 注意事项 测试使用的…...
本地docker镜像改名字
如果你想修改本地 Docker 镜像的名字,可以通过创建该镜像的新标签(tag)来实现。Docker 中没有直接修改镜像名字的命令,但可以通过重新打标签的方式实现类似的效果。以下是具体步骤: 查看当前镜像: docker…...
VS Code 远程连接 SSH 服务器
文章目录 一、安装 Remote - SSH 扩展并连接远程主机二、免密连接远程主机1. 生成 SSH 密钥对2. 将公钥复制到远程服务器3. 配置 SSH 客服端4. 连接测试 随着技术的不断迭代更新,在 Linux 系统中使用 Vim、nano 等基于 Shell 终端的编辑器(我曾经也是个 …...
艾体宝案例丨CircleCI 助力 ANA Systems 打造高效 CI/CD 模型
在现代软件开发领域,效率和可靠性是企业在竞争中取胜的关键。本文将深入探讨 ANA Systems 如何通过引入业界领先的 CI/CD 平台——CircleCI,克服传统开发流程的瓶颈,实现开发运营效率的全面提升。同时,本文还将详细解析 CircleCI …...
vue 上传组件 vxe-upload 实现拖拽调整顺序
vue 上传组件 vxe-upload 实现拖拽调整顺序,通过设置 drag-sort 参数就可以启用拖拽排序功能 官网:https://vxeui.com/ 图片拖拽排序 <template><div><vxe-upload v-model"imgList" mode"image" multiple drag-sor…...
Elasticsearch的一些介绍
你想问的可能是 **Elasticsearch**,以下是关于它的一些介绍: ### 概述 Elasticsearch是一个基于Apache Lucene库构建的开源分布式搜索和分析引擎,采用Java语言编写,具有高性能、可扩展性和易用性等特点,可用于各种数据…...
从源码构建安装Landoop kafka-connect-ui
背景 部署Landoop kafka-connect-ui最简单的办法还是通过docker来部署,我们之前的kafka-connect-ui就是通过docker部署的,但是,最近发现个问题:当使用docker部署且防火墙使用的是firewalld的情况下,就会出现端口冲突。…...
MybatisPlus-扩展功能
代码生成 在使用MybatisPlus以后,基础的Mapper、Service、PO代码相对固定,重复编写也比较麻烦。因此MybatisPlus官方提供了代码生成器根据数据库表结构生成PO、Mapper、Service等相关代码。只不过代码生成器同样要编码使用,也很麻烦。 这里…...
发布/部署WebApi服务器(IIS+.NET8+ASP.NETCore)
CS软件授权注册系统-发布/部署WebApi服务器(IIS.NET8ASP.NETCore) 目录 本文摘要VS2022配置发布VS2022发布WebApiIIS服务器部署WebApi 将程序文件复制到云服务器添加网站配置应用程序池配置dns域名配置端口阿里云ECS服务器配置19980端口配置https协议 (申请ssl证书)测试WebAp…...
【2025最新计算机毕业设计】基于SpringBoot+Vue城市中小学体育场馆预约系统【提供源码+答辩PPT+文档+项目部署】
一、项目技术架构: 本项目是一款城市中小学体育场馆预约系统的设计与实现。 该SpringBootVue的城市中小学体育场馆预约系统,后端采用SpringBoot架构,前端采用VueElementUI实现页面的快速开发,并使用关系型数据库MySQL存储系统运行…...
Spring Security 6 系列之二 - 基于数据库的用户认证和认证原理
之所以想写这一系列,是因为之前工作过程中使用Spring Security,但当时基于spring-boot 2.3.x,其默认的Spring Security是5.3.x。之后新项目升级到了spring-boot 3.3.0,结果一看Spring Security也升级为6.3.0,关键是其风…...
vue中打包dist文件内static 和 assets 的区别
背景 在Vue.js项目中,assets 和 static 是两个用于存放静态资源的文件夹,但它们在使用方式和处理机制上有所不同 用途 assets: assets 文件夹通常用于存放那些需要在构建过程中被Webpack处理的静态资源。这些资源可以包括图片、字体、样式文件&#…...
Big Model weekly | 第49期
点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 01 Magnetic Preference Optimization: Achieving Last-iterate Convergence for Language Models Alignment 自我对弈方法在多个领域增强模型能力方面展现出了显著的成功。在基于人类反馈的强化学习࿰…...
Node.js内置模块
1.内置模块 Node.js的中文网参考手册:https://nodejs.cn//api 帮助文档 API文档:查看对应的模块,左边是模块,右边是模块的成员 源码:https://github.com/nodejs/node/tree/main/lib 查看 例如: http.js 创建web服务器的模块 -->进入源码中,搜索…...
使用Nexus3搭建npm私有仓库
一、npm介绍 npm的全称是Node Package Manager,它是一个开放源代码的命令行工具,用于安装、更新和管理Node.js模块。npm是Node.js的官方模块管理器,它允许用户从一个集中的仓库中下载和安装公共的Node.js模块,并将这些模块集成到…...
MySQL学习之表操作
MySQL学习之表操作 基础命令 查询当前所在数据库的所有表 show tables;查看指定的表结构, 可以查看到指定表的字段,字段的类型、是否可以为NULL,是否存在默认值等信息 mysql> desc user; ----------------------------------------------- | Field |…...