火星網(wǎng)校
「網(wǎng)格系統(tǒng)」設(shè)計師如何讓設(shè)計作品更有說服力
發(fā)布時間：2024-03-12 10:19:03 瀏覽量：243次
作者：Clippp
大家好，這里是設(shè)計夾，今天為大家分享的是「網(wǎng)格系統(tǒng)」。
網(wǎng)格系統(tǒng)在設(shè)計前期作為確定界面布局和規(guī)范的重要方法，經(jīng)常在UI/UX設(shè)計中用到。
除了能夠?qū)R和組織界面中的設(shè)計元素外，使用網(wǎng)格系統(tǒng)還有助于改善視覺層次，讓界面中的信息層級關(guān)系更加合理、清晰，從而最大限度地減少用戶的認知負擔，幫助用戶快速理解內(nèi)容。
?通過了解網(wǎng)格系統(tǒng)的組成、網(wǎng)格系統(tǒng)的創(chuàng)建方法和使用準則等內(nèi)容，系統(tǒng)了解網(wǎng)格系統(tǒng)在設(shè)計中的應(yīng)用，讓我們的設(shè)計有理有據(jù)，更具說服力！
一、網(wǎng)格系統(tǒng)的組成
在深入了解網(wǎng)格的類型和使用準則前，讓我們先來了解一下網(wǎng)格系統(tǒng)中涉及到的一些基本概念，比如列數(shù)、內(nèi)邊距、外邊距等等。
1、列
列(Column)是網(wǎng)格的基礎(chǔ)，用來表示內(nèi)容放置的區(qū)域。每一列的寬度以百分比而不是固定的數(shù)值來衡量，這樣面對不同的屏幕尺寸，可以更靈活地進行設(shè)計。
日常設(shè)計中，最常使用的是12列等寬的網(wǎng)格系統(tǒng)，適用于大多數(shù)的頁面和布局設(shè)計中。
2、內(nèi)間距
內(nèi)間距(Gutter/Padding)是指每列之間的距離，也被叫做水槽。內(nèi)間距能為頁面提供呼吸空間，避免內(nèi)容之間過于擁擠。
3、外邊距
邊距(Margins)是列與邊框之間的距離，邊距繞過內(nèi)容有上、下、左、右四個方向，在設(shè)計中我們可以針對每一側(cè)設(shè)定和更改邊距。
4、字段或模塊
字段或模塊是行和列的交集。這些模塊是頁面的基礎(chǔ)，所有設(shè)計元素都將適合網(wǎng)格中矩形卡片創(chuàng)建的這些空間單元。
5、界面設(shè)計與網(wǎng)格
如果說網(wǎng)格在過去對于印刷必不可少，那么今天網(wǎng)格在數(shù)字世界中仍是不可或缺的。
網(wǎng)格成為開發(fā)數(shù)字產(chǎn)品的關(guān)鍵工具，為在所有設(shè)備上提供最佳的用戶體驗。因此，無論屏幕大小如何，設(shè)計師都必須能夠在每個屏幕上通過最佳的方式組織內(nèi)容。
二、如何在設(shè)計中使用網(wǎng)格系統(tǒng)？
網(wǎng)格是具有列、內(nèi)間距和外邊距的結(jié)構(gòu)系統(tǒng)，其目的是幫助設(shè)計師組織界面的內(nèi)容。
內(nèi)間距的距離越窄，越會向用戶傳達「這些內(nèi)容屬于同一組」的感覺。
同理，內(nèi)間距越寬，看起來越像是不同類型的內(nèi)容。
需要注意的是，內(nèi)間距的距離不要太寬，或者比每一列的寬度還寬，容易導致內(nèi)容之間的留白過大，造成視覺瀏覽上的不連貫。
此外，外邊距的間距遵循與內(nèi)間距相同的規(guī)則?？梢造`活調(diào)整外邊距，以便在內(nèi)容和屏幕之間留出合適的間隔。
和內(nèi)間距一樣，屏幕中的外邊距也不能太寬，這樣會壓縮頁面中內(nèi)容的展示空間，會讓頁面看起來很局促。
三、使用網(wǎng)格設(shè)計的四條準則
網(wǎng)格的使用看起來很直觀，但在UX或UI項目中使用網(wǎng)格系統(tǒng)仍有一些需要注意的規(guī)則。
1、將元素集中在每一列中
上面說到，在設(shè)計中常用到的是12列網(wǎng)格系統(tǒng)。那么12列網(wǎng)格為什么被廣泛使用呢？主要原因在于12列網(wǎng)格更方便擴展不同的布局形式。
▲ 12列網(wǎng)格可以一行排列兩個內(nèi)容，各占6列網(wǎng)格；一行排列三個內(nèi)容，各站四個網(wǎng)格；一行排列四個內(nèi)容，各占3列網(wǎng)格；一行排列六個內(nèi)容，各占2列網(wǎng)格。
基本上，常用到的頁面布局形式在12列網(wǎng)格中都可以實現(xiàn)。
▲ 在每個內(nèi)容之間留出足夠的內(nèi)邊距。這里需要注意的是，內(nèi)容的兩側(cè)要與每一列的邊緣重合，而不是與內(nèi)邊距重合。
▲ 當內(nèi)容居中顯示時，要始終在邊緣留出一點空間，防止頁面被內(nèi)容填充的過于擁擠。
2、不要將列數(shù)作為內(nèi)容填充
在網(wǎng)格系統(tǒng)下，設(shè)計應(yīng)該填充整個內(nèi)容的寬度，這樣會讓界面看起來更規(guī)范。
不要讓左右兩列沒有填充內(nèi)容，讓列數(shù)作為填充，這樣會導致頁面的外邊距不統(tǒng)一，增加后期的開發(fā)成本。
3、可以嘗試脫離網(wǎng)格
在設(shè)計中，使用從網(wǎng)格中溢出的圖像或元素也是可以的。
例如我們想填充一個全尺寸的背景色或者圖像，只需將圖像拉到網(wǎng)格之外就可以。在網(wǎng)格和邊距的示意下，開發(fā)人員也能夠快速理解界面的尺寸信息。
4、注意內(nèi)容之間的間距
在網(wǎng)格上放置不同的元素時，確保元素之間的左右間距、上下間距都是一致的，這樣會讓整個界面看起來更規(guī)范。
最后
除了能夠改善設(shè)計、減輕用戶認知負擔外，網(wǎng)格系統(tǒng)還能提升設(shè)計效率。有了網(wǎng)格我們可以快速衡量元素的間距、邊距的精度，簡化設(shè)計過程。
另外，在規(guī)范的網(wǎng)格系統(tǒng)中，界面布局或內(nèi)容上的修改也會變得更容易。
慢慢來比較快，希望對你有幫助！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學習UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學UI設(shè)計要多久？培訓完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓班的學費價格以及學習內(nèi)容。
最新文章
