激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

墨言教育分享丨4種常見的UI網(wǎng)格系統(tǒng)

發(fā)布時(shí)間：2024-03-12 09:40:58 瀏覽量：160次

界面設(shè)計(jì)中的網(wǎng)格是一種對(duì)齊工具，它由一些橫向和縱向的線組成。網(wǎng)格可以幫助設(shè)計(jì)師對(duì)齊圖形、文字和圖片，建立這些內(nèi)容的秩序和規(guī)則，最終保證設(shè)計(jì)一致性。網(wǎng)格不僅可以幫助規(guī)劃內(nèi)容和保持頁面一致性，還可以幫助設(shè)計(jì)師規(guī)劃頁面的留白，留出足夠的負(fù)空間，使得頁面具有呼吸感。在界面設(shè)計(jì)中，網(wǎng)格的類型有基線網(wǎng)格、手稿型網(wǎng)格和模塊化網(wǎng)格等。

看一下這個(gè)網(wǎng)格是什么？

列寬

列寬是網(wǎng)格系統(tǒng)中的寬度，用來幫助我們定義內(nèi)容寬度和布局的垂直部分，在界面設(shè)計(jì)中，網(wǎng)格通常由多個(gè)列組成，每個(gè)列都有不同的寬度和比例，以便更好地展示和組織頁面內(nèi)容。

在網(wǎng)格系統(tǒng)中，列寬通常以百分比或像素為單位進(jìn)行定義。設(shè)計(jì)師可以根據(jù)需要調(diào)整每個(gè)列的寬度，以便更好地適應(yīng)不同的屏幕尺寸和設(shè)備類型。通過使用網(wǎng)格系統(tǒng)，可以更好地控制頁面布局和間距，從而使頁面更加整齊、清晰易讀。同時(shí)，網(wǎng)格系統(tǒng)還可以幫助設(shè)計(jì)師提高工作效率和減少出錯(cuò)率。

水槽

是指列與列之間的空白區(qū)域，也稱為外邊距或外水槽。水槽可以幫助控制頁面布局和間距，使得頁面更加整齊、清晰易讀。同時(shí)，水槽還可以用來設(shè)置內(nèi)容的對(duì)齊方式和填充。在某些布局中，設(shè)計(jì)師可以使用水槽來控制列之間的間距和平衡布局。

在網(wǎng)格系統(tǒng)中，水槽的寬度通常與列寬相關(guān)。有些系統(tǒng)會(huì)隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。水槽可以用來容納內(nèi)容的裝飾元素，如邊框、背景色、圖片等，同時(shí)也可以用來分隔內(nèi)容區(qū)域和頁面的其他區(qū)域。

邊距

在網(wǎng)格系統(tǒng)中，邊距是指頁面內(nèi)容與瀏覽器窗口邊緣之間的空白區(qū)域，也稱為外邊距或外部水槽。邊距可以幫助控制頁面布局和間距，使得頁面更加整齊、清晰易讀。通過調(diào)整邊距大小，可以更好地控制頁面內(nèi)容與瀏覽器窗口之間的距離，從而更好地適應(yīng)不同的屏幕尺寸和設(shè)備類型。

在網(wǎng)格系統(tǒng)中，邊距通常以像素、百分比或自動(dòng)等方式進(jìn)行設(shè)置。設(shè)計(jì)師可以根據(jù)需要調(diào)整邊距大小，以便更好地適應(yīng)不同的屏幕尺寸和設(shè)備類型。同時(shí)，邊距還可以用來設(shè)置內(nèi)容的對(duì)齊方式和填充。在某些布局中，設(shè)計(jì)師可以使用邊距來控制內(nèi)容區(qū)域和頁面的其他區(qū)域之間的間距。

分別在 Web、平板和移動(dòng)屏幕上的 12 列、8 列和 4 列網(wǎng)格（Figma）

現(xiàn)在，一般來說，網(wǎng)站上的網(wǎng)格有 12 列、24列，平板電腦上有 8 列、12列，而手機(jī)上有 4 列、6列，但當(dāng)然可以根據(jù)要求和設(shè)計(jì)師的不同而有所不同。設(shè)計(jì)中沒有什么是固定的??！

不同的UI網(wǎng)格系統(tǒng)示例

1. 移動(dòng)界面4列柵格

列網(wǎng)格布局中的低保真線框 (Figma)

網(wǎng)格系統(tǒng)的設(shè)定（使用軟件：Figma)

2.基線網(wǎng)格

基線網(wǎng)格是排版中常用的一種對(duì)齊方式，它可以使多個(gè)段落根據(jù)基線進(jìn)行對(duì)齊?；€網(wǎng)格能夠覆蓋整個(gè)跨頁，但是不能為主頁指定網(wǎng)格。基線網(wǎng)格與Word中的網(wǎng)格線基本相似，都是用來對(duì)齊文本的輔助工具。在排版時(shí)，設(shè)計(jì)師可以根據(jù)需要將文本對(duì)齊到基線網(wǎng)格，以便更好地控制文本的間距和布局。

Figma 中的基線網(wǎng)格（左），基線網(wǎng)格中的書頁（右）

在 Figma中設(shè)置基線網(wǎng)格

設(shè)置高度為 8 px 的基線網(wǎng)格 (Figma)

3.模塊化網(wǎng)格

模塊化網(wǎng)格是一種布局，它將內(nèi)容分成單獨(dú)的模塊，這些模塊位于網(wǎng)格中。這種布局與傳統(tǒng)的網(wǎng)格布局不同，因?yàn)槊總€(gè)模塊的大小和形狀都是相同的，從而可以創(chuàng)建一個(gè)完美的網(wǎng)格設(shè)計(jì)。這種布局通常被稱為完美的網(wǎng)格設(shè)計(jì)。

在模塊化網(wǎng)格布局中，每個(gè)模塊將整齊地堆疊在另一個(gè)模塊的頂部，并水平地坐在另一個(gè)模塊旁邊，以創(chuàng)建一致的設(shè)計(jì)模式。這種布局可以帶來許多優(yōu)點(diǎn)，包括響應(yīng)迅速、產(chǎn)品頁面設(shè)計(jì)、易于使用等。

值得注意的是，在使用模塊化網(wǎng)格布局時(shí)，應(yīng)該注意網(wǎng)格的大小、每個(gè)模塊的大小以及負(fù)空間的使用，以確保設(shè)計(jì)的一致性和美觀性。此外，設(shè)計(jì)師應(yīng)該利用創(chuàng)造性的技巧來增加模塊化網(wǎng)格的視覺趣味性，以吸引用戶的注意力。

模塊化網(wǎng)格（Figma）

靈活的模塊化網(wǎng)格

排列在網(wǎng)格上的內(nèi)容（左），移除網(wǎng)格后的內(nèi)容（右）（Figma）

如您所見，我一次使用 2 或 3 個(gè)模塊的組合來為此頁面創(chuàng)建“卡片”。

現(xiàn)在，在 Figma 中設(shè)置模塊化網(wǎng)格

在 figma 中設(shè)置模塊化網(wǎng)格

落實(shí)在產(chǎn)品表現(xiàn)上：

4.分層網(wǎng)格

分層網(wǎng)格是一種由多個(gè)網(wǎng)格組成的布局。這種布局通常用于創(chuàng)建具有不同內(nèi)容和功能的多個(gè)區(qū)域，從而可以更好地組織頁面內(nèi)容。

分層網(wǎng)格布局通常由多個(gè)不同的網(wǎng)格組成，每個(gè)網(wǎng)格都有不同的列數(shù)和列寬。這些網(wǎng)格可以水平排列或垂直排列，以便更好地組織頁面內(nèi)容。通過使用分層網(wǎng)格布局，可以更好地控制頁面布局和內(nèi)容，從而創(chuàng)建更加有序和易于使用的界面。原理是這樣，但是我們?cè)趯?shí)際工作當(dāng)中，沒必要花費(fèi)大力氣去做這種復(fù)雜的分層網(wǎng)格，自動(dòng)布局可以完全替代這種分層網(wǎng)格。

但是作為一個(gè)網(wǎng)格的種類，分層網(wǎng)格給我們的啟發(fā)就是模塊有大小，可以根據(jù)設(shè)計(jì)需求進(jìn)行調(diào)整，根據(jù)你自己的喜好去調(diào)整。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定