对于这个问题，您可能脱口而出，就是设计一个应用呗，而且这个应用通常是一个网站的形态。那么，请进一步思考下，这个网站的目标又是什么呢？

网站作为一种电子媒体，从纸媒中演化而来，同时得益于其独有的富交互能力，因此拥有了比纸媒更广泛的用途。下面，让我们先来看看书的目标是什么。

(1) 书的作用

作者写书，是将其想法浓缩在书籍里，从而引导读者按照其想法去行动。因此，评价作者是否优秀，最重要的标准是其思想否被更多的目标读者所接受。左图描述了这一过程——书将一种想法传递给读者，然后读者按照这个想法行动。

作为一种引导读者行动的工具，除了书之外，还有没有其它更高效的方法呢？如果我们将这个过程看作自学，那么很显然的，有老师教的效率更高。

(2) 老师与书

回想我们在学校的日子，有课本，也有老师。优秀的老师会把控节奏，通过一节节的课程，将课本的思想与我们的行动结合。进一步的，如果有私人教师，效率会更高，针对个人理解的对话模式，让学生的行动与思想快速匹配。

相对于书来说，网站拥有交互能力——换言之，网站相当于私人教师而不仅仅是书。它通过鼠标、键盘、触摸屏收集读者想法，通过屏幕给出自己的反馈，起到的作用等同于私人教师（或者高级助理）。

(3) 网站

网站的作用类似于私人教师，那么我们的设计职责就是规划与设计这个“私人教师”的工作细节安排——类似于教务处教学研究的工作职责，细节规划我们“私人教师”的行动细则，并使用BPMN规范作为描述工具。例如新生第一课(入口页)？有哪些专业/课程可选(引导页)？分别做什么(细节页)......

教务处以学生平均成绩作为评价“教师”的手段。我们以读者(用户)是否采取了给定行动作为评价“私人教师”的手段。因此，通常情况下，我们会先确定用户(读者)的预期行动——也就是目标流程。然后从目标流程角度出发，设计能协助用户按照目标流程执行的“私人教师”教案。

本手册的目的是让您清楚如何表达您的规划，并不会涉及如何规划的内容。一开始，您可以通过模仿现有产品开始您的表达学习——这可以减少对您规划方面知识的依赖。换言之，要想写书，先会写字。

写书的时候，您需要考虑段落章节安排(排版)，然后用笔将这些写出来。在设计领域是完全类似的过程，您也需要考虑内容的布局安排，然后用一支“笔”将您的“字”写下来。

产品的文字与写书所使用的文字有一点区别，传统上写的文字是给人读的，所以段落很符合作者习惯。但是描述产品的文字除了给人读，也需要要给计算机读(指定计算机行动的部分)，所以，在一个文档中需要以一种手段将文字区分为人读部分与机读部分，这就是标记语言(ML)，我们采用的是目前的主流规范HTML。

产品的文字与写书所使用的文字有一点区别，传统上写的文字是给人读的，所以段落很符合作者习惯。但是描述产品的文字除了给人读，也需要要给计算机读(指定计算机行动的部分)，所以，在一个文档中需要以一种手段将文字区分为人读部分与机读部分，这就是标记语言(ML)，我们采用的是目前的主流规范HTML。

(1) HTML

HTML就是使用标签来区别人读与机读。标签是由尖括号括起来的文字。如下：

其中<标签名1>和<标签名2>是开始标签，</标签名1>和</标签名2>是结束标签，这些标签（绿色部分）是让计算机知道该如何对页面进行排版的，而内容（即黑字部分）才是页面在浏览器中显示的东西。

举个例子，请看下面的HTML代码与这段代码在页面中显示的内容。

页面内显示的内容： 您好，wware欢迎您！

可以看到显示在页面上的只是代码中黑色的部分，代码中的绿色部分都没有显示在页面上，这部分标签是由计算机来处理的，您只需知道这个结构即可，无需了解具体的语法。

您可以把一个标签(含其内给人读的部分)看作一个“文字”，表达您的设计就是使用这些文字来堆砌。我们称其为“元素”——相当于书籍中的字。下文会详细讨论元素，这里有一个概念即可。

(2) 使用wide来简化书写

上面说到无需了解HTML的语法，但是制作页面又不能缺少HTML，这部分工作怎么办呢？这时候就是wide发挥作用的时候了。使用wide只需要你有一个概念即可，一切都使用图形界面进行操作，就像用word一样方便简单，但是wide所需要描述的内容要比word多的多。

上文以书籍为例描述了网站设计，两者根本目标是一致的。这里简要总结下两者的区别。

(1) 互动性差异

书籍是不支持互动的，而网站扮演的角色相当于私人教师+书本。私人教师负责互动判定的逻辑，而书本承载了基本的内容(正如上文所说，HTML文本同时包含了给私人教师读的教案，以及给读者读的书本内容)。因此，整个设计方法不同于书籍写作，采用了BPMN(面向过程的商业模型符号定义)作为专用的思考、交流语言，整个设计过程中需要时刻牢记目标流程。关于流程相关的内容，在入职时会有培训。

这个差异十分重要，请在使用软件产品时，注意观察产品的设计，产品会响应哪些输入？这些输入如何立即反馈到页面上并呈现给读者的？

(2) 排版差异

书籍通常是标准化产品，其大小规格都是固定的，而网站使用读者自己的设备来显示，由于每个设备都有区别，因此排版需要考虑设备差异，换言之，需要将用户设备归类，不同设备有不同的排版，但是都很流畅而方便(Responsive)。如果遵守WIDE使用规范，那么绝大多数情况下，可以不考虑排版差异，WIDE会自动处理。但是在某些场合，依然需要考虑排版差异，WIDE为排版差异提供了两种处理方法(后文会有详细展开)：

• 响应式页面：通过为不同设备构建不同页面，在探测到设备类型时，自动采用合适的页面。
• 设备相关的样式定义： 可以根据设备分辨率、横纵比等信息定义不同的样式类，自动根据用户设备采用合适的样式类。