網頁布局優化設計方法探析

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