深入精通能讓你提升效率愛上做設計的網格(上)

來源:中國設計在線    時間:2020-04-24    站內收藏

它在我的理解就像一個膠水一樣,把內容和設計結合起來,內容有很多種形式,各不相同,但是通過網格系統我們能將這些隱形的內容連接在一起,網格是設計中很重要的一部分。

那么什么是網格,網格的幾種類型,以及移動端如何使用呢?

什么是網格?

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

網格是一種對齊工具,它由一些橫向和縱向的線組成,主要用到對齊圖形,文字以及圖片,主要建立這些內容的秩序和規則,最終保證設計一致性的一個基礎框架。這些線也只有設計師看的見,其實網格的運用在生活中很常見。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

很多東西都是由于網格組成的,比如這個架子,每個格子放不同的刀具

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

圖書館的書架,都是由若干網格組成,通過有序的格子來放不同的內容

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

城市建設,都是建筑師使用網格來布局整個城市的規劃

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

wrod表格,通過有序的形式來布局內容,網格其實無處不在

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

常見的數碼產品宣傳頁,還有優衣庫的衣服貨架等等,可以說網格在我們身邊無處不在,我們需要了解和學習網格。

網格的發展歷史

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

早在文藝復興時期,那時候繪畫對網格發展有了很大影響,藝術家們為了創造一個完美的幾何圖形,從而產生這種對稱的畫布布局,上圖就是一個典型的案例,能代表那個時候畫家運用網格去畫畫。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

包括那個時候的書籍,從印刷開始的,大概在15世紀時候,在每一頁書中間有一一個對齊的空間,保證每一個的內容的完整性。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

而后隨著工業時代帶來,各種報紙海報,雜志,廣告宣傳頁的興起,使得對印刷要求很大,設計師就必須解決不同人群閱讀內容的自然視覺動線,需要讓讀者很好的去閱讀報紙和雜志內容。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

瑞士設計的影響,在第一次世界大戰期間,保持中立的瑞士成為歐洲各地藝術家聚會的地方,由于印刷出版必須滿足多國家的語言,設計師需要一套網格系統來統一實現這個目標,網格系統也是發端于瑞士的客觀排版設計(Objective Typography and Design)運動的一部分,這就是平面設計中的網格系統》。該書自問世以來暢銷至今,實屬情理之中。

只要不嫌麻煩,任何研究網格的人都會發現,在網格系統的幫助下,能更快地解決設計中的問題,并讓設計更具功能性、邏輯性和視覺美感。

網格的基本要素

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

前面說了網格的基礎以及網格的歷史,那么網格有哪些基礎元素呢?網格主要由單元欄,欄間距(也有叫水槽),邊距組成。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

單元格,主要是設計中用來填充內容的

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

欄間距,主要在設計中用來區隔內容和內容

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

網格的幾種類型

1. 手稿型網格

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

手稿型網格:也是最簡單的網格類型,常用在書籍上面比較多,它本質就是一個大型矩形框,內容占據了大多數空間。

適合場景:傳統書籍雜志,手稿網格適合于都是文字的設計,但是也不局限于文字,圖片也可以當內容,在互聯網設計中,新聞類產品,偏內容閱讀比較適合手稿型網格。

2. 多列網格

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

多列網格:顧名思義,多列網格有幾列,大家可以這么記住它,你創造的列越多,網格就越靈活,多列網格對于很多復雜的,不同的內容布局非常有用,使用多列網格,可以為不同內容創建趨勢。

適用場景:絕大數產品,網頁,平面設計,這個多列網格也是現在運用比較廣泛的,很多產品都運用到。

3. 模塊化網格

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

模塊化網格:就是網格垂直和縱向拆分成多個模塊的網格,形成井字形模塊,每一個小模塊形成一個單元格,當我們需要面對比較復雜布局,模塊化網格為頁面提供了靈活的內容格式。

適用場景:報紙,雜志,電商設計,表單之類的場景。

4. 基線網格

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

基線網格:是設計中垂直間距的基礎結構,它主要用于保證頁面水平對齊的層次結構。

適用場景:文本對齊時候,圖片展現類似網站。

運用網格的好處

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

在移動產品設計中,人們使用的設備越來越多,從智能手表到手機到iPad到PC,屏幕越來越多,設計師必須創建一套網格系統來組織內容,使得這套網格細節能適應各種場景和分辨率。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

更清晰的一致性:網格是設計的基礎,比如頁面節奏,空白,都說影響設計很重要的因素,網格系統能,保證這些元素的一致性,有效的網格能引導我們的眼睛去閱讀,使我們更容易掃描屏幕上面內容,同時一致性也能幫助我們了解內容后采取下一步的行動。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

提升閱讀性:人們大腦在不到一秒時間做出判斷,設計不合理,排版混亂的商品顯得不那么值得買,好的排版能強化視覺層次結構。

好用到讓<a href=http://www.1631283.live/hangye/designer/ target=_blank class=infotextkey>設計師</a>尖叫的1個設計方法

團隊協作:網格系統本身就能保證團隊設計對齊一致性,好的網格系統能解決頁面中骨架統一性,減少在設計間距,留白上的不一致。

最后

關于網格系統我們會分為兩部分講解,下篇和大家帶來網格如何運用,定義多少列,內容壓住水槽怎么辦,怎么設置網格的參數,下篇見。

#專欄作家#

Sky,微信公眾號:我們的設計日記(ID:helloskys),設計交流可加微信:hellosky678,人人都是產品經理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯網公司設計經驗,對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。


本文來源:中國設計在線

上一篇:返回列表
關鍵詞: 設計 網格 
編輯:cdo
相關閱讀
    正在加載...
安卓有什么赚钱app 今天山西快乐十分开奖 上海快三走势图今天 山东体彩十一选五走势图 腾讯分分彩输了80万 辽宁十一选五分布走势图 江苏11选5一定牛遗漏数据 福建11选5选号技巧 安徽25选5开奖查询 河南快3开奖结果100期 宁夏11选五开奖结果组三