优化前端开发中的提示语设计基本原则
文章目录
- 一致
- 1、同一对象,指称一致
- 2、同一状态,描述一致
- 3、同一行为,提示一致
- 简洁
- 1、用词简短
- 条理
- 1、上下呼应
- 2、主次分明
- 亲和
- 1、化“难”为易
- 2、“礼”字当先
- 3、正向表达
- 灵动
- 1、用词多变
- 2、远离平淡
- 契合
- 1、身份契合
- 2、产品契合
- 示例
- 1、错误提示
- 2、操作提示
- 3、状态提示
在Web前端开发的广阔领域中,提示信息作为通过文字、图标或多种媒介向用户传达反馈、指导及警示的关键元素,发挥着举足轻重的作用。它们不仅是用户理解界面操作的重要桥梁,更是引导用户流畅完成各项任务的无形之手。
以下精心提炼的原则,旨在为界面提示用语的规划与设计提供一套统一的规范与标准,确保提示信息的风格一致、表述清晰、流畅自然,从而为用户营造出一个愉悦、高效的阅读体验环境。
一致
1、同一对象,指称一致
| 反例 | 正例 |
|---|---|
| 缺少姓名、电话或电子邮件的联系人。 | 缺少姓名、电话或电子邮件的联系人。 |
| 每位 SIM 卡联系人可保留 1 个唯一的姓名、2 个号码和 1 个 E-mail 地址。 | 每位 SIM 卡联系人可保留 1 个姓名、2个号码和 1 个电子邮件。 |
同一对象,不能有的用“E-mail 地址”,有的用“电子邮件”。
2、同一状态,描述一致
| 反例 | 正例 |
|---|---|
| 模板自动更新 仅 WLAN 下 | 模板自动更新 仅 WLAN 下 |
| 自动更新智能识别库 仅连接 WLAN 时 | 自动更新智能识别库 仅 WLAN 下 |
都是在连接 WLAN 状态下,不能有的用“仅 WLAN 下”,有的用“仅连接 WLAN 时”。
3、同一行为,提示一致
| 反例 | 正例 |
|---|---|
| 正在进行XXX,请稍候… | 正在XXX… |
| 正在进行XXX… | 正在XXX… |
都是正在进行某行为,不能有的提醒“请稍候”,有的不提醒。
简洁
1、用词简短
| 反例 | 正例 |
|---|---|
| 最近更新时间:XXX | 更新:XXX |
| 截屏的图片:XXX张 | 截屏:XXX张 |
存在多种表达方式时,选取最简短的词语。
条理
1、上下呼应
| 反例 | 正例 |
|---|---|
| 为何搜索不到热点? | 为何搜索不到热点? |
| 1. 请检查是否设置了隐藏 SSID。 | 1. 可能设置了隐藏 SSID。 |
标题用“为何搜索不到热点”,是询问问题出现的原因,在此场景下,下文描述就应给出原因。若让用户检查是否设置了隐藏 SSID,这不是描述原因,而是给出问题解决方法,上下不呼应。
2、主次分明
| 反例 | 正例 |
|---|---|
| 现在启用 | 现在启用 |
| 免打扰期间,通知栏会出现月亮图标,允许有限打扰内容(包含闹钟)仍响铃或振动,其他来电、信息不响铃不振动。 | 来电、信息都将静音(允许打扰内容除外)。通知栏会出现月亮图案。 |
“静音”为主要信息,应在前;“月亮图标”为次要信息,应在后。
亲和
1、化“难”为易
| 反例 | 正例 |
|---|---|
| LTE 载波聚合 | LTE 载波聚合 |
| 提高网络速度 |
复杂的信息给出说明,降低理解难度。
2、“礼”字当先
| 反例 | 正例 |
|---|---|
| 必须至少添加一个收件人。 | 请添加收件人。 |
少用强制类词语。
3、正向表达
| 反例 | 正例 |
|---|---|
| 检查测试结果是否有问题。 | 检查测试结果是否正常。 |
多从正向描述。
灵动
1、用词多变
| 反例 | 正例 |
|---|---|
| 用于标识设备,以提供数据同步、备份恢复和查找设备等服务,以及在“查找设备“锁屏界面回拨电话。 | 用于标识设备,旨在提供数据同步、备份恢复、查找设备等服务,以及在“查找设备“锁屏界面回拨电话。 |
避免出现两个“以”,显得单调。
2、远离平淡
| 反例 | 正例 |
|---|---|
| 表盘中的那一抹红色,像极了军人划在脸部的彩绘。 | 表盘中的那一抹红色,恰似军人划在脸部的彩绘。 |
广告宣传类用语,表达要有品位与个性。
契合
1、身份契合
| 反例 | 正例 |
|---|---|
| 若您是未成年人,需监护人同意才能使用本应用。 | 若你是未成年人,需监护人同意才能使用本应用。 |
对孩子用“您”不合适。
2、产品契合
表达要与所描述的设备特性相契合,不可将A设备特性的描述,机械地用到与之有差异的B设备。若某个功能适用范围无法区分到具体设备,则用“设备”进行广覆盖。不可在智能穿戴设备界面上出现智慧屏特性的描述,反之,亦不可在智慧屏界面上出现智能穿戴设备特性的描述。
示例
1、错误提示
系统错误提示(错误原因+请稍后再试)
| 情景 | 提示语 |
|---|---|
| 服务器错误 | 服务器异常,请稍后再试 |
| 请求格式错误 | 请稍后再试 |
用户输入错误提示(错误原因+操作引导)
| 情景 | 提示语 |
|---|---|
| 短信验证码错误 | 验证码错误,请重新输入 |
| 判断手机号是否合法 | 请输入正确的手机号 |
用户输入敏感词汇(输入内容存在敏感词汇+请调整)
| 情景 | 提示语 |
|---|---|
| 输入信息中含有敏感词汇 | 输入内容存在敏感词汇,请调整 |
必填项内容未填写(请输入+内容)
| 情景 | 提示语 |
|---|---|
| 密码为空时点击登录 | 请输入密码 |
用户操作超出限定范围提示
| 情景 | 提示语 |
|---|---|
| 超过当天限制 | 今日邀请好友次数已达上限 |
| 获取次数已达上限 | 今日短信验证码获取次数已达上限,请明日再试 |
操作对象超过系统限制(操作对象+已达上限)
| 情景 | 提示语 |
|---|---|
| 添加图片达到上限 | 图片添加已达上限 |
用户操作过于频繁(操作+过于频繁+请稍后再试)
| 情景 | 提示语 |
|---|---|
| 手机短信验证码发送超频繁 | 短信验证码发送过于频繁,请稍后再试 |
2、操作提示
操作成功(对象+结果)
| 情景 | 提示语 |
|---|---|
| 市场活动提交申请 | 申请已提交 |
| 解除手机号绑定 | 您已解除手机号码绑定 |
操作失败(失败结果+引导建议)
| 情景 | 提示语 |
|---|---|
| 验证手机号是否已绑定 | 您申请绑定的手机号码已被其他账号绑定,是否切换账号? |
| 页面不存在 | 这个页面找不到了 |
操作状态反馈
| 情景 | 提示语 |
|---|---|
| 当资讯内容为最新,继续下拉 | 没有更多的内容了 |
| 实景照片查看,拉到最底部 | 没有更早的照片了 |
操作确认提示(确认+操作动作+操作对象?[取消][操作动作])
| 情景 | 提示语 |
|---|---|
| 发送短信验证码 | 我们将发送验证码到这个歌号码进行验证:13012345678 [取消][发送] |
| 退出登录 | 退出账号,部分功能无法使用?[取消][退出登录] |
操作引导提示(系统现状+引导操作)
| 情景 | 提示语 |
|---|---|
| 账号输入框内提示 | 请输入邮箱或手机号码 |
| 好友动态,好友列表为空时 | 您还没有好友,点击“+”添加好友吧 |
3、状态提示
账号异常(账号异常提示+安全提醒)
| 情景 | 提示语 |
|---|---|
| 登录尝试超过规定次数 | 账号异常,若非本人操作,请及时修改密码 |
多点登录(其他设备登录情况+安全提醒)
| 情景 | 提示语 |
|---|---|
| 移动端被PC踢掉 | 您的账号于14:36在北京登录,若非本人操作,请及时修改密码 |
系统状态提示(加载状态+请稍候…)
| 情景 | 提示语 |
|---|---|
| 弱网 | 加载中,请稍后… |
相关文章:
优化前端开发中的提示语设计基本原则
文章目录 一致1、同一对象,指称一致2、同一状态,描述一致3、同一行为,提示一致 简洁1、用词简短 条理1、上下呼应2、主次分明 亲和1、化“难”为易2、“礼”字当先3、正向表达 灵动1、用词多变2、远离平淡 契合1、身份契合2、产品契合 示例1、…...
飞凌嵌入式FET527N-C核心板现已适配Android 13
飞凌嵌入式FET527N-C核心板现已成功适配Android13,新系统的支持能够为用户提供更优质的使用体验。那么,运行Android13系统的FET527N-C核心板具有哪些突出的优势呢? 1、性能与兼容性提升 飞凌嵌入式FET527N-C核心板搭载了全志T527系列高性能处…...
uniapp 如何修改 返回按钮(左上角+物理按钮+侧滑)触发的返回事件
背景: 使用uniapp 开发安卓app,在用户编辑后直接返回时,使用弹窗提醒用户:还没有保存,是否保存? 方案 1. 使用自定义返回事件 //返回 back() { // 业务逻辑,弹窗提醒 uni.showModal({title:…...
appium启动 install driver安装驱动
appium启动 appiumPS C:\Windows\system32> appium [Appium] Welcome to Appium v2.12.1 [Appium] The autodetected Appium home path: C:\Users\liyd\.appium [HTTP] Could not start REST http interface listener. The requested port may already be in use. Please m…...
【机器学习】均方误差根(RMSE:Root Mean Squared Error)
均方误差根(Root Mean Squared Error,RMSE)是机器学习和统计学中常用的误差度量指标,用于评估预测值与真实值之间的差异。它通常用于回归模型的评价,以衡量模型的预测精度。 RMSE的定义与公式 给定预测值 和实际值 …...
[含文档+PPT+源码等]精品基于springboot实现的原生Andriod广告播放系统
基于Spring Boot实现的原生Android广告播放系统背景,主要可以从以下几个方面进行阐述: 一、市场需求与背景 移动互联网的快速发展: 随着移动互联网技术的不断进步,智能手机已成为人们日常生活中不可或缺的一部分。人们越来越多地…...
【机器学习】均方误差(MSE:Mean Squared Error)
均方误差(Mean Squared Error, MSE)是衡量预测值与真实值之间差异的一种方法。在统计学和机器学习中,MSE 是一种常见的损失函数,用于评估模型的预测准确性。 均方误差的定义 假设有一组真实值 和模型预测的对应值 。均方误…...
融合虚拟与现实,AR Engine为用户提供沉浸式交互体验
当今的应用市场中,传统的应用产品已经难以完全满足消费者的多样化需求。为了在竞争激烈的市场中脱颖而出,企业需要深入洞察用户需求,提供个性化的服务体验和差异化的产品创新,以吸引并留住消费者。 比如,购物类App通过…...
python | xmltodict,一个非常厉害的 关于XML数据 Python 库!
本文来源公众号“python”,仅用于学术分享,侵权删,干货满满。 原文链接:xmltodict,一个非常厉害的 Python 库! 大家好,今天为大家分享一个非常厉害的 Python 库 - xmltodict。 Github地址&am…...
教程:FFmpeg结合GPU实现720p至4K视频转换
将一个 720p 的视频放大编码到 4K,这样的视频处理在很多业务场景中都会用到。很多视频社交、短视频、视频点播等应用,都会需要通过服务器来处理大量的视频编辑需求。 本文我们会探讨一下做这样的视频处理,最低的 GPU 指标应该是多少。利用开源…...
MeterSphere接口自动化-ForEach循环
接口自动化场景:一个接口根据不同的参数取值来运行测试,本场景中只有一个参数来去不同值。举例如下: https:://test.csdn/query?placementList1接口,测试id1,2,3时,断言接口返回的data数据都有返回。(当然…...
ssm074应急资源管理系统+jsp(论文+源码)_kaic
毕 业 设 计(论 文) 题目:应急资源管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本应急资源管理系统…...
怎么对 PDF 添加权限密码或者修改密码-免费软件分享
序言 目前市面上有关PDF处理的工具有很多,不过绝大多数的PDF处理工具都需要付费使用,且很多厂商甚至连试用的机会也不给用户,偶有试用的,其试用版的条件也极为苛刻,比如只能处理前两页,或者只能处理非常小的…...
LVSM: A LARGE VIEW SYNTHESIS MODEL WITH MINIMAL 3D INDUCTIVE BIAS 论文解读
目录 一、概述 二、相关工作 1、新视角合成 2、优化3D表示 3、可泛化的前馈方法 三、LVSM 1、总体结构 2、encoder-decoder 3、decoder-only 4、Loss 一、概述 该论文提出大视角合成模型LVSM,基于Transformer方法,用于场景中或对象级层次从稀…...
7.《双指针篇》---⑦三数之和(中等偏难)
题目传送门 方法一:双指针 1.新建一个顺序表用来返回结果。并排序数组。 2.for循环 i 从第一个数组元素遍历到倒数第三个数。 3.如果遍历过程中有值大于0的则break; 4.定义左右指针,以及target。int left i 1, right n - 1; int target -nums[i];…...
鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)
1、Scroll组件 Scroll组件是一个可滚动的容器组件,用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容,并通过滚动机制来查看全部内容。这对于显示大量信息(如长列表、长篇文本或大型图像等&…...
mybatis连接PGSQL中对于json和jsonb的处理
pgsql数据库表字段设置了jsonb格式;在java的实体里使用String或者对象转换会一直提示一个错误: Caused by: org.postgresql.util.PSQLException: ERROR: column "xx" is of type jsonb but expression is of type character varying 需要加一…...
Redis 权限控制(ACL)|ACL 命令详解、ACL 持久化
官网文档地址:https://redis.io/docs/latest/operate/oss_and_stack/management/security/acl/ 使用版本:Redis7.4.1 什么是 ACL? ACL(Access Control List),权限控制列表,是 Redis 提供的一种…...
内网学习一:windows基础
工作组介绍 按照不同的计算机功能或工作部门将计算机列入不同的工作组。要是想访问某一个工作组的资源 只需要双击该部门的工作组,就可以看到该组内的所有计算机。 目的:在大型网络中,方便管理员去管理设备 加入工作组 右击计算机图标---…...
编译工具与文件学习(一)-YAML、repos、vcstoolcolcon
YAML YAML(YAML Ain’t Markup Language)是一种人类可读的数据序列化格式,常用于配置文件、数据交换和存储结构化数据。YAML 的设计目标是简洁、易读,并且能够表示复杂的数据结构。 YAML 文件的基本语法 基本结构: Y…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
