不断出现的卡片掠夺黑客攻击只是一个特别引人注目的目标。

梅西百货（Macy's）已警告客户，入侵者将于10月7日在其网站上将代码（据信为JavaScript）滑入两页，让他们从购物者那里收集数据，包括姓名，地址和付款信息。

梅西百货在10月15日发现该攻击后立即将其关闭，但尚不清楚有多少人受到了影响。该公司告诉Bleeping Computer，一小部分人是受害者，并且已经实施了“附加安全措施”并提供免费信用监控。

这项名为Magecart的技术因其相对简单和有效的结合而在黑客中越来越流行。他们不需要做很多事情，而只需插入流氓脚本（指向远程命令和控制服务器）并等待人们购物。从那里，他们可以使用该信息进行欺诈性购买，制作克隆卡并在黑市上出售数据。

不要指望这些攻击会在短期内消退。它们已被用于众多主要品牌，包括英国航空，Newegg和Ticketmaster。直到网上商店对诸如Magecart之类的技术保持封闭，它们才会成为诱人的目标。

这篇文章中，本文作者分享了他对于产品文档的看法以及撰写产品文档的常用流程。

产品文档撰写指南

很多人听到「产品文档」这四个字就像吞了苍蝇一样，人们通常会认为这意味着又要花几周写一个根本没人看的文档。如果一个团队总被产品文档这种事情拖累，怎么可能「敏捷」得起来，怎么可能高效地产出代码？

我在过去十几年创造了多个数百万人使用的软件产品之后，越发认为这种观点是完全错误的。根据我的经验：

• 高效的产品文档是创造伟大产品的过程中所不可或缺的重要组成部分。
• 撰写产品文档可以强制所有人从项目初始就理性思考，频繁沟通，明确权责——所有的这些都会带来更好的软件质量，更低的进度风险，以及更少的时间浪费。

在这篇文章中，我会通过一个案例来分享一些普适的建议，这些建议会对大中型（超过二百人的）公司中的产品经理们非常有帮助。

首先，举个例子

假设你在这里工作：

一家从事在线旅游预订服务 （就像 Hotels 或者 Airbnb 但是规模更小一些）的公司。目前这家公司的支付转化率偏低，所以这个季度大家打算尝试通过在支付环节加入在线客服的方案来提升转化。

你的工单/用户故事/路线图是：

通过在支付环节增加在线客服来尝试提高支付转化率。支付转化率目前仅有 18％，而业内平均转化率有 30％。我们打算测试下在支付时展示在线客服聊天窗口是否可以提高这个转化率。用户运营团队已经同意了提供 1 人月的客服人力支持。

在你没有产品文档时，你会这样做：

比方说，你觉得行动起来总是最重要的，因此直接开始动手：

1. 在迭代计划会上，你和团队讨论了这个需求。
2. 然后你挑选了一个靠谱的第三方客服供应商（例如 SnapEngage）。
3. 提交一个工单来让工程师添加一些 Javascript 代码。
4. 和支持团队开个会，确定他们都准备好了

搞定了！这么简单的事情怎么能要我们写产品文档呢？如果你是在一个小型创业团队，你也确实并不需要——因为产品改动相对小，涉及到的人也相对更少。

但如果你是在一个更大的组织之中，或者产品更加成熟/复杂，就会陆续出现下列这些问题，并且相比写文档，这些问题会需要更多时间来处理。

例如：

• 工程师把工单标记完成了，但是一验收测试，就发现这个功能完全没有考虑移动端的适配。「唉呀！你忘了提醒大家手机端的使用才是核心场景。」
• 用户运营经理打算开展一个漫长的评审流程，以确定最合适的聊天服务商。「啊……需要定一个会议，向大家解释下这次上线只是一个灰度测试。」
• 发布一小时后，客服报告说他们收到了西班牙语的在线聊天请求。「啥？要追加一个紧急发布，把这个测试限定在英语用户中。」
• 一个设计师花了几天，为聊天窗口滑入屏幕的交互绘制了一个完美的动画。「用户体验过度优化，你是否对整个团队统一了「这次只是一个测试」的预期？」
• 一周的测试完成之后，数据分析师发现无法产出你要的报告，因为相关的必要指标并没有埋点。「史诗级的失败。从头再来吧。」

如果这是一个相对简单的项目，即使没有产品文档可能也不至于陷入这样的灾难之中。但是在简单的项目中你仍然有可能会因为没有文档浪费许多时间和机会成本。

如果你写了一篇文档

为了便于说明，我准备了两个示例文档：一篇思路笔记，和一篇完整的产品文档示例——这样可以完整介绍产品文档的撰写流程。

请在继续阅读文章之前，花几分钟读一下这两篇示例文档吧。

这是一个根据你已知的信息和想要解答的问题所梳理成的列表。

这会是你需要做的第一件事情，大约需要一个小时来完成这个文档。这个文档会成为你和团队中其他人的一个沟通基础。

只有和团队一起评审了你的假设和创意之后（无论是在专门召集的会议上，喝咖啡时，或者桌上足球的休息时间），你才应该真正开始写产品文档。

如果已经完成了沟通和评审，整个文档应该花费你 1-3 个小时的时间。

啊哈！有了文档之后是不是就感觉踏实多了？写文档看起来是额外的工作成本，但是其实并不是，高效的文档可以帮助你和你的团队节约时间投入，并且在交付上线时会更有信心。

等等！——你已经读完示例文档了么？请务必先读完它再继续阅读下面的文章。

Ben Horowitz

文档撰写指南

我通过示例文档诠释了这篇文章中所讲述的思考，在继续阅读全文之前，请务必确认你已经阅读了示例文档 。

为什么要写产品文档？

为了以更高的质量、更快的速度和更佳的预判来交付正确的产品。

是的，就是这样。那么，产品文档将如何帮助你做到这一切呢？Ben Horowitz 分享了上图中这个看法，我的示例文档也是一个很好的例证。明确一下要点：

1. 从一开始就理性思考：在团队开始付出更高成本去设计软件架构、实施代码开发、完善界面设计、测试软件质量之前，写文档可以迫使你提前思考每一个细节。这将会提高你决策的质量，降低意外事件发生的概率。
2. 高效沟通：你常常需要和不同的利益相关方（支持团队，工程团队，设计团队，财务团队，管理层等等）沟通你的方案。产品文档可以帮助你事半功倍地完成沟通，避免口头沟通中产生的歧义，团队中的所有人可以更好地理解你的意图，并且更有的放矢地做出答复。
3. 明确权责：明确项目目标的评价标准，公开承诺奖惩激励机制：利益相关方可以知晓如果最后一刻变更需求会意味着什么，工程师们也会在预估工期时再三斟酌。

产品文档中应当包含哪些内容？

产品文档应该明确沟通要做一个「什么」产品，以及「为什么」要这么做。用来说明清楚一个产品的表达方式很多，但最核心的，一定要说清楚这五件事情：

1. 问题：描绘你此次打算解决的问题。更重要的是，解释为什么要去解决这个问题。描述要尽可能地具体，并且提供相关的数据指标。
2. 可衡量的目标：明确承诺交付和成果，明确哪些事情超出了此项目的范畴。每一个目标，都应该可以明确衡量「是否达到目标」。
3. 需求背景：提供你的观众理解当前问题以及接受你的提议所需的所有背景信息。包括但不限于假设、用例、数据指标等信息。
4. 解决方案详情：你的提议应该有充足的细节，易于团队成员消化理解及执行——可以把这部分内容想象成对人脑进行编程和执行。
5. 时间轴：列出你的团队共同认可的截止日期和其他重要时间点。这部分内容开始的时候可能会比较模糊，但是在最后一次文档评审之前应当完全敲定。

你可以使用我的示例文档做你的文档模板，按照你的想法增/删/改任何章节。只要你能够清晰并且条理清楚地表述上面提到的这五点信息，文档形式并不重要。

如何写产品文档？

接下来我会介绍我撰写和评审文档的常规流程。根据项目大小，利益相关方的数量不同等情况，流程细节可能会有所变化，但是大体的流程是确定的。

（1）快速完成一个草稿（1-2 个小时）

关闭电子邮件和聊天工具。泡杯茶，坐在椅子上开始思考，然后逐一把你所了解的信息列成清单（见上文中的思路笔记示例）。

（2）安排几个 30 分钟的一对一会议 （1-4 个小时）

这个步骤的目的是过一遍文档中的细节，优化你的方案，并且获得更多人的支持。尽可能控制这些会议的规模，人越少越好（理想状态下都应该是一对一会议）。

在本文的示例中，我会和客服部门的负责人，一个财务人员和一个工程师分别安排一次会议。

（3）撰写和编辑文档 （0.5-3 天）

此时，你应该对能做，并且应该做什么有了一个明确的想法，但是大脑中塞满了大量的细节等待着梳理清楚。于是接下来需要将所有这些细节都整理出来，并且逐一梳理斟酌。

在完成第一版文档之后，需要继续大篇幅编辑修改，通常最终的文档可以在你的第一版草稿的基础上压缩 30%-50% 的长度，简洁和清晰的文档就意味着更加容易阅读。

大部分文档都可以在半天到一天的时间里完成，不过实际上也会有一些文档需要两三天才能写完。

（4）群发文档并且安排一个 1 小时的评审会议（15 分钟）

将文档群发给项目的所有利益相关方，并且抄送给其他可能对文档感兴趣的团队（例如你所在的产品团队，整个支持团队等）。

跟进这些关键人员是否接受了会议邀请：将会执行这件事情的人，和所有对这件事情有通过/否决权力的人。

（5）评审文档（1小时）

在开始会议之前，询问是否有参会者没有详细阅读你的文档。通常都会有一两个人中枪，在这种情况下可以说：「没问题，我们先用 10 分钟一起来看一下文档。已经读过文档的人可以利用这个时间先放松休息一下」。

这次会议上你需要获得利益相关方的同意，并且获得执行方（工程师、支持团队等）的知晓、认可以及人力支持。

你可能需要开多次评审会议，并且根据评审会议上沟通的信息不断修改文档。

（6）通过评审后，及时同步信息和建立工单 （1-2 小时）

会后同步信息的电子邮件需要包含更新后的产品文档链接，和此项目相关的工单链接（例如「在页面上添加 JavaScript 代码」，「完成数据分析报告」，「测试 Staging 环境」，「和支持团队预演流程」，等等）。

一般接下来将会有一位工程师完成技术文档，不过并不总是这样（文中的示例项目就不需要这一步）。

写出高效产品文档的进阶技巧

尽量简短

没有比这更重要的文档写作建议了。简洁意味着清晰的思路和沟通，也意味着你的文档更加易于阅读和理解——这一点至关重要。

使用平白的语言和简单的格式

使用简短而不是花哨的语句，使用列表和加粗强调可以使文章更一目了然，以放松有趣的方式写作而不是一板一眼，如果你有得体的幽默感就再好不过了。

为开发团队预留时间

通过评审并且达成一致通过的文档才是完善的文档。如果你希望在未来的某一个迭代 Sprint 中开发此项目，就应该提前两到三周开始这个产品文档写作流程。

像工程师一样思考

在项目得以进入开发之时，常常会发现大量未预料到的边缘情况——但这种情形其实可以避免。如果你认真考虑过项目进入开发的所有必要条件，你就可以提前发现这些问题（例如，是否在移动设备中可以使用在线聊天功能？）。

确保每一个人都跟上了你的节奏

当我组织产品评审时，会议室里的大部分人都已经大致了解我要讲的内容——因为我已经提前在讨论会和日常聊天中沟通过这个事情了。既然大家都已经清楚了「做什么」和「为什么要做」的问题，文档评审会上我们只要关注实施细节就好了。

在图表中下功夫

流程图、线框图等图表可以通过易于理解的方式提供很大的信息量，同时也需要消耗非常多的时间来制作这些图表。

在思考和写文档上花 0.5-3 天时间

具体时间根据项目大小而定。花费在写文档上的时间越长，所带来的边际收益就会递减。特别需要指出的是，没有人能够读的下去超过 5-6 页的文档。

指明方向，明晰愿景

你不仅仅是在定义一个功能，也是在解释「为什么我们要做这件事情」以及「我们的目标是什么」，在文档中指出这个项目将会对更高层面的规划造成什么影响，以及接下来会发生什么。

确保你的观众阅读了文档

如果你的文档又臭又长，或者从来不分享给对应的人，那你还不如不写文档。务必确保你的文档被对应的人阅读了，我上面关于评审开始时留时间给大家读文档的建议值得大家参考。

获取真诚的反馈

你的文档是否是在赘述人尽皆知的事情？或者是文档缺乏足够的细节？是否在后续实施中发现了太多的边缘情况？又或者，是否在制定计划和文档评审上耗费了太多的时间？你应该和你的团队时刻保持沟通。

说好的敏捷开发（Agile/Scrum）呢？

我知道会有争议，但是产品文档和敏捷宣言的原则没有丝毫冲突，并且在类似于 Scrum 这样的敏捷方法上得到了充分发挥。

毕竟，用户故事（Story）许多时候需要详尽的描述，文档可以增加沟通中的清晰度和可传播性，为什么非要刻板地认为仅仅使用口头沟通和使用白板才算是敏捷开发呢？

「产品文档会导致发布变慢，过度规划，通常会浪费时间」的想法完全是无稽之谈。

我工作过的多个世界级团队遵循着一些敏捷原则（例如两周一个迭代周期），每天（甚至更频繁地）发布代码，并且以发布产品（而不是文档或者会议）作为衡量成功的标准——这些团队也都仍然认为文档是他们打造成功软件的一个关键部分。

你对技术文档怎么看？

我是一个技术文档的支持者。产品文档通常关注 做什么 ，而技术文档更多关注在如何做 。这两种文档为研发流程中的不同环节带来同样的清晰视角，并且都使得工程师（和他们的用户）身心愉悦。 未来如果大家有兴趣的话我可能会写一篇关于技术文档的文章。

总结

感谢你读到这里。如果你认为这篇文章有用，请分享给其他人——特别是你的产品/工程团队。

如果你想看更多的产品经理内容（例如：规划产品路线图），或者想了解其他人如何使用产品文档， 请用两分钟填写这个小调查（英文）。我会在未来的文章中分享调查结果中有意思的信息。

以上，祝写文档愉快！

备注

1. 感谢周思博（Joel Spolsky） （微软早期 PM，曾参与创办 Stack Overflow，Trello，FogBugz 等产品，《软件随想录》作者）的「文档是对人脑的编程」的比喻。早在2000年，他写了4 篇关于文档的系列文章（英文），这对我的 PM 道路产生了巨大的影响，强烈推荐。
2. 在顶部的引文中，贝索斯所说的笔记是指为高层管理会议使用的，介绍新业务/产品创意的备忘录。这实际上不算是产品文档，但是两者并不是完全不一样。贝索斯在会议开始的时候会组织所有人默读文件——这激发了我在文档评审时做同样的事情。来源
3. 感谢 iDoneThis 博客这篇关于写作的价值的文章（英文）。这是贝索斯和 Horowitz 的引言的来源。
   感谢 Vikram Oberoi 。

原文作者：Gaurav Oberoi是 SurveyMonkey 的（前）联合创始人，曾于 Amazon、Xmarks 先后从事工程师、产品经理等职位，在西雅图和硅谷有十余年的工作经验。

原文地址：https://goberoi.com/on-writing-product-specs-5ca697b992fd

翻译：Tomy

译文地址：http://zhuanlan.zhihu.com/p/23778590

本文由 @Tomy 授权发布于人人都是产品经理，未经作者许可，禁止转载。

元素共有5个，分别是::before、::after、::first-letter、::first-line和::selection

first-letter

::first-letter主要用于为文本的首字母添加特殊样式

注意：::first-letter 伪元素只适用于块级元素。

first-line

::first-line 伪元素用于向文本的首行添加特殊样式。

注意：::first-line 伪元素只能应用于块级元素。

selection

::selection 伪元素匹配用户选择的元素部分。也就是给我们鼠标滑动选中的部分设置样式，它可以设置以下属性

• color
• background
• cursor
• outline

before/after

::before用于在元素内容之前插入一些内容，::after用于在元素内容之后插入一些内容，其他方面的都相同。写法就是只要在想要添加的元素选择器后面加上::before或::after即可，有些人会发现，写一个冒号和两个冒号都可以有相应的效果，那是因为在css3中，w3c为了区分伪类和伪元素，用双冒号取代了伪元素的单冒号表示法，所以我们以后在写伪元素的时候尽量使用双冒号。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon?，就可以使用:before伪元素.

二、content属性

不同于其他伪元素，::before和::after在使用的时候必须提供content属性，可以为字符串和图片，也可以是空，但不能省略该属性，否则将不生效。

伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值。

1、string 书名号

使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}

举例：

<!DOCTYPE html><meta charset="utf-8" /><style type="text/css">
p::before{
    content: "《";
    color: blue;
}
p::after{
    content: "》";
    color: blue;
}
</style>
<p>平凡的世界</p>

2、attr() 链接

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

<style type="text/css">
a::after{
    content: "(" attr(href) ")";
 }
 </style>
 <a href="http://www.cnblogs.com/starof">starof</a>

3、url()/uri() 用于引用媒体文件

举例：“百度”前面给出一张图片，后面给出href属性。

<style>
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");}
a::after{
    content:"("attr(href)")";}
a{
    text-decoration: none;}</style>
---------------------------
<body><a href="http://www.baidu.com">百度</a></body>    

效果：

4、counter()**调用计数器

调用计数器，可以不使用列表元素实现序号功能。

配合counter-increment和counter-reset属性使用：

h2:before { 
  counter-increment: chapter; 
  content: "Chapter " 
  counter(chapter) ". " 
 }

代码:

<style>
body{
    counter-reset: section;
}
h1{
    counter-reset: subsection;
}
h1:before{
    counter-increment:section;
    content:counter(section) "、";
}
h2:before{
    counter-increment:subsection;
    content: counter(section) "." counter(subsection) "、";
}
</style>
------------------------------------------------
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>   

效果：

了解更多可参考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

三、使用

做出各种图形效果

举例：一个六角星

<style>
#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six::after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}
</style>

<body><div id="star-six"></div></body>

#star-six的div是一个正三角行，#star-six::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果。

打印网页的URL

<style>
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
</body>  

图标

举例：网站有些联系电话，希望在它们前加一个icon?，就可以使用:before伪元素，如下：

<!DOCTYPE html><meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
      content:'\260E';
      font-size: 15px;
    }
    </style>
    <p class="phoneNumber">12345645654</p>

动画

制作一款特殊的鼠标滑入滑出效果

这个效果还是之前一个朋友从某网站看到之后问我能不能实现，我去那个网站查看了代码学会的，觉得很有趣，特意分享给大家。

可以先看一下效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .h-button {
            z-index: 1;
            position: relative;
            overflow: hidden;
        }

        .h-button:before,
        .h-button:after {
            content: "";
            width: 0;
            height: 100%;
            position: absolute;
            filter: brightness(.9);
            background-color: inherit;
            z-index: -1;
        }

        .h-button:before {
            left: 0;
        }

        .h-button:after {
            right: 0;
            transition: width .5s ease;
        }

        .h-button:hover::before {
            width: 100%;
            transition: width .5s ease;
        }

        .h-button:hover::after {
            width: 100%;
            background-color: transparent;
        }

        .submit {
            width: 100px;
            height: 40px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            background: #00baca;
            margin: 50px;
        }
    </style>
</head>
<body>
<div class="h-button submit">提交</div>
</body>
<script>

</script>
</html>

禁用网页ctrl+f搜索

有些时候，我们不想要用户使用ctrl+f搜索我们网页内的内容，必须在一些文字识别的网页小游戏里，我们又不想把文字做成图片，那么就可以使用这个属性，使用::before和::after渲染出来的文字，不可选中也不能搜索。当然这个低版本浏览器的兼容性我木有试，谷歌浏览器和safari是可以实现不能选中不可搜索的效果的。

拿上面的示例进行尝试，可以看到，我们使用伪元素添加的[问题]两个字，就无法使用浏览器的搜索工具搜到。