Fixed Grid System 詳解


我踩到一個沒把 Fixed Grid 學好的雷orz 特此拿出來筆記下。之前在 [Grid 的運用:PS外掛] (https://blog.akanelee.me/posts/194263-application-of-grid/ ) 一文中有簡單提到 Grid 的運用,但講得不夠清楚,後來活用時遇到個問題:如果你的網頁有側邊欄的時候,要怎麼設計才符合 Grid?

參考上圖,Grid 分成紅、綠、藍、透明等幾個區塊。這個圖是 1000px 的示範。

Column 欄

紅色,60px
放圖文影音等的部份。所有主內容的資料都會以這個格子為起點對齊放置。

Gutter 間隙

透明,20px
欄和欄之間的間距。

Grid padding 留白

綠色,30px
主要文本和邊緣的間距,螢幕縮到最小的時候仍會顯示的部份。我踩到的就是這裡,之後說明原因。

藍色

這區塊不在 Grid 計算內,但還是要設計喔!當螢幕持續拉伸,比如超大寬螢幕,不能夠把整塊主內容區也跟著拉大,文本圖片都會變形。當 Web 尺寸寬到一定程度時,還會持續左右展延的就只有藍色區塊。整個頁面的寬度等於 欄+間隙+留白,藍色區塊不算在內!(換言之,當 Web 尺寸窄到一定程度時這區塊就會完全消失。)

以上是對Grid的簡易說明。

遇到的狀況

  1. 延伸的範圍,不計算在Grid數字內。
  2. 留白
  3. 間隙

上圖可以看出這是個有「側邊欄」的網頁,同時側邊欄的起點對齊留白。這是個有問題的作法,留白是在 最小螢幕時我們仍希望能看到的部份

如果「從留白開始作側邊欄」


如果「從留白開始作側邊欄」,當螢幕縮小時「1. 延伸的範圍」會完全消失,畫面直接從「2.留白」開始。你可以看到兩邊的視覺緩充不見了。除非是故意想要這種效果,否則通常不會這麼直接切齊。

我們想要的應該是左右兩邊各留一點灰底當視覺緩充。


左右兩邊留一點灰邊有把視線、內容集中在主內容區的效果。

修改


還是同樣的Grid,但稍微調整了一下。記得,即使照 Grid 設計版面,CSS是有 padding 這個功能的。

  1. 灰底做進留白區裡,確保最小螢幕時仍會出現。
  2. 利用 Padding 將側邊欄往內縮。
  3. 這樣就可以看到右方主內容區的起點正好對準欄了。
  4. 主內容區的結尾也是在欄內,利用 Padding 空出一點點白邊。
  5. 這樣右方就有空間做灰底,所有主要內容全部都在欄位裡了。

「所有主要內容全部都在欄位裡」是 Grid System 很重要的概念,搞清楚留白的作用才能設計出大家都好做的 Responsive Web。F2E 會感謝你的。

Mobile

順帶一提,這是 Fixed Grid System 在 Mobile 的設定。之後在找機會寫篇關於 Fluid Grid System 的文。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close