960px 寬度的網格布局過時了嗎?


說不上完全過時,根據自己需求決定。

業界用了這麼久的傳統960gs框架,從2個元素上來說吧:

  • 定寬

    有的說現在responsive design比較流行所以960gs過時了,這是有點片面的,responsive和grid是不矛盾的。基於grid system的responsive框架是存在的。

    不少responsive design的網站是在寬度上霸佔度100%的,這確實是和傳統grid system最大的區別之一:寬的時候不浪費一點空間,窄的時候也充分利用。在網頁的終端越來越豐富的情況下,responsive優勢明顯。

    responsive固然好,但這並不意味著我們就可以盲目的都轉向responsive了。設計難度的增加和隨之帶來的各種成本也是不可避免的。有些網站本身信息量少,還用全寬的responsive,設計的不好,那可讀性會非常差。一方面是行長問題,太長了讀起來很難受;另一方面留白的控制不好的話,視覺上不夠平衡,鬆散。可以看下smashing的做法(http://www.smashingmagazine.com/ ):變寬的同時增加一些sidebar來維持正文的寬度,以保證可讀性;變窄的時候折果斷hidden掉正文欄以外的(很多門戶網站因為廣告等因素實際上不太適合這麼干)。如何在各種模式下均保證高效的的信息傳達,是responsive的一個重要問題。如果弄不好,在我看來,還不如繼續用定寬的,然後專門建立一個mobile站點。至於responsive還是專門的mobile站點,也是各有優缺點,沒個定數,在此就不浪費筆墨了。個人覺得國內移動網速太慢,responsive還太適宜。

    像amazon和deviantart這樣萬年全寬的網站,也不見得多麼不好
  • 960像素

    感覺似乎題主主要是想問這個,我上面寫了那麼多廢話不好意思。這個其實討論一直就有,自從那個什麼主流屏幕寬度變成13xx的報告開始,就更多了。現在的主流解析度是壓倒性的在1000以上( http://www.w3schools.com/browsers/browsers_display.asp )。但是國外討論結果是,沒有定論。 其他人也說了,現在還有978啊980之類的寬度的。

    要說960和978的最大區別,我覺得還是列間距,978下的列間距更寬鬆更舒服,尤其在現在屏幕PPI普遍提高了缺還沒買入完全的retina時代的今天。但這樣只是只看網格的結論,實際文字之間的寬度不會等於列寬度。至少我沒有覺得目前960看起來有多難過。

    縱覽下國外各大站點沒有用960的很多,930-1020的各種都有。其實不去量的話也沒問會去意識到這點寬度差別,我猜測是考慮到內容排版的一些細節問題所以各站點做了些浮動。

    960之所以是960相信,大家都比較清楚,作為一個框架,它的目標是給讓大家在保持一定系統性的前提下更快速地布局,而不是要我們一定這樣做。提供各種alternative的方案,是一個框架的原則之一,所以960也是某種必然的(960可以12.16.24列,但是978隻能12列)。根據網站世紀需要,完全可以自行做調整。而不必拘泥於960

另外一個問題就是,改變習慣總是有代價的(尤其對於大型門戶網站)。不管是對網站來說還是設計師自己來說,960gs在現在看來只能說不完美,但用起來也完全沒問題,所以那麼多設計師也就繼續用著了。

似乎說的有點亂,不清晰。不好意思。再歸納一下的話就是:

網格系統本身沒問題;寬度沒有一定,但960也完全沒問題。

沒有過不過時,只有適不適合。

webdesignerwall上對960過時的問題做的調查,1.3w設計師參與了投票。1/4的人覺得過時,1/4覺得沒過時,1/2覺得看項目。所以提主應該有個大致答案了吧


960 Grid System 是我至今很喜歡的一個布局框架。

我始終認為,布局框架的尺度不是依附於顯示設備的尺寸來增大的;布局框架的尺度是為了適應內容本身的尺度而設計的。

因此,我一直將 960 Grid System 看成是 12–14px 正文的最佳布局框架之一。只要網頁的正文尺度還在這個範圍內,960 依然是合適的,也不存在「過時」的問題(時尚是偏重裝飾性的,風格可以過時,但布局框架的設計方法不會)。如果要增大框架尺度,則相應需擴大內容的尺度——相信這是未來信息呈現的方向。

另外,引用本站梁海在另一回答中的一句話:[1]

「讓一屏顯示更多的量」從來都不是網頁設計的目的。

因此,我也反對通過填補內容數量或增多頁面元素的方式來撐起一個更大尺度的布局框架。

----

[1] http://www.zhihu.com/question/19629822/answer/12442895


屏幕再大人的舒適視角還是有限的,比如我用21寸電腦屏幕和15寸的筆記本屏幕,看960px寬度覺得是比較合適。所以對於你處理PC平台的設計,應該還是可以參考960gs。

對於兩側留白過多的問題,主要的挑戰不是960裡面的東西,而是之外的東西,比如原來給1024設計的dock在左右側的面板,就會在更高解析度屏幕上和主體隔離很遠。

上面有人提到的responsive design確實是現在的趨勢,雖然它的動機主要是處理手機、平板等較小的屏幕。如果你需要讓自己的設計完美,能適應各種屏幕尺寸,可以考慮看一些responsive design的技術,比如media query,jQuery mobile等等。

但另一方面,也許為了很小比重的用戶花心思去做設計,尤其是創業產品或小企業,是得不償失的。我看過國外某網站一篇文章,說針對opera的css調整是沒有必要的,因為也許這部分的訪問數還不到1%。


ipad不就是1024么,應該還是有市場的吧

PS:我注意到知乎就是960的


過不過時,取決於你的客戶群體。


是的。

現在流行 responsive ....


政府部門的網站建設一般都要求支持960px,原因很簡單,政府部門使用的電腦大部分還是以前960px的屏幕


可以嘗試使用 1000px 的寬度,真要考慮的話,就看看統計裡面,用戶使用的哪些解析度靠前吧


還是看你用作什麼場合了。

電腦屏幕的尺寸基本上就是這麼大小了,特別是筆電


978網格也不錯哦 12欄,每欄54像素,30px gutter


不過時,現在還有一部分瀏覽器是1024的 ,現在剛出來的網站還有950的


推薦閱讀:

想掌握前端的構建工具,有沒有學習路線推薦?
如何看待只用CSS畫圖?
為什麼很多前端工程師都用蘋果筆記本?
Web 前端開發怎麼和後台進行相銜接?
Vue.js 不支持 IE8 你們是怎麼做的?

TAG:前端開發 | CSS | CSS框架 | 前端工程師 | 960Grid |