Grid 的運用:PS外掛


製作的 Responsive Web 最好能先理解 Grid 概念。這概念不只運用在 Mobile Web ,包含 Smart TV 都會派上用場。如果你輕鬆想做出和 Mockup 相同的 Web ,最好把 Grid 學起來。

這篇講文章的非常清楚,從 Wireframe、Mockup、Html 全都包了:Using the 960 Grid System as a Design Framework ,網路上也有很多講解Grid的文,所以在這裡我只教你「怎麼拉線」做 Mockup。光拉線就是一門學問了,先學會 Grid 概念才能套用如 Susy、Bootstrap 這類型的框架加速產出 Respinsive Web。

GrideGride


官方下載:http://guideguide.me

這是個 Free 的好用PS外掛,輸入數值就會自動畫參考線。在做 Responsive Web 之前請先將參考線全部拉出來。至於如何安裝和操作方式,網路上很多人寫了,可以參考這裡:Photoshop外掛-GUIDEGUIDE 畫面參考線等分產生器

Velositey


免費的PS外掛,Velositey ,支援一鍵生成 Grid,其他功能類似 WabZap,只是沒那麼精緻。

安裝方式:
1.Place ‘Velositey’ folder in ‘Adobe Photoshop CC/Plug-ins/Panels’
2.Launch Photoshop CC
3.In Photoshop, go to ‘Window > Extensions > Velositey’

WebZap


官方下載:http://webzap.uiparade.com
付費軟體,非常好用,之前在 初學者的 Mockup 這篇文有出現過。光是看它產出的動作就有爽度,有種「喔喔喔~~它自動在跑了耶、不用我自己拖拉個半天耶~好厲害啊!」的心情。

上述 3 款我都用過一陣子,各有利弊看各人喜好,用途不太一樣。當然付費軟體細節上比較優。(個人支持 WebZap,錢都噴了當然要推別人下坑。)

Grid

我用 WebZap 當示範,自動產出這樣的 Grid 格線。

從圖中很清楚可以看到分成紅、綠、藍、透明等幾個區塊,真正的內容區域只到左右兩邊的綠色而已。

Column 欄

紅色,目前常見的大多切分成 12 格,當然也可以分成各種格數,但若要套用框架還是照大家常用的數值來做吧。

Gutter 間隙

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

Grid padding 留白

綠色,主要文本和邊緣的間距。

藍色

這區塊不在 Grid 計算內,但還是要設計喔!當螢幕持續拉伸,比如超大寬螢幕,不能夠把整塊主內容區也跟著拉大,文本圖片都會變形。當 Web 尺寸寬到一定程度時,還會持續左右展延的就只有藍色區塊。

整個頁面的寬度等於 欄+間隙+留白,藍色區塊不算在內喔!

欄、間隙、留白的數值沒有固定,比如下方這 3 種都不太一樣。

  1. 960 Grid 欄 60px、間隙 20px、留白 10px,頁面寬度 960px。
  2. WebZap 欄 60px、間隙 20px、留白 30px,頁面寬度 1000px。
  3. Velositey 欄 65px、間隙 30px、留白 30px,頁面寬度 1170px。

如果是Smart TV 的 Grid,16:9 情況下甚至沒有 Gutter 和 Grid padding,只有 Column,而且切分成 16 格,且在特定總寬下固定欄位尺寸。

這種情況下我會套用 Susy 框架,彈性比 Bootstrap 大!想切幾格、間距、留白等等都能自由發揮。之後的文章會說明照著 Grid 畫好 Mockup 後,在 Susy 和 Bootstrap 要怎麼設定。(我也只知道這 2 種怎麼操作,其他的不熟XD)

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close