这样写Web产品文案或网站文案

开源通产品文案规范

规范定义：............................................... 规范原则：............................................... 基本规范：............................................... 技术要求：............................................... 文案视觉：............................................... 内容表达详细： ...........................................

标题:................................................

按钮:................................................

信息提示文本 .........................................

导航文本: ............................................ 实施操作:................................................ 规范定义：

基本规范主要是给所有产品设计参与人员一个大致的认识，是所有产品设计都须注意的地方；特定产品的规范主要是给界面设计师，以及开发人员参考，确定具体位置的具体文字；内容规范则是给内容编辑，或者其他内容贡献者（非用户）的行文规范。

规范原则：

* 一致性：在相同使用场景中不出现两个或多个词汇描述同一种操作或同一件事物；

* 准确性：不使用易混淆的文字描述常见事物，使用常见通俗的语言，

不罗嗦；

* 情感化：结合人物角色，使用易记、与产品传达体验一致的语言；* 节奏感：主要是文字在一般需要注意的大小、颜色限定。

基本规范：

1. 文字要求不能出现错别字，对读者的情感伤害与搜索引擎抓取关键词会出现问题。

2. 文字密度节奏的控制。段落以四行左右，宜少不宜多，同时避免文字量大的段落连续堆积，段落之间最好的节奏不是一一二二三三。

3. 正文与产品词语避免在同行断开。

4. 标点符号避免写错，符号采用全角中文字符号。

5. 中文数字和阿拉伯数字的统一描述。

6. 链接量的控制。单篇内容的关键词控制在5%以内,链接不允许重叠重复。

7.注重使用的场景和用户的特点，使用的语言让你的用户易懂，避免使用难懂的专业术语。

8.标题，看能否说明白当前界面的主题，需要表达上下文的，还要交代一下本界面的来源。例如：信息提示窗口最好交代出由于那个操作所引起的。

9.关于信息提示文本要客观、准确的说明原因，并同时给出建设性的操作建议；

10.按钮要保证和功用相符，导航则力求和内容一致。

11.让非电脑专业人员进行测试，尽量避免初期有过多的主观臆断。

12.以用户语言清楚而准确的向用户传达信息。

13.界面上的文字应该便于用户阅读并快速理解其含义。

14.整个产品不同位置的文字应该统一。作一个IM软件，一开始是“添加好友”，接下来“联系人列表”，然后又是“不在线的朋友”；一开始是“注册用户名”、然后是“登录ID”、还有“您的账户”、“管理帐号”、…

15.界面上的文字应该具备该产品需要传达给用户的气质。

16.既定事实不再重复、不用反问语句提问用户、即时说明文字不得超过20字。

17.严肃、简练

18.尽量让文字自身可以起到“推销”产品的作用，而且”推销”的不只是产品气质。

19.用户人称应该统一。

技术要求：

1. HTML结构代码符合语义标准。比较混乱的大概是有序、无序、定义三个列表，写12345和使用ol的效果区别不大，但搜索引擎会认为他们的意义不一样。

头部的页面声明，如定义meta, 页面title

提高关键词密度，如图片替换alt，链接说明title

正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd

慎用内容突出，如标题h，强调em，重点strong

2. 实体转义码的作用。典型如在中文后用 表示英文空格，使用©表示版权，还有使用<和>替换<>显示HTML代码等用途。

文案视觉：

1. 色彩的合理使用，功能不同使用不同颜色。

如链接提示，采用下划线，控制文字标题到栏目名到正文的三级文字。

2.文字的视觉设计应该完整的融入整个产品视觉中。

3.设计师还要考虑文本的颜色、加粗、对齐方式、对比度、链接样式等辨识度方面的问题。

4.文本使用14号宋体与12号宋体。

号宋体时，使用18-20像素的行距。14号宋体通常使用22-24像素的行距。

WEB设计时，一般不用考虑平面设计中字与字的间距问题，而使用默认状态。

6.新闻内页的标题用到18号的黑体或宋体

7.文本设计可调控：

可以使用“+”这个功能来提高文本的辨识度。

8重点显示某些信息，给文字加粗或改变字体的颜色，但是要慎用,不应过度的强调等于没有强调，例如下面这种情况：

9凡是有链接的文字，需要与别的文字做一个明显的提示，以示区别。如：

内容表达详细：

标题:要明确告诉用户当前界面的主题，避免用户认识差异。应具有上下文的相关性可用性。

比如：从我们的win操作系统桌面进入“网上邻居”，标题显示的就是“网上邻居”，是和我联网电脑的统称，如果用“我的邻居”来表达，也可以理解成“网上邻居”这个意思，但是不够准确，因为有的人会理解成“住在我隔壁的邻居”。

上图中的标题“重命名文件或文件夹时出错”，我们简单的可以分析出，这个标题具有上下文的相关性，首先它是一个出错信息提示窗口，同时也说明了在什么操作的时候出错，在达意上来说，恰到好处。如果你硬说直接用“出错了”也作为标题，没有人会说你说错了，只是突然弹出一个窗口来，简单的一个“出错了”可能会让某些用户摸不着头脑，降低了可用性。

按钮:

a、按钮文本不应专业化，而应该用户化。

在填写注册表单的时候，你通常会看到“提交注册信息”或“注册”等类似的按钮。如果写成“提交表单”可能有很多用户为“表单”这个专业术语纳闷。

b、按钮文本词要达意，不应让使用者要去猜测它的准确含义。

当你写博客的时候，你通常是看到“发布”按钮。如果给你放一个“确认”按钮，你会试试这个“确认”按钮就是“发布”吧？