优化前端开发中的提示语设计基本原则

news2024/11/19 0:37:30

文章目录

      • 一致
        • 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在北京登录,若非本人操作,请及时修改密码

系统状态提示(加载状态+请稍候…)

情景提示语
弱网加载中,请稍后…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2243084.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Java Springboot二手家电管理平台

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术:Html、Css、Js、Vue、Element-ui 数据库:MySQL 后端技术:Java、Spring Boot、MyBatis 三、运行环境 开发工具:IDEA/eclipse 数据…

利用SSH中的弱私钥

import paramiko import argparse import os from threading import Thread, BoundedSemaphore # 设置最大连接数 maxConnections 5 # 创建一个有界信号量,用于控制同时进行的连接数 connection_lock BoundedSemaphore(valuemaxConnections) # 用于控制是否停止所…

基于Python的仓库管理系统设计与实现

背景: 基于Python的仓库管理系统功能介绍 本仓库管理系统采用Python语言开发,利用Django框架和MySQL数据库,实现了高效、便捷的仓库管理功能。 用户管理: 支持员工和管理员角色的管理。 用户注册、登录和权限分配功能&#x…

自动驾驶系列—从数据采集到存储:解密自动驾驶传感器数据采集盒子的关键技术

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

vue3【实战】切换白天黑夜(暗黑模式)【组件封装】DarkMode.vue

效果预览 原理解析 切换为暗黑模式时,会在 html 标签上添加样式类 dark导入 ElementPlus 的暗黑模式样式后, ElementPlus 组件会自动响应暗黑模式自定义组件需用 UnoCSS 的 dark: 语法自定义暗黑模式的样式 代码实现 技术方案 vue3 vite ElementPlus …

java八股-jvm入门-程序计数器,堆,元空间,虚拟机栈,本地方法栈,类加载器,双亲委派,类加载执行过程

文章目录 PC Register堆虚拟机栈方法区(Metaspace元空间双亲委派机制类加载器 类装载的执行过程 PC Register 程序计数器(Program Counter Register)是 Java 虚拟机(JVM)中的一个组件,它在 JVM 的内存模型中扮演着非常…

Nature Communications 基于触觉手套的深度学习驱动视触觉动态重建方案

在人形机器人操作领域,有一个极具价值的问题:鉴于操作数据在人形操作技能学习中的重要性,如何有效地从现实世界中获取操作数据的完整状态?如果可以,那考虑到人类庞大规模的人口和进行复杂操作的简单直观性与可扩展性&a…

Linux:进程的优先级 进程切换

文章目录 前言一、进程优先级1.1 基本概念1.2 查看系统进程1.3 PRI和NI1.4 调整优先级1.4.1 top命令1.4.2 nice命令1.4.3 renice命令 二、进程切换2.1 补充概念2.2 进程的运行和切换步骤(重要) 二、Linux2.6内核进程O(1)调度队列(重要&#x…

鸿蒙学习生态应用开发能力全景图-赋能套件(1)

文章目录 赋能套件鸿蒙生态应用开发能力全景图 赋能套件 鸿蒙生态白皮书: 全面阐释了鸿蒙生态下应用开发核心理念、关键能力以及创新体验,旨在帮助开发者快速、准确、全面的了解鸿蒙开发套件给开发者提供的能力全景和未来的愿景。 视频课程: 基于真实的开发场景,提供向导式…

Docker 的安装与使用

Docker 的安装 Docker 是一个开源的商业产品,有两个版本:社区版(Community Edition,缩写为 CE)和企业版(Enterprise Edition,缩写为 EE)。 Docker CE 的安装请参考官方文档&#xf…

MATLAB向量元素的引用

我们定义一个向量后,如果想引用的话,可以通过索引 i n d ind ind来实现。 注意:MATLAB中向量的开始索引是1,与许多编程语言不同。 例如: 如果想引用多个的话,可以用索引 i n d ind ind来提取多个位置 例如…

力扣周赛:第424场周赛

👨‍🎓作者简介:爱好技术和算法的研究生 🌌上期文章:力扣周赛:第422场周赛 📚订阅专栏:力扣周赛 希望文章对你们有所帮助 第一道题模拟题,第二道题经典拆分数组/线段树都…

SpringBoot配置相关的内容

依赖Starter和Parent 查依赖坐标网站:Maven Repository: Search/Browse/Explorehttps://mvnrepository.com/ 设置配置文件 配置文件相关的配置 yml多个数据的书写 配置文件的读取

第九部分 :1.STM32之通信接口《精讲》(USART,I2C,SPI,CAN,USB)

本芯片使用的是STM32F103C8T6型号 STM32F103C8T6是STM32F1系列中的一种较常用的低成本ARM Cortex-M3内核MCU,具有丰富的通信接口,包括USART、SPI、I2C等。下面是该芯片上通信接口的管脚分布、每个接口的工作模式、常用应用场景和注意事项。 1. USART (通…

【计算机网络】协议定制

一、结构化数据传输流程 这里涉及协议定制、序列化/反序列化的知识 对于序列化和反序列化,有现成的解决方案:①json ②probuff ③xml 二、理解发送接收函数 我们调用的所有发送/接收函数,根本就不是把数据发送到网络中!本质都是…

WebRTC视频 02 - 视频采集类 VideoCaptureModule

WebRTC视频 01 - 视频采集整体架构 WebRTC视频 02 - 视频采集类 VideoCaptureModule(本文) WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇 WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前言…

解决Windows远程桌面 “为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多。请稍后片刻再重试,或与系统管理员或技术支持联系“问题

当我们远程连接服务器连接不上并提示“为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多。请稍候片刻再重试,或与系统管理员或技术支持联系”时,根本原因是当前计算机远程连接时输入了过多的错误密码,触…

企业BI工具如何选择?主流5款BI工具多维对比

数据大爆炸时代,企业数据爆发式增长,来自产品、运营、价值链以及外部的数据都成指数级增长趋势。利用大数据分析实现精细化运营,驱动业务增长是企业的理想蓝图。而BI工具能够整合、分析并可视化复杂的数据集,帮助管理层和决策者快…

Sping全面复习

Spring框架是一个功能强大且广泛使用的Java平台,它通过提供全面的基础设施支持,使得开发人员能够轻松构建高效、可移植、易于测试的代码。Spring的核心特性包括依赖注入(DI)、面向切面编程(AOP)和事件驱动模…

深挖C++赋值

详解赋值 const int a 10; int b a;&a 0x000000b7c6afef34 {56496} &a 0x000000b7c6afef34 {10} 3. &b 0x000000b7c6afef54 {10} 总结: int a 10 是指在内存中(栈)中创建一个int (4 byte)大小的空间…