它在我的理解就像一個(gè)膠水一樣，把內(nèi)容和設(shè)計(jì)結(jié)合起來(lái)，內(nèi)容有很多種形式，各不相同，但是通過(guò)網(wǎng)格系統(tǒng)我們能將這些隱形的內(nèi)容連接在一起，網(wǎng)格是設(shè)計(jì)中很重要的一部分。
那么什么是網(wǎng)格，網(wǎng)格的幾種類(lèi)型，以及移動(dòng)端如何使用呢？
什么是網(wǎng)格？
網(wǎng)格是一種對(duì)齊工具，它由一些橫向和縱向的線(xiàn)組成，主要用到對(duì)齊圖形，文字以及圖片，主要建立這些內(nèi)容的秩序和規(guī)則，最終保證設(shè)計(jì)一致性的一個(gè)基礎(chǔ)框架。這些線(xiàn)也只有設(shè)計(jì)師看的見(jiàn)，其實(shí)網(wǎng)格的運(yùn)用在生活中很常見(jiàn)。
很多東西都是由于網(wǎng)格組成的，比如這個(gè)架子，每個(gè)格子放不同的刀具
圖書(shū)館的書(shū)架，都是由若干網(wǎng)格組成，通過(guò)有序的格子來(lái)放不同的內(nèi)容
城市建設(shè)，都是建筑師使用網(wǎng)格來(lái)布局整個(gè)城市的規(guī)劃
wrod表格，通過(guò)有序的形式來(lái)布局內(nèi)容，網(wǎng)格其實(shí)無(wú)處不在
常見(jiàn)的數(shù)碼產(chǎn)品宣傳頁(yè)，還有優(yōu)衣庫(kù)的衣服貨架等等，可以說(shuō)網(wǎng)格在我們身邊無(wú)處不在，我們需要了解和學(xué)習(xí)網(wǎng)格。
02/
網(wǎng)格的發(fā)展歷史
早在文藝復(fù)興時(shí)期，那時(shí)候繪畫(huà)對(duì)網(wǎng)格發(fā)展有了很大影響，藝術(shù)家們?yōu)榱藙?chuàng)造一個(gè)完美的幾何圖形，從而產(chǎn)生這種對(duì)稱(chēng)的畫(huà)布布局，上圖就是一個(gè)典型的案例，能代表那個(gè)時(shí)候畫(huà)家運(yùn)用網(wǎng)格去畫(huà)畫(huà)。
包括那個(gè)時(shí)候的書(shū)籍，從印刷開(kāi)始的，大概在15世紀(jì)時(shí)候，在每一頁(yè)書(shū)中間有一一個(gè)對(duì)齊的空間，保證每一個(gè)的內(nèi)容的完整性。
而后隨著工業(yè)時(shí)代帶來(lái)，各種報(bào)紙海報(bào)，雜志，廣告宣傳頁(yè)的興起，使得對(duì)印刷要求很大，設(shè)計(jì)師就必須解決不同人群閱讀內(nèi)容的自然視覺(jué)動(dòng)線(xiàn)，需要讓讀者很好的去閱讀報(bào)紙和雜志內(nèi)容。
瑞士設(shè)計(jì)的影響，在第一次世界大戰(zhàn)期間，保持中立的瑞士成為歐洲各地藝術(shù)家聚會(huì)的地方，由于印刷出版必須滿(mǎn)足多國(guó)家的語(yǔ)言，設(shè)計(jì)師需要一套網(wǎng)格系統(tǒng)來(lái)統(tǒng)一實(shí)現(xiàn)這個(gè)目標(biāo)，網(wǎng)格系統(tǒng)也是發(fā)端于瑞士的客觀排版設(shè)計(jì)(Objective Typography and Design)運(yùn)動(dòng)的一部分，這就是《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》。該書(shū)自問(wèn)世以來(lái)暢銷(xiāo)至今，實(shí)屬情理之中。
只要不嫌麻煩，任何研究網(wǎng)格的人都會(huì)發(fā)現(xiàn)，在網(wǎng)格系統(tǒng)的幫助下，能更快地解決設(shè)計(jì)中的問(wèn)題，并讓設(shè)計(jì)更具功能性、邏輯性和視覺(jué)美感。
03/
網(wǎng)格的基本要素
前面說(shuō)了網(wǎng)格的基礎(chǔ)以及網(wǎng)格的歷史，那么網(wǎng)格有哪些基礎(chǔ)元素呢？網(wǎng)格主要由單元欄，欄間距(也有叫水槽)，邊距組成。
▲單元格，主要是設(shè)計(jì)中用來(lái)填充內(nèi)容的
欄間距，主要在設(shè)計(jì)中用來(lái)區(qū)隔內(nèi)容和內(nèi)容
05/
網(wǎng)格的幾種類(lèi)型
1. 手稿型網(wǎng)格
手稿型網(wǎng)格：也是最簡(jiǎn)單的網(wǎng)格類(lèi)型，常用在書(shū)籍上面比較多，它本質(zhì)就是一個(gè)大型矩形框，內(nèi)容占據(jù)了大多數(shù)空間。
適合場(chǎng)景：傳統(tǒng)書(shū)籍雜志，手稿網(wǎng)格適合于都是文字的設(shè)計(jì)，但是也不局限于文字，圖片也可以當(dāng)內(nèi)容，在互聯(lián)網(wǎng)設(shè)計(jì)中，新聞?lì)惍a(chǎn)品，偏內(nèi)容閱讀比較適合手稿型網(wǎng)格。
2. 多列網(wǎng)格
多列網(wǎng)格：顧名思義，多列網(wǎng)格有幾列，大家可以這么記住它，你創(chuàng)造的列越多，網(wǎng)格就越靈活，多列網(wǎng)格對(duì)于很多復(fù)雜的，不同的內(nèi)容布局非常有用，使用多列網(wǎng)格，可以為不同內(nèi)容創(chuàng)建趨勢(shì)。
適用場(chǎng)景：絕大數(shù)產(chǎn)品，網(wǎng)頁(yè)，平面設(shè)計(jì)，這個(gè)多列網(wǎng)格也是現(xiàn)在運(yùn)用比較廣泛的，很多產(chǎn)品都運(yùn)用到。
3. 模塊化網(wǎng)格
模塊化網(wǎng)格：就是網(wǎng)格垂直和縱向拆分成多個(gè)模塊的網(wǎng)格，形成井字形模塊，每一個(gè)小模塊形成一個(gè)單元格，當(dāng)我們需要面對(duì)比較復(fù)雜布局，模塊化網(wǎng)格為頁(yè)面提供了靈活的內(nèi)容格式。
適用場(chǎng)景：報(bào)紙，雜志，電商設(shè)計(jì)，表單之類(lèi)的場(chǎng)景。
4. 基線(xiàn)網(wǎng)格
基線(xiàn)網(wǎng)格：是設(shè)計(jì)中垂直間距的基礎(chǔ)結(jié)構(gòu)，它主要用于保證頁(yè)面水平對(duì)齊的層次結(jié)構(gòu)。
適用場(chǎng)景：文本對(duì)齊時(shí)候，圖片展現(xiàn)類(lèi)似網(wǎng)站。
06/
運(yùn)用網(wǎng)格的好處
在移動(dòng)產(chǎn)品設(shè)計(jì)中，人們使用的設(shè)備越來(lái)越多，從智能手表到手機(jī)到iPad到PC，屏幕越來(lái)越多，設(shè)計(jì)師必須創(chuàng)建一套網(wǎng)格系統(tǒng)來(lái)組織內(nèi)容，使得這套網(wǎng)格細(xì)節(jié)能適應(yīng)各種場(chǎng)景和分辨率。
更清晰的一致性：網(wǎng)格是設(shè)計(jì)的基礎(chǔ)，比如頁(yè)面節(jié)奏，空白，都說(shuō)影響設(shè)計(jì)很重要的因素，網(wǎng)格系統(tǒng)能，保證這些元素的一致性，有效的網(wǎng)格能引導(dǎo)我們的眼睛去閱讀，使我們更容易掃描屏幕上面內(nèi)容，同時(shí)一致性也能幫助我們了解內(nèi)容后采取下一步的行動(dòng)。
提升閱讀性：人們大腦在不到一秒時(shí)間做出判斷，設(shè)計(jì)不合理，排版混亂的商品顯得不那么值得買(mǎi)，好的排版能強(qiáng)化視覺(jué)層次結(jié)構(gòu)。
團(tuán)隊(duì)協(xié)作：網(wǎng)格系統(tǒng)本身就能保證團(tuán)隊(duì)設(shè)計(jì)對(duì)齊一致性，好的網(wǎng)格系統(tǒng)能解決頁(yè)面中骨架統(tǒng)一性，減少在設(shè)計(jì)間距，留白上的不一致。
最后
關(guān)于網(wǎng)格系統(tǒng)我們會(huì)分為兩部分講解，下篇和大家?guī)?lái)網(wǎng)格如何運(yùn)用，定義多少列，內(nèi)容壓住水槽怎么辦，怎么設(shè)置網(wǎng)格的參數(shù)，下篇見(jiàn)。
#專(zhuān)欄作家#
Sky，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys），設(shè)計(jì)交流可加微信：hellosky678，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。原支付寶體驗(yàn)設(shè)計(jì)專(zhuān)家，阿里巴巴天貓設(shè)計(jì)專(zhuān)家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。
全部評(píng)論