2022-6-7 ui設(shè)計(jì)分享達(dá)人
本文主要介紹等距柵格，旨在為有需要的同學(xué)解析柵格，從概念、結(jié)構(gòu)和設(shè)計(jì)上更有效、自信地解決柵格問(wèn)題，其實(shí)主要還是自己對(duì)柵格體系的查缺補(bǔ)漏。大家可以對(duì)照目錄跳著閱讀。
事實(shí)上，絕大多數(shù)的設(shè)計(jì)師都知道柵格很重要，簡(jiǎn)單點(diǎn)就是等分運(yùn)用在內(nèi)容層。當(dāng)我們仔細(xì)研究柵格相關(guān)原理時(shí)，只要不嫌麻煩，就會(huì)發(fā)現(xiàn)在柵格系統(tǒng)下能更快解決設(shè)計(jì)問(wèn)題，并讓設(shè)計(jì)更具功能性、邏輯性和視覺(jué)美感。
柵格與網(wǎng)格的本質(zhì)其實(shí)是相同的，實(shí)現(xiàn)有組織的設(shè)計(jì)最簡(jiǎn)單方法之一就是應(yīng)用網(wǎng)格系統(tǒng)，約束性地為你提供了一個(gè)非?；镜脑O(shè)計(jì)框架，這是一種久經(jīng)考驗(yàn)的技術(shù)，最初運(yùn)用在印刷版式中。網(wǎng)格與柵格英文都以“Grid”來(lái)表示。但一般我們更愿意在平面設(shè)計(jì)中更多的稱為 “網(wǎng)格”，會(huì)存在上下或傾斜，在網(wǎng)頁(yè)端或移動(dòng)端中更多的稱為為“柵格”。
常見(jiàn)網(wǎng)格系統(tǒng)有三種：直接分割，等距分割，數(shù)學(xué)分割。本文主要介紹等距柵格，網(wǎng)頁(yè)中的網(wǎng)格是指使用垂直和水平(較少)等距輔助線對(duì)布局進(jìn)行的劃分，它形成了用戶界面的基本結(jié)構(gòu)或框架。
平面設(shè)計(jì)一般用到的是固定的紙張規(guī)格，寬度和高度都是固定的，網(wǎng)格會(huì)存在上下或傾斜的視圖；在界面中柵格寬度跟隨不同設(shè)備，高度由內(nèi)容多少來(lái)決定，是上下視圖。
界面柵格系統(tǒng)是從平面網(wǎng)格系統(tǒng)中發(fā)展而來(lái)，以依據(jù)一定的規(guī)律、合理設(shè)置基準(zhǔn)線來(lái)指導(dǎo)和規(guī)范界面中的如文本、圖像、按鈕和其他元素，保證頁(yè)面的每個(gè)區(qū)域能夠穩(wěn)健地排布起來(lái)。柵格系統(tǒng)的使用，讓界面信息呈現(xiàn)更美觀易讀、更具可用性，對(duì)于前端來(lái)說(shuō)，網(wǎng)頁(yè)也將更加靈活與規(guī)范。
將柵格視為一種秩序系統(tǒng)來(lái)進(jìn)行使用，是設(shè)計(jì)師某種特定的精神和態(tài)度的表達(dá)，它體現(xiàn)了設(shè)計(jì)師是以一種結(jié)構(gòu)性、預(yù)見(jiàn)性的方式來(lái)進(jìn)行構(gòu)思和設(shè)計(jì)。同時(shí)，這也是一種職業(yè)信仰的體現(xiàn)，設(shè)計(jì)作品應(yīng)該是易懂的、客觀的、功能性的和具有數(shù)學(xué)邏輯美感的。
用結(jié)構(gòu)化、系統(tǒng)化的柵格手段進(jìn)行設(shè)計(jì)，對(duì)設(shè)計(jì)是具有極為重要的意義的。使用柵格系統(tǒng)就意味著設(shè)計(jì)遵循普遍與合理。系統(tǒng)化和清晰化、集中精力看透關(guān)鍵問(wèn)題、用客觀取代主觀、理性地去看待設(shè)計(jì)過(guò)程。
產(chǎn)品設(shè)計(jì)中，參與設(shè)計(jì)的人員越多，用戶設(shè)備越多，屏幕越多，設(shè)計(jì)師就越需創(chuàng)建一套柵格系統(tǒng)來(lái)組織內(nèi)容，使設(shè)計(jì)內(nèi)容與細(xì)節(jié)能適應(yīng)更多場(chǎng)景。合理的柵格系統(tǒng)可以通過(guò)調(diào)整布局滿足產(chǎn)品各設(shè)備尺寸的需求。
有序可依，提升協(xié)同效率
對(duì)于設(shè)計(jì)師與團(tuán)隊(duì)：柵格系統(tǒng)定義了一套底層的、統(tǒng)一的測(cè)量單位，當(dāng)設(shè)計(jì)團(tuán)隊(duì)內(nèi)對(duì)此達(dá)成共識(shí)時(shí)，可以避免因屏幕適配、比例換算產(chǎn)生的像素偏移，適配多種屏幕，提升精致細(xì)膩程度，同時(shí)保證了設(shè)計(jì)稿件中元素屬性的一致性和規(guī)范化，并有效降低設(shè)計(jì)師的決策成本，提高不同設(shè)計(jì)師之間的協(xié)同效率。同時(shí)避免了設(shè)計(jì)師與前端工程師在細(xì)節(jié)上的反復(fù)溝通確認(rèn)，提升了整個(gè)開(kāi)發(fā)效率。
布局規(guī)律，減少認(rèn)知成本
對(duì)于用戶：運(yùn)用網(wǎng)格系統(tǒng)能夠讓設(shè)計(jì)更有秩序和節(jié)奏感，規(guī)避了不同設(shè)計(jì)師理解不同造成產(chǎn)出差異的問(wèn)題，如頁(yè)面節(jié)奏，空白等。在保持與原先展示內(nèi)容基本一致的情況下，頁(yè)面信息結(jié)構(gòu)更加清晰，提高閱讀效率，減少認(rèn)知成本，提供一致性體驗(yàn)。
柵格使用列在水平方向上拆分頁(yè)面，以有組織的方式對(duì)元素進(jìn)行布局，并模塊化設(shè)計(jì)多個(gè)頁(yè)面和組件。同時(shí)柵格還定義了一組固定的測(cè)量單位，指示每個(gè)設(shè)計(jì)元素遵守的尺寸，間距和對(duì)齊方式。
最小單元
網(wǎng)格的基本構(gòu)成就是單元格，由格子組成網(wǎng)。間距都可以用最小單元來(lái)增加或者減小，最小單元格是所有設(shè)計(jì)元素（從排版到列，框，圖標(biāo)和插圖）的幾何基礎(chǔ)，它為所有創(chuàng)造性的決策提供了結(jié)構(gòu)和指導(dǎo)。所以柵格系統(tǒng)的重要一步就是需要先定義好柵格的原子單元大小，我們以最小單元去定義網(wǎng)格系統(tǒng)。
最小單位推薦 8px
目前 web 端最普適易用最小單位的是 8px，我們利用 8px 建立網(wǎng)格，8 的倍數(shù)組成了列、行、框的尺寸以及它們的邊距和填充，使用 8 的倍數(shù)來(lái)定義模塊的間距與元素的尺寸。
當(dāng)我們熟悉最小的柵格單位 8px 以后，能有力的減少?zèng)Q策時(shí)間。整個(gè)設(shè)計(jì)的元素大小，尤其是間距可以快捷的在腦海中反應(yīng)出來(lái)，8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數(shù)或能被 8 整除。讓設(shè)計(jì)師帶著工程實(shí)現(xiàn)的思維去考慮頁(yè)面布局，設(shè)計(jì)側(cè)和工程側(cè)對(duì)頁(yè)面一致性的解讀，能夠有效降低設(shè)計(jì)到實(shí)現(xiàn)的轉(zhuǎn)化成本，提高開(kāi)發(fā)效率。也要注意間距不能無(wú)腦套 8 的倍數(shù)，優(yōu)先用 8，當(dāng)跨度太大也可以使用 4 和 12。
那為什么不選擇 4，6 或 10？
注意的是最小單位應(yīng)由實(shí)際工作來(lái)決定，沒(méi)有絕對(duì)的最小單位數(shù)值。在適用性方面，4、6、8、10 這四個(gè)數(shù)值都基本可以滿足。
當(dāng)使用 4px 時(shí)，頁(yè)面就會(huì)被分割的非常細(xì)碎，當(dāng) 8 不夠用的時(shí)候，就要使用 4 了。
最小單元格的數(shù)值選擇需要從兩方面考慮：
屏幕尺寸和分辨率種類有增無(wú)減。使得設(shè)計(jì)師對(duì) “維護(hù)適配性” 的難度越來(lái)越大，設(shè)計(jì)稿導(dǎo)出會(huì)有@0.5、@0.75、@1、@1.5、@2、@3 倍多種需求，在 1@倍設(shè)計(jì)稿，奇數(shù)（比如 5px）就會(huì)出現(xiàn)半像素偏移。而 6 除以 2 得 3，3 就是奇數(shù)了，10 除以 2 的 5，6 和 10 不能被 2 除盡。
使用偶數(shù) 8px 可以輕松一致地縮放各種倍數(shù)而不失真，大多數(shù)流行的屏幕尺寸都可以被 8 整除，足夠普適，以 8px 為增量進(jìn)行縮放可提供大量選項(xiàng)，所以推薦 8px。
列 + 列間距 + 大邊距
柵格系統(tǒng)由 3 個(gè)部分組成：列、列間距、左右大邊距。柵格系統(tǒng)是由列和列間距交替分布形成的，列是柵格的數(shù)量單位，虛擬的垂直塊，用于對(duì)齊內(nèi)容，我們以百分比或固定值定義列寬。豎直方向根據(jù)頁(yè)面內(nèi)容是可以無(wú)限延伸，所以柵格系統(tǒng)在豎直方向的柵格可以不體現(xiàn)出來(lái)，設(shè)計(jì)時(shí)只要在水平方向保持規(guī)律變化就可以了。
通常設(shè)定柵格數(shù)量說(shuō)的就是列的數(shù)量，如 12 柵格就有 12 列、24 柵格就有 24 個(gè)列。列間距把控頁(yè)面留白，數(shù)值越大，頁(yè)面留白越多，視覺(jué)效果越松散；反之，頁(yè)面越緊湊，畫(huà)片分割的越碎。
大邊距就是設(shè)計(jì)內(nèi)容區(qū)以外的空間。我們?cè)谠O(shè)計(jì)中一般將大邊距寬度定義為固定值，該值決定每個(gè)設(shè)計(jì)的最小呼吸空間，靈活的邊距占據(jù)了由列，列間距組成的網(wǎng)格后的剩余空間。左右大邊距是計(jì)算在柵格的總寬之內(nèi)的，刪格系統(tǒng)的寬度就是列、列邊距、大邊距之和。
也有彈性大邊距，會(huì)根據(jù)不同的屏幕尺寸而變化，就是頁(yè)面邊距可以隨著屏幕尺寸的變化而變化。頁(yè)面邊距在移動(dòng)設(shè)備上通常是 12px 到 40px 之間，在平板設(shè)備和桌面設(shè)備頁(yè)面邊距變化就相對(duì)多了。
容器
我們按照頁(yè)面結(jié)構(gòu)從組件 – 容器 – 區(qū)塊 – 頁(yè)面 – 場(chǎng)景進(jìn)行依次拼裝成最終形成產(chǎn)品設(shè)計(jì)方案。容器集合了下級(jí)組件，也可以是多個(gè)復(fù)雜元素的集合，文字、圖片、按鈕。如登錄區(qū)塊是由多個(gè)標(biāo)簽、輸入框、按鈕組成。容器是成組的設(shè)計(jì)元素，形成了獨(dú)立的內(nèi)容或功能盒子。區(qū)塊嵌套容器，由區(qū)塊組成了頁(yè)面內(nèi)容。
柵格規(guī)范的是容器間比例，而非具體寬度。容器大小收到柵格系統(tǒng)的限制，柵格系統(tǒng)可以根據(jù)需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具體采用哪種比例的組合需要根據(jù)需求來(lái)定。柵格系統(tǒng) / 設(shè)備分辨率大小在變換的同時(shí)會(huì)帶動(dòng)區(qū)塊大小的變化，從而使容器發(fā)生變化，如元素尺寸變化，文字換行等。
如下圖，共有 32 個(gè)容器。對(duì)于緊密相關(guān)的內(nèi)容，請(qǐng)考慮組成區(qū)塊。頁(yè)面被分割的越碎時(shí)，設(shè)計(jì)中越難把控。
960 柵格系統(tǒng)
這是一個(gè)比較單純的框架。從 1990 年代后期開(kāi)始就基于表格的布局開(kāi)始使用的柵格系統(tǒng) 960 Grid System。與早期計(jì)算機(jī)相比，雖然今天的屏幕分辨率達(dá)到了很高的尺寸，但使用 960 像素的寬度依舊可以確保在許多屏幕上能夠正確顯示。
960 Grid System，是由 Nathan Smith 開(kāi)發(fā)的 CSS 框架，因?yàn)樵缙诘碾娔X熒幕寬度約為 1024，扣除瀏覽器的卷軸及邊框，為 960px，960 Grid System 有 12 欄位、16 欄位版本，960 正是意味著，12 能被 3、4、6 整除，能建立 3 欄、4 欄、6 欄的版面配置，網(wǎng)頁(yè)的使用也比較靈活。網(wǎng)頁(yè)版面可以輕松配置，合并，也不會(huì)有畸零數(shù)，非常適合排版。
960 Grid System 是使用固定寬度 960px，置中對(duì)齊畫(huà)面的方式呈現(xiàn)在網(wǎng)頁(yè)上，去除左右兩邊各 10px 的邊距空間，留下中間 940 px 的設(shè)計(jì)內(nèi)容區(qū)，以 20px 作為槽。
而超出 960 的部分的設(shè)計(jì)元素，就使用定寬設(shè)計(jì)。
Bootstrap 網(wǎng)頁(yè)框架
今天市面上看見(jiàn)的響應(yīng)式網(wǎng)站，多數(shù)使用了一些開(kāi)源的代碼或者框架。而應(yīng)用最廣泛的，就數(shù) Bootstrap 了。
Bootstrap 是 Twitter 推出的一套強(qiáng)大網(wǎng)頁(yè)框架，是全球最受歡迎的前端開(kāi)源工具庫(kù)，它支持 Sass 變量和 mixin、響應(yīng)式柵格系統(tǒng)、自帶大量組件和眾多強(qiáng)大的 JavaScript 插件，也提供了快速建立響應(yīng)式網(wǎng)頁(yè)的功能。已經(jīng)更新到 V5.0.1 版本了 Bootstrap 中的柵格系統(tǒng)是一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的瀑布流式柵格系統(tǒng)。市面上很多前端框架會(huì)對(duì) Bootstrap 進(jìn)行補(bǔ)充或基于 Bootstrap 開(kāi)發(fā)。
Bootstrap 提供的柵格系統(tǒng)，也是一樣將內(nèi)容區(qū)分 12 等分。
它將系統(tǒng)分為 12 列，當(dāng)然也可以通過(guò)變量來(lái)改變列數(shù)和列寬，水槽寬度，屏幕浮動(dòng)寬度；其實(shí)設(shè)置屏幕浮動(dòng)寬度就是我們看到的屏幕自適應(yīng)，就是根據(jù)屏幕寬度來(lái)選擇顯示參數(shù)。Bootstrap 中的柵格流只能作為大的布局定義，那么針對(duì)最小單位是該用 8、10、15 還是多少也是需要根據(jù)需求去做分析。
12 列結(jié)構(gòu)可以進(jìn)一步分解 4 等分，3 等分大小的模塊。
柵格設(shè)計(jì)的第一步就是創(chuàng)建畫(huà)布，對(duì)于不同設(shè)計(jì)的項(xiàng)目，寬度設(shè)定是不同的。需要注意第一屏重點(diǎn)內(nèi)容全部顯示，瀏覽器和 Windows 底欄都會(huì)占用屏幕的高度空間，第一屏縮減默認(rèn)高度 -100px (可調(diào)整)。
屏幕寬度
設(shè)計(jì)師有存在從最大的屏幕 1920 著手設(shè)計(jì)界面的習(xí)慣，最后考慮最小的屏幕上的顯示效果。這意味著絕大多數(shù)的設(shè)計(jì)都是從大尺寸開(kāi)始設(shè)計(jì)的，通常大尺寸的內(nèi)容和功能更全面。從小往大適配容易，但是從大往小適配問(wèn)題就特別多。以 1920px 寬設(shè)計(jì)的界面在面向小尺寸屏幕的時(shí)候多數(shù)都很不友好，甚至到了部分頁(yè)面無(wú)法正常預(yù)覽和使用的地步。所以優(yōu)先設(shè)計(jì)最小適配屏幕，然后給出適配方案進(jìn)行調(diào)試。
C 端設(shè)計(jì)的屏幕寬度是找全網(wǎng)平均數(shù)值，而 B 端的目標(biāo)受眾更細(xì)分、更具體。類似政府、學(xué)校、企業(yè)等等，計(jì)算機(jī)都是統(tǒng)一購(gòu)買(mǎi)的，這種情況并不需要你去統(tǒng)計(jì)全網(wǎng)和其它渠道數(shù)據(jù)，只要了解具體受眾使用什么分辨率即可，以它作為主要輸出的畫(huà)布寬度。如果 B 端設(shè)計(jì)受眾屏幕寬度實(shí)在不清楚，可以參考螞蟻中臺(tái)設(shè)計(jì)團(tuán)隊(duì)統(tǒng)一的畫(huà)板尺寸為 1440。
是否定寬(版心)
如果是定寬的設(shè)計(jì)，便不需要考慮自適應(yīng)與響應(yīng)式適配屏幕寬度。版心是源用平面上的說(shuō)法。根據(jù)實(shí)際情況，定寬設(shè)計(jì)如果以 1024 的屏幕為內(nèi)容主體，1366、1440、1536、1600、1920 的屏幕適配 1024 的內(nèi)容主體，多余的空間為左右大邊距，這種方式設(shè)計(jì)上容易輸出，適配方式更加高效，隨之就是可用性較低，對(duì)于使用高分辨的用戶來(lái)說(shuō)，布局會(huì)留下很大的空白。如知乎：
還記得第一次做網(wǎng)頁(yè)練習(xí)的時(shí)候我使用的定寬為 1000px。
屏幕終端的寬度不等于我們要柵格的寬度。我們?cè)诖_定柵格區(qū)域設(shè)計(jì)前，先來(lái)熟悉一下 web 產(chǎn)品界面的基礎(chǔ)模塊和分層邏輯，以常見(jiàn)的 B 端布局為例。
根據(jù)模塊自身屬性及功能定義，常見(jiàn)的模塊有九類，分別為頂部導(dǎo)航模塊、左側(cè)導(dǎo)航模塊、頁(yè)眉模塊、頁(yè)腳模塊、主內(nèi)容模塊、左內(nèi)容模塊、右內(nèi)容模塊、抽屜模塊、彈窗模塊。
全局控制層為常置的功能底層，是提供穩(wěn)定性和可預(yù)測(cè)性、必不可少的層級(jí)，具體有頂部導(dǎo)航模塊、左側(cè)導(dǎo)航模塊等；內(nèi)容層可分為常置展示層，具體有主內(nèi)容模塊、左右內(nèi)容模塊或上下模塊等；臨時(shí)層為動(dòng)態(tài)出現(xiàn)的功能頂層，始終疊加在基礎(chǔ)層及內(nèi)容層上方，是鏈接上下體驗(yàn)流程的模塊，具體有抽屜模塊、彈窗浮層模塊。
梳理了相關(guān)模塊所組合的柵格布局。Web 端有三種基礎(chǔ)布局和多種擴(kuò)展布局。一般來(lái)說(shuō)，柵格區(qū)域就是指內(nèi)容層。前面我們提到了定寬(版心)，版心和內(nèi)容層還是有差別的，版心+兩端頁(yè)邊距=內(nèi)容區(qū)。
那其他模塊能用柵格嗎？當(dāng)然可以，有需要就用，不過(guò)需要注意使用效率。
首先，創(chuàng)建一個(gè)低保真或高保真的原型，設(shè)計(jì)一些基本元素和交互流程之后，考慮最優(yōu)的列數(shù)。列間距的區(qū)域不可以放置內(nèi)容，我們一般會(huì)給列間距設(shè)定一個(gè)定值來(lái)確定列寬大小，這個(gè)列間距也是模塊間的間距。
柵格數(shù)量
常見(jiàn)的柵格系統(tǒng)通常被劃分為 12 柵格或 24 柵格。劃分的格子越多，承載的內(nèi)容越精細(xì)。也有較少項(xiàng)目會(huì)根據(jù)實(shí)際情況也會(huì)劃分成 16 柵格、20 柵格，移動(dòng)設(shè)備屏幕尺寸小于 PC 屏幕，想要有更靈活發(fā)揮空間，就必須采用列寬較小的柵格。
12 柵格
12 柵格系統(tǒng)在流行的前端開(kāi)發(fā)開(kāi)源工具庫(kù) Bootstrap 與 Foundation 中廣泛使用，一些商業(yè)網(wǎng)站、門(mén)戶網(wǎng)站通常劃分成 12 柵格，適用于業(yè)務(wù)信息分組較少，單個(gè)容器內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì)。根據(jù)業(yè)務(wù)場(chǎng)景可以很容易的將 12 柵格區(qū)域劃分成 2 等分、3 等分、4 等分、6 等分，以及根據(jù)等分容器組合的多種不等分場(chǎng)景，組合也是柵格作為一個(gè)界面輔助系統(tǒng)非常方便的原因。
24 柵格
24 柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)容器內(nèi)信息體積較小，場(chǎng)景復(fù)雜的頁(yè)面設(shè)計(jì)。相對(duì) 12 柵格系統(tǒng)，24 柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景。我們常見(jiàn)的 B 端 web 設(shè)計(jì)一般選用 24 柵格，柵格系統(tǒng)大小就是 24 列+23 列間距+2 大邊距。
Ant 采用了 24 列、23 列間隔的柵格系統(tǒng)。其中間隔數(shù)值是固定的，內(nèi)容區(qū)域減去 23 列間隔后，剩下的部分等分成 24 列。
注意：
其內(nèi)容模塊必須位于若干列上，可以任意分割，比如 6×2，3×4，4×3，下面是不同分割方式設(shè)計(jì)的信息模塊。
只要父級(jí)模塊對(duì)齊柵格，子級(jí)元素可以不對(duì)齊列，同時(shí)子模塊也可以有自己的柵格系統(tǒng)。
列寬無(wú)法永遠(yuǎn)精準(zhǔn)整除，而相差的像素值往往是無(wú)法被用戶以肉眼察覺(jué)的，柵格不是為了每一像素的精確，而是為了保證瀏覽效果的秩序、協(xié)調(diào)與統(tǒng)一。
確定列間距與大邊距
列間距與大邊距選擇 8(最小單位)的倍數(shù)，網(wǎng)格將更加一致。可以將間距值把常用的數(shù)值整理成號(hào)碼表，間距復(fù)用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等…這樣一來(lái)，保持一致性更加容易，更加合乎邏輯，并且開(kāi)發(fā)人員也會(huì)高興，因?yàn)樗麄兛梢愿鶕?jù)屏幕元素之間的關(guān)系安全地假定間距。
注意：
列間距的數(shù)值越大，頁(yè)面留白間隙越多
列間距的區(qū)域不可以放置內(nèi)容模塊，內(nèi)容區(qū)從列間距開(kāi)始到列間距結(jié)束
非常規(guī)設(shè)計(jì)時(shí)不需要柵格系統(tǒng)，根據(jù)設(shè)計(jì)場(chǎng)景可自定義。
柵格系統(tǒng)適配過(guò)程中需要考慮三個(gè)原則:等比縮放、彈性控件、文字流自適應(yīng)。隨著設(shè)備多樣化，通用的適配方式是自適應(yīng)與響應(yīng)式布局，隨之就是柵格系統(tǒng)的變化。我們先聊下斷點(diǎn)。
斷點(diǎn)，用瀏覽器打開(kāi)一個(gè)網(wǎng)站，檢查元素，右上角會(huì)顯示視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，找到頁(yè)面布局的變化點(diǎn)，就是我們上面說(shuō)到的斷點(diǎn)或者次斷點(diǎn)。
斷點(diǎn)設(shè)計(jì)主要考慮基礎(chǔ)的 3 端，一般大于等于 1440 為 web 布局，1439-500 為平板布局，小于 500 為手機(jī)布局。每經(jīng)過(guò)一個(gè)斷點(diǎn)，可以改變柵格大小（比如 16 柵格改為 8 柵格），固定改為拉伸，樣式（文字、顏色）。制作精良的話可以設(shè)計(jì)多個(gè)斷點(diǎn)，如 480、600、840、960、1280、1440 和 1600px。
固定柵格
固定網(wǎng)格的最大特征是在網(wǎng)頁(yè)收縮過(guò)程中，經(jīng)過(guò)一個(gè)斷點(diǎn)就會(huì)自動(dòng)減少最邊緣元素，其他元素基本保持不變。通過(guò)在嵌入式塊中排列圖塊，在工具欄中放置圖標(biāo)等，可以用固定的框來(lái)形成網(wǎng)格。柵格列數(shù)隨著瀏覽器寬度的減少而減少，邊緣圖塊自動(dòng)換行，或者有時(shí)會(huì)溢出滾動(dòng)條。
首先通過(guò)最小單位選擇一個(gè)基本尺寸，然后以基本尺寸的倍數(shù)構(gòu)建每個(gè)盒子框，就會(huì)出現(xiàn)一個(gè)個(gè)網(wǎng)格。
流動(dòng)?xùn)鸥?/span>
流動(dòng)?xùn)鸥袷窃仉S著設(shè)備尺寸變化而比例變化，當(dāng)?shù)狡聊淮笮∽兓臄帱c(diǎn)時(shí)，列可以增長(zhǎng)或收縮以適應(yīng)可用空間，邊緣元素被減掉。但并不是每一個(gè)斷點(diǎn)都需要去減少元素，可以適當(dāng)?shù)陌凑赵氐谋壤M(jìn)行大小調(diào)整。流動(dòng)布局兼容性高，能更好的適配多分辨率。
流體柵格非常適合編輯內(nèi)容，儀表板、圖像、視頻、數(shù)據(jù)可視化等。對(duì)用戶而言，縮放事物的大小比縮放可見(jiàn)事物的數(shù)量更為有用。
在每個(gè)斷點(diǎn)處，列數(shù)是固定的，在斷點(diǎn)范圍之間，實(shí)際列寬是柵格區(qū)域百分比縮放，而不是最小單位倍數(shù)。內(nèi)容區(qū)域是動(dòng)態(tài)運(yùn)動(dòng)，就需要運(yùn)用柵格系統(tǒng)。
混合柵格
內(nèi)容區(qū)域流動(dòng)和固定柵格組合也是常見(jiàn)的做法，混合柵格既有流動(dòng)的寬度，也有固定寬度?；旌喜季謱?duì)用戶十分友好，如下圖左側(cè)是固定柵格，右側(cè)是流動(dòng)?xùn)鸥瘛?/span>
在初期，網(wǎng)頁(yè)使用的是絕對(duì)靜態(tài)布局為主。靜態(tài)布局中如果用戶的屏幕大于或小于設(shè)計(jì)預(yù)期，結(jié)果會(huì)出現(xiàn)的滾動(dòng)條，過(guò)長(zhǎng)的行以及對(duì)空間的不良使用。后隨技術(shù)發(fā)展，為了兼容各種瀏覽器，出現(xiàn)了針對(duì)各設(shè)備適配的解決方案，自適應(yīng)布局。
后來(lái)移動(dòng)互聯(lián)網(wǎng)爆發(fā)，html5 標(biāo)準(zhǔn)發(fā)布，與移動(dòng)設(shè)備、平板電腦和智能設(shè)備(游戲機(jī))等需要提供了更豐富的功能，用戶希望能夠使用各種設(shè)備訪問(wèn)任何網(wǎng)站，結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局的概念——2010 年由 Ethan Marcotte 提出。
自適應(yīng)
自適應(yīng)布局是網(wǎng)頁(yè)內(nèi)容根據(jù)設(shè)備的不同而進(jìn)行適應(yīng)，來(lái)判斷當(dāng)前訪問(wèn)的設(shè)備是 PC 端、平板還是手機(jī)，為不同終端分別提供獨(dú)立的前端代碼。自適應(yīng)設(shè)計(jì)可以更好地適應(yīng)用戶在現(xiàn)場(chǎng)的各種需求，缺點(diǎn)是成本較高。
自適應(yīng)設(shè)計(jì)即創(chuàng)建多個(gè)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。比如你對(duì)自適應(yīng)網(wǎng)站的窗口大小進(jìn)行調(diào)整，每經(jīng)過(guò)一個(gè)斷點(diǎn)就可以得到不同的布局（頁(yè)面元素位置發(fā)生改變），但在每個(gè)布局中，沒(méi)有經(jīng)過(guò)斷點(diǎn)時(shí)頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。每經(jīng)過(guò)一個(gè)斷點(diǎn)，布局和位置是可改變的，也有特殊，如兩個(gè)斷點(diǎn)間等比縮放，可以保留用戶在多個(gè)設(shè)備間的操作習(xí)慣。
自適應(yīng)設(shè)計(jì)，變化沒(méi)必要過(guò)于復(fù)雜，保留必要的功能入口，不必要的可以隱藏給不同設(shè)備切換不同的樣式，在同一設(shè)備下(斷點(diǎn)范圍下)實(shí)際還是固定布局。
響應(yīng)式
響應(yīng)式是通過(guò)一套代碼，無(wú)縫匹配符合電腦、平板、手機(jī)效果的前端技術(shù)，開(kāi)發(fā)成本更低，高適應(yīng)性；設(shè)計(jì)成本更低，一套設(shè)計(jì)應(yīng)對(duì)多端，最大化提升用戶的操作體驗(yàn)；響應(yīng)式不提供自適應(yīng)性那么多的控制，多端同步生效，減少運(yùn)營(yíng)成本，保障業(yè)務(wù)效率。
一個(gè)典型的響應(yīng)式布局，通過(guò)改變?yōu)g覽器的寬度就會(huì)發(fā)生響應(yīng)變化，而不是像自適應(yīng)經(jīng)過(guò)設(shè)備斷點(diǎn)時(shí)內(nèi)容才發(fā)生改變。響應(yīng)式布局中會(huì)出現(xiàn)諸多差異較小的狀態(tài)，同樣讓響應(yīng)式布局更加的難以測(cè)試和預(yù)測(cè)。
響應(yīng)式也存在斷點(diǎn)，是網(wǎng)頁(yè)在收縮的過(guò)程中的最小范圍。當(dāng)網(wǎng)頁(yè)到達(dá)這個(gè)范圍以后，網(wǎng)頁(yè)內(nèi)部的元素就要進(jìn)行相應(yīng)的變化，用來(lái)適應(yīng)屏幕的變化。
響應(yīng)式設(shè)計(jì)的前提有兩點(diǎn)：1，頁(yè)面布局具有規(guī)律性，元素寬高可用百分比代替固定數(shù)值；2，網(wǎng)頁(yè)圖片必須是可伸縮的。這正是柵格系統(tǒng)本身就具有的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式是順理成章和高效快捷。
響應(yīng)式網(wǎng)頁(yè)測(cè)試工具：我有反應(yīng)嗎？和 designmodo
總結(jié)一下：
自適應(yīng)布局是內(nèi)容根據(jù)終端不同進(jìn)行適應(yīng)，響應(yīng)式布局是網(wǎng)頁(yè)的布局針對(duì)屏幕大小進(jìn)行響應(yīng)。響應(yīng)式布局等于流動(dòng)?xùn)鸥瘢赃m應(yīng)布局使用固定斷點(diǎn)來(lái)進(jìn)行多個(gè)布局。 自適應(yīng)布局給了我們更多設(shè)計(jì)的空間，因?yàn)橹挥每紤]幾種不同的狀態(tài)；而在響應(yīng)式布局中就會(huì)出現(xiàn)上百種不同的狀態(tài)，雖然絕大部分差異較小。
自適應(yīng)與響應(yīng)式如何選擇用哪個(gè)呢？
頁(yè)面功能不多，用戶交互少，不需要經(jīng)常升級(jí)，響應(yīng)式設(shè)計(jì)從運(yùn)營(yíng)的難易和維護(hù)的便利性考慮會(huì)更好，如邏輯簡(jiǎn)單并且內(nèi)容大致相同的官網(wǎng)和展示頁(yè)面；頁(yè)面?zhèn)€性化多功能方面考慮，自適應(yīng)設(shè)計(jì)更合適，用戶體驗(yàn)更好，如功能復(fù)雜、用戶交互頻繁的網(wǎng)站。
全平臺(tái)適配
除此之外，隨著移動(dòng)設(shè)備的生產(chǎn)力逐步加強(qiáng)，手機(jī)、折疊屏、平板、電腦之間的界限變得模糊，端與端的差距也在縮小。蘋(píng)果推出 iPadOS，讓移動(dòng)端的便捷和桌面端的超強(qiáng)生產(chǎn)力進(jìn)一步融合。而從應(yīng)用的開(kāi)發(fā)而言 Electron、Flutter 等跨系統(tǒng)框架層出不窮，開(kāi)發(fā)者也在不斷嘗試在不同平臺(tái)上用一套代碼提供同一套服務(wù)，減少系統(tǒng)隔閡所帶來(lái)的維護(hù)成本。
盡管全平臺(tái)系統(tǒng)設(shè)計(jì)的概念還不成熟，但我們可以看到打造流暢的全平臺(tái)體驗(yàn)的必要性。這也許會(huì)成為下一代應(yīng)用的基礎(chǔ)規(guī)則，正如當(dāng)初的響應(yīng)式設(shè)計(jì)。
figma 有三種不同形式的柵格可供選擇：統(tǒng)一網(wǎng)格，列和行。支持單個(gè)畫(huà)板柵格系統(tǒng)的使用和隱藏。
嵌套柵格
與其他工具不同，figma 不會(huì)在內(nèi)容層只局限一個(gè)柵格，可以建立多層?xùn)鸥袂短??？梢岳眠@一點(diǎn)，在盒子內(nèi)部設(shè)計(jì)時(shí)，再用柵格用作視覺(jué)輔助，可以通過(guò)顏色和不透明度來(lái)區(qū)分不同柵格。
figma 可以通過(guò)相對(duì)調(diào)整畫(huà)布大小，同步拉伸柵格系統(tǒng)。
內(nèi)容自適應(yīng)
當(dāng)我們拖動(dòng)窗口的寬度，模塊會(huì)發(fā)生自動(dòng)布局。定義下級(jí)元素針對(duì)父模塊的響應(yīng)，做到模塊變化的同時(shí)下級(jí)元素的顯示也是合理的。比如相對(duì)內(nèi)容左右間距一致、對(duì)齊方向一致、尺寸固定等設(shè)置。這就是 Sketch/Figma/XD 中的自適應(yīng)功能。
其實(shí)在設(shè)計(jì)稿時(shí)，使用自適應(yīng)功能頻率不高，不是每個(gè)區(qū)塊都需要自適應(yīng)的。
固定和拉伸混合使用，在內(nèi)容自適應(yīng)框架中，可以將一些元素設(shè)置為固定，將一些元素設(shè)置為填充容器并與固定和拉伸形式相結(jié)合使用。
同時(shí)可以修改圖層透明度為 0，相當(dāng)于占位，可以占位搭配組件。
共享樣式
在創(chuàng)建柵格系統(tǒng)時(shí)，可能需要對(duì)不同設(shè)備尺寸或其他常見(jiàn)用例上的布局進(jìn)行不同的更改。為了更輕松地將這些柵格應(yīng)用于框架，文件和項(xiàng)目，可以將其中的幾個(gè)合并為一個(gè)柵格樣式(相當(dāng)于組件)，然后可以從團(tuán)隊(duì)庫(kù)中共享該樣式或者自己復(fù)用，簡(jiǎn)單快捷。
同樣有三種柵格可供選擇，柵格系統(tǒng)統(tǒng)一使用和隱藏。Sketch 里自適應(yīng)功能不能隱藏某對(duì)象占位，而 figma 可以，當(dāng)位置隱藏后，布局就會(huì)進(jìn)行調(diào)整。
sketch 使用柵格設(shè)計(jì)需先設(shè)置一個(gè)總寬度尺寸，點(diǎn)擊左下角默認(rèn)設(shè)置還可以將自定義的柵格系統(tǒng)設(shè)置為默認(rèn)，方便以后重復(fù)調(diào)用，但 sketch 只能儲(chǔ)存一組柵格系統(tǒng)的數(shù)值。
sketch 怎么以最小單位進(jìn)行移動(dòng)？
可以在首選項(xiàng)設(shè)置最小單位如 8px，按 shift+方向鍵就能以最小單位進(jìn)行調(diào)整。
這個(gè)網(wǎng)站，輸入版心和分割數(shù)，自動(dòng)生成柵格方案。
在實(shí)際設(shè)計(jì)過(guò)程中，柵格的使用會(huì)伴隨著限制條件。我們應(yīng)當(dāng)明白，柵格只是為設(shè)計(jì)師提供便捷的輔助工具，而不是限制設(shè)計(jì)師的工具。
不過(guò)從柵格這個(gè)工具來(lái)說(shuō)，完全的自由反而是降低效率。如果能夠給出一定的限制，反而會(huì)使得我們的設(shè)計(jì)效率提升。我們不必關(guān)心每個(gè)區(qū)域盒子具體值是多少，只需保證它們存在正確的關(guān)系。柵格系統(tǒng)是對(duì)界面元素進(jìn)行橫向排布時(shí)需要遵循的模式，不適用于類似圖標(biāo)與文字間隔的小型元素安排，而是用于大型區(qū)塊間距的安排。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com