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

文章目录

      • 一致
        • 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.mzph.cn/bicheng/60018.shtml

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

相关文章

C++知识点总结(56):数学专题

数学专题 一、进制转换类1. 模板1.1 十转 x x x1.2 x x x 转十 2. 例题 二、公式推导类1. 一元二次方程解2. 例题2.1 【模板】怪物同笼2.2 K K K 的倍数 三、枚举例题1. 二次方程2. 【模板】立方体体积3. 街头篮球 一、进制转换类 1. 模板 1.1 十转 x x x while(n){num[…

【C++滑动窗口】1297. 子串的最大出现次数|1748

本文涉及的基础知识点 C算法:滑动窗口及双指针总结 固定长度滑动窗口 LeetCode1297. 子串的最大出现次数 给你一个字符串 s ,请你返回满足以下条件且出现次数最大的 任意 子串的出现次数: 子串中不同字母的数目必须小于等于 maxLetters 。…

【C++练习】使用海伦公式计算三角形面积

编写并调试一个计算三角形面积的程序 要求: 使用海伦公式(Herons Formula)来计算三角形的面积。程序需要从用户那里输入三角形的三边长(实数类型)。输出计算得到的三角形面积,结果保留默认精度。提示用户…

Python使用PDF相关组件案例详解

主要对pdfminer.six、pdfplumber、PyMuPDF、PyPDF2、PyPDF4、pdf2image、camelot-py七个PDF相关组件分别详解,具体使用案例演示 1. pdfminer.six pdfminer.six 是一个专门用来从 PDF 中提取文本的库,能够处理复杂的文本布局,适合用于文本解析…

计算机网络:网络层 —— 移动 IP 技术

文章目录 移动性对因特网应用的影响移动 IP 相关基本概念移动IP技术的基本工作原理代理发现与注册固定主机向移动主机发送IP数据报移动主机向固定主机发送IP数据报同址转交地址方式三角形路由问题 移动性对因特网应用的影响 我们列举如下三个应用场景说明移动性对因特网应用的…

鸿蒙多线程开发——Worker多线程

1、概 述 1.1、基本介绍 Worker主要作用是为应用程序提供一个多线程的运行环境,可满足应用程序在执行过程中与主线程分离,在后台线程中运行一个脚本进行耗时操作,极大避免类似于计算密集型或高延迟的任务阻塞主线程的运行。 创建Worker的线…

【大数据学习 | kafka】消费者的分区分配规则

1. 概述 上面我们提到过,消费者有的时候会少于或者多于分区的个数,那么如果消费者少了有的消费者要消费多个分区的数据,如果消费者多了,有的消费者就可能没有分区的数据消费。 那么这个关系是如何分配的呢? 现在我们…

Python接口自动化测试自学指南(项目实战)

🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 接口自动化测试是指通过编写程序来模拟用户的行为,对接口进行自动化测试。Python是一种流行的编程语言,它在接口自动化测试中得到了广…

【Python进阶】Python网络协议与套接字编程:构建客户端和服务器

1、网络通信基础与网络协议 1.1 网络通信模型概述 网络通信是信息时代基石,它如同现实世界中的邮递系统,将数据从一处传递到另一处。其中,OSI七层模型与TCP/IP四层或五层模型是理解和构建网络通信的基础。 1.1.1 OSI七层模型与TCP/IP四层/…

Redis - 哨兵(Sentinel)

Redis 的主从复制模式下,⼀旦主节点由于故障不能提供服务,需要⼈⼯进⾏主从切换,同时⼤量 的客⼾端需要被通知切换到新的主节点上,对于上了⼀定规模的应⽤来说,这种⽅案是⽆法接受的, 于是Redis从2.8开始提…

UE5 metahuman 头发物理模拟

https://www.youtube.com/watch?vyYmdgtP6cQA 头发梳理物理 打开Unreal Engine,选择一个角色模型 点击“Groom”选项卡,在“Physics”部分下,找到“Custom Solver”,点击下拉菜单,选择“WindDrivenSystem”。 在“…

大数据 ETL + Flume 数据清洗 — 详细教程及实例(附常见问题及解决方案)

大数据 ETL Flume 数据清洗 — 详细教程及实例 1. ETL 和 Flume 概述1.1 ETL(Extract, Transform, Load)1.2 Flume 概述 2. Flume 环境搭建2.1 下载并安装 Flume2.2 启动 Flume 3. Flume 配置和常见 Source、Sink、Channel3.1 Flume Source3.2 Flume Si…

24年配置CUDA12.4,Pytorch2.5.1,CUDAnn9.5运行环境

没什么好介绍的,直接说了。 下载 首先打开命令行,输入代码查看显卡最高支持的cuda版本,下载的版本不要高于该版本 nvidia-smi PyTorch 插件这个是PyTorch下载地址,就按照我这么选CUDA版本就选最新的,看好绿框里的CU…

架构师备考-概念背诵(系统架构)

软件架构概念 一个程序和计算系统软件体系结构是指系统的一个或者多个结构。结构中包括软件的构件,构件的外部可见属性以及它们之间的相互关系。体系结构并非可运行软件。确切地说,它是一种表达,使软件工程师能够: (1)分析设计在满足所规定的需求方面的有效性:(2)在设计变…

Linux服务器软件包管理的使用

在 Linux 系统中,软件包管理器是用于安装、升级、删除和管理软件包的工具。不同的 Linux 发行版使用不同的软件包管理器,通常根据使用的包格式和包管理系统(如 .deb 或 .rpm)来区分。下面将介绍几种常见的 Linux 软件包管理器及其…

debian系统安装qt的时候 显示xcb相关文件缺失

如果是安装之后的问题 我们可以选择使用ldd的命令查看当前依赖的so那些文件确实 ldd /home/yinsir/Qt/5.15.2/gcc_64/plugins/platforms/libqxcb.so 本人在进行打包的时候 出现则会个报错 ERROR: ldd outputLine: “libxcb-util.so.1 > not found” ERROR: for binary: “/…

esp32s3连接控制HC-08蓝牙设备

趁双十一买了一块esp32S3单片,尝试之后发现他的蓝牙只支持ble,我的机器人以前是使用手机控制的,我想借此机会,为他添加一个esp32S3的大脑。 查了一下资料,写了一个demo,记录一下代码: #include "BLEDevice.h" //#include "BLEScan.h" //hc-08的ble…

WordPress文章自动提交Bing搜索引擎:PHP推送脚本教程

随着网站SEO优化的重要性日益增加,将新发布的内容快速提交到搜索引擎显得尤为重要。尤其对于Bing站长平台,自动化推送能让Bing尽快发现和索引我们网站的新内容。本文将详细介绍如何通过PHP脚本自动推送WordPress当天发布的文章至Bing站长平台,确保新文章被Bing及时收录。 前…

指令重排序:Java程序中的隐秘优化

什么是重排序? 在编写Java程序时,我们通常会期望代码的执行顺序与编写顺序一致。然而,为了优化性能,编译器、JVM或CPU可能会对指令的实际执行顺序进行调整,这种现象被称为重排序。重排序是现代计算机系统中常见的优化…

开源大模型推理引擎现状及常见推理优化方法总结

原文:https://zhuanlan.zhihu.com/p/755874470 前言 前一段时间sglang-v0.3.0和vllm-v0.6.0前后脚发布之后,就一直想总结梳理一下现在主流的大模型推理引擎。因为我觉得这也算是一个有意义的节点吧,从此开源大模型推理引擎总算是由"非…