在界面中,我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:
从用户角度出发
表述一致
重要的信息放在显著位置
专业、精准、完整
精简、友好、正面
一、语言
1、明确表述立足点
在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。
注:当用户向后台反馈问题、提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审核你的申诉』。
2、精简语句
省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。
尽量提供简短、易于快速获取的内容。
3、使用用户熟悉的语言
间接、暧昧模糊的说法,生僻和过于『文雅』的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。
4、表述一致
描述同一个事物的词汇要保持统一;
上下文的语法、语种、语序要保持统一;
操作的名称和目标页面标题的名称保持一致。
二、重要的信息放在显著位置
让用户第一眼看到最重要的内容,不用到段落中寻找。
注:如考虑安全性问题时,隐私信息也可调整为『点击后可见』的方式。
三、完整、直接得阐述信息
当我们希望用户进行一个操作时,要专注于用户能得到什么,以及用户的感受。在操作前引导告知用户操作的目的或重要性,能促进用户更愿意去执行。
报错是 UI 中常见的功能,它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候,你的报错信息应当符合用户的认知,用易于理解的方式表述出来。
四、用词精准完整
通用基本用词要规范,不要写错字,词语表达要完整。
专业用语要精准,并是所属行业认可通用用词;时间的表述必须明确。
其他、抱歉、验证码、校验码、登录、此、、、
五、语气
语言定义的是内容,而情绪和气氛更多的是通过语气来表达,并且同样的内容面对不同的用户我们可以使用不同的语气来表达;例如,我们对应专业的运维人员和小白用户应有不同的表达方式。
1、拉近彼此的距离
直接使用『你』、『我』来和用户对话,与用户建立亲密感。避免使用『您』,让用户感觉太过疏远。
注:不要在同一个句式中混用『你』和『我』,交互中指代混乱会让用户相当纠结。
2、友好、尊重用户
多给用户支持与鼓励,不要命令和强迫用户。
如果你想留住你的用户,当出错的时候就不要责怪用户。专注于解决问题,而不是指责。
3、表述不应过于极端
不要使用过于绝对的表述,这样会让用户觉得不适。
六、大小写和标点符号
1、英文名词大小写规范
产品名称全称,首字母大写。产品名称缩写需要全部大写,如:ESC、SLB 等;
注:整个单词都大写不利于阅读和识别,应尽量避免这种用法。
正确使用专有名词的大小写规范。
全英文的标题,标签,菜单项等等都要遵循英文句式中首字母大写的规范。
2、统计数据使用阿拉伯数字
这也是常见问题,用户对于数字的感知速度更快,使用数字而非文字表述会更加有效。
3、省略不必要的标点
为了帮助用户更加高效得扫视文本内容,可以省略不必要的断句点。
a)以下元素单独出现时可以省略标点:
标签
标题
输入框下的提示
悬停文本中的提示
表格中的句子
b)以下元素单独出现时需要加上标点:
多句或多段的文案和列表内容。
任何文字链前的句子。
4、谨慎使用感叹号
感叹号会让文案显得过于激动,容易让气氛变得过于紧张。
注:当向用户表达问候或祝贺时,使用『!』是合理的语境,例如『欢迎回到社区!』。
5、基本标点规范
空格 段落句子中的链接和文字之间增加空格; 全角字符和半角字符搭配时,需要添加空格,如:两个、2 个、50%。
句号 。 以下情况中不使用句号:输入框下的提示;表格中的句子;句末为文字链(链接前使用句号);按钮和标题。
感叹号 ! 只在需要表达强烈情感的情况下使用。
连接号 - 不使用中文全角的连接号。如:2012-11-12。
省略号 … 使用半角的『…』为省略号。
隐藏符号 * 多用于替换显示隐私信息。

前端的UI设计与交互之文案篇的更多相关文章

  1. 前端的UI设计与交互之布局篇

    布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...

  2. 前端的UI设计与交互之数据录入篇

    数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...

  3. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  4. 前端的UI设计与交互之图标篇

    图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...

  5. 前端的UI设计与交互之色彩篇

    一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 ...

  6. 前端的UI设计与交互之导航篇

    在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一 ...

  7. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  8. 前端的UI设计与交互之反馈示篇

    为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...

  9. 前端的UI设计与交互之数据展示篇

    合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...

随机推荐

  1. 暴力破解MD5的实现(MapReduce编程)

    本文主要介绍MapReduce编程模型的原理和基于Hadoop的MD5暴力破解思路. 一.MapReduce的基本原理 Hadoop作为一个分布式架构的实现方案,它的核心思想包括以下几个方面:HDFS ...

  2. Android 热补丁实践之路

    最新github上开源了很多热补丁动态修复框架,主要的大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa h ...

  3. R语言︱数据规范化、归一化

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:规范化主要是因为数据受着单位的影响较 ...

  4. vxWorks内核实现基本原理

    内核实现基本原理     VxWorks 内核维护三个队列:tick队列.ready 队列.active 队列.另外还有一个队列涉及任务,即任务等待资源时所处的队列,这个队列可以是VxWorks内核提 ...

  5. 利用PowerDesigner15在win7系统下对MySQL 进行反向工程(二)

    利用PowerDesigner15在win7系统下对MySQL 进行反向工程 1.打开PowerDesigner,建立新模型,选择Physical Data Model中的Physical Da.. ...

  6. Qt keyPressEvent

    keyPressEvent是QWidget里面的函数,所以凡是继承自QWidget的类都可以通过实现这个函数来完成对按键事件的响应. 要让当前的widget能够响应按键事件,最先需要做的事情是,调用: ...

  7. Modbus总结

    1.概念 ①Coil和Register Modbus中定义的两种数据类型.Coil是位(bit)变量:Register是整型(Word,即16-bit)变量. ②Slave和Master与Server ...

  8. Maven使用中央仓库下载慢的解决办法

    配置Maven仓库的方法 打开Maven配置文件Setting.xml,如下: vim /Users/yuanweipeng/.m2/settings.xml 在配置文件中添加如下配置: <mi ...

  9. php+sqlServer 2008R2 PHPstudy下数据库环境搭建

    简要:小主从事PHP二年,期间一直做后台;在过程中遇到一个奇葩的组合就是PHP+sqlServer应用场景,希望能够跟各位PHP大神分享和学习探索,如果有不对或者好的建议告知下:*~*! 一.下载sq ...

  10. 【BZOJ3626】LCA(树链剖分,Link-Cut Tree)

    [BZOJ3626]LCA(树链剖分,Link-Cut Tree) 题面 Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. ...