網(wǎng)頁(yè)布局優(yōu)化設(shè)計(jì)方法探析

　　摘要：隨著網(wǎng)絡(luò)應(yīng)用的日益廣泛，網(wǎng)頁(yè)作為傳播信息載體，其布局直接影響著網(wǎng)頁(yè)整體視覺(jué)效果和信息的有效傳達(dá)?；诰W(wǎng)頁(yè)布局的理念，分析了現(xiàn)代網(wǎng)頁(yè)布局設(shè)計(jì)中不足之處，提出優(yōu)化網(wǎng)頁(yè)布局的方法，從而設(shè)計(jì)出既美觀又實(shí)用的網(wǎng)頁(yè)。
　　關(guān)鍵詞：網(wǎng)頁(yè)布局 優(yōu)化 視覺(jué)效果
　　中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1672-3791(2011)06(c)-0000-00
　　
　　網(wǎng)頁(yè)作為一種傳播信息的載體，其布局設(shè)計(jì)直接影響著網(wǎng)頁(yè)整體視覺(jué)效果和信息的有效傳達(dá)，如何使信息更加快速有效的傳遞出去，并被正確的理解和接受，是設(shè)計(jì)者需要解決的設(shè)計(jì)領(lǐng)域和設(shè)計(jì)課題。
　　
　　1 布局的概念
　　這里講的“布局”即頁(yè)面的整體版面編排形式，涵蓋了頁(yè)面內(nèi)容的尺寸、類別、間距及位置。有效的布局有助于用戶快速找到他們想要的內(nèi)容至關(guān)重要，并可以在結(jié)構(gòu)外觀上令用戶有視覺(jué)美感。
　　
　　2 網(wǎng)頁(yè)布局理念
　　網(wǎng)頁(yè)可以說(shuō)是網(wǎng)站構(gòu)成的基本元素。當(dāng)進(jìn)入到網(wǎng)站時(shí)，首先映入視線的是網(wǎng)頁(yè)的界面設(shè)計(jì)，比如色彩的搭配、內(nèi)容的介紹、動(dòng)態(tài)鏈接的擺放、圖片的使用等等，這些都是構(gòu)成網(wǎng)頁(yè)精彩與否的因素，除了這些不可忽略的因素外，還有一個(gè)非常重要的因素——網(wǎng)頁(yè)的布局。
　　
　　3 網(wǎng)頁(yè)布局設(shè)計(jì)中不足之處
　　3.1 網(wǎng)頁(yè)空間布局不合理。
　　空間布局的不合理性主要是這個(gè)空間太“塞”，這是普遍存在的問(wèn)題。通常在布局網(wǎng)頁(yè)時(shí)會(huì)選擇常規(guī)的網(wǎng)頁(yè)布局類型，諸如：“國(guó)”字型、左右框架型、上下框架型和綜合框架型等，但是在各種元素諸如文字、圖片、動(dòng)畫等綜合起來(lái)設(shè)計(jì)，往往又不加考慮的塞到頁(yè)面上，有多少擠多少，不加以規(guī)范化，條理化，更談不上藝術(shù)處理了。因?yàn)閺墓δ芎蛯徝澜嵌葋?lái)說(shuō)，這會(huì)使整個(gè)布局太滿、太堵塞，無(wú)法給讀者保留一些視覺(jué)空間，容易產(chǎn)生視覺(jué)疲勞。從而在瀏覽網(wǎng)站時(shí)無(wú)法找到視覺(jué)點(diǎn)，難以在第一時(shí)間內(nèi)獲取到自己需要的信息。
　　3.2 缺乏整體感，主次不明確，視覺(jué)層次不清晰。
　　往往在布局設(shè)計(jì)的時(shí)候考慮不周，想面面俱到，比如用花哨圖做邊框，采用多種顏色，風(fēng)格不同的圖片和動(dòng)畫來(lái)裝飾布局。這種過(guò)度的包裝設(shè)計(jì)其實(shí)是有損布局基本功能的需求，嚴(yán)重干擾視覺(jué)，加大獲取信息難度。甚至還有大量的利用JavaScript和動(dòng)態(tài)HTML的技術(shù)來(lái)充斥著網(wǎng)頁(yè)，使得布局更為錯(cuò)亂，嚴(yán)重脫離整體這個(gè)中心，造成頁(yè)面的混亂。同時(shí)也造成瀏覽上由于受帶寬的限制而訪問(wèn)非常的慢。
　　3.3 千篇一律，缺乏特色。
　　由于結(jié)構(gòu)類型的一致，從標(biāo)題的放置，按鈕的編排到動(dòng)畫的采用都是如此。這一個(gè)方面是由于設(shè)計(jì)師沒(méi)有充分去考慮網(wǎng)站本身的優(yōu)勢(shì)，而是采用走捷徑的方式，用大眾化的方法去做，這既簡(jiǎn)單且不耗時(shí)。另一個(gè)方面就是大量使用布局模版來(lái)做，由于整個(gè)模版設(shè)計(jì)結(jié)構(gòu)一致，后期只是模塊的增減工作，這些模版雖然設(shè)計(jì)優(yōu)美，但是造就了部分網(wǎng)站的趨同化。導(dǎo)致出現(xiàn)千篇一律，缺乏特色的網(wǎng)站，就像批量生產(chǎn)出來(lái)的產(chǎn)品樣，放眼看上去沒(méi)有什么區(qū)別。
　　
　　4 優(yōu)化網(wǎng)頁(yè)布局的方法
　　4.1 清晰的視覺(jué)流程
　　布局應(yīng)當(dāng)讓頁(yè)面各元素之間的關(guān)系和重要性一目了然，要根據(jù)用戶瀏覽網(wǎng)頁(yè)的視覺(jué)習(xí)慣，將形式上被賦予焦點(diǎn)屬性的UI元素一定要表達(dá)重要的內(nèi)容。同時(shí)，為了方便用戶掃視頁(yè)面，應(yīng)遵循任務(wù)邏輯和用戶的瀏覽習(xí)慣來(lái)設(shè)計(jì)恰當(dāng)?shù)囊曈X(jué)流，使信息呈現(xiàn)有序狀態(tài)，不要因?yàn)楣δ苄枰蛯?duì)極限情況的顧慮而輕易犧牲掉頁(yè)面的視覺(jué)展現(xiàn)。
　　4.2 針對(duì)用戶的閱讀模式來(lái)設(shè)計(jì)布局
　　通常閱讀模式可歸納為沉浸式閱讀和掃視兩種，前者目的在于理解，后者在于定位。瀏覽網(wǎng)站時(shí)，大多數(shù)用戶不會(huì)沉浸在UI本身，而是沉浸在他們的目標(biāo)任務(wù)中，只在確信必要時(shí)用戶才仔細(xì)閱讀大量文本，因此掃視是最常使用的閱讀模式。從而，布局設(shè)計(jì)可以適當(dāng)強(qiáng)調(diào)主要的UI元素，弱化次要的。比如，將主UI元素放在掃視路徑上，避免將重要信息放在左下角或者頁(yè)面底端或者需要滾動(dòng)很多的控件上；當(dāng)UI元素較多時(shí)，可以考慮使用漸進(jìn)展開方式來(lái)隱藏次要的UI元素；直接將按鈕的作用描述作為控件標(biāo)簽，便于用戶理解；不要展示大段文本，去除不必要的文本，多文本時(shí)格式化展示。
　　4.3 頁(yè)面空間分布合理。
　　在布局過(guò)程中，要保持頁(yè)面整體視覺(jué)平衡，避免擁擠和對(duì)空間的浪費(fèi)。確保關(guān)鍵數(shù)據(jù)沒(méi)有被截?cái)啵丶某叽绾烷g距恰當(dāng)，沒(méi)有不必要的滾動(dòng)，而且一個(gè)任務(wù)盡量在一屏內(nèi)完成。
　　另外，由于用戶的頁(yè)面空間要小于屏幕分辨率，它會(huì)因各種因素而壓縮，如：非全屏操作（彈出窗口和對(duì)比瀏覽），瀏覽器本身及各種輔助欄對(duì)屏幕的占用等，這些都是應(yīng)該考慮的情況。
　　4.4 不要讓布局本身成為突出的UI元素，保持視覺(jué)簡(jiǎn)潔。
　　其一，減少內(nèi)容和展現(xiàn)上的嵌套層級(jí)。二是，減少控件不同尺寸的數(shù)量，例如，在界面上只使用一兩種按鈕寬度。三是，采用輕量級(jí)的分組和分割方式，可以用布局本身和分隔符代替分組框。四是，使用盡量少的對(duì)齊線。
　　4.5 選擇恰當(dāng)?shù)木W(wǎng)頁(yè)類型。
　　網(wǎng)頁(yè)類型的選擇，應(yīng)充分考慮頁(yè)面承載的功能、內(nèi)容和屬性，繼而選擇適合該頁(yè)面的版式。不合適的類型會(huì)造成用戶的閱讀困擾，降低信息傳遞的效果。
　　
　　5 結(jié)語(yǔ)
　　此研究的重點(diǎn)不在于如何最有效地把信息展現(xiàn)在屏幕上，而是如何去設(shè)計(jì)和組織視覺(jué)因素，使信息更加快速有效的傳遞出去并被接受。所要的目標(biāo)就是創(chuàng)建一個(gè)清晰、干凈的視覺(jué)界面，以信息的有效傳達(dá)為原則，以網(wǎng)絡(luò)與多媒體技術(shù)為基礎(chǔ)，實(shí)現(xiàn)信息與視覺(jué)要素的協(xié)調(diào)性、綜合性、整體性和系統(tǒng)性。
　　
　　參考文獻(xiàn)
　　[1] 李伙欽. 網(wǎng)頁(yè)布局在線編輯的設(shè)計(jì)與實(shí)現(xiàn)[J]. 科