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

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

提交需求

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

0/20
0/200

设计大赛

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

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

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


中篇


通用产出物

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
标题,内容,注释说明等不同字号的大小。

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

在所有情况下,数字和单位之间包含一个空格。


* 备注:测量单位分为基本单位和导出单位。国际单位制共有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内容创作与设计的艺术》中作者建议

当用户提问的时候:

●  在问题中使用“我”和“我的”(用户的声音) 

●  在答案中使用“你”和“你的”(应用对用户说话) 

●  用“我们”和“我们的”代表回答公司


当应用提问的时候:

●  在问题中使用“你”和“你的”(应用向用户提问) 

●  在答案中使用“我”和“我的”(用户的声音) 

●  用“我们”和“我们的”代表回答公司



下篇


指导建议

1. 操作行动

2. 文本说明

3. 句式结构

4. 语音和语调

5. 写作建议


一. 操作行动


1. 按钮

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

Image title

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


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

Image title

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

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

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

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

链接


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


以下是产品内的主要文本:

●  操作文本:按钮;

●  导航文本:全局和局部导航、目录、链接;

●  说明文本:功能说明、术语解释;

●  提示文本:弹框、toasts、操作反馈、系统反馈、通知等;

●  操作说明:功能引导说明,操作文档;

●  标题和副标题:弹框标题、操作说明标题、法律条款标题等;

●  条款:法律条款、申明;

●  ALT:为图片添加文字说明。

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


例如:

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

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

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

句式结构


四. 语音和语气

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

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

●  基于产品当前的业务

●  准则可被执行,避免过于空洞

●  易于记忆,3-5个尚可

●  并随着产品发展和愿景的变化而不断适应改进


例如:
1. 积极主动

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


五. 写作建议

个人写作过程中的一些小感悟:

1. 好的结果是不断修改来的,修改的基础是要先写下来,所以先记录而不是停留在脑子里,这才是一切开始的基础。

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

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

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


结尾


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


推荐阅读:

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

组件-设计完全手册

表单-设计完全手册

表格-设计完全手册

Image title

Powered by Froala Editor

更新:2020-03-23

收藏

199人已收藏

Wiiii

设以为计,格物求索

  • 40

    作品

  • 2125

    粉丝

  • 0

    关注

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

    猜你喜欢

      2020-03-23 原创文章 经验/观点 举报 8719 199 225 3

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

      0.0°

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

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      225
      199
      3

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

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

      登录

      手机号

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

      登录
      第三方账号登录