提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
承接上篇 内容策略-设计完全手册
中篇
通用产出物
1. 字体
2. 日期和数字
3. 标点符号
4. 大小写
5. 中英文混排
6. 代称
一. 字体
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的通用字体族(http://www.w3.org/TR/CSS21/fonts.html#generic-font-families),具体是什么字体是由浏览器设置决定的。
2. 字号 font-size
标题,内容,注释说明等不同字号的大小。
3. 字间距 letter-spacing
根据不同字号,及文本数量进行字间距定义。
4. 行高 line-height
设置行高能很好的解决,换行上下文本之间拥挤在一起的情况。
5. 颜色 text-color
这里主要讲下注意对比度的问题,很多产品在这一点上都忽视了这一点,搞出了所谓的“小清新”。
你可以查看完整的 网页内容可访问性指南WCAG 2.1
色彩无障碍设计(Color Accessibility)之「对比度」的探索 中推荐的工具很实用
二. 日期和数字
1. 日期
使用完整数字日期,如:2018-01-02。
2. 时间
● 使用 24 小时制,如 13:01:29
● 具体到时分秒,如当前对话显示 09:01:02
● 使用半角 ":"
● 日期和时间之间包含一个空格,如 2018-09-01 13:01:20。
3. 数字
使用阿拉伯数字。
对四位或更多位数的数字使用逗号。
对手机号码使用前后无空格的连字符『-』。不要使用点,空格等其他符号。
数字范围使用前后无空格的连字符『-』。
正负数后不加空格。
* 备注:数字和字符之间不需要空格
4. 货币
人民币符号(¥)在数字前面,精确到小数点后两位。
5. 测量单位
储存单位(B、kB、MB、GB、TB),在数量和度量单位之间包含一个空格。
对于长度[毫米(mm)、厘米(cm)、分米(dm)、千米(km)、米(m)、微米(μm)、纳米(nm)等]和重量[千克(kg)克(g)毫克(mg)微克(ug)等]等测量单位应为小写(电流单位除外)。在数量和度量单位之间包含一个空格。
屏幕单位[像素(px)、逻辑分辨率(pt、dp、sp)、英寸(in)等 ]应为小写。在数量和度量单位之间包含一个空格。
在连续列出尺寸时,将度量单位放在末尾,而不是在每个数字之后,并包括一个空格。
在所有情况下,数字和单位之间包含一个空格。
* 备注:测量单位分为基本单位和导出单位。国际单位制共有7个基本单位长度:
长度:米 m;
质量:千克(公斤) kg;
时间:秒 s;
电流:安[培] A;
热力学温度:开[尔文] k;
物质的量:摩[尔] mol;
发光强度:坎[德拉]cd;
并由物理关系导出的单位称“导出单位” 。
三. 标点符号
1. 省略不必要的标点
标题、副标题、输入框下的提示文本、输入框暂位符、悬停提示中的文本、Toast中、弹窗等短句,在遣词造句时尽量避免标点符号,始终末尾不要使用句点。
2. 有序列表和无序列表
使用冒号引入项目列表,列表后不使用标点。
使用列表来表示步骤、组或信息集。简要介绍列表的上下文。在顺序重要时列出数字列表,比如当您描述流程的步骤时。当列表的顺序不重要时,不要使用数字。
3. 常用标点符号规范
空格:链接与前后文本之间增加空格;数字和单位之间包含一个空格;电话号码与前后文本包含一个空格;
省略号『…』:半角省略号,超出截断代替省略文本;
星号『*』:半角星号。表单必填、说明备注;
连接号『-』:半角连接号,前后无空格,如2018-01-04,2008-2018;
冒号『:』:半角冒号,用于时间的表示,如16:45 ;
冒号『:』:全角冒号,用于表单;
破折号『——』:中文破折号占两个汉字空间;
书名号『《》』:产品中常用于法律条文。
相关推荐:
四. 大小写
1. 专门名词大小写
2. 文件格式
当一般引用文件扩展名类型时,全部大写而不包含句点。
● GIF
● HTML
● JPG 格式
引用特定文件时,文件名应该是小写的:
● 内容策略-设计完全手册.pdf
● 皮皮虾.gif
● 西湖.jpg
● hot.html
五. 中西文混排
1. 中英文之间需要加空格
2. 中文与数字之间需要加空格
3. 中文为主,使用全角符号且与英文或数字之间不加空格
六. 代称
为了表达双方的平等,避免使用『您』。使用『你』代称客户/用户,借以表达客户的口吻。在客户/用户为主的情况下使用『我』。避免同一句子中混用『你』和『我』。
* 备注:对于“您”还是“你”的使用并非绝对,主要看行业以及服务的对象
在《胜于言传-Web内容创作与设计的艺术》中作者建议
当用户提问的时候:
● 在问题中使用“我”和“我的”(用户的声音)
● 在答案中使用“你”和“你的”(应用对用户说话)
● 用“我们”和“我们的”代表回答公司
当应用提问的时候:
● 在问题中使用“你”和“你的”(应用向用户提问)
● 在答案中使用“我”和“我的”(用户的声音)
● 用“我们”和“我们的”代表回答公司
下篇
指导建议
1. 操作行动
2. 文本说明
3. 句式结构
4. 语音和语调
5. 写作建议
一. 操作行动
1. 按钮
清晰可预测。应该能够预测当点击按钮时会发生什么。
行动号召。按钮应始终带有强烈的动词,鼓励行动。为了给用户提供足够的上下文,在按钮上使用 {动词} + {名词} 格式,除了保存,关闭,取消或确定等常用操作。
以下是常用词的含义,以避免不恰单或混淆使用:
* 备注:所有具体的用词需结合场景和生活习惯
2. 链接
使用描述性的链接文本。切勿使用“点击这里”或“这里”作为链接文本。
如果一个链接出现在句子的末尾或逗号之前,不要链接标点符号。
链接使用蓝色,这是用户习以为常的认知,并明确区分点击和未点击的区别。
二. 文本说明
对操作说明,功能说明,名词(术语)解释,提示信息等进行用户测试,是否明白其意,记住这是一个不断优化的过程。
以下是产品内的主要文本:
● 操作文本:按钮;
● 导航文本:全局和局部导航、目录、链接;
● 说明文本:功能说明、术语解释;
● 提示文本:弹框、toasts、操作反馈、系统反馈、通知等;
● 操作说明:功能引导说明,操作文档;
● 标题和副标题:弹框标题、操作说明标题、法律条款标题等;
● 条款:法律条款、申明;
● ALT:为图片添加文字说明。
三. 句式结构
通用场景下的语句可进行归纳在一起,形成统一的句式结构。
例如:
操作反馈:成功直接提示结果,失败显示结果+说明原因+如何解决
二次确认:先说明利害,再询问是否操作
标题: {动词} + {名词} 格式等
四. 语音和语气
这听起来是谁,什么样的语音和语气能代表我们,我们想传达什么的形象。
因此,你可以建议一套准则,一般而言准则应该:
● 基于产品当前的业务
● 准则可被执行,避免过于空洞
● 易于记忆,3-5个尚可
● 并随着产品发展和愿景的变化而不断适应改进
例如:
1. 积极主动
始终坚持积极主动的,而不是消极令人沮丧。
2. 自信专业
避免听起来傲慢、亲密、孩子气或其他不适当的或非正式的。
3. 友好尊重
依据不同状态(正面、中性和负面)和用户群体(新手、中级用户和专家),使用合理的语气及用词规范。
五. 写作建议
个人写作过程中的一些小感悟:
1. 好的结果是不断修改来的,修改的基础是要先写下来,所以先记录而不是停留在脑子里,这才是一切开始的基础。
2. 记住用户很忙且没有耐性,甚至不聪明,这会不断的促使你修改调整。
3. 找人阅读并呈现结果,并询问其含义和建议。这是检验的最佳实践。
4. 过段时间再来看看,或许有更好的方式。
结尾
这并非是一个完整的(内容层面可能保存图片风格,插画图标等),还有很多地方可以补充。重要的是找到适合你的产品,并有这样的意识去不断优化你的产品内容,从而更好的服务你的用户。
推荐阅读:
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册