一区不卡国产视频,小黄片免费视频在线观看,国产这里有精品99,国产成人精品自产久久亚洲精品,亚洲国产电影二区

品優(yōu)網(wǎng)絡(luò) 十六年(2003-2018)專注
網(wǎng)格的網(wǎng)頁設(shè)計概念及實際應(yīng)用案例
日期:2014-12-24 作者:admin 來源: 瀏覽次數(shù):0 網(wǎng)友評論 0

企業(yè)網(wǎng)站推廣1

一些大型站點都有著非常**的視覺外觀,它們很可能在設(shè)計時使用了網(wǎng)格系統(tǒng)。網(wǎng)格可以是頁面布局顯得緊湊而且穩(wěn)定,為設(shè)計師在設(shè)計站點時提供一個邏輯嚴謹?shù)哪0濉?/P>

但使用網(wǎng)格并不意味著枯燥的設(shè)計,一個好的設(shè)計師不僅能夠合理地應(yīng)用基于網(wǎng)格布局的規(guī)則,而且還能適時地打破這些規(guī)則。

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

- Josef Müller-Brockmann

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

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

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

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

理解并遵循規(guī)則

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

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

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

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

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

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

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

下面是一些用Photoshop制作的例子,它們可以在Photoshop中用網(wǎng)格來查看。

2、下載現(xiàn)成的網(wǎng)格模板

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

當前更流行的網(wǎng)格可能就是960 grid system了。它是nathan smith制作的,允許你制作12、16、和24欄的布局。

這個項目是Smith

smith在談到960grid system時說:”我只是簡單地把這個網(wǎng)格系統(tǒng)分享給大家,如果有人從中獲益,那再好不過了?!?/P>

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

打破規(guī)則

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

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

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

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

基于網(wǎng)格系統(tǒng)的設(shè)計實例

下面是一些應(yīng)用了網(wǎng)格系統(tǒng)的設(shè)計作品,它們非常整齊而且界面友好。其中一些是嚴格按照網(wǎng)格布局的,另一些則打破了網(wǎng)格的某些邊界。所有這些都說明,應(yīng)用網(wǎng)格系統(tǒng)并不意味著枯燥的外觀設(shè)計。

Help Your Habitat

Digital Podge 2009

Vegas Uncork’d

Anton Peck

Brite Revolution

Kiki and Bree

Arvorecer

Simon Collison

使用網(wǎng)格進行設(shè)計的一些工具

下面是一些用來設(shè)計基于網(wǎng)格布局的工具。

Grid Designer

A fun tool to help set up a grid.

Grid System Generator

Just as the name of the tool says: it helps generate a grid for you.

Grid Calculator

Another fun tool to help set up grids.

jQuery Masonry

A jQuery tool that arranges items vertically and horizontally according to a grid. 

結(jié)語:

網(wǎng)格并不是一切設(shè)計問題的解決方案,也不一定適用于所有人。但網(wǎng)格的確為那些需要結(jié)構(gòu)感和平衡感,而且需要穩(wěn)定和清爽設(shè)計的站點提供了很好的切入點。在你的作品中嘗試網(wǎng)格吧,你一定能體會到網(wǎng)格結(jié)構(gòu)給你帶來漂亮而且前幾特的設(shè)計。

網(wǎng)格的網(wǎng)頁設(shè)計概念及實際應(yīng)用案例,一點見解,望見笑。

企業(yè)網(wǎng)站推廣2

查看更多寧波網(wǎng)站制作網(wǎng)頁設(shè)計網(wǎng)格實際應(yīng)用

寧波網(wǎng)站建設(shè) (http://www.sdjianlida.com/) 版權(quán)與免責(zé)聲明
    1、凡本網(wǎng)注明“來源:寧波品優(yōu)網(wǎng)絡(luò)”字樣的所有作品,版權(quán)均屬于浙江省寧波海曙品優(yōu)網(wǎng)絡(luò)技術(shù)有限公司,如需轉(zhuǎn)載、摘編或利用其它方式使用上述作品,請與本網(wǎng)聯(lián)系。
    2、凡本網(wǎng)注明“來源:XXX(非寧波品優(yōu)網(wǎng)絡(luò))”的作品,均轉(zhuǎn)載自其它媒體,轉(zhuǎn)載目的在于傳遞更多信息,并不代表本網(wǎng)贊同其觀點和對其真實性負責(zé)。寧波網(wǎng)站建設(shè)的轉(zhuǎn)載僅為信息的廣泛傳播,如有侵權(quán)請及時告之刪除。
返回:寧波網(wǎng)站制作