網(wǎng)頁線框圖2課件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第二章如何設(shè)計線框圖

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

第二章如何設(shè)計線框圖

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

2.2內(nèi)容分塊

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

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

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

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

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

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

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

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

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

討論——評審——討論——評審——確認(rèn)

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