引子我們知道，一篇論文的產(chǎn)生，大體經(jīng)過了如下過程：選題、搜集資料、論證、擬定大綱、構建框架、撰寫潤色、定稿、發(fā)表。我們做網(wǎng)站實質(zhì)上也是一樣的過程。網(wǎng)站建設是一個大課題，Boss選好了題，全公司都在為這個“論文”而努力。（此處省略1萬字。）具體到產(chǎn)品設計呢？情況更復雜，面對的不僅是整個網(wǎng)站這個大課題，還有各個欄目和平臺這些小論文，千頭萬緒。運營部（包括技術部）是具體撰寫論文的執(zhí)筆者，大論文的選題Boss早就定下了，從一路的修改、重構，到其他的小論文，從擬定大綱到發(fā)表，我們幾乎是全程參與，責任重大呀。我們面對的有用戶、Boss、業(yè)務部、資源部、客服部以及本部門等各種途徑提交過來的各種需求（選題），經(jīng)過對需求的整理分析、重要性排序、內(nèi)容的布局、流程規(guī)劃、交互和視覺設計等一系列過程，最終展現(xiàn)給用戶一個完整的網(wǎng)站。我們是一個團隊，既然是團隊，那就會有分工。那策劃組是做什么的呢？我講不全，以后有空整理出來再講，今天只講與我天天在做的一項簡單工作有關的東西……網(wǎng)頁線框圖

第一章了解線框圖1.1線框圖簡義（Wireframe）線框圖，又有提法是原型、框架圖，它是網(wǎng)站設計方案中的重要組成部分，是網(wǎng)站策劃師、網(wǎng)絡產(chǎn)品經(jīng)理的最后交付文檔，通常的呈現(xiàn)設計是最直觀有效的。我們雖然是用WORD畫的，雖然粗糙，但還是符合直觀有效的。1.2線框圖的本質(zhì)是信息架構的表象。

信息架構代表的是內(nèi)容的層次結(jié)構，而線框圖則是承載內(nèi)容的立體框架。根據(jù)需要，線框圖可能是一個獨立頁面或一整套頁面序列：當針對中小型項目時，可能只需要首頁以及關鍵頁面的設計；針對復雜項目和大規(guī)模的團隊協(xié)作，則需要一系列相互關聯(lián)的線框圖，并且包含交互設計部分，比如我們正在做的事情。第一章了解線框圖1.3確定頁面邏輯架構

《畫好線框圖的20個步驟》中有一句話“線框圖是計劃中的第一步也是最重要的一步”，做過的人都知道這是不對的。線框圖肯定不是計劃中的第一步，在沒有確定頁面中“到底有什么”之前，根本無從下手去設計；確定線框圖的藍圖不是靠設計者拍腦門，而是基于對需求和內(nèi)容分析之后的信息架構設計，這個可以參考《從概念設計到信息架構》一文。第一章了解線框圖1.3.1所謂頁面邏輯框架

所謂頁面邏輯框架是在整個網(wǎng)站信息架構確立的基礎上，具體描述某個頁面：都包含什么元素；這些元素的權重；頁面的大概形式。頁面邏輯框架可以用邏輯表和邏輯圖兩種形式交付，可以單獨采用一種形式，也可以同時提交兩者。

邏輯表邏輯圖第一章了解線框圖1.3.2項目的頁面列表

確定各個頁面的邏輯結(jié)構是進行頁面線框圖的設計前提，也是界面設計、視覺設計呈現(xiàn)的基礎；在著手設計線框圖之前最好能建立一個《項目的頁面列表》，記錄整個項目需要多少張線框圖的支持，每張線框圖的標號和使用模板的情況，如果時間充裕，甚至可以給每張線框圖一個簡潔的描述。這個《項目的頁面列表》對衡量整個設計的工作量、把控進度和工作重點非常有幫助。第一章了解線框圖1.4低保真還是高保真

線框圖的細節(jié)要逼真到何種程度，要根據(jù)執(zhí)行團隊的實際情況來決定。一般來說，線框圖的細節(jié)越逼真，執(zhí)行越流暢，但是給視覺設計師的發(fā)揮空間越?。幌喾?，線框圖越是粗略，對團隊配合的要求越高，視覺設計師發(fā)揮的空間越大。就我們來說，我覺得還是盡量做細的好，這樣一來將更多問題解決在設計前期，二來也可以減少設計師自主發(fā)揮時引起的又一輪論證，延長工期。依照與最終產(chǎn)品的接近程度，線框圖分為低保真和高保真兩類。

低保真原型（線框圖）通常包括：頁面的基本布局，元素的大概位置，交互的基本形式，表單項。

第一章了解線框圖1.4低保真還是高保真

高保真原型（線框圖）通常包括：精確到像素的頁面布局，輔助設計元素的數(shù)量和位置，圖片格式尺寸，屏幕劃分，超級鏈接的標示，帶時間軸的FLASH關鍵幀，每個交互步驟的界面變化，表單項說明，具體文案。

高保真的原型，在提交的時候會更具說服力。但缺點也同樣明顯，同樣一個原型需要投入更多的時間，一旦設計變更投入的時間就更多；而且在項目前期，一般很難有充裕的時間做一個高保真的原型，所以在整個設計流程中的應用也有局限。

題外話，能做高保真原型的在我看來是高手了，應該去做設計師，做線框圖實在是大材小用了。高保真原型更多情況下是商業(yè)建站的時候用到。如果只是用于內(nèi)部溝通、檢驗交互問題的話，視覺的保真度可以退而求其次，以交互的保真度作為主要維度。應該追求速度和數(shù)量，盡可能在產(chǎn)品早期多嘗試，多個方案，以求發(fā)現(xiàn)新想法并降低項目后期風險。

對于三兩個人配合的微型項目（比如中小企業(yè)網(wǎng)站）使用低保真原型配合口頭溝通就可以解決實際的問題；對于復雜一些的項目，更推薦以《低保真和高保真模型混搭》的模式開展工作。

小結(jié)確定了在開始設計線框圖之前，整個項目及參與團隊需要完成的工作，包括了需求和內(nèi)容的分析。在了解一共有多少頁面，每個頁面都包含什么內(nèi)容，那些內(nèi)容是可以復用的……等等這些問題之后，細致梳理分析確定各頁面要素，那么就可以開始具體的線框圖設計。第二章如何設計線框圖

在需求和內(nèi)容分析之后就要開始設計線框圖。無論是設計低保真草稿還是高保真的模擬原型，線框圖都是從基本的布局開始；良好的布局是順暢視覺流程的開始，同時也奠定了最終訪問效果的基調(diào)；布局是一個畫地為牢的過程，什么東西放在哪里一旦基本確定，界面就大體確定了；設置條條框框并不是為了限制界面設計師的發(fā)揮，而是要達到頁面之間的協(xié)調(diào)和整個網(wǎng)站的統(tǒng)一。

第二章如何設計線框圖

2.1分析估算屏幕依照頁面邏輯架構，頁面中有多少元素，每種元素要占用多大的屏幕面積，這是一個非常復雜的問題。引入一個“標準屏幕”的概念，即常用分辨率中最小寬度和高度尺寸的乘積。在這里可能有若干種不同的聲音，在寬屏顯示器越來越流行的今天，網(wǎng)站依然要關注那些使用4:3比例顯示器的人群，因此，一個相對“保守”的設計是把“800pix×600pix”作為標準屏幕尺寸。當然還有一種相對“大膽”的設計是以“1024pix×768pix”作為標準屏幕尺寸。第二章如何設計線框圖

第二章如何設計線框圖

雖然在設計低保真時只需要進行粗略的計算，但是如果有時間，還是推薦將所有元素可能占據(jù)的屏幕空間一一列出。最簡便的方法是，保存其他網(wǎng)站上類似元素的截圖，估算它們占用的屏幕面積。這個估算不必十分精準，只需要簡略的進行估計就可以了，畢竟線框圖設計不是做精確的數(shù)學統(tǒng)計。第二章如何設計線框圖

2.2內(nèi)容分塊

“使用縱欄分隔內(nèi)容能夠獲得更靈活的頁面設計”，看到這句話，那些頁面架構師和前端開發(fā)人員都心領神會。眾所周知，Web頁面是一個在縱向無限伸展的巨大創(chuàng)作介質(zhì)，這就是為什么鼠標要設置中間的滾輪。要是非要抬杠，Web頁面也可以向橫向伸展的，這樣的網(wǎng)站的確有，但不符合用戶的瀏覽習慣。第二章如何設計線框圖

簡單頁面，完全可以不必分欄。復雜頁面，通常需要有一個橫欄放置Logo等內(nèi)容，然后將頁面分隔成若干的縱欄，便于對信息進行分塊梳理；縱欄通常有兩欄式、三欄式、四欄式，在極其特殊的情況下可能用到五欄式，如果欄目再多，那樣每個縱欄分配的屏幕資源就極其有限了；最后還可以加上給版權等元素信息用的底欄。在進行分欄的過程中，一定要給每個欄命名，這個命名可以在心里默念，而不必寫在線框圖上。第二章如何設計線框圖

內(nèi)容分塊的意義將同類內(nèi)容集合在一起，在頁面中規(guī)劃對應區(qū)域的好處非常明顯：A.對于設計者，能夠在增加元素的時，明確的按圖索驥B.對于用戶，能夠形成一定的瀏覽習慣，知道去哪里找到自己想要的東西（頁面功能）C.對視覺設計，能夠體現(xiàn)“格式塔視覺原理”中的貼近關系第二章如何設計線框圖

內(nèi)容分塊通常包含這樣四個大分類：

A.頁面識別（Page_ID）：包含商標、標語、頁面標題、廣告詞、版權信息等B.導航系統(tǒng)（Navi）：導航條、面包屑C.交互工具（Tools）：搜索、登錄、功能區(qū)、友情鏈接等D.內(nèi)容（Content）：內(nèi)容的正文、列表、摘要第二章如何設計線框圖

2.3向內(nèi)容分塊填充元素

在完成分欄和內(nèi)容區(qū)塊劃分的基礎上，已經(jīng)可以把頁面邏輯框架中的元素填充到線框圖當中去了。推薦先以一個項目中最復雜的頁面進行填充，這樣能夠?qū)ζ渌撁嬷械姆謾诓缓侠磉M行及時的調(diào)整。低保真模型是高保真模型的基礎，千萬不要一次把細節(jié)描繪完美，向內(nèi)容分塊填充元素的過程就是低保真線框圖描繪的過程，具體操作如下：第二章如何設計線框圖

A.把每一個元素建立一個單獨的組件，這個組件可以很簡單的用一個方塊表示B.每個組件都要有一個獨立的名字，雖然在線框圖完成之后，這些個名字可以刪去，但是一定要進行命名C.把元素按照分類先放置到內(nèi)容區(qū)塊中D.元素放置過程中以縱向“自上而下、從左到右”的排列“從重要到普通”的權重第二章如何設計線框圖

將所有的元素放置到對應的區(qū)塊后，一個簡單的線框圖已經(jīng)具有了雛形，當然，即便是生成低保真原型，這也僅僅是網(wǎng)頁設計的一個開始而已。小結(jié)線框圖的本質(zhì)是圖，是一種建立在“視覺為先導”理念上的Web頁面勾勒形式。線框圖產(chǎn)生原因是：大規(guī)模團隊協(xié)作中的信息不對稱。試想，如果視覺設計師懂得人機交互原理，如果交互工程師熟練掌握Html語言，如果頁面架構師深入理解產(chǎn)品策略，如果產(chǎn)品經(jīng)理能夠親自開發(fā)數(shù)據(jù)庫后臺，如果程序開發(fā)人員能夠規(guī)劃合理的頁面結(jié)構，如果內(nèi)容編輯能夠獨立進行系統(tǒng)架構……當這些“如果”成為現(xiàn)實，世界上壓根不想要線框圖！事實也證明，由一個人建立的個人主頁往往不是從線框圖開始的，因為一切盡在掌握。線框圖設計過程很簡單：第一，把想法寫出來；第二，從其他人那里得到反饋意見；第三，修改至定稿。第三章線框圖的意義線框圖設計的整個過程不外乎如此：將需求討論清楚，將頁面流程圖畫好，將各種分支情況考慮清楚，腦子里才會逐漸對需要多少個頁面形成概念，哪些頁面需要更高的單頁面交互設計形成概念，而當完成這一步，交互的大部分工作都已經(jīng)做完了，剩下的單純?nèi)ピO計各個頁面，占據(jù)了線框圖階段的很少的時間。更多的時間是花在：

討論——評審——討論——評審——確認

第三章線框圖的意義設計線框圖的過程中要做些什么需求的了解與討論：需求越清楚，以后階段就會越高效。這個階段，交互設計師還需要借助sitemap，頁面流程圖（pageflow），或者故事板等等工具，來幫助自己和項目組了解產(chǎn)品需求。必須從宏觀到細節(jié)，將產(chǎn)品的交互邏輯認認真真仔仔細細思考清楚，細枝末節(jié)的東西如果不關心，到了項目進行過程中，還一定會被開發(fā)工程師追著補充各種流程中的頁面。創(chuàng)造性的方案探索與嘗試：設計就意味著嘗試各種方案，并對方案進行篩選與確認。設計本身是一種在期望和限制下進行的探索，并且將探索后的成果實施。交互設計師需要不斷圍繞需求與期望，進行探索并在逐步的限制中，縮小設計范圍。設計方案的討論與確認：線框圖基本完成后，應該召集需求方以及技術方就線框圖展開討論，需求方能確認是否滿足期望，技術方的參與能夠就可行性方面給出意見，并且能夠根據(jù)線框圖進行初步的開發(fā)資源評估。討論后，對線框圖做一些調(diào)整，再次討論確定后，就進入視覺設計階段，到時候?qū)⒉辉僮鲚p易的結(jié)構與內(nèi)容塊定義的調(diào)整，讓大家足夠重視并對線框圖達成一致。第三章線框圖的意義把問題解決在線框圖階段設計線框圖的關鍵在于對于需求的把握、挖掘與快速呈現(xiàn)，在于全程中對于各種想法的吸收與管理，在于能不能讓大家都快速明白了解設計的原因和背景，并對方案達成一致。有很多有創(chuàng)造力的人，卻不善于空想，對著需求文檔，無法讓創(chuàng)造力的腦細胞活躍起來，大家都只能對著方案點頭稱是，但是到了線框圖階段，具體的產(chǎn)品原型會激發(fā)更多的想法，因此這個階段，最適合進行產(chǎn)品開發(fā)過程中的第二次頭腦風暴。在視覺設計階段，修改的成本非常高，視覺設計師是對每一個像素精雕細琢，產(chǎn)品定位的改變，也許對于他們是“滅頂之災”，這可能會意味著很多個頁面要重新開始設計，當視覺設計已經(jīng)到了一定的地步時，視覺設計師對“修改”慢慢會變得有點抗拒。而交互設計師