线框图原型是网站核心策略“着陆”的重要步骤。将机巧的想法转化为实际产品是一个复杂过程，这种复杂并不仅仅体现在技术层面，而更突出的表现在团队配合中；倘若三两个人的迷你团队，只需要很少的文档就能够达成协作一致；页面原型作为从创意到执行的中间文档，贯穿整个团队的工作，对于大型项目和团队协作的确有些效果。作为线框图系列教程的完结篇，本文将对页面原型的前世今生进行讨论，探寻抛弃原型的敏捷之路。

以前不存在

最初，万维网只是某些科学家的专利。在《画地为牢的框架设计》中，曾经提到过那种“极简梳形”页面，就是最基础的一种万维网应用；如果编写一个网页就像书写Word文档那么容易，那么也就根本不需要线框图原型。

最原始也就最本质，这是事物发展的一般规律。简单Web页面虽然质朴，但的确是最接近内容本质的形式；商业给了Web大规模发展的契机，也带来了复杂网页结构，从此有了导航、Banner、框架结构……为了赢得高速发展，越来越多的商业WUI无差别的嫁接了平面设计的因子，其副作用是让Web逐渐离开了内容本质轨道。

纸绘草图

曾几何时，网页设计是那些PS高手的天下（至少国内是这样）；那些萌芽时期的网站策划者为了“指导”视觉设计师的工作，创造性地开始用笔和纸勾勒网页的样子，使得最早的“低保真原型”出现了。

使用笔和纸进行原型勾勒，是以最小的思维干扰完成网页模拟。很多产品经理、网站策划师不断的追求那些最新款的原型设计工具，而往往忽略了思维干扰问题。最初使用纸张作为原型设计工具，因为该方法不占用创作者多余的思维，不用去考虑原型是否精美，专注于设计规划；那些新款软件往往设置了强大的功能，让创作者疲于应付工具的使用，造成了思维干扰。所以，无论选择何种方式进行原型设计，只要能否像使用笔和纸那样熟练自如就好，那就是适合你的设计工具，因为思维干扰最小。

线框图原型的本质

“线框图的本质是什么”？这个问题就好像在问“烤白薯的本质是否为食物？”一样庸人自扰。线框图的本质是图，是一种建立在“视觉为先导”理念上的Web页面勾勒形式。

线框图产生原因是：大规模团队协作中的信息不对称。试想，如果视觉设计师懂得人机交互原理，如果交互工程师熟练掌握Html语言，如果页面架构师深入理解产品策略，如果产品经理能够亲自开发数据库后台，如果程序开发人员能够规划合理的页面结构，如果内容编辑能够独立进行系统架构……当这些“如果”成为现实，世界上压根不想要线框图！事实也证明，由一个人建立的个人主页往往不是从线框图开始的，因为一切尽在掌握。

原型的窘境

以图为本的线框图，与Web本质三要素的特征相悖，越来越显得力不从心了。

说不清的为什么

产品经理、网站策划师为什么要进行线框图设计呢？理由会有很多，或者给视觉设计师一个参考，或者给程序开发人员进行系统架构提供参考，或者是给投资人描绘伟大蓝图……在这些理由中，能够始终站得住脚的是“参考”二字；往往没有多少最终页面和线框图是完全相近的，因为网站始终不是一个静态产品，需要不断的运营修正；于是就有了奇怪的现象，当网站的核心策略需要改变，无论功能还是交互上的改进，必须要从原型设计开始，如果脱离了线框图，所有的部门无法工作。被原型所羁绊，是所有大型Web团队面临的问题；是线框图解决了工作流程的对称，也是线框图增加了信息同步过程，真是“成也萧何，败也萧何”。

从来都不敏捷的中间件

为了达到一致，聪明的人类在工程项目中使用了“中间件”，类如印刷钞票的雕版，配合标准件和流水线，能够快速的产生大量完全一致产品。网站这个产品和快速消费品有很大的区别，非常强调差异竞争；如果某个网站和其他网站非常类似，就是缺乏竞争力，就很难有立足之地。

页面原型，是从创意到执行的“中间件”，如果最终的产品必须是差异的，那么为什么要存在原型？在网络服务竞争日益激烈的今天，很容易遇到这样的现象：投资人迫切的希望产品面市，不断的强调“敏捷”二字；为了寻找产品差异，网站仍然不断的在原型范围改进，造成与之配合的其他执行部门停工待料。

折腾人的原型测试

在此，并没有否定用户研究的意思，但任何研究结论都应该具有“普遍适应性”。面对网站的差异化要求，普适性似乎是很难达到的，于是任何网站都需要从最基础的用户采样开始，经历访谈、眼动仪、AB测试等复杂的流程，确立一个相对合理的原型。这些流程并不繁琐，但可怕的是：此类“用户研究”往往CaseByCase的单独进行，甚至变成网站之间的竞争资本。针对原型进行测试，有多大的实际意义，智者见智；劳累的是那些研究人员，折腾的是那些采样用户；如果不以最终页面提供给测试用户，而仅仅提供设计原型，至少是一种对用户的不尊重。

原型最终将向内容回归

原型要摆脱“视觉指南”的身份，就必须要回归到Web内容本质上来，即“语义化”原型。

一直以来都认为“懂得语义化Html是万维网从业者的充要条件”，然而编写页面代码的终究不是国人的母语，这也使得语义化愈加困难。曾经有位计算机教授提出过“在屏幕上出现汉字本身就是一件匪夷所思的事情”的论调，有些极端，但也有些道理。

试想，如果直接提供语义化的Html作为“原型”，且所有的配合人员都深入的了解Html语义，那么可以抛弃线框图这个碍手碍脚的中间件，让“原型”本身即为最终产品，事半功倍。

要搭建一个全都懂得语义原型的团队是一件很难的事情，但也不是完全没可能，曾经有产品设计人士使用Html页面制作原型文档，效果不是非常理想，因为不是所有的配合者都懂得Html语义。

寻找替代“线框图原型”的方法是写作本套教材的基本出发点，于是有了这个的解决方案：建立一套以母语为基准的Html语义转换系统。

<商标>网站策划机构.jpg</商标>
<一级标题>网站策划师</一级标题>
<自然段>这是一个汉语Html语义转换系统，它能够帮助整个团队理解深入理解语义，搭建标准的页面原型。</自然段>

只要使用正则表达式，配合开发语言就能够把上面这段语义原型片断转换为下面的Html代码：

<img src=”网站策划机构.jpg”>
<h1>网站策划师</h1>
<p>这是一个汉语Html语义转换系统，它能够帮助整个团队理解深入理解语义，搭建标准的页面原型。</p>

梦想着有一天，产品设计人员只需要用Html语义写出页面的逻辑架构，交互设计师、视觉设计师、程序开发人员就能够发挥自己的专长，轻松的将“原型”转化为实际的网络产品，而压根再不需要什么线框图了。

建议继续学习：

1. 轻量级在线原型设计工具mockingbird    (阅读：4146)
2. 使用线框图来简化你的产品设计流程    (阅读：2864)
3. 产品交互原型设计工具分享    (阅读：2596)
4. 原型: 新浪微博客户端    (阅读：2337)
5. Javascript原型链和原型的一个误区    (阅读：2291)
6. 非原型 不设计    (阅读：2097)
7. Javascript继承-原型的陷阱    (阅读：2183)
8. 高效输出移动app产品原型    (阅读：2106)
9. 关于快速原型的一点纠结    (阅读：1743)
10. 页面线框图教程（之六）：用交互实现屏幕复用    (阅读：1658)