線框圖原型是網站核心策略“著陸”的重要步驟。將機巧的想法轉化為實際產品是一個復雜過程，這種復雜并不僅僅體現在技術層面，而更突出的表現在團隊配合中；倘若三兩個人的迷你團隊，只需要很少的文檔就能夠達成協作一致；頁面原型作為從創意到執行的中間文檔，貫穿整個團隊的工作，對于大型項目和團隊協作的確有些效果。作為線框圖系列教程的完結篇，本文將對頁面原型的前世今生進行討論，探尋拋棄原型的敏捷之路。

以前不存在
最初，萬維網只是某些科學家的專利。在《畫地為牢的框架設計》中，曾經提到過那種“極簡梳形”頁面，就是最基礎的一種萬維網應用；如果編寫一個網頁就像書寫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語義寫出頁面的邏輯架構，交互設計師、視覺設計師、程序開發人員就能夠發揮自己的專長，輕松的將“原型”轉化為實際的網絡產品，而壓根再不需要什么線框圖了。

原文：http://www.hozin.com/Point/200911/Wireframe-Design-Step07.html