網頁佈局 - 從 960 到 RWD



早期螢幕解析度從 800×600 提升至 1024×768 之後,大部份電腦螢幕具相同單一尺寸 1024px 寬度,將網頁版型寬度固定在  960px 是常見的設計,一直到今天,這個寬度依然常見於熱門網站的設計,例如博客來 。至於 960px普遍被接受的原因,在於 960 這個數字可以很容易的被 3、4、5、6、8、10、12等多達 26 個數字整除,提供了網格佈局最大的彈性,因此設計師採用固定佈局可以輕易的掌控網頁內容配置,在一個 960px 的空間裏輸出任何理想的版面。



以上這張圖的版型採用了960px 作為佈局寬度,透過 Firefox 提供的適應性設計模式工具在1024x768的尺寸下檢視相當完美。

在那個Windows稱霸數位裝置的美好年代,1024x768的螢幕尺寸走過了一段輝煌歲月,以下簡要列舉此種版型的典型標籤配置。

    <div id="container" style="margin:auto ;width:960px; ">
        <header style="margin:auto ; width:950px;…"></header>
        <div id="content" style="margin:auto ;">
            <div style=" margin-left:5px;float:left;width:635px;…">
            </div>
            <div style="margin-right:5px; float:right;width:315px;…">
            </div>
        </div>
    </div>

近年隨著螢幕解析度的提升,960px 在大螢幕尺寸下會出現大面積的空白,漸漸的不再適合用來作為佈局的寬度。



這問題基本上不會太糟,過寬的螢幕事實上也不適合人的眼睛閱讀,將寬度限制在 960px 甚至有利於網頁檢視。

960px 固定佈局真正的問題在於小螢幕的呈現,現在試著縮小螢幕的寬度,你會看到部份網頁內容被隱藏了,在過去使用者透過標準寬度螢幕瀏覽網頁的情形下不是什麼問題,此一固定佈局的缺陷,直到近年 iPhone 帶來的行動裝置革命中才顯露了出來。



為了讓使用者能夠檢視超出螢幕範圍的內容,瀏覽器會自動在呈現畫面寬度小於 960px 時顯示橫條,而避免橫條出現正是RWD最重要的原則之一,這導致了非常糟糕的視覺體驗,我們希望在任何尺寸的裝置螢幕上,使用者不需要透過橫條的捲動,就能在有限的空間寬度內呈現完整的網頁內容,解決這樣的問題,可以嘗試導入流動佈局,而繼續往下談之前,先理解另外一個技巧-網格佈局設計。

:) 網格佈局

網格佈局的關鍵在於利用直欄切割網頁內容,然後將網頁內容分類配置直欄中,早期主流裝置還是Windows電腦的年代,有一段不算短的時間,網格佈局不約而同的採用960px作為固定寬度尺寸,並以 12列直欄進行設計。



12 個直欄只是一種慣例,並不需要特別遵守,它甚至算不上規則,網頁設計最重要的原則,在於根據內容特性切割所需的欄位,讓網頁的結構適應內容,而非強制將內容塞進預先固定好的欄位中。

除了直欄的切割,另外一個問題便是欄位配置的間隔,以及整體頁面與左右邊界的距離設定。間隔與邊距的設計並沒有一套準則,完全根據設計內容需求而定,如果沒有特別的想法,可以參考以下的簡單算法。

在寬度 960px 的空間裏切割出 12 個直欄,每個直欄可以分配到 960/12 = 80px 的寬度,如果讓每一個直欄的內容彼此間隔 10px ,則每一個直欄可以配置的內容為 70px ,而12 個直欄只需要 11 個間隔,如此一來多出來的單一間隔剛好切割成兩個 5px 寬度空間,分別填入左右邊界。



從這個結果我們可以發現,扣除邊距之後,實際內容只佔據 950px 寬度,至於為何採用 10px 作為間隔寬度,這其實看內容需求,並沒有強制規定。

一般的網頁設計並不需要切割至 12 欄,這對於大部份的網站而言太過複雜,根據內容適當的合併其中的列數,可以單純化頁面的設計,例如以四欄為一個單位合併成三個直欄佈局是不錯的選擇。

由於 960/3=320 ,這個寬度剛好等於4吋手機螢幕的寬度,非常適合小螢幕行動裝置檢視,後續當我們採用行動優先設計原則進行雛形開發時相當受用,特別是逐漸放寬至大螢幕設計時,可以進一步單純化媒體查詢的運用,簡化適應跨裝置呈現網頁設計的複雜度。



實際的設計過程中,可以根據內容需求進一步合併,例如合併左邊兩欄可以得到以下的兩欄設計,亦是相當常見的佈局。



使用這種佈局建立側邊欄的好處之一,是可以很方便的插入寬度等於 300px 的廣告,而300px是最被廣泛使用的廣告內容寬度之一。


:) 讓網格液化-流動佈局

流動佈局利用百分比取代絕對寬度,讓網格能夠根據裝置螢尺寸縮放,螢幕尺寸改變時,網頁內容將如同液體般自動適應容器形狀。



除了以百分比為單位,流動佈局基本上還是透過相同的比例切割網格,首先預留整個網頁內容與視窗左右邊界距離的寬度,將裝填網頁的有效容器寬度設定為 95% ,左右各分配2.5%,接下來其中的內容再以此為100% 的相對比例進行設計。

側邊欄佔據整體有效寬度(95%)的比例定為 1/3 ,左邊主體內容則是2/3,為了方便計算,我們再取出 1% 分配給左右兩個邊界各 0.5% 的內容,如此一來側邊欄便能以 33% 作為配置比例,主體內容則是 66%。



同樣的,流動佈局的比例設計並沒有一定的規範,最重要的設計原則是根據內容而定,如果願意的話,精確的計算比例,利用如 33.33333% 之類的數值亦無不可。

    <div id="container" style="margin:auto ;width:100%;…">
        <header style="margin:auto ; width:95%;… ">
        </header>
        <div id="content" style="margin:auto ; width:95%;" >
            <div style=" margin-left:0.5%;float:left;width:66%;…">
        </div>
            <div style="margin-right:0.5%;float:right;width:33%;…" >

            </div>
        </div>
    </div>

:) 跨裝置顯示 - 媒體查詢

在一般尺寸的螢幕下,流動佈局透過自動縮放可以適當的呈現網頁內容,然而當使用者透過手機之類的小尺寸裝置瀏覽時,流動佈局的設計明顯變得不合適了,這個時我們可以導入媒體查詢進一步作調整,讓畫面能夠在比較小的螢幕上重新調整為單欄呈現,以前述示範的網頁為例,假設當螢幕寬度小於等於 600px 時,套用滿版的樣式,否則的話,維持原來的樣式。

<body>
    <div id="container"
style="margin:auto ;width:100%;background-color:#EBF4FA;">
        <header style="margin:auto ;
width:95%;height:120px;
background-color:black;"></header>
        <div id="content" style="margin:auto ; width:95%;">
            <div id="main">
            </div>
            <div id="aside">
            </div>
        </div>
    </div>
</body>

其中表示主要內容的 div 標籤設定為 id="main" ,側邊欄則是設定為 id="aside" 。接下來建立預設基本樣式如下:

#main {
    background-color: silver;
    height: 420px;
}
#aside {
    background-color: gray;
    height: 420px;
}

最後就是媒體查詢的設定了,以 600px 為斷點,分別於不同的螢幕寬度下,設定區塊的寬度如下:

@media screen and (min-width:601px) {
    #main {
        margin: 0 0 0 0.5%;
        width: 66%;
        float: left;
    }
    #aside {
        margin: 0 0.5% 0 0;
        width: 33%;
        float: right;
    }
}
@media screen and (max-width:600px) {
    #main, #aside {
        width: 100%;
        float: none;
        margin: 0px;
    }
}

如果大於 600px ,採用第一段的樣式設計,否則採用第二段最大寬度 600px 的設計,瀏覽器會自動根據使用者瀏覽網頁所使用的裝置螢幕寬度,決定採用合適的設計,而這也是響應式設計最重要的入門關鍵。

現在我們有一個初步的 RWD 網頁,以下左邊的畫面是大於 600px 寬度的所呈現的結果,右邊則是小於等於600px的畫面,側邊欄與主體內容區塊呈現相同的寬度並且垂直配置。

 

哲人日已遠 典型在夙昔,瞭解過去,才能深入未來,行動裝置充斥的今日,RWD成為新時代網頁設計的救贖,固定版型與 960px 的寬度主張已無足輕重,取而代之的是整合網格設計、流動佈局與媒體查詢應用技巧的響應式設計,是時候擁抱 RWD ,跟 960 時代說再見了。



沒有留言: