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...