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

李 晨

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

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

李 晨

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

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

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

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

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

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

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

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

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)頁需占用幾個屏幕的空間；平均屏幕值表明了整個網(wǎng)站的網(wǎng)頁平均占用的屏幕空間數(shù)量；模板比例表明了整個網(wǎng)站的頁面中公共部分的百分比。

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

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

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

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

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

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

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

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

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

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

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

圖2 聚德金化工首頁線框圖

按照聚德金化工公司提出的要求，將頁面的內(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)證項目欄（Certification）；在各個版塊與欄目上標(biāo)識出各部分的名稱及尺寸，并使用顏色加以區(qū)分，將導(dǎo)航區(qū)、FLASH區(qū)、產(chǎn)品欄、認(rèn)證欄等重要信息欄目安排在符合中國用戶視覺焦點(diǎn)的位置上，并將產(chǎn)品欄、認(rèn)證欄兩個核心內(nèi)容設(shè)計為橫向欄目，符合瀏覽者對內(nèi)容區(qū)的橫向眼動規(guī)律。

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

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

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

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

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

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

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

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

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

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

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é)人，主要從事視覺傳達(dá)設(shè)計與網(wǎng)頁設(shè)計研究。