設(shè)計(jì)師對(duì)網(wǎng)格理論的指導(dǎo)

2016-09-24    分類: 網(wǎng)站建設(shè)

無論你是在網(wǎng)頁設(shè)計(jì)還是印刷設(shè)計(jì)中工作,你都需要了解網(wǎng)格理論。盡管一些設(shè)計(jì)師積極地避開網(wǎng)格,轉(zhuǎn)而使用更直觀、更自由的布局,但最成功的是多年來一直與網(wǎng)格合作-他們?cè)诖蚱埔?guī)則之前就已經(jīng)了解了規(guī)則。

對(duì)于自學(xué)成才的設(shè)計(jì)師來說,作為設(shè)計(jì)工具的網(wǎng)格背后的許多理論和合理化都沒有被典型的博客文章和會(huì)議討論所覆蓋。我們來這里是要把這個(gè)口袋大小的指南直接放在網(wǎng)格上,包括少量的理論。讓我們開始吧。

1、柵格建立了韻律和節(jié)奏

網(wǎng)格(至少是平面設(shè)計(jì))的首要目的是為元素在布局中的位置建立一套指導(dǎo)原則。一個(gè)有效的網(wǎng)格不僅為設(shè)計(jì)提供了節(jié)奏,而且還定義了儀表。這是使內(nèi)容可訪問的重要部分,并幫助查看器了解在布局中查找下一條信息的位置。它設(shè)定了預(yù)期,并定義了規(guī)則、音色和設(shè)計(jì)的聲音。把網(wǎng)格看作是你的游覽者旅行的路線圖。

2、網(wǎng)格定義和反映比例

網(wǎng)格的一個(gè)關(guān)鍵方面是它幫助確定和定義比例的能力。在印刷中,比例通常與媒體的大小相呼應(yīng);例如,紙張的形狀和方向經(jīng)常反映在布局中包含的圖像的大小和形狀上。

這感覺很舒服,因?yàn)樽x者潛意識(shí)地理解布局的上下文,是由于交付機(jī)制的物理形狀和大小的結(jié)果,比如一張紙。在web上,反射的概念并不那么重要,但是網(wǎng)格可以用同樣的方式將內(nèi)容錨定到屏幕上。屏幕可以更流暢,作為一個(gè)設(shè)計(jì)師,也不可能知道用同樣的信心,屏幕的大小和形狀將被用來查看內(nèi)容。無論如何,比例和規(guī)模都是布局中的重要工具,因此使用網(wǎng)格來確定和執(zhí)行規(guī)則有助于定義所有重要的標(biāo)志,使讀者能夠訪問和理解內(nèi)容。

3、網(wǎng)格與黃金比例一起工作

一個(gè)確定的網(wǎng)格系統(tǒng)的整個(gè)概念是在設(shè)計(jì)的世界中一個(gè)相對(duì)較新的發(fā)明。自人類繪畫和寫作的早期開始,網(wǎng)格就已經(jīng)直觀地存在了,但直到最近才開始以學(xué)術(shù)的方式來考慮布局,因此它從未與其他好實(shí)踐布局規(guī)則隔離開來。其中一個(gè)交叉的例子就是黃金比例與電網(wǎng)的關(guān)系。

黃金比例(也稱為“黃金分割”)決定了元素最令人滿意的比例,并簡化為“三分法則”。當(dāng)與網(wǎng)格結(jié)合使用時(shí),這些簡單的大小、位置和比例規(guī)則可以幫助確保布局看起來是連貫的,同時(shí)也具有美觀的吸引力。這很重要,因?yàn)樗梢詭椭箖?nèi)容更容易訪問。請(qǐng)記住,網(wǎng)格是內(nèi)容背后的無形的粘合劑――在大多數(shù)情況下,它應(yīng)該對(duì)查看器是透明的。

4、網(wǎng)絡(luò)上有一個(gè)960網(wǎng)格系統(tǒng)

一旦你知道了建立一個(gè)網(wǎng)格系統(tǒng)的好處,那么web設(shè)計(jì)人員就可以使用網(wǎng)格了。為了使產(chǎn)品更實(shí)用,一些常見的尺寸已經(jīng)成為標(biāo)準(zhǔn)。最常見的是960px的網(wǎng)格系統(tǒng)。960px是一個(gè)很好的尺寸,因?yàn)樗泻芏嘁蛩?整數(shù)可以分為):1、2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160,等等。能夠以這種方式劃分網(wǎng)格為列的寬度提供了很大的靈活性,提供了一個(gè)多用途的、可重用的網(wǎng)格系統(tǒng)。不用說,許多設(shè)計(jì)師都在忙著把960px的網(wǎng)格打包成一組有用的CSS庫。一個(gè)這樣的例子可以在960年找到。gs,但如果你環(huán)顧四周,還有其他可用的。

5、網(wǎng)格提供了堅(jiān)實(shí)的基礎(chǔ)

正如我們所看到的,網(wǎng)格的存在主要是為了幫助確定布局中的位置和平衡。提供這種堅(jiān)實(shí)的基礎(chǔ)可以幫助確保內(nèi)容以易于理解的順序呈現(xiàn),但也可以通過將內(nèi)容從網(wǎng)格中分離出來來突出內(nèi)容的特定區(qū)域。觀眾會(huì)自然而然地識(shí)別出這些突破,并被吸引到他們面前,讓設(shè)計(jì)師有機(jī)會(huì)運(yùn)用布局的層次結(jié)構(gòu),并調(diào)整作品的意義。

6、網(wǎng)格與其他關(guān)鍵設(shè)計(jì)原則一起工作

不要忘記,網(wǎng)格只是一個(gè)工具,旁邊還有許多可以用來增強(qiáng)布局的基本原則。不要過于嚴(yán)格地使用網(wǎng)格――一些最好的設(shè)計(jì)打破了網(wǎng)格布局的所有規(guī)則,而且這樣做更成功。了解如何以及何時(shí)使用網(wǎng)格只能來自經(jīng)驗(yàn),所以要進(jìn)行實(shí)驗(yàn)。請(qǐng)參閱下面的設(shè)計(jì)理論下面的其他文章,以獲取其他有用的工具和原則,您可以使用這些工具來提高您的設(shè)計(jì)。

本文題目:設(shè)計(jì)師對(duì)網(wǎng)格理論的指導(dǎo)
文章路徑:http://www.bm7419.com/news8/48208.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、網(wǎng)站改版電子商務(wù)、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站移動(dòng)網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)