如何運用網(wǎng)格系統(tǒng)來設(shè)計
時間：2023-09-06 23:54:01 | 來源：網(wǎng)站運營
時間：2023-09-06 23:54:01 來源：網(wǎng)站運營
如何運用網(wǎng)格系統(tǒng)來設(shè)計：
網(wǎng)格系統(tǒng)的核心內(nèi)容
認(rèn)識網(wǎng)格的基本類型有哪些主結(jié)構(gòu)由大文本塊和邊距定義，這些塊將塊定位在格式中。它的二級結(jié)構(gòu)定義了作品集，腳注，運行標(biāo)??題和其他輔助信息的位置和比例。
手稿網(wǎng)格適用于廣泛且連續(xù)的文本塊。它們被用在書籍和長篇論文中，也許適合博客文章。它們不僅限于文字。圖像可用于填充塊。
更寬的邊距 - 導(dǎo)致更窄的文本塊，這有助于將注意力集中在文本上，并創(chuàng)造一種平靜和穩(wěn)定的感覺。
較窄的邊距 - 強制文本塊到格式的邊緣，因為兩者彼此靠近而產(chǎn)生張力。
右圖Villard de Honnecourt 畫的圖表是最早的網(wǎng)格原型，其中的比例布局十分和諧，直到現(xiàn)在也依舊應(yīng)用在書籍設(shè)計當(dāng)中。
- 欄式網(wǎng)格（APP設(shè)計中常用）
列可以相互依賴，彼此獨立，并由設(shè)計元素交叉。在頁面上組織信息時，這會帶來很大的靈活性。
您可以通過將信息塊放在不同的列中來分隔信息塊，但仍然顯示它們之間的連接。也許文本在一列中，圖像和標(biāo)題位于圖像所涉及的文本旁邊的不同列中。
如淘寶頁面（上圖）練習(xí)中的知道淘寶APP在一倍圖中是以邊距12px，水槽9px，12列，最小單位為3px網(wǎng)格進(jìn)行設(shè)計，以12列網(wǎng)絡(luò)可以在一排有1，2，3，4，5，6，6種排序方式，滿足淘寶復(fù)雜內(nèi)容的需求，能以12列網(wǎng)格布局多種板式。
特殊情況只要父級元素對齊柵格，子級可以不完全對齊列，參見
如何更好地使用柵格系統(tǒng)模塊化網(wǎng)格就像列網(wǎng)格，增加了由行標(biāo)記的水平分隔。列和行以及每個之間的排水溝創(chuàng)建了一個單元格或模塊矩陣。
模塊化網(wǎng)格適用于表格信息的設(shè)計，如圖表，表格，導(dǎo)航，時間表，當(dāng)然還有數(shù)據(jù)表。它們可以幫助標(biāo)準(zhǔn)化表格中的空間，并幫助將表格與任何周圍的文本或圖像集成。
分層網(wǎng)格通常在網(wǎng)絡(luò)上找到。它們更多地基于元素的直觀放置，這仍然符合信息的需要。
網(wǎng)格好處- 網(wǎng)格系統(tǒng)為設(shè)計師提供了版式的骨架，可以讓設(shè)計師在調(diào)整中找到方向，同時也讓頁面里的元素有了統(tǒng)一的規(guī)律和秩序。網(wǎng)格系統(tǒng)更多是為版面的秩序工具，并不是唯一，審美始終是設(shè)計中重要的環(huán)節(jié)。
- 提高設(shè)計水平3年
網(wǎng)格推薦的書籍及擴展閱讀- 《平面設(shè)計中的網(wǎng)格系統(tǒng)》
- 《秩序之美》
- 如何運用四種網(wǎng)格
- 網(wǎng)格的歷史
- 我理解的欄狀網(wǎng)格
- 谷歌的響應(yīng)式網(wǎng)格布局
運用網(wǎng)格的插件- ps-guide
- sketch-flavor
- ketch自帶設(shè)置網(wǎng)格工具
優(yōu)秀的APP推薦- 29cm
- 淘寶（12欄布局，最小單位3px，）
- jtbc now
- naver
- airbnb
- Facebook
- ins
- ssg
網(wǎng)格常用比例黃金比例0.618
4:6
6:9
8:13
12:18
德國工業(yè)標(biāo)準(zhǔn)比例1.414
3:4
5:7
7:10
10:14
網(wǎng)格運用的邏輯是什么
快速確定頁面的欄式網(wǎng)格的方法確定頁面的左右邊距x，中間的間隙即水槽y距（如果頁面沒有明顯的色塊或卡片布局，可以找其他有明顯卡片布局的頁面），然后用4，6，8，12列去推算改網(wǎng)格有多少列。在非375比例尺寸的手機可能會有些偏差。然后推算頁面的最小單位，然后查看頁面之間的布局是如何運用間距節(jié)奏。
以網(wǎng)格化為核心的方法，可以試試以下的的作業(yè)練習(xí)。網(wǎng)格系統(tǒng)更好的幫助設(shè)計師將頁面元素之間達(dá)到和諧的視覺觀感
作業(yè)1：做一個一排一，一排二，一排三，一排四的商品首頁頁面要點
通過12個網(wǎng)格進(jìn)行對頁面布局排版
一排一，用12個柵格
一排二，每個占6個柵格
一排三，每個占4個柵格
一排四，每個占3個柵格
作業(yè)2：對一排二，一排三，一排四，一排五，一排六的布局各做個Tab 頁面要點
通過網(wǎng)格布線整理出每個圖標(biāo)所占的位置
難點
一排五
可以對網(wǎng)格進(jìn)行10列柵格分割，每個圖標(biāo)占2個柵格
一排六
可以對網(wǎng)格進(jìn)行12列柵格分割，每個圖標(biāo)占2個柵格
作業(yè)3：做一個一排二，一排三的消息頁面模仿或創(chuàng)作淘寶的消息頁面要點
對一排三可以讓每個內(nèi)容占四個柵格
對于消息的一排二布局，頭像可以占兩個柵格，文字信息占10個
作業(yè)4：做頂部tab和底部tab通過網(wǎng)格布局，如淘寶商品詳情圖要點（12欄網(wǎng)格或8欄網(wǎng)格）
對頂部tab左右靠齊柵格，一個tab的圖標(biāo)可以占一個或者兩個柵格
12欄網(wǎng)格中，對于底部tab按鈕，左邊的每個icon可占2個柵格，右邊的兩個按鈕可各占3個柵格，共六格。
8欄網(wǎng)絡(luò)中，對于底部tab按鈕，左邊的每個icon可占1個柵格，右邊的兩個按鈕可各占2個柵格，共4格。
作業(yè)5：設(shè)計一個時尚潮流海報，內(nèi)容不限，可臨摹或者原創(chuàng)，內(nèi)容形式不限，每個設(shè)計元素需要把欄式網(wǎng)格運用進(jìn)去要點
在手機海報當(dāng)中布局網(wǎng)格不需要設(shè)置水槽，直接設(shè)置6欄或12欄
作業(yè)6：定義一套pp網(wǎng)格系統(tǒng)（最小原子、間距等）和一個西餐廳菜單定好App產(chǎn)品的網(wǎng)格系統(tǒng)（最小原子，運用幾欄，每欄數(shù)值定義）確定好骨架，需要有設(shè)計思考，為什么這么定義，以及西餐廳菜單靈感收集
網(wǎng)格系統(tǒng)的疑問和啟發(fā)網(wǎng)格系統(tǒng)可以應(yīng)用到哪些地方書籍，雜志，產(chǎn)品包裝，報紙等印刷內(nèi)容排版
網(wǎng)頁，App界面，硬件顯示器，車載UI布局排版
海報平面設(shè)計
網(wǎng)格應(yīng)如何應(yīng)用到設(shè)計當(dāng)中網(wǎng)格需要考慮所有頁面的場景，即是所有頁面場景都能應(yīng)用該網(wǎng)格系統(tǒng)。需要尋找一個通用的網(wǎng)格去滿足所有場景。
- 定義最小原子，一般是3，4，5間距（1x圖）。
- 定義大概5種間距（XS，S，M，L，XL），避免太多間距選擇。
- 用最小原子定義間距和網(wǎng)格，定義元件尺寸都是最小單元格的倍數(shù)。
- 考慮到最極限的文字或間距布局，定義展示最大值。
- 保證所有頁面有一個統(tǒng)一的規(guī)律當(dāng)中。
特殊技巧6欄和12欄其實是可以相互切換的，間距一致，水槽一致，包括10欄，也同屬一個網(wǎng)格系統(tǒng)。
網(wǎng)格運用的局限網(wǎng)格是解決有規(guī)律頁面的排版局部問題，如果過于復(fù)雜的情況是很難遵循網(wǎng)格系統(tǒng)，如運營活動。
實際開發(fā)中發(fā)現(xiàn)并沒有運用到網(wǎng)格的原因- 在開發(fā)過程前端沒有按設(shè)計稿進(jìn)行
- 產(chǎn)品經(jīng)理的強制要求導(dǎo)致頁面布局不一
網(wǎng)格在網(wǎng)頁上如何響應(yīng)落地的在不同尺寸頁面有對應(yīng)的欄式網(wǎng)格，一般情況有兩種響應(yīng)式布局
1、固定網(wǎng)絡(luò)
當(dāng)網(wǎng)頁縮小到臨界值時會突然改變欄式網(wǎng)格布局，頁面內(nèi)容也跟著突然變化。
2、流動網(wǎng)絡(luò)
網(wǎng)頁的尺寸縮小過程中，欄式網(wǎng)格會隨著變化尺寸，列寬，水槽，邊距也跟著變化。頁面內(nèi)容也隨之變化，完全適配不同尺寸的顯示器。
在應(yīng)用網(wǎng)格的時候，我們?nèi)绾握_運用網(wǎng)格去整理頁面，讓頁面合理。利用格式塔原理布局
網(wǎng)格應(yīng)用的思維模型是什么
最小原子理論原子：頁面中最小的設(shè)計單位
分子：設(shè)計中的一個組件
組織：通過不同分子形成一個具有功能性的組織
模塊：通過不同且能協(xié)同的組織構(gòu)架的功能模塊，如選擇模塊，消息模塊，錯誤模塊等
頁面：將實際內(nèi)容套件到原子，分子，組織，模塊當(dāng)中，形成一個完整性頁面。
網(wǎng)格化管理思維瓷磚規(guī)范格式塔原理格式塔是作為心理學(xué)術(shù)語的格式塔具有兩種含義：一指事物的一般屬性，即形式；一指事物的個別實體，即分離的整體，形式僅為其屬性之一。
它可以幫助我們，梳理界面的信息結(jié)構(gòu)、層級關(guān)系，提升界面的可讀性，主要有幾個特性，即相似性、接近性、封閉性、連續(xù)性、主體與背景關(guān)系、均衡原理。
關(guān)鍵詞：系統(tǒng),設(shè)計,運用
在線咨詢