前端的UI设计与交互之文案篇
在界面中,我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:
从用户角度出发
表述一致
重要的信息放在显著位置
专业、精准、完整
精简、友好、正面
一、语言
1、明确表述立足点
在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。
注:当用户向后台反馈问题、提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审核你的申诉』。
2、精简语句
省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。
尽量提供简短、易于快速获取的内容。
3、使用用户熟悉的语言
间接、暧昧模糊的说法,生僻和过于『文雅』的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。
4、表述一致
描述同一个事物的词汇要保持统一;
上下文的语法、语种、语序要保持统一;
操作的名称和目标页面标题的名称保持一致。
二、重要的信息放在显著位置
让用户第一眼看到最重要的内容,不用到段落中寻找。
注:如考虑安全性问题时,隐私信息也可调整为『点击后可见』的方式。
三、完整、直接得阐述信息
当我们希望用户进行一个操作时,要专注于用户能得到什么,以及用户的感受。在操作前引导告知用户操作的目的或重要性,能促进用户更愿意去执行。
报错是 UI 中常见的功能,它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候,你的报错信息应当符合用户的认知,用易于理解的方式表述出来。
四、用词精准完整
通用基本用词要规范,不要写错字,词语表达要完整。
专业用语要精准,并是所属行业认可通用用词;时间的表述必须明确。
其他、抱歉、验证码、校验码、登录、此、、、
五、语气
语言定义的是内容,而情绪和气氛更多的是通过语气来表达,并且同样的内容面对不同的用户我们可以使用不同的语气来表达;例如,我们对应专业的运维人员和小白用户应有不同的表达方式。
1、拉近彼此的距离
直接使用『你』、『我』来和用户对话,与用户建立亲密感。避免使用『您』,让用户感觉太过疏远。
注:不要在同一个句式中混用『你』和『我』,交互中指代混乱会让用户相当纠结。
2、友好、尊重用户
多给用户支持与鼓励,不要命令和强迫用户。
如果你想留住你的用户,当出错的时候就不要责怪用户。专注于解决问题,而不是指责。
3、表述不应过于极端
不要使用过于绝对的表述,这样会让用户觉得不适。
六、大小写和标点符号
1、英文名词大小写规范
产品名称全称,首字母大写。产品名称缩写需要全部大写,如:ESC、SLB 等;
注:整个单词都大写不利于阅读和识别,应尽量避免这种用法。
正确使用专有名词的大小写规范。
全英文的标题,标签,菜单项等等都要遵循英文句式中首字母大写的规范。
2、统计数据使用阿拉伯数字
这也是常见问题,用户对于数字的感知速度更快,使用数字而非文字表述会更加有效。
3、省略不必要的标点
为了帮助用户更加高效得扫视文本内容,可以省略不必要的断句点。
a)以下元素单独出现时可以省略标点:
标签
标题
输入框下的提示
悬停文本中的提示
表格中的句子
b)以下元素单独出现时需要加上标点:
多句或多段的文案和列表内容。
任何文字链前的句子。
4、谨慎使用感叹号
感叹号会让文案显得过于激动,容易让气氛变得过于紧张。
注:当向用户表达问候或祝贺时,使用『!』是合理的语境,例如『欢迎回到社区!』。
5、基本标点规范
空格 段落句子中的链接和文字之间增加空格; 全角字符和半角字符搭配时,需要添加空格,如:两个、2 个、50%。
句号 。 以下情况中不使用句号:输入框下的提示;表格中的句子;句末为文字链(链接前使用句号);按钮和标题。
感叹号 ! 只在需要表达强烈情感的情况下使用。
连接号 - 不使用中文全角的连接号。如:2012-11-12。
省略号 … 使用半角的『…』为省略号。
隐藏符号 * 多用于替换显示隐私信息。
前端的UI设计与交互之文案篇的更多相关文章
- 前端的UI设计与交互之布局篇
布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...
- 前端的UI设计与交互之数据录入篇
数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...
- 前端的UI设计与交互之字体篇
跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...
- 前端的UI设计与交互之图标篇
图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...
- 前端的UI设计与交互之色彩篇
一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 ...
- 前端的UI设计与交互之导航篇
在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一 ...
- 前端的UI设计与交互之设计原则篇
1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...
- 前端的UI设计与交互之反馈示篇
为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...
- 前端的UI设计与交互之数据展示篇
合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...
随机推荐
- visual studio调试功能简述
vs调试简述 1.调试功能简述 vs提供了很强大的调试功能,能够让我们一步步执行中找到每个变量的值,便于查错改错.很多IDE都有调试功能,在使用调试功能时,记得先创建一个项目,哪怕是一个文件,也创建一 ...
- 用Node.JS+MongoDB搭建个人博客(万众期待的router.js)(四)
万众期待的router.js,是我现在最想写的一个博客.因为他包含了整个个人博客的精髓.在这里,所有的请求配置,返回的参数等等所做的业务逻辑都在这个文件里实现. 我会详细说明这些代码的作用,所以这篇博 ...
- Linux下安装MySQL数据库(压缩包方式安装)
1.这里我将Mysql安装在/usr/local/mysql目录里面,也可以安装在其他地方; mkdir /usr/local/mysql 2.下载MySQL压缩包 wget http://dev.M ...
- hashtable的运用实例
#include <hash_set> #include <iostream> using namespace std; int main() { hashtable<i ...
- ActiveMQ的运用
MQ的消息队列模式有2种,一种是点对点模式,一种是订阅模式. 点对点模式:点对点的模式主要建立在一个队列上面,当连接一个列队的时候,发送端不需要知道接收端是否正在接收,可以直接向ActiveMQ发送消 ...
- HighCharts之2D半圆环图
HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...
- Solution for link error:Cannot Open File 'python27_d.lib'
引自:http://guangboo.org/2013/01/17/solution-link-errorcannot-open-file-python27_dlib 感谢原作者 使用C调用Pytho ...
- Unhandled event loop exception Java heap space
1 错误描述 2 错误原因 3 解决办法
- freemarker.template.TemplateException:Macro has no such argument:params
1.错误描述 freemarker.template.TemplateException:Macro mainSelect has no such argument:params 2.错误原因 在宏定 ...
- Unity开发之实现更换鼠标图片
在玩游戏的时候,感觉游戏里的鼠标图片特酷炫,23333,今天我就总结了两种方法! 我是做Unity开发的,所以方法仅针对于Unity平台........ 方法如下: 1.Unity客户端直接更改,步骤 ...