恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
内容策略1-设计完全手册
0.0°
2020-03-23 原创文章 经验/观点 举报 5728 75 39 1

上篇


概述

任何事物的呈现和传达都需要通过一定的媒介,在媒介承载的过程中,均会产生损耗。我们设计的目的之一就是将所传达的内容在媒介承载的过程中让损耗降到最低,呈现出我们想要给受众的东西,且能够被快速察觉、理解和获取(主动及被动的)。

传达

文本作为语言沟通的书面化,一直以来承载着大量的信息,也是生活中最常见及熟知的方式。

当前人们快节奏的生活状态、快消的阅读习惯以及注意力分散,所以需要我们通过设计手段来减少视觉、心理及认知压力,让用户能够快速定位、理解和消化。同样,我们也需要根据目标、任务甚至品牌的诉求,从而更好的服务于主题。

以下是工作中一些心得和总结,指在从更多角度去思考和完善,让文本信息能够得到更好的呈现和传达。


前提

前提是做事的先要条件

1.达成目标 

2.了解受众 

3.具体情景


目的

目的是做这件事的动力

1. 满足用户所需,帮助完成工作 

2. 简单直接,有效传达(想象用户在憋着尿,在看你的内容)

3. 达成一致,统一规范可实施


角度

角度是考虑要做的内容

1. 准确性 

2. 一致性 

3. 易读性 

4. 内容调性


一. 准确性
1. 秉持文本信息准确明了、简达明意,无歧义
首先要明确所传达的群体对象,尽量避免使用行话,使用“用户”能直接理解的文本信息,当然相应的专业词汇也应给予良好的解释和说明。


案列:我们将 “循环次数” 更改成 “轮播次数” ,“循环次数”会让人产生思考(循环一次是播放一次还是两次的),而 “轮播次数” 就显得更加直观明了且更符合上下文的语境。

秉持文本信息准确明了、简达明意,无歧义

2. 用词完整、阐述直接
用词完整,例如保存修改,而不是简化为保存;阐述直接,避免模棱两可,模糊不清。

用词完整、阐述直接

3. 内容传达上应做的良好的“自解释”
例如:涉及操作事件的文本命名应根据上下文准确的进行表达,而不是含糊其辞的,使文本能够准确的解释和表达将要发生的事件及行为。

内容传达上应做的良好的“自解释”

4. 寻找更加合适的表达方式
例如:未输入提示:“XXX不能为空” 和 “请输入XXX”,第一个在表达上其实有一些责怪,而第二个表达同样说明了意思,但在口吻上却更加温和,并告诉用户应该怎样操作和行动。

5. 避免错别字
错别字只会拉低产品的品质和用户内心的形象,请务必严格检查。避免把 “登录” 写成 “登陆”

6. 准确应用标点符号

标点符号能够赋予文字节奏,表达语气以及对内容的组织。准确应用,能够帮助文字更加有效传达和被人理解。
常用标点符号用法简表
《标点符号用法》

二. 一致性
1. 同一事物用词一致,消除重复

例如,涉及新建的操作,一会用 “新建” ,一会又用 “新增” 、 “创建” 或者 “添加”;涉及称谓,一会用 “你” ,一会又用 “您” 、 “我” 或者 “我的” ;涉及帮助,一会用 “支持” ,一会用 “帮助” 或者 “服务” 等等,我们应该消除这些重复,统一用词。

2. 相似场景、意思和语境下句式表述一致
例如,未输入提示,应避免 “请输入XXX” 和 “XXX不能为空” 等不同的表达方式。

相似场景、意思和语境下句式表述一致

3. 标点符号规范
根据符号使用规范并结合自身产品情况具体定义。例如:全角和半角,如常见“:”和“:”,截断省略“...”等等。又如:标题,提示文本不加结束符号等。

4. 时间表达规范
时间是一个记录戳,需要根据与当前进行定义,显示不同的格式。

例如:今天发生的(自 0 时起),显示时分(24h);今天之前发生的,显示月-日(例如 02-12);跨年,显示年-月-日(例如 2017-12-30)。


5. 数字使用规范
例如:统计数据统一使用阿拉伯数字。

6. 大小写使用规范
专有名词大小写,单位符号等。例如:iOS 

7. 中西文混排规范
中英文之间需要加空格等

8. 代称一致
第一人称“我”,第二人称“你”和“您”,具体根据场景进行使用,同场景统一一致。你和您请不要随意混用或均使用,应当统一。

9. 操作名称与目的页面标题一致
常见于移动端,在 PC 常见于链接及导航。

三. 易读性
1. 简化内容,避免啰嗦
简单而直接,避免长段使用短语,保持措辞简洁,让读者感受到阅读乐趣,引诱他们深入阅读

2. 打破复杂陈长

通过段落、有序列表(项目编号)、无序列表等方式使内容结构化,便于视觉扫描


段落:根据句意,进行分段呈现。
无序:项目相关时使用项目符号列表,但顺序或优先级无关紧要。
有序:当项目顺序或优先级重要(程序等)时,使用编号列表。
结构化:节奏和韵律。例如,电话号码或者银行卡号,使用连字符或空格使其容易被读取和识别。


3. 重要内容突出显示
让用户首先看到最重要的内容,而不是去寻找它们。

4. 经过良好的排版
A. 合理使用文字大小
使用合理的字体大小,太小太大对于屏幕阅读来说都是低效率的。网页端字体大小一般使用不低于12px,更加直观易辨(对于多数人而言)的字体 14px 和 16px;移动端字体大小不小于 10pt(sp),12-18pt(sp)都是常用的字体选择范围。

B. 颜色与对比度
颜色我们需要考虑色彩本身(色相、明度和饱和度)给人直观感受和文化寓意的,以及文本与背景之间是否有足够的对比度,从而方面人们可以更加直观舒服的进行阅读。W3C 建议的视觉呈现文本和文本的图像具有对比度至少为 4.5:1,大型文字和图像的对比度至少为 3:1,具体详情可了解 Contrast (Minimum):Understanding SC 1.4.3

C. 字间距
汉字属于方块字,原则上文字外框彼此紧贴配置,称作密排;在各字之间加入固定量的空白来排列文字,称作疏排;减少字距,使得文字外框一部分重叠,称作紧排。文字排版时,会根据具体情况对字间距进行调整。大多时候我们对采用疏排方式,增加字间距,以提高易读性。

字间距

D. 行高
具有良好的行距的文本,更易阅读和引导用户视线。与行之间的空白称为行距,文字尺寸+行距=行高,行距一般介于文字尺寸的 50%–100% 之间,自然行高的设置一般为文字尺寸的 1.5-2 倍。文字尺寸较小时,行高设定也会相对较小。行距一般不会超过文字尺寸,因为这样并不会因此而增加易读性。

行高

E. 段间距
段落与段落之间的距离,段间距大于行间距,行间距一般设置为文字大小的 2-3 倍之间,合适的段间距能够缓解用户的视线压力,起到很好的节奏及阅读定位。

段间距

F. 行字数
一行到文字数量。一行文本过长,用户需要去移动脖子或视角,易造成的眼睛疲惫感,造成阅读困难;此外,在大段文本中找到正确的行也将变得困难。过短视线需要不断换行,从而打断了读者阅读节奏,造成尴尬的断裂效果;行太短也会造成用户在一行没读完的情况下去关注和阅读下一行。


虽然至今汉字依然没有正统的的方法和具体行字数来衡量文本的完美长度,个人经验在 12px 下 30-60 汉字左右(包含标点),具体也要根据内容、人群等约束和变量,当然最重要的是要相信你自己(专业的设计师)的眼睛和判断。

G. 词语尽量避免同行断开
例如:行末为“跳”,下行开头为“转”,读起来就有断句的存在感。

H. 对齐方式 
中文(简体)排版一般遵循左对齐的原则,符合我们从左到右的阅读习惯。文字居中,本身不适合可读性,但可用于许多小段文本块。右对齐在表格设置中,可用于数字的对比等应用。

对齐方式

I. 符号避头尾
中文中行首遇到不能置于行首的标点符号,必须要将移动到前一行行位。

J. 合理突出
对于关键字、要点通过位置、加粗、比例大小和色彩处理等,以便让用户直接关注到。当然也要控制突出数量,毕竟都是“重点就没有重点”,过多也会扰乱和分散用户的注意力。

K. 链接
链接文本需要很好的说明用户将要去何处,可以使用蓝色或者下划线标示出链接的样式,这是用户熟悉方式。
神奇的“下划线”为体验赋能

L. 尽量少用斜体
PC和无线端的各个官方的中文字体包并没有斜体预设,生拉硬扯的倾斜在一定程度上是影响美观度,并造成一定的阅读困难。如果是为了突出或区别可以考虑使用着重、大小和颜色等方式。(哈哈哈,是不是读起来很难受)


M. 层级处理
有对比就有层级关系,可通过大小、字重、色彩、距离、方向、纹理、形状、背景等等方式,可以让整体排版布局更加富有层次结构,让内容的可读性得到明显的提升。 例如:标题、副标题、引用和内容也是一种层级处理(结合了大小、色彩或者距离等等)。

N. 留白
合适的留白可以更好的烘托内容主题,缓解视觉压力。

O. 数量信息前后有汉字时需加空格
不加空格会出现前后拥挤的视感,另一方面可凸显数字信息。


四. 内容调性
1. 依据产品定位,通过文本表述传递其相应的价值观和情感诉求
任何产品都有所针对的人群及自身的品牌形象。C 端产品和 B 端产品,儿童产品和成年人产品,所使用的语言表达方式自然也都是不一样的。

2. 依据不同状态和用户群体

根据状态(正面、中性和负面)和用户(新手、中级用户和专家),使用合理的语调及用词规范,以适应不同的情境和状况。


3. 始终坚持积极主动的,而不是消极令人沮丧

“请输入内容”与“错误,内容不能为空”,同样的意思却有不同的感受,从积极的一面表达就是传播正能量。



本想一次写出来,只因内容实在太多,会使文章太长而不易阅读。

下一篇,我把具体通用产出物归纳出来,指导建议和自己的写作技巧与大家分享。


推荐:

内容策略2-设计完全手册

组件-设计完全手册

表单-设计完全手册

表格-设计完全手册

Image title


Powered by Froala Editor

更新:2020-03-23

收藏

75人已收藏

Wiiii

设以为计,格物求索

  • 40

    作品

  • 2125

    粉丝

  • 0

    关注

  • 企业级(ToB)SaaS 客户生命周期下的设计价值探索
  • 网站设计进阶!5 个方面优化+数据优化
  • 5 年内收集 10 万家 ToB 和企业级 SaaS 应用!
  • 网站设计秘诀! 5 大模块、72 个案列详解,轻松 get

    猜你喜欢

      2020-03-23 原创文章 经验/观点 举报 5728 75 39 1

      内容策略1-设计完全手册

      0.0°

      你确定要举报内容策略1-设计完全手册

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      39
      75
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录