李 晨

（天津青年職業(yè)學(xué)院，天津 300191）

淺析WEB頁(yè)面線框圖布局設(shè)計(jì)

李 晨

（天津青年職業(yè)學(xué)院，天津 300191）

文章以“聚德金化工網(wǎng)站”改版設(shè)計(jì)項(xiàng)目為實(shí)例，依照網(wǎng)頁(yè)設(shè)計(jì)工作流程中的基本環(huán)節(jié)，論述Web頁(yè)面線框圖布局設(shè)計(jì)的核心要點(diǎn)及具體分析方法，并從技術(shù)角度入手，重點(diǎn)論述線框圖布局范圍內(nèi)的屏幕復(fù)雜度的分析與設(shè)定、規(guī)劃設(shè)計(jì)版塊及導(dǎo)航值計(jì)算等內(nèi)容。

Web設(shè)計(jì)；線框圖；分辨率；導(dǎo)航；布局

作為一個(gè)商業(yè)網(wǎng)站，無(wú)論其功能定位是怎樣的，如何進(jìn)行統(tǒng)一的頁(yè)面布局設(shè)計(jì)？如何進(jìn)行系統(tǒng)的功能開(kāi)發(fā)？如何有效的吸引瀏覽者？這一系列的問(wèn)題，是每一個(gè)網(wǎng)站運(yùn)營(yíng)者所不能避免的，而作為網(wǎng)站頁(yè)面的“臉面”，Web頁(yè)面的布局設(shè)計(jì)就顯得尤為重要。本文以“聚德金化工網(wǎng)站”改版設(shè)計(jì)項(xiàng)目為實(shí)例，依照網(wǎng)頁(yè)設(shè)計(jì)工作流程中的基本環(huán)節(jié)，論述Web頁(yè)面線框圖布局設(shè)計(jì)的核心要點(diǎn)及具體分析方法，從技術(shù)角度入手，重點(diǎn)論述線框圖布局范圍內(nèi)的屏幕復(fù)雜度的分析與設(shè)定、規(guī)劃設(shè)計(jì)版塊及導(dǎo)航值計(jì)算等內(nèi)容。“聚德金化工網(wǎng)站”項(xiàng)目源自于天津市聚德金化工有限公司，為該公司的舊版網(wǎng)站改版項(xiàng)目，客戶要求其主色調(diào)為藍(lán)色，并希望在原有網(wǎng)站內(nèi)容的基礎(chǔ)上增加視覺(jué)形象感和頁(yè)面整體感。網(wǎng)站在功能上定位為宣傳型，主要用于本公司主要化工產(chǎn)品的宣傳推廣。

作為前臺(tái)Web頁(yè)面的“骨骼”和“支柱”，線框圖位于一個(gè)非常重要的位置上。從網(wǎng)頁(yè)設(shè)計(jì)的工作流程上來(lái)講，從線框圖入手都是基本布局的良好開(kāi)端；適合的布局既是舒適的視覺(jué)流程的開(kāi)始，又是順暢的瀏覽旅程的保障，在很大程度上決定了一個(gè)網(wǎng)站的最終訪問(wèn)效果。對(duì)于Web頁(yè)面布局的規(guī)劃限定與統(tǒng)一并不會(huì)影響頁(yè)面風(fēng)格的個(gè)性展現(xiàn)，因?yàn)閃eb頁(yè)面始終是以“站點(diǎn)（Site）”的整齊面目出現(xiàn)在瀏覽者眼前的，線框圖存在的目的就是為了保證一個(gè)站點(diǎn)中所有頁(yè)面間風(fēng)格的協(xié)調(diào)與統(tǒng)一。

一、分析并設(shè)定頁(yè)面屏幕復(fù)雜度

依照Web頁(yè)面的邏輯架構(gòu)，在進(jìn)行線框圖設(shè)計(jì)前，需要首先分析目標(biāo)頁(yè)面中的元素?cái)?shù)量，及每種元素所占用的屏幕面積。這首先需要確定一個(gè)基于顯示屏幕分辨率固定的尺寸，即“標(biāo)準(zhǔn)屏幕”的概念，也就是常用分辨率中最小寬度和高度尺寸的乘積。顯示器尺寸的不同會(huì)產(chǎn)生不同的分辨率，在16：9顯示器越來(lái)越流行的今天，Web頁(yè)面的尺寸依然要關(guān)注使用4：3比例顯示器的人群。從面積兼容的角度去談，線框圖的標(biāo)準(zhǔn)可以依照基于“800pix×600pix”、“1024pix×768pix”或更大的屏幕尺寸。

在選定了屏幕尺寸標(biāo)準(zhǔn)后，按照WEB頁(yè)面設(shè)計(jì)通用的縱向屏幕延伸規(guī)律，即可以進(jìn)行頁(yè)面元素所占平均屏幕值（AS值）的計(jì)算。通常情況下，在草圖設(shè)計(jì)階段很難對(duì)頁(yè)面所用元素做出準(zhǔn)確的尺寸計(jì)算，可以采用保存其它同類(lèi)網(wǎng)站上相似元素的截圖的方法，將所有元素可能占據(jù)的屏幕空間列出，估算它們占用的屏幕面積并進(jìn)行屏幕值的計(jì)算。方法為：

1、所有元素占用屏幕面積的總和／標(biāo)準(zhǔn)屏幕面積＝Screen值

2、公共元素占用屏幕面積的總和／標(biāo)準(zhǔn)屏幕面積＝Template Screen值

3、（Screen01＋Screen02＋Screen n）／n＝Average Screen（平均屏幕值）

4、Template Screen值／Average Screen×100%＝Template Ratio（模板比例）

忽略元素間距和留白，Screen值表明了網(wǎng)頁(yè)需占用幾個(gè)屏幕的空間；平均屏幕值表明了整個(gè)網(wǎng)站的網(wǎng)頁(yè)平均占用的屏幕空間數(shù)量；模板比例表明了整個(gè)網(wǎng)站的頁(yè)面中公共部分的百分比。

以“聚德金化工網(wǎng)站”為例，舊版本的網(wǎng)站內(nèi)容渙散，版式呆板，訪問(wèn)量低；應(yīng)客戶的要求，進(jìn)行新版本網(wǎng)站的重新設(shè)計(jì)制作。在第一階段，根據(jù)客戶的需求及網(wǎng)站信息量，本案選用了基于“1024pix×768pix”的屏幕尺寸，并按照內(nèi)容含量選擇了近似的同類(lèi)網(wǎng)頁(yè)進(jìn)行估算。按照上述公式估算后，得出整套線框圖中首頁(yè)面的Screen值約為：0．9；“企業(yè)簡(jiǎn)介”子頁(yè)面的Screen值約為0．9；“產(chǎn)品介紹”子頁(yè)面的Screen值約為1．16；“在線留言”子頁(yè)面和“聯(lián)系我們”子頁(yè)面的Screen值均約為0．95。在此基礎(chǔ)上，進(jìn)一步計(jì)算出整個(gè)網(wǎng)站的Average Screen值約為0．98，Template Screen值約為0．41，模板比例約為43%。

關(guān)于網(wǎng)站的平均屏幕值和模板比例值的分析，參見(jiàn)下表：

平均屏幕值 含義 分析與解決方案AS＜＝2 簡(jiǎn)單頁(yè)面 信息量小，在兩個(gè)分屏的范圍內(nèi)就可以將頁(yè)面顯示完全，信息傳達(dá)簡(jiǎn)單而清晰。2＜AS＜＝6 綜合頁(yè)面 信息適中，可以借助良好的版塊分欄對(duì)要顯示在頁(yè)面上的信息進(jìn)行歸類(lèi)和組合。6＜AS＜＝10 復(fù)雜頁(yè)面 信息量龐大，適合大型門(mén)戶網(wǎng)站，要優(yōu)化分欄，實(shí)現(xiàn)屏幕資源復(fù)用。AS＞10 臃腫頁(yè)面 頁(yè)面內(nèi)容太過(guò)冗長(zhǎng)，需進(jìn)行信息分類(lèi)與過(guò)濾，刪除多余元素，壓縮或拆分信息內(nèi)容。模板比例值 分析與解決方案TR＜＝25% 公共部分非常簡(jiǎn)練，頁(yè)面簡(jiǎn)潔；適用于信息量、欄目及版塊清晰明快的綜合型網(wǎng)站。TR＜＝45% 公共部分適中，呈現(xiàn)整齊而統(tǒng)一的視覺(jué)感，適用于信息量較小的、欄目及版塊較少的宣傳型網(wǎng)站。TR＞45% 公共部分過(guò)大，一定程度上影響了正文欄目的顯示；建議刪除不必要的公共部分，或是壓縮公共部分的顯示高度。

二、規(guī)劃設(shè)計(jì)版塊

以上述數(shù)據(jù)為支撐，通過(guò)對(duì)重點(diǎn)頁(yè)面的屏幕分析，不斷地改善公共部分的元素?cái)?shù)量，同時(shí)確定出公共部分模板的類(lèi)型。在進(jìn)行首頁(yè)面版式欄目的規(guī)劃與設(shè)計(jì)工作的時(shí)候，對(duì)于AS值為2左右的網(wǎng)站來(lái)講，通常可以設(shè)計(jì)頂部橫欄放置Logo、導(dǎo)航、形象等內(nèi)容，在內(nèi)容區(qū)域?qū)㈨?yè)面分隔成若干的縱橫欄，便于對(duì)信息進(jìn)行分塊梳理；通常有兩欄式、三欄式、四欄式，在特殊的情況下可能用到五欄式，如果欄目再多，每個(gè)欄目分配的屏幕資源就極其有限了。最后還可以設(shè)計(jì)底部橫欄用于放置版權(quán)等元素信息。

頁(yè)面內(nèi)容的規(guī)劃與設(shè)計(jì)原本沒(méi)有特定的法規(guī)與要求，但是對(duì)于Web頁(yè)面來(lái)講，吸引瀏覽者的“視覺(jué)焦點(diǎn)”，是一個(gè)重要的設(shè)計(jì)依據(jù)。畢竟對(duì)于任何一個(gè)網(wǎng)站來(lái)講，瀏覽者對(duì)于網(wǎng)頁(yè)設(shè)計(jì)及信息分布的興趣直接左右著網(wǎng)站訪問(wèn)率和頁(yè)面停留時(shí)間。視覺(jué)焦點(diǎn)是瀏覽者在有限的視線范圍內(nèi)快速捕捉到的區(qū)域及其視線上集中交匯的地方，可以說(shuō)是我們?cè)O(shè)計(jì)的頁(yè)面上最吸引人注意的地方。

相關(guān)研究者曾經(jīng)進(jìn)行過(guò)關(guān)于認(rèn)知風(fēng)格與網(wǎng)頁(yè)感知的跨文化研究，在中美韓三國(guó)共27名瀏覽者的范圍內(nèi)進(jìn)行了眼動(dòng)測(cè)試，讓瀏覽者在30秒的時(shí)間內(nèi)，瀏覽一個(gè)使用本國(guó)語(yǔ)言設(shè)計(jì)好的仿照雅虎首頁(yè)布局的測(cè)試頁(yè)面，并將測(cè)試頁(yè)面的內(nèi)容區(qū)劃分為T(mén)、B、1—9共11個(gè)興趣區(qū)域（AOI，AREA OF INTERESTS），經(jīng)過(guò)眼動(dòng)儀的實(shí)時(shí)記錄得出的數(shù)據(jù)顯示，中國(guó)用戶在區(qū)域2、5、6、8、9上集中了更久的注意力。（圖1）

與之相符，Jakbo Nielsen所做的針對(duì)232位用戶瀏覽幾千個(gè)頁(yè)面過(guò)程中的眼動(dòng)情況追蹤研究結(jié)果表明：“瀏覽者在不同站點(diǎn)上的瀏覽行為有明顯的一致性。這種瀏覽行為有三個(gè)特征：1、瀏覽者首先會(huì)在內(nèi)容區(qū)的上部進(jìn)行橫向?yàn)g覽。2、瀏覽者視線下移一段距離后在小范圍內(nèi)再次橫向?yàn)g覽。3、最后瀏覽者會(huì)在內(nèi)容區(qū)的左側(cè)做快速的縱向?yàn)g覽?！?/p>

依照上述理論與數(shù)據(jù)，根據(jù)網(wǎng)站信息的實(shí)際情況，得出所要設(shè)計(jì)的網(wǎng)頁(yè)視覺(jué)焦點(diǎn)所在，與此同時(shí)進(jìn)行內(nèi)容上的分塊并以顏色進(jìn)行區(qū)分，得到一個(gè)總體的頁(yè)面線框圖，這些顏色分區(qū)可以在形成具體圖樣的時(shí)候刪除，但它們是頁(yè)面元素所屬的分類(lèi)顏色，提示著我們按照哪一類(lèi)版塊設(shè)計(jì)今后需要添加的元素。

以“聚德金化工網(wǎng)站”為例，根據(jù)網(wǎng)站信息量的實(shí)際情況，結(jié)合上述數(shù)據(jù)及理論依據(jù)，繪制出網(wǎng)站首頁(yè)面的線框圖如下（圖2）。

圖1 AOI區(qū)域圖及測(cè)試結(jié)果

圖2 聚德金化工首頁(yè)線框圖

按照聚德金化工公司提出的要求，將頁(yè)面的內(nèi)容劃分為頂部標(biāo)志區(qū)（logo）、導(dǎo)航區(qū)（Navigation）、FLASH區(qū)、內(nèi)容區(qū)、信息區(qū)五部分，其中內(nèi)容區(qū)中又劃分為企業(yè)介紹欄（About us）、產(chǎn)品介紹欄（Products）和認(rèn)證項(xiàng)目欄（Certification）；在各個(gè)版塊與欄目上標(biāo)識(shí)出各部分的名稱及尺寸，并使用顏色加以區(qū)分，將導(dǎo)航區(qū)、FLASH區(qū)、產(chǎn)品欄、認(rèn)證欄等重要信息欄目安排在符合中國(guó)用戶視覺(jué)焦點(diǎn)的位置上，并將產(chǎn)品欄、認(rèn)證欄兩個(gè)核心內(nèi)容設(shè)計(jì)為橫向欄目，符合瀏覽者對(duì)內(nèi)容區(qū)的橫向眼動(dòng)規(guī)律。

三、導(dǎo)航值計(jì)算

不同類(lèi)別的網(wǎng)站，在劃分了基本的版式結(jié)構(gòu)、設(shè)計(jì)出線框圖之后，將進(jìn)入到“樣圖設(shè)計(jì)及元素制作”這個(gè)具體環(huán)節(jié)中。在各個(gè)不同的元素中，導(dǎo)航欄目作為其中最為重要的相同元素，是每一個(gè)網(wǎng)站都必須重點(diǎn)規(guī)劃設(shè)計(jì)的。導(dǎo)航欄的樣式有很多種，但就其基本形態(tài)來(lái)講，主導(dǎo)航條應(yīng)該采用橫排還是縱列結(jié)構(gòu)一直以來(lái)難以一概而論。而實(shí)際上，選擇橫縱兩種導(dǎo)航模式，不是設(shè)計(jì)人員主觀斷定的，而是需要用一些數(shù)值來(lái)加以衡量和決定的。在此就又提出了一個(gè)“導(dǎo)航最大寬度”的概念。

按照信息數(shù)據(jù)結(jié)構(gòu)中設(shè)置的分類(lèi)預(yù)構(gòu)出導(dǎo)航數(shù)量與級(jí)別，擬出導(dǎo)航欄項(xiàng)目的寬度，將所有的導(dǎo)航項(xiàng)目（包括二級(jí)及以下級(jí)別的導(dǎo)航）均按照一個(gè)方向橫排一列，形成導(dǎo)航欄“絕對(duì)扁平化”狀態(tài)，計(jì)算所有導(dǎo)航項(xiàng)目總的寬度值，就是“導(dǎo)航最大寬度”。（圖3）

圖3 絕對(duì)扁平化后的導(dǎo)航最大寬度計(jì)算圖

根據(jù)上圖，使用下列公式來(lái)計(jì)算出導(dǎo)航值：導(dǎo)航最大寬度／標(biāo)準(zhǔn)屏幕寬度＝導(dǎo)航值

所計(jì)算出的導(dǎo)航值對(duì)頁(yè)面導(dǎo)航條設(shè)計(jì)具有非常重要的意義。如果導(dǎo)航值大于4，那么說(shuō)明網(wǎng)站所設(shè)計(jì)的導(dǎo)航項(xiàng)目超出了頁(yè)面承受的界限，直接導(dǎo)致一級(jí)導(dǎo)航區(qū)域的視覺(jué)臃腫；解決方法一是將導(dǎo)航區(qū)域變?yōu)榭v向排列，二是將導(dǎo)航區(qū)域設(shè)計(jì)為全景展示。

以“聚德金化工網(wǎng)站”為例，根據(jù)網(wǎng)站內(nèi)容分類(lèi)的實(shí)際情況，劃分一級(jí)導(dǎo)航欄為“首頁(yè)”、“企業(yè)簡(jiǎn)介”、“產(chǎn)品介紹”、“在線留言”、“聯(lián)系我們”五項(xiàng)，不設(shè)二級(jí)導(dǎo)航欄目。根據(jù)頁(yè)面所選屏幕寬度，擬定導(dǎo)航欄單項(xiàng)寬度為130像素，經(jīng)計(jì)算得出最大導(dǎo)航寬度為650像素，導(dǎo)航值為0．63。符合橫向?qū)Ш綑谒罁?jù)的標(biāo)準(zhǔn)范圍，因此該網(wǎng)站的導(dǎo)航欄目設(shè)計(jì)為橫向排列，考慮到頁(yè)面總寬度為1000像素，在設(shè)計(jì)上將導(dǎo)航欄之外的空缺區(qū)域用相同底圖補(bǔ)齊。

在設(shè)定了導(dǎo)航區(qū)域后，即可以正式進(jìn)行樣圖及相關(guān)元素的設(shè)計(jì)與制作工作了。由于不同主題、不同類(lèi)型的網(wǎng)站會(huì)受到客戶具體要求、所屬行業(yè)差異、信息量大小、內(nèi)容要點(diǎn)不同等等諸多元素的影響，頁(yè)面具體元素的設(shè)計(jì)與制作會(huì)產(chǎn)生千變?nèi)f化的結(jié)果；其內(nèi)容本文不再論述。應(yīng)用了線框圖設(shè)計(jì)理念的聚德金化工新版網(wǎng)頁(yè)效果整齊劃一，欄目劃分清晰，行業(yè)特性凸顯，得到了客戶的認(rèn)可與肯定，并已正式運(yùn)行。新舊網(wǎng)站截屏對(duì)比圖如下。（見(jiàn)圖4）

圖4 聚德金化工舊版網(wǎng)站截圖與新版網(wǎng)站截圖對(duì)比

WEB頁(yè)面設(shè)計(jì)屬于綜合性的技術(shù)領(lǐng)域，在其設(shè)計(jì)制作的過(guò)程中，要求設(shè)計(jì)者不但要熟練運(yùn)用相關(guān)軟件，具備一定的藝術(shù)審美素養(yǎng)，掌握相關(guān)的程序語(yǔ)言，把握客戶的需求和行業(yè)定位，更需要通過(guò)科學(xué)的理論深入研究和關(guān)注瀏覽者的瀏覽體驗(yàn)和整體思維方式；WEB頁(yè)面中的每個(gè)元素的設(shè)置與安排，都有其科學(xué)的規(guī)律與依據(jù)，而這些規(guī)律與依據(jù)，則來(lái)自于每一次的“用戶體驗(yàn)分析”結(jié)果。屏幕復(fù)雜度分析、版式布局與欄目劃分、導(dǎo)航值計(jì)算、頁(yè)面元素的精心設(shè)計(jì)等等，這一切的設(shè)計(jì)與思量在滿足視覺(jué)愉悅的同時(shí)，更重要的依據(jù)是對(duì)瀏覽者的需求、舒適度與瀏覽習(xí)慣的分析結(jié)果而得來(lái)。我們更要明確的認(rèn)識(shí)到，WEB頁(yè)面設(shè)計(jì)乃至整站制作的完成僅僅只是一個(gè)開(kāi)始，對(duì)于網(wǎng)站經(jīng)營(yíng)者來(lái)講，如何提升網(wǎng)站的訪問(wèn)量、如何增加瀏覽者的頁(yè)面停留時(shí)間、如何減少瀏覽者的跳出率，這一系列問(wèn)題始終存在。而對(duì)于用戶而言，如何使WEB頁(yè)面所表達(dá)的產(chǎn)品“有用、能用、易用”。相同的答案，則是需要我們基于用戶的需求來(lái)決定產(chǎn)品的設(shè)計(jì)，更需要源自于對(duì)WEB頁(yè)面“服務(wù)于瀏覽者的瀏覽體驗(yàn)”的認(rèn)識(shí)、研究與探索。

On the Wireframe Layout of WEB Page

LI Chen
（Tianjin Youth Vocational College，Tianjin，China 300191）

Taken the revised design of“Judejin Chemical Site”as an example，the paper discusses the core elements of the wireframe layout design of the Web page and the specific analytical methods in accordance with the basic aspects of web design workflow．In addition，from a technical perspective，the paper focuses on such contents as analysis and setting of the complexity of the screen within the scope of wireframe layout，forum planning and design，and navigation value calculation．

Web design；wireframes；resolution；navigation；layout

TP393

A

1673－582X（2012）08－0062－04

2012－03－23

李晨（1982－），男，天津市人，天津青年職業(yè)學(xué)院電子工程系圖形圖像制作專業(yè)負(fù)責(zé)人，主要從事視覺(jué)傳達(dá)設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)研究。