網頁設計技巧:學習網頁設計的網格系統

來源:互聯網
上載者:User

文章描述:網格系統是一種好的習慣,也是一種格式化的設計工具。有了它,你能更專註於內容呈遞,更專註於強調重點。

網格確保了設計結構的組織分明、結構明晰。我們可以通過網格系統更好的打造設計的資訊層級,讓設計閱讀起來更具有韻律感。就跟編碼一樣,編碼需要有機的組織圖,而網頁設計的網格系統也是同樣的作用。

The Grid System 設計師用起來舒服,開發人員用起來順手,當然,網格系統對於使用者也是大有裨益的。我一直在強調設計要注重使用者體驗——畢竟,客戶為你的內容消費,因此你要向他們提供有價值的體驗。使用堅固的網格系統會對你大有協助,不但能保持設計的一致性,還能更好的引導使用者。

如果你的網站設計的已經很不錯,那麼可以通過網格來讓你的網站更進一步,讓使用者瀏覽起來更愉悅。但有一點需要注意,網格系統不意味著循規蹈矩,一味按照網格線來進行布局。就拿響應式設計來說,靈活性是其最大的特點——網格系統也應如此,網格系統的意義在於更靈活的協助你有序布局,而不是限制你的設計。

什麼是網格系統?

包含了水平和垂直方向的輔助線,用來合理排列內容。

最基本的網格系統由一系列水平和垂直的、彼此交叉輔助線構成,這些格線讓內容布局變得簡單起來,讓內容更具可讀性。
網格系統在紙媒中廣泛應用,有著悠長的曆史,引入到網頁設計後,出現了很多CSS網格架構,幾乎成了網頁設計的標準。

利用網格系統可以更好的駕馭內容,保持一致性。均勻化的布局,一致性自然就有了,這樣導航功能就能更便於使用,好的使用者體驗也有了。——當然你也可以打破網格系統,用更好的布局取而代之,也可從網格系統中衍生出自己的布局方式。

科普一下960px網格系統(http://960.gs/) , 也稱 960柵格布局, 數年來作為網頁設計人員的最愛, 被用來搭建網站和設計網頁布局. 。該無疑是非常好的網格系統, 因為相當靈活. 它協助網頁設計者快速地構造以下欄柵數目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 網格系統可能是現在最受歡迎的網格系統, 並已經在很多網站和設計範本上使用。如新浪、網易、搜狐等。

範例, the Gerstner, 收錄於 Gridset App
使用者看不到網格系統,他們也很少有人能夠瞭解網格系統的重要性。有句老話說的好,規矩就是用來被打破的。無需拘泥於網格系統的形式,我們使用網格系統只是為了理解布局的理念和手法,之後,我們便可以進行”革命”、創新。

網上可以找到很多合適的網格架構,當然,我們也可以自己創造。而且值得一提的是,設計格線架構是極佳的思維訓練,能讓我們更深層次的理解布局,更好的進行思維訓練,想的也會更遠。

使用網格系統的好處

好處很多——設計、開發、管理網站都用得到。
網格系統的好處之一是,允許按比例設計,可以組織不同元素之間的平衡感。網格系統一般都很靈活,這樣就可以在需要時自由調整。

PS中輔助線

使用網格系統,讓你的設計具有正式感和規範感,還具有一種結構分明的設計感。這讓你設計起來更輕鬆,對於開發人員來說,同樣如此。

網格系統的缺點

有好就有壞,我們來談談缺點。

首先,很多人,尤其是對於新手來說——網格系統會阻礙他們的發揮創造。你會感覺你的靈感被束縛在這些條條框框裡面了。如果出現這種狀況,我建議你從網格系統中跳出來,用自己的創意去設計,按照自己的經驗來排布元素,然後再切出網格系統,想出一個二者結合的兩全其美的辦法,稍做調整,如果網格系統和你的原創設計出入過大,不能有效協調,那麼建議換一個網格系統,或者自己設計一個。

其次,網格系統用起來比較困難,有一定的學習成本,需要有一定的數學基礎,你得懂比例,會計算。對於那些數學不好的人來說,網格系統真的是太複雜了。但是我認為,剛開始雖然比較難以上手,但是習慣之後,你會得心應手,設計也將會更加出彩。

在設計中應用網格系統:

幾條小建議:

在設計中使用重疊網格(網格線要可見):
如果你能喜歡使用CSS網格架構,那就再好不過了,無論是PS還是其他什麼程式,將網格設定為疊加,然後鎖定。這樣設計的時候心中就有數了。

設定輔助線:

有了重疊網格之後,設定分欄輔助線。這樣就能夠更清楚的劃分邊界。

嘗試一下有限制的設計

最多16欄,6欄布局最明智。

運動員練習時都綁著沙袋還記得嗎,有限制的練習,之後再脫去舒服,跑的更快。
因此,可以試著自我約束一下,練習在限制的條件下進行布局,這樣你就能更專註於重點,進步更大。

注意空間問題

每一欄之間的寬度越大,留給元素的空間越富裕。然而不要忘記垂直方向上的空間布局。是緊密還是充滿留白?這需要按情況而定。

結論

現在你對網格系統已經瞭解了大概。
可以嘗試一下在設計前多做規劃,這樣網格系統用起來更得心應手,布局更流暢,多想想結構,多想想怎樣分欄的布局方式來規劃內容。

網格系統是一種好的習慣,也是一種格式化的設計工具。有了它,你能更專註於內容呈遞,更專註於強調重點。

原文地址:webdesign  優設網翻譯:@MartinRGB



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。