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

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

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

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

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

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

邏輯表邏輯圖第一章了解線框圖1.3.2項(xiàng)目的頁(yè)面列表

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2內(nèi)容分塊

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

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

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

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

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

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

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

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

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

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

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