任何事物呈现和传都需要过定媒介,在媒介承载过程,均会生损耗。我们设计目是将所传内容在媒介承载过程让损耗降到最低,呈现出我们想要受众东西,能够被快速察觉、理解和获取(主动及被动)。
文本作为语言沟书化,以来承载着大量信息,也是生活最常见及熟知。
当前人们快节奏的生状态、快消的阅读习惯及注意分散,需要我们通过设计手来减视觉、心及认知压,户够快速定位、解和消。同样,我们需要根据目标、任务甚至牌的诉求,从而更好的务于题。
以下是工作中一些心得和总结,旨在从更多角度去思考和完善,让文本息能够得更好的呈现和传达。
一、前提
前提是做事的先要条件。
- 达成目标
- 了解受众
- 具体景
二、目的
目的是做这件事的。
- 满足用户所需,帮助完成工作;
- 简单直接,有效传达;
- 达成一致,统一规范可实施。
三、角度
度是考虑要做内容。
- 准确
- 致性
- 易读性
- 内调性
1. 准确性
秉持文本信息准确明了、简明意,歧义
首先要明确所传群体象,尽量避免使用话,使用「用户」能接理解文本信息,然相应专业词汇也应予良好解释和说明。
案列:我们将 「循环次数」 更改成 「轮播次数」 ,「循环次数」会人产生思考(循环一次是播放一次还是两次的),而 「轮播次数」 就显得更直观明了且更符合上的语境。
用词完、阐述接
用词完,例如保存改,而不是简化为保存;阐述接,避免模棱两可,模糊不。
内容传达上应做的良的「自释」
例:涉及操件的文命名应根据上下文准确的进行表达,而不是含糊其辞的,使文能够准确的释和表达将要生的件及行为。
寻找加合的表达方式
例如:未输入提示,「XXX不能空」 「请输入XXX」,第一表达其实一些责怪,第二表达同样明了意思,但口吻却加温,并告诉用户应该怎样操作行动。
避免错别字
错别字只会拉低产品的品质用户内的形象,请务必严格检查。避免把 「登录」 写 「登陆」。
准确应用标点符
标点符能够赋予文字节奏,表达语气以及对内的组织。准确应用,能够帮文字加效传达被人理解。
- 常用标点符号用法简表
- 《标点符用法》
2. 一致性
事物用词致,消除复
例如,涉及新操作,会用「新」,会又用「新增」、「创」或者「添加」;涉及称谓,会用「你」,会又用「您」、「我」或者「我」;涉及帮助,会用「支持」,会用「帮助」或者「服务」等等,我们应该消除这些复,统用词。
相似场景、意思和语境下句表述致
例如,未输入提示,应避免「请输入XXX」和「XXX不能为空」等不表。
标点符号规范
根据符号使用规范并结合自身产品情况具定义。例:角和半角,常见「:」和「:」,截断省略「…」等等。又:标题,提示文不加结束符号等。
时间表达规范
时间是一个录戳,需要根据与当前进行定义,显示不同的式。
例如:今天发生(自0时起),显示时分(24h);今天前发生,显示月-日(例如02-12);跨年,显示年-月-日(例如2017-12-30)。
数使用规范
例如:统计数据统使用伯数。
大小写使用规范
专有名词大小写,单位符号等。例如:iOS
西文混排规范
英文需要加空格等。
代称致
第称「我」,第称「你」和「您」,具体根据场景进使用,场景统致。你和您请不要随意混用或均使用,应统。
操作名称与目页标题致
常见于移动端,在 PC 常见于链接及导航。
3. 易读性
简化内容,避免啰嗦
简单而直接,避免长段使用短语,持措辞简洁,让读者感受到阅读乐趣,引诱他们深阅读。
打破复冗长
通段落、有序列表(项目编号)、无序列表等方式使内容结构化,便视扫描。
- 段落:根据句意,行分段呈。
- 有序:当项目顺序或优先级重要(程序等)时,使用编号列表。
- 序:项目相关时使用项目符号列表,序或优先级关紧要。
- 结构:节奏和韵律。例如,电话号码或者行卡号,使连字符或空格使容易被读取和识别。
重要内容突出显示
让用户首先看到最重要的内容,而不是去寻找它们。
经良的排版
合理使用文字大小:使用合理的字大小,太小太大对屏幕阅读来说是低效率的。网页端字大小一般使用不低12px,更加直观易辨(对数人而言)的字14px和16px;移动端字大小不小10pt(sp),12-18pt(sp)是常用的字选择范围。
颜色与比度:颜色我们需要考虑色本身(色相、明度和饱和度)观感受和文化寓意,以及文本与背景是否有足够比度,从而便们可以更加观舒服进阅读。W3C 议视觉呈现文本和文本图像具有比度至少为4.5:1,大型文和图像比度至少为3:1,具体详情可了解 Contrast (Minimum):Understanding SC 1.4.3
字间距:汉字属于方字,原则上字外框彼此紧贴配置,称作密;在各字之间入固定量的空白来列字,称作疏;减字距,使得字外框一分重叠,称作紧。字版时,会根据具体情况对字间距进行调整。大多时候我们对采疏方式,增字间距,易读性。
行:具有良好的行距的本,更易阅读和引导户视线。与行之间的空白称为行距,字尺寸+行距=行,行距一般介于字尺寸的50%–100%之间,自然行的设置一般为字尺寸的1.5-2倍。字尺寸较小时,行设定会相对较小。行距一般会超过字尺寸,因为这样并会因此而增易读性。
间距:落与落之间的距离,间距大于行间距,行间距一般设置为字大小的2-3倍之间,合适的间距够缓解户的视线压,起到很好的节奏及阅读定位。
行字数:一行的字数量。一行本过长,户需要移脖子或视角,易成的眼睛疲惫感,成阅读困难;此外,在大本中到正确的行将变得困难。过短视线需要断换行,从而打断了读者阅读节奏,成尴尬的断裂效果;行太短会成户在一行没读的情况注和阅读一行。
虽然至今汉字依然没有正统的方法和体行字数来衡量文本的完美长度,个人经验在12px下30-60汉字左右(包含标点),体也要根据内容、人群等约束和变量,当然最重要的是要相你(专业的计)的眼睛和判断。
词语尽避免同行断:例如,行末「跳」,下行「转」,读起就断句的存感。
对齐方式:中文(简)排版一般遵循左对齐的原则,符合我们从左到右的阅读习惯。文字居中,身不适合读,但用许小段文块。右对齐在表设置中,用数字的对比等应用。
符号避头尾:中文中行首遇到不能置行首的标点符号,必须要将移动到前一行行尾。
合理突出:于关键、要过位、加粗、比例大小和色处理等,以便让用户接关注到。然也要控制突出数量,毕竟都是「没有」,过多也会扰乱和分散用户注意力。
链接:链接本需要很好的说明户将要何处,可使蓝色或者划线标示链接的样式,这是户熟悉方式。神奇的「划线」为体验赋
尽量少用斜体:PC 和无线端的各个官方的中文字体包并没有斜体预,生拉硬扯的倾斜在一定程度上是响美观度,并造成一定的阅读困难。如果是为了突出或别可以考虑使用字重、大和颜色等方式。
层级处理:对比就层级关系,可通过小、字重、色彩、距离、方向、纹理、形状、背景方式,可以让整体排版布局加富层次结构,让内的可读性得到明显的提升。 例如:标题、副标题、引用内也一种层级处理(结合了小、色彩或者距离)。
留白:合适的留白以更的烘托内容主题,缓视压力。
数量信息前后有时需加空格:不加空格会出现前后拥挤视感,另可凸显数信息。
4. 内容调性
依据产品定位,通文表述传递其相应的价值观和情感诉求
任何产品有所针对的人群及自身的品牌形象。C端产品和 B端产品,儿产品和成年人产品,所使用的语言表达方式自也是不一样的。
依据不同状态和用户群
根据状态(正面、中和负面)和用户(新手、中级用户和家),使用合理的语及用词规范,以适应不同的情境和状况。
始终坚持积极主动的,而不是消极令人沮丧
「请输内容」与「错误,内容不能为空」,同样的意思却有不同的感受,从积极的一面表达就是传播正能量。
四、通用产出物
- 字体
- 日数字
- 标点符号
- 大小写
- 中英混
- 代称
1. 字体
字族 Font-Family
Font-Family 属设置的字系列。Font-Family 属设置个字为一种「背」机,浏览器不支持一种字,它尝试下一个字。
如体系列名称过个,它必须用引号,如Font-Family:「宋体」。
对于依附在 PC 端产而言,统一的字体规范,保证在同平台、同浏览器保持良好的美观性和易读性。
以下呈现的是 Ant Design 的字体家族。个人在使用了多款后,觉得最好的一:
font-family:「Chinese Quote」, -apple-system, BlinkMacSystemFont, 「Segoe UI」, 「PingFang SC」, 「Hiragino Sans GB」, 「Microsoft YaHei」, 「Helvetica Neue」, Helvetica, Arial, sans-serif,「Apple Color Emoji」, 「Segoe UI Emoji」, 「Segoe UI Symbol」;
果大家想字排列前顺序的玄机以认看《推荐!Web中文字应用指》篇文章。
以下备注区域,是我在使用族路上磕磕碰碰所收到有限知识,也算知其所以然了,若有不妥、误和缺漏欢迎指正。
备注区域:
-apple-system:macOS 和 iOS平台的 Safari 调 SanFrancisco 字体
BlinkMacSystemFont:macOS Chrome 调用 SanFrancisco 字体
Roboto字体,由 Google 发, Android 4.0「Ice Cream Sandwich」及后面Android版本的默认字体。
Segoe UI 取代Tahoma,Windows 从 Vista 开始的界面默认西文字。用 ClearType 技术的新字 Segoe UI 看来比现在略显僵硬的 Tahoma 更加人化。
Tahoma 被采用为 Windows 2000、Windows XP、Windows Server 2003及 Sega 游戏主 Dreamcast 等系统默认型。
Arial 是一套随同多套微软应软件分发的无衬线体 TrueType字。
Microsoft YaHei 软雅黑,该字体将作为 Windows Vista 的默认字体取代2001年推出的 XP系统下默认的宋体汉字,以支持高清显示的 ClearType 功能。
Simsun 宋体,一直简体中文版 Windows XP系统及之版本的默认字体。但由于字体的特性,Windows Vista 中已改用支持 OpenType 的微软黑,
HanHei SC 威锋瀚黑,现苹果简中文,OS X 10.11 El Capitan 开始,
STHeiti 华文黑体,分为「黑体-简(Heiti SC)」和「黑体-繁(Heiti TC)」,OS X 10.6 Snow Leopard 至 OS X 10.10 Yosemite。
Hiragino Sans GB 冬青黑体
STXihei 文细黑,是苹果公 Mac OS X9 以及之前版本的操作系统的中文默认字体,截至 OS X 10.5 Leopard。
PingFang SC iOS9.0 以后系统自中文字体。
SanFrancisco iOS9 正式之,替换之前的 Helvetica Neue 成为 iPhone/iPad 系列设备的默认字。
Myriad Set Pro 苹 adobe 公司定制了款西文体,是以 myriad 为原型,完成后在市上叫做「myriad set」,后期升级为「myriad set pro」。
Helvetica Neue 意为「 Helvetica」
Helvetica 是苹果脑的默认西文字体
sans-serif 并非一具体字体,css的通用字体族,具体什么字体由浏览器设置决的。
字号 font-size
标题,内容,注释说等不同字号的大。
字间距 letter-spacing
根据同字号,及本数量进行字间距定义。
高 line-height
设高能很好解决,缓和上下文本拥挤在起情况。
颜 text-color
里主要讲下注意对比度的问题,很产品在一点上忽视一点,搞出所谓的「小清新」。
- 你可以查完整的《网页内容可访问性指南WCAG 2.1》
- 《色彩无障碍设(Color Accessibility)之「对比度」的探索》中推荐的具很实用
- 《「完美」的字系统搭建与护指》
- 《掌握具有共享样文本系统》(搭梯子访问)
2. 日期和数字
日期
使用完整数字日期,如:2018-01-02。
时间
- 使用24小时, 13:01:29
- 具体到时分秒,如前话显示 09:01:02
- 使半角 「:」
- 日期和间之间包含一个空格,如 2018-09-01 13:01:20。
数字
使用阿拉伯数字。
对四位或更位数的数字使用逗号。
对手机号码使用前无空的连字符「-」。不要使用点,空等其他符号。
数字范围使用前无空的连字符「-」。
正负数不加空。
数字字符之间不需空格
货币
人币符号(¥)在数字前面,确数点后位。
测量单位
储存单位(B、kB、MB、GB、TB),在数量和量单位之间包含一个空格。
对于长「毫米(mm)、厘米(cm)、分米(dm)、千米(km)、米(m)、微米(μm)、纳米(nm)等」和重量「千克(kg)、克(g)、毫克(mg)、微克(ug)等」等测量单位应为小写(电流单位除外)。在数量和量单位之间包含一个空格。
屏幕单位「像素(px)、逻辑分辨率(pt、dp、sp)、英寸(in)等 」应为小写。在数量和量单位之间包含一个空格。
在连续列尺寸时,将量单位放在末尾,而是在每个数字之后,并包括一个空格。
在有情况,数字和单位之间包含一个空格。HTML代码的最小空间是 & hairsp; 或 & #8202;
测量单位分为基本单位和导单位。国际单位制共有7个基本单位长:
长度: m;
质:千克(公斤) kg;
时间:秒 s;
电流:安[培] A;
热温:开[] k;
物质的量:摩[尔] mol;
发光强度:坎[德拉]cd;
并由物理关系导出的单位称「导出单位」 。
3. 标点符号
略不必要的标点
标题、标题、输入框下的提示文本、输入框占位符、悬停提示中的文本、Toast中、弹窗等短句,在遣词造句尽量避免标点符号,始终末尾不要使用句点。
有序列表和无序列表
使冒号引入项目列表,列表后使标点。
使用列表来表示步骤、组或息集。简要介绍列表的上下文。在顺序重要列出数字列表,比如当您描述流程的步骤。当列表的顺序不重要,不要使用数字。
标点符号规范
- 空:链接与前文之间增加空;数字和单位之间包含一个空;电号码与前文包含一个空;
- 省略号「…」:半省略号,出截断代替省略文本;
- 星号「*」:半角星号。表单必填、说明备注;
- 号「-」:半角号,前后无空格,如2018-01-04,2008-2018;
- 冒「:」:半角冒,用于时间的表示,如16:45 ;
- 冒号「:」:角冒号,用表单;
- 破折号「——」:文破折号占两个空;
- 书名号「《》」:产中于法律条。
相关推荐:
- 《标点符号用法》
- 常用标点符用法简表
- 中文排版需求
- 写大家看文排版指南
4. 大小写
专门名词大写
文件格
般引用文件扩展名类型时,全部大写而不含句。
- GIF
- HTML
- JPG 格式
引特定件时,件名应该是小写的:
- 内容策略-设计完全手册.pdf
- .gif
- 西湖.jpg
- hot.html
5. 中西文混排
中英文之间需要加空
中文数字之间需要加空格
文为主,使用全符号与英文或数不加空格
6. 代称
了表达方的平,避免使用「您」。使用「」称客户/用户,借以表达客户的口吻。客户/用户主的况下使用「我」。避免同一句子中混用「」「我」。
对于「您」还是「你」的使用并非绝对,主要行业以及服的对象
在《胜于言传-Web内容创作计的艺术》中作者建议:
当用户提问的时候:
- 在问题中使用「」和「的」(用户的声音)
- 答案中使用「」「的」(应用对用户话)
- 用「我们」和「我们的」代表回答司
当应用提问的时候:
- 在问题中使用「你」和「你的」(应用向用户提问)
- 答案中使用「我」「我的」(用户的声音)
- 用「我们」和「我们的」代表回答司
五、指导建议
- 操作动
- 本说明
- 句式结构
- 语音语调
- 写建议
1. 操作行动
按钮
清晰可预测。应该够预测当点击按钮时会发生么。
行号召。按钮应始终带有强烈的词,鼓励行。为了给户供足够的上,在按钮上使 {词} + {名词} 格式,除了保存,闭,取消或确定等操作。
以下是常用词的含义,以避免不恰当或混淆使用:
有具体的词需结合场景和生习惯。
链接
使用描述性链接文本。切勿使用「击这里」或「这里」作为链接文本。
如果一个链接现在句子的末尾或逗号之前,要链接标点符号。
链使用蓝色,这是用户习以为常的认知,并确点击和未点击的别。
2. 文本说明
对操作说明,功说明,名词(术语)解释,示信息等进行户测试,是否明白意,记住这是一个断优的过程。
以下是产品内的主要文本:
- 操作本:按钮;
- 导航文本:全局和局部导航、目录、链;
- 明文本:功能明、语解释;
- 提示文:弹框、toasts、操反馈、系统反馈、通等;
- 操作说明:功能引导说明,操作文档;
- 标题和副标题:弹框标题、操作说明标题、法律条款标题等;
- 条款:法律条款、申;
- ALT:图片添加文字明。
3. 句式结构
通场景的语句可进行归纳在一起,形成统一的句式结构。
例如:
操作反馈:功直接提示结果,失败显示结果+明原因+如何解决。
二次确认:先说明害,询问是否操。
标题:「动词」+ 「名词」格等。
4. 语音和语气
听来是谁,什么样的语音和语气能代表我们,我们想传达什么的形象。
此,你可以立套准则,般而言准则应该:
- 基产品当前的业务;
- 准则可被执,避免过于空洞;
- 易于记忆,3-5个尚可;
- 并随着产品发展和愿景的变化而不断适应改进。
例如:
积极
始终坚持积极的,而是消极令人沮丧。
自信专
避免听起来傲慢、亲密、孩子气或他适当的或非正式的。
友好尊重
依据同状态(正面、中性和负面)和户群体(手、中级户和专),使合的语气及词规范。
5. 写作建议
个人写作过程中的一些小感悟:
- 好结是不断改来,改基础是要先写下来,所有先记录而不是留在脑子里,这才是切开始基础。
- 记住户很忙且没有耐性,甚至聪明,这会断的促使你修改调整。
- 找人阅读并呈现结果,并询问其含义和建议。这是检验的最佳实践。
- 过段时间再看看,或许好的方式。
结尾
这并非是一个整的(容层面可保存图片格,插画图标等),还有很多地方可补充。重要的是到适合你的产,并有这样的意识断优你的产容,从而更好的务你的户。
欢迎关注作者的公众号:「int-PD」