網站頁面寬度佈局設計面面觀

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

網頁寬度佈局設計的最高標準是在各種解析度、不同版本瀏覽器、不同大小瀏覽器視窗的條件下，均能讓網頁以適合流覽方式呈現下訪問使用者的電腦螢幕上。 網站頁面的寬度佈局設計在一定程度上影響著使用者體驗，接下來就網頁寬度佈局設計的三種方式進行圖文分析，來看看三種方式的優勢和弱點。

1、自我調整式網頁

網頁採用自我調整式的寬度佈局，能自動以佈滿瀏覽器視窗的形式向訪問使用者展現網站頁面，隨著使用者改變視窗的大小而相應地改變網頁寬度。

從上面的圖例可以看出，自我調整式網頁佈局設計在1024*768的低解析度和1280*800的寬屏高解析度下都能夠佈滿瀏覽器視窗。

這種寬度佈局方式能夠適應使用者改變瀏覽器視窗大小，支援寬屏的高解析度以符合使用者的個性需求，屬於具有較高使用者體驗的方式。 自我調整式寬度佈局設計的難點在於，站長們無法準確地控制圖元精度，在網站運行之初，需要進行網頁測試，花費較大時間精力和經濟投入來對比各頁面之間的效果，並作出技術調整以達到在各版本瀏覽器中自我調整後圖元精度正常的效果。

2、寬度固定式網頁

寬度固定式網頁寬度佈局設計，顧名思義，具有固定的網頁寬度，無論瀏覽器視窗大小如何變化，網頁寬度保持原有寬度不變。

從上面的圖例可以看出，以1024px寬度固定式網頁佈局設計在1024*768的低解析度模式能正常佈滿全屏大小的瀏覽器視窗，但是在1280*800的寬屏高解析度模式下頁面會顯示一大片寬度的空白。

寬度固定式的網頁佈局設計雖然不能佈滿較設計版式高的寬度視窗，但是對於站長而言，屬於較容易實現的頁面寬度佈局設計，圖像可以精確地顯示在固定位置，使用大眾使用者的解析度螢幕寬度作為頁面固定寬度進行網站頁面配置， 是一種較為經濟又不損失絕大部分使用者體驗的方式。

3、使用者自訂式網頁

使用者自動以式網頁根據使用者定義瀏覽器設置中的文本尺寸來確定網頁顯示寬度，使用者定義的文本尺寸越大，網站寬度越寬。

從上面的圖例可以看出，使用者自動以式網頁佈局設計在不同解析度下，只根據使用者修改文本大小而相應的改變網頁寬度，從而達到網頁縮放的效果。

使用者自動以式網頁寬度佈局設計，雖然不能像自我調整式網頁那樣隨著解析度和瀏覽器視窗而改變寬度，但是可以讓使用者改變瀏覽器文本大小設置而改變網頁寬度，從而以曲線方式達到使用者的個人化頁面寬度顯示需求。 使用者自訂式網頁是一種既集成了寬度固定式網頁經濟、設計易操作性，又以半自我調整的方式集合了自我調整式網頁的個人化使用者顯示體驗需求。 然而使用者自訂式網頁寬度佈局也繼承了自我調整式網頁和寬度固定式網頁兩種佈局方式的缺點，在一些不協調的尺寸大小設置和解析度下，會讓寬度或高度溢出一屏大小，需要通過捲軸拖拽來滾動查看網頁。

上述三種網頁寬度佈局設計，站長們的取捨需要根據網站自身的定位結合每種寬度佈局設計的優缺點來選擇，正確地選擇合適于網站的寬度頁面配置設計，在經濟高效的同時又保障使用者體驗。

本文由 淘寶返利HTTP://www.0576mm.com/ 原創總結。 如果您不同意，可以留言交流，原創首發在A5，轉載的時候請保留作者連結，謝謝!