内容策略-设计完全手册

原创文章 分类: 经验/观点 版权:
6888 144 193 2
2018-06-07
46.9
首页推荐

承接上篇 内容策略-设计完全手册


通用产出物

1. 字体

2. 日期和数字

3. 标点符号

4. 大小写

5. 中英文混排

6. 代称


一. 字体


1.字族 Font-Family
Font-Family 属性设置的字体系列。Font-Family 属性设置多个字体作为一种“后背”机制,浏览器不支持第一种字体,它会尝试下一个字体。
如果字体系列的名称超过一个字,它必须用引号,如Font-Family:"宋体"。

对于依附在 PC 端产品而言,统一的字体规范,以保证在不同平台、不同浏览器下保持良好的美观性和易读性。

以下呈现的是 Ant Design 的字体家族。个人在使用了多款后,觉得最好的一份(哈哈哈)

Image title

如果大家想了解字体排列前后顺序的玄机可以认真看 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的通用字体族(http://www.w3.org/TR/CSS21/fonts.html#generic-font-families),具体是什么字体是由浏览器设置决定的。


2.字号 font-size
标题,内容,注释说明等不同字号的大小。

Image title

3.字间距 letter-spacing

根据不同字号,及文本数量进行字间距定义。

Image title

4.行高 line-height
设置行高能很好的解决,换行上下文本之间拥挤在一起的情况。

Image title

5.颜色 text-color

这里主要讲下注意对比度的问题,很多产品在这一点上都忽视了这一点,搞出了所谓的“小清新”。

Image title

你可以查看完整的 网页内容可访问性指南WCAG 2.1

色彩无障碍设计(Color Accessibility)之「对比度」的探索 中推荐的工具很实用

「完美」的字体系统搭建与维护指南

掌握具有共享样式的文本系统


二. 日期和数字


1.日期
使用完整数字日期,如:2018-01-02

日期

2.时间
使用24小时制,如13:01:29 具体到时分秒,如当前对话显示09:01:02, 使用半角":" 日期和时间之间包含一个空格,如2018-09-01 13:01:20

Image title

3.数字

使用阿拉伯数字。

Image title

对四位或更多位数的数字使用逗号。

Image title

对手机号码使用前后无空格的连字符『-』。不要使用点,空格等其他符号。

Image title

数字范围使用前后无空格的连字符『-』。

数字

正负数后不加空格。

Image title

*备注:数字和字符之间不需要空格


4.货币

人民币符号(¥)在数字前面,精确到小数点后两位

货币

5.测量单位

储存单位(B、kB、MB、GB、TB),在数量和度量单位之间包含一个空格。

Image title

对于长度[毫米(mm)、厘米(cm)、分米(dm)、千米(km)、米(m)、微米(μm)、纳米(nm)等]和重量[千克(kg) 克(g) 毫克(mg) 微克(ug) 等]等测量单位应为小写(电流单位除外)。在数量和度量单位之间包含一个空格。

Image title

屏幕单位[像素(px)、逻辑分辨率(pt、dp、sp)、英寸(in)等 ]应为小写。在数量和度量单位之间包含一个空格。

Image title

在连续列出尺寸时,将度量单位放在末尾,而不是在每个数字之后,并包括一个空格。

Image title

在所有情况下,数字和单位之间包含一个空格。HTML代码的最小空间是 & hairsp; 或 & #8202;


*备注:测量单位分为基本单位和导出单位。国际单位制共有7个基本单位长度:
长度:米 m

质量:千克(公斤) kg

时间:秒 s

电流:安[培] A

热力学温度:开[尔文] k

物质的量:摩[尔] mol

发光强度:坎[德拉]cd;
并由物理关系导出的单位称“导出单位” 。


三. 标点符号


1.省略不必要的标点

标题、副标题、输入框下的提示文本、输入框暂位符、悬停提示中的文本、Toast中、弹窗等短句,在遣词造句时尽量避免标点符号,始终末尾不要使用句点。

省略不必要的标点

2.有序列表和无序列表

使用冒号引入项目列表,列表后不使用标点。

使用列表来表示步骤、组或信息集。简要介绍列表的上下文。在顺序重要时列出数字列表,比如当您描述流程的步骤时。当列表的顺序不重要时,不要使用数字。

有序列表和无序列表

3.常用标点符号规范
空格:链接与前后文本之间增加空格;数字和单位之间包含一个空格;电话号码与前后文本包含一个空格。
省略号『…』:半角省略号,超出截断代替省略文本。
星号『*』:半角星号。表单必填;说明备注。
连接号『-』:半角连接号,前后无空格,如2018-01-04,2008-2018。
冒号『:』:半角冒号,用于时间的表示,如16:45 。
冒号『:』:全角冒号,用于表单。
破折号『——』:中文破折号占两个汉字空间。
书名号『《》』:产品中常用于法律条文。


相关推荐:

《标点符号用法》

常用标点符号用法简表

中文排版需求

写给大家看的中文排版指南


四.大小写


1.专门名词大小写

专门名词大小写

2.文件格式
当一般引用文件扩展名类型时,全部大写而不包含句点。

  • GIF
  • PDF
  • HTML
  • JPG格式

引用特定文件时,文件名应该是小写的:

  • 内容策略-设计完全手册.pdf
  • 皮皮虾.gif
  • 西湖.jpg
  • hot.html

文件格式


五. 中西文混排


1.中英文之间需要加空格

中西文混排

2.中文与数字之间需要加空格

中西文混排

3.中文为主,使用全角符号且与英文或数字之间不加空格

中西文混排


六. 代称
为了表达双方的平等,避免使用『您』。使用『你』代称客户/用户,借以表达客户的口吻。在客户/用户为主的情况下使用『我』。避免同一句子中混用『你』和『我』。

Image title

*备注:对于“您”还是“你”的使用并非绝对,主要看行业以及服务的对象。

在《胜于言传-Web内容创作与设计的艺术》中作者建议

当用户提问的时候:

  • 在问题中使用“我”和“我的”(用户的声音)
  • 在答案中使用“你”和“你的”(应用对用户说话)
  • 用“我们”和“我们的”代表回答公司

当应用提问的时候:

  • 在问题中使用“你”和“你的”(应用向用户提问)
  • 在答案中使用“我”和“我的”(用户的声音)
  • 用“我们”和“我们的”代表回答公司


指导建议
7. 操作行动

8. 文本说明

9. 句式结构

10. 语音和语调


七. 操作行动


1.按钮

清晰可预测。应该能够预测当点击按钮时会发生什么。

Image title

行动号召。按钮应始终带有强烈的动词,鼓励行动。为了给用户提供足够的上下文,在按钮上使用 {动词} + {名词} 格式,除了保存,关闭,取消或确定等常用操作。


以下是常用词的含义,以避免不恰单或混淆使用

Image title

*备注:所有具体的用词需结合场景和生活习惯

2.链接
使用描述性的链接文本。切勿使用“点击这里”或“这里”作为链接文本。

如果一个链接出现在句子的末尾或逗号之前,不要链接标点符号。

链接使用蓝色,这是用户习以为常的认知,并明确区分点击和未点击的区别。

链接


八. 文本说明
对操作说明,功能说明,名词(术语)解释,提示信息等进行用户测试,是否明白其意,记住这是一个不断优化的过程。


以下是产品内的主要文本
操作文本:按钮;
导航文本:全局和局部导航、目录、链接;
说明文本:功能说明、术语解释;
提示文本:弹框、toasts、操作反馈、系统反馈、通知等;
操作说明:功能引导说明,操作文档;
标题和副标题:弹框标题、操作说明标题、法律条款标题等;
条款:法律条款、申明;
ALT:为图片添加文字说明。


九. 句式结构
通用场景下的语句可进行归纳在一起,形成统一的句式结构。


例如

操作反馈:成功直接提示结果,失败显示结果+说明原因+如何解决

二次确认:先说明利害,再询问是否操作

标题: {动词} + {名词} 格式等

句式结构


十. 语音和语气

这听起来是谁,什么样的语音和语气能代表我们,我们想传达什么的形象。

因此,你可以建议一套准则,一般而言准则应该:

  • 基于产品当前的业务
  • 准则可被执行,避免过于空洞
  • 易于记忆,3-5个尚可
  • 并随着产品发展和愿景的变化而不断适应改进

例如:
1.积极主动

始终坚持积极主动的,而不是消极令人沮丧。
2.自信专业
避免听起来傲慢、亲密、孩子气或其他不适当的或非正式的。
3.友好尊重
依据不同状态(正面、中性和负面)和用户群体(新手、中级用户和专家),使用合理的语气及用词规范。


写作建议

个人写作过程中的一些小感悟:
1.好的结果是不断修改来的,修改的基础是要先写下来,所有先记录而不是停留在脑子里,这才是一切开始的基础。

2.记住用户很忙且没有耐性,甚至不聪明,这会不断的促使你修改调整。

3.找人阅读并呈现结果,并询问其含义和建议。这是检验的最佳实践。

4.过段时间再来看看,或许有更好的方式。


结尾

这并非是一个完整的(内容层面可能保存图片风格,插画图标等),还有很多地方可以补充。重要的是找到适合你的产品,并有这样的意识去不断优化你的产品内容,从而更好的服务你的用户。


表单-设计完全手册

表格-设计完全手册



Wiiii

微信公共号:int-PD

233粉丝/0关注

内容策略-设计完全手册表单-设计完全手册

Wiiii

Wiiii

微信公共号:int-PD

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN