網(wǎng)格設(shè)計基本內(nèi)容

時間：2023-02-19 03:42:02 | 來源：營銷百科

時間：2023-02-19 03:42:02 來源：營銷百科

網(wǎng)格設(shè)計基本內(nèi)容：將之分為一欄、二欄、三欄以及更多的欄把文字與圖片安排于其中，使版面具有一定的節(jié)奏變化，產(chǎn)生優(yōu)美的韻律關(guān)系、網(wǎng)格設(shè)計在實際運用中具有科學(xué)性、嚴肅性，但同時也會給版面帶來呆板的負面影響。

n在頁面設(shè)計中，網(wǎng)格為所有的設(shè)計元素提供了一個結(jié)構(gòu)，它使設(shè)計創(chuàng)造更加輕松、靈活，也讓設(shè)計師的決策過程變得更加簡單。在安排頁面元素時，對網(wǎng)格的使用能提高精確性和連貫性，為更高程度的創(chuàng)造提供一個框架。網(wǎng)格使設(shè)計師能做出可靠的決定，并有效地運用自己的時間。它們能為設(shè)計注入活力——布置那些看上去相當小并且毫無關(guān)聯(lián)的元素，例如頁碼——能在頁面上產(chǎn)生戲劇性的沖擊力，使人透過印刷品感受到設(shè)計的脈動。

n設(shè)計師在運用網(wǎng)格設(shè)計的同時，也可以適當打破網(wǎng)格的約束使畫面活潑生動。

n基于網(wǎng)格的網(wǎng)頁設(shè)計概念及實際應(yīng)用案例

n一些大型站點都有著非常一流的視覺外觀，它們很可能在設(shè)計時使用了網(wǎng)格系統(tǒng)。網(wǎng)格可以是頁面布局顯得緊湊而且穩(wěn)定，為設(shè)計師在設(shè)計站點時提供一個邏輯嚴謹?shù)哪０濉?br>
n但使用網(wǎng)格并不意味著枯燥的設(shè)計，一個好的設(shè)計師不僅能夠合理地應(yīng)用基于網(wǎng)格布局的規(guī)則，而且還能適時地打破這些規(guī)則。

n'The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.'

n- Josef Müller-Brockmann

n網(wǎng)格基礎(chǔ)

n我們來看一些網(wǎng)格的術(shù)語。網(wǎng)格是用豎直或水平分割線將布局進行分塊，把邊界、空白和欄包括在內(nèi)，以提供組織內(nèi)容的框架。

n網(wǎng)格常在傳統(tǒng)印刷中使用，但對網(wǎng)頁設(shè)計也是非常合適的。網(wǎng)格設(shè)計不能使一個網(wǎng)站的布局看起來像報紙一樣，但它的確可以輔助我們設(shè)計結(jié)構(gòu)統(tǒng)一的站點。

n網(wǎng)格是一個簡單的輔助設(shè)計工具，而不是什么對設(shè)計產(chǎn)生不良影響的東西。

n理解并遵循規(guī)則

n當你開始學(xué)習(xí)任何一項技能時，都應(yīng)當遵循它的一些指導(dǎo)原則。從一開始就把基礎(chǔ)的東西學(xué)好，能使你高效地應(yīng)用這些規(guī)則。

n學(xué)習(xí)網(wǎng)格也不例外。你應(yīng)當按照網(wǎng)格來設(shè)計布局，并讓所有設(shè)計元素對齊到它們所在的位置。在設(shè)計中使用網(wǎng)格能結(jié)構(gòu)化內(nèi)容并且給你一個設(shè)計起點，但這不應(yīng)當阻止我們的任何創(chuàng)意靈感。

n兩種途徑建立網(wǎng)格模板：

n1、自己創(chuàng)建網(wǎng)格系統(tǒng)

n對于建立自己的模板系統(tǒng)，盡管有很多不同的理論，但歸根結(jié)底，還是要選擇你手邊用起來最順手的工具。

n你可以把一個空文檔按照數(shù)學(xué)原理分割成奇數(shù)欄或偶數(shù)欄，而且通常要把欄之間的空白考慮在內(nèi)。

n只要你喜歡，你的網(wǎng)格可以很復(fù)雜或者很簡單。你的網(wǎng)格越復(fù)雜，你就擁有越多的自由發(fā)揮空間；而網(wǎng)格越簡單，留出的空白也越多。這完全取決于你自己的決定。

n下面是一些用Photoshop制作的例子，它們可以在Photoshop中用網(wǎng)格來查看。 2、下載現(xiàn)成的網(wǎng)格模板

n相比制作自己的網(wǎng)格，從網(wǎng)上下載一些標準的網(wǎng)格同樣可以用來輔助網(wǎng)頁設(shè)計，并且還省了你自己制作網(wǎng)格的很多時間。

n當前最流行的網(wǎng)格可能就是960 grid system了。它是nathan smith制作的，允許你制作12、16、和24欄的布局。 這個項目是Smith

nsmith在談到960grid system時說：'我只是簡單地把這個網(wǎng)格系統(tǒng)分享給大家，如果有人從中獲益，那再好不過了。'

n這個下載包括了CSS ,HTML,Photoshop,Illustrator,InDesign等等文件。設(shè)計文檔包括了很多有用的文檔，它們用來建立整齊而且清爽的站點。

n打破規(guī)則

n在介紹了網(wǎng)格的基礎(chǔ)知識之后，我們現(xiàn)在來打破這些規(guī)則。網(wǎng)格是把元素對齊的一非常好的方 法，它讓你的設(shè)計顯得干凈、整潔，而且用戶友好。

n然而，正如前面提到的，我們不能讓網(wǎng)格禁錮了我們的靈感和創(chuàng)新。要勇敢地向網(wǎng)格以外的地方冒險，要創(chuàng)造一個基于網(wǎng)格的作品，不意味著任何東西都要對齊。

n越出網(wǎng)格邊界的元素會讓作品看起來更加。。和流暢，而不是像表格那樣死板和枯燥。

n看看下面的例子，它們是應(yīng)用960 grid system制作的，展示了網(wǎng)格可以是漂亮而不古板的。