2013年02月23日 – 上午12:47

Grid 格子列表之 CSS 前製規劃 (上)

Screen Shot 2013-02-23 at 12.46.44 AM

去年開始小妹立志要朝有數字根據的理性使用者分析來做介面，開始重視網站相關的所有數據，真的獲益不少呢！昨天分享的 比賽列表介面 A/B Test 目前已有初步結果，但取樣數還是不夠，下星期再把結果分享給大家。今天想做一下 Layout 規劃筆記。

在重新設計獎金獵人的時候，寫 SASS (CSS) 前花了不少時間做全站整體規劃。尤其站內除了「比賽」之外，新加了「作品」，而「比賽」和「作品」在 Grid 顯示底下有不同設計，因此花了些時間計算出每個 item 的寬度以及 item 之間的間距，並讓不同寬度總寬度都符合 980px。

在做 Grid 格子狀顯示的時候，因為希望左右可以完全貼齊總寬度，讓整體視覺更飽滿平衡，所以寬度的計算裡 margin 必須少算一次，才能達到 one pixel matters 的境界。很多網站的作法是把期望的間距除以 2，然後分別設定每個 item 的左右 margin。但這樣一來左右就不能貼齊總寬度了。當然，這是不同的設計風格。像是 mobile01：
Screen Shot 2013-02-22 at 11.06.10 PM

如果沒有計算好，左右的間距還會不平均。一般人可能不會在意，不過在我前端龜毛魂大起之時，這實在是不能容許。像 Dribbble 就很漂亮。左右有貼齊到總寬度，整體看起來很平衡舒適。（點圖有 thickbox 放大）
Screen Shot 2013-02-22 at 10.47.33 PM

Hum Creative 也是很平衡地左右滿版。
Screen Shot 2013-02-22 at 11.15.33 PM

Pinkoi 版面也是舒適平衡。
Screen Shot 2013-02-23 at 12.08.18 AM

Fandora 也是舒適漂亮的滿版。
Screen Shot 2013-02-23 at 2.15.10 AM

拿計算機做 Layout 規劃

拿出計算機，整站的總寬度先設定為保守的 980px ，如果一列希望有五個 items，不能 980 除以 5，必須先把希望的間距寬度設計好，把 980 減掉期望寬度乘以 4 之後，再除以五才是正確的。

不過因為小妹數學不是很好，只能自己慢慢試出這樣的公式。還望各位數學魂靈動的大家，若有更快速的算法，請不吝教教小妹。

我的公式是這樣的：
總寬度 – 間距x(單列格數-1) / 單列格數 = 單格寬度

所以獎金佈告原始的設計是這樣：
（ 980 – 15×4 ）/ 5

而算出一格的寬度是 184px。這樣比賽資訊列表可以順利的滿版。
（見此：http://bhuntr.com/contests）
Screen Shot 2013-02-23 at 12.35.20 AM

因為像素不能有小數點，所以如果算出來的結果有小數點，就必須改變期望間距的寬度。

比如說，在作品列表頁面，作品重視圖片，應該要比較大，所以同樣總寬度底下，每列的 item 數量不相同，也就是同樣的總寬度我希望作品列表一列 4 個 items，每個之間的間距在 10px 上下都可以，先這樣計算。
（ 980 – 10×3 ）/ 4 = 237.5

但因為有小數點所以不行，所以修改間距大小到 9。
（ 980 – 9×3 ）/ 4 = 238.5

還是有小數點，繼續嘗試
（ 980 – 11×3 ）/ 4 = 236.75

最後修改間距成為 8 ，成功得到滿版結果。公式是這樣的：
（ 980 – 8×3 ）/ 4 = 239

作品集顯示結果為如下：
（http://bhuntr.com/garden）
Screen Shot 2013-02-23 at 12.26.09 AM

CSS3 用法

計算好之後，就可以開始寫 SASS 啦！剛才說的滿版的方式，寫法是每個項目都 margin-right，只有「單列格數」的倍數 margin-right 為 0。會用到 CSS3 的 :nth-child() Selector，請參閱：

http://www.w3schools.com/cssref/sel_nth-child.asp

如果網站大宗使用者的瀏覽器都還不夠新潮，就只能用程式在每個 item 加上編號，再在 css 指定某個倍數的 margin-right 為 0。

Related Posts Plugin for WordPress, Blogger...
This entry was written by 花水木, posted on at 上午12:47, filed under 職捱、創業. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.