国产一区二区三区影院,99久久无色码中文字幕,久久久久亚洲AV无码专区桃色

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

萬字長文解析：柵格設計

小龍

2021-10-31

1 評論 11667 瀏覽 61 收藏

41 分鐘

編輯導讀：柵格與網格的本質其實是相同的，實現有組織的設計最簡單方法之一就是應用網格系統，約束性地為你提供了一個非?；镜脑O計框架。本文介紹了關于界面柵格的攻略，延展到適配方式，希望對你有幫助。

本文主要介紹等距柵格，旨在為有需要的同學解析柵格，從概念、結構和設計上更有效、自信地解決柵格問題，其實主要還是自己對柵格體系的查缺補漏。大家可以對照目錄跳著閱讀。

事實上，絕大多數的設計師都知道柵格很重要，簡單點就是等分運用在內容層。當我們仔細研究柵格相關原理時，只要不嫌麻煩，就會發現在柵格系統下能更快解決設計問題，并讓設計更具功能性、邏輯性和視覺美感。

01 柵格是什么

1.1 柵格與網格

柵格與網格的本質其實是相同的，實現有組織的設計最簡單方法之一就是應用網格系統，約束性地為你提供了一個非?；镜脑O計框架，這是一種久經考驗的技術，最初運用在印刷版式中。網格與柵格英文都以“Grid”來表示。但一般我們更愿意在平面設計中更多的稱為 “網格”，會存在上下或傾斜，在網頁端或移動端中更多的稱為為“柵格”。

常見網格系統有三種：直接分割，等距分割，數學分割。本文主要介紹等距柵格，網頁中的網格是指使用垂直和水平(較少)等距輔助線對布局進行的劃分，它形成了用戶界面的基本結構或框架。

平面設計一般用到的是固定的紙張規格，寬度和高度都是固定的，網格會存在上下或傾斜的視圖；在界面中柵格寬度跟隨不同設備，高度由內容多少來決定，是上下視圖。

界面柵格系統是從平面網格系統中發展而來，以依據一定的規律、合理設置基準線來指導和規范界面中的如文本，圖像，按鈕和其他元素，保證頁面的每個區域能夠穩健地排布起來。柵格系統的使用，讓界面信息呈現更美觀易讀、更具可用性，對于前端來說，網頁也將更加靈活與規范。

1.2 柵格的設計哲學

將柵格視為一種秩序系統來進行使用，是設計師某種特定的精神和態度的表達，它體現了設計師是以一種結構性、預見性的方式來進行構思和設計。同時，這也是一種職業信仰的體現，設計作品應該是易懂的、客觀的、功能性的和具有數學邏輯美感的。

用結構化、系統化的柵格手段進行設計，對設計是具有極為重要的意義的。使用柵格系統就意味著設計遵循普遍與合理。系統化和清晰化、集中精力看透關鍵問題、用客觀取代主觀、理性地去看待設計過程。

1.3 柵格的價值

產品設計中，參與設計的人員越多，用戶設備越多，屏幕越多，設計師就越需創建一套柵格系統來組織內容，使設計內容與細節能適應更多場景。合理的柵格系統可以通過調整布局滿足產品各設備尺寸的需求。

有序可依，提升協同效率
對于設計師與團隊：柵格系統定義了一套底層的、統一的測量單位，當設計團隊內對此達成共識時，可以避免因屏幕適配、比例換算產生的像素偏移，適配多種屏幕，提升精致細膩程度，同時保證了設計稿件中元素屬性的一致性和規范化，并有效降低設計師的決策成本，提高不同設計師之間的協同效率。同時避免了設計師與前端工程師在細節上的反復溝通確認，提升了整個開發效率。

布局規律，減少認知成本

對于用戶：運用網格系統能夠讓設計更有秩序和節奏感，規避了不同設計師理解不同造成產出差異的問題，如頁面節奏，空白等。在保持與原先展示內容基本一致的情況下，頁面信息結構更加清晰，提高閱讀效率，減少認知成本，提供一致性體驗。

1.4 柵格的的組成

柵格使用列在水平方向上拆分頁面，以有組織的方式對元素進行布局，并模塊化設計多個頁面和組件。同時柵格還定義了一組固定的測量單位，指示每個設計元素遵守的尺寸，間距和對齊方式。

最小單元：

網格的基本構成就是單元格，由格子組成網。間距都可以用最小單元來增加或者減小，最小單元格是所有設計元素（從排版到列，框，圖標和插圖）的幾何基礎，它為所有創造性的決策提供了結構和指導。所以柵格系統的重要一步就是需要先定義好柵格的原子單元大小，我們以最小單元去定義網格系統。

最小單位推薦8px：

目前web端最普適易用最小單位的是8px，我們利用8px建立網格，8的倍數組成了列，行，框的尺寸以及它們的邊距和填充，使用 8 的倍數來定義模塊的間距與元素的尺寸。

當我們熟悉最小的柵格單位8px以后，能有力的減少決策時間。整個設計的元素大小，尤其是間距可以快捷的在腦海中反應出來，8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數或能被 8 整除。讓設計師帶著工程實現的思維去考慮頁面布局，設計側和工程側對頁面一致性的解讀，能夠有效降低設計到實現的轉化成本，提高開發效率。也要注意間距不能無腦套8的倍數，優先用8，當跨度太大也可以使用4和12。

那為什么不選擇4，6或10？

注意的是最小單位應由實際工作來決定，沒有絕對的最小單位數值。在適用性方面，4、6、8、10 這四個數值都基本可以滿足。

當使用4px時，頁面就會被分割的非常細碎，當8不夠用的時候，就要使用4了。

最小單元格的數值選擇需要從兩方面考慮：

最小單位在具體使用時是否具有一定的靈活性
最小單位能否被大多數屏幕的寬度整除，即廣泛的適用性

屏幕尺寸和分辨率種類有增無減。使得設計師對 “維護適配性” 的難度越來越大，設計稿導出會有@0.5、@0.75、@1、@1.5、@2、@3倍多種需求，在1@倍設計稿，奇數（比如 5px）就會出現半像素偏移。而6除以2得3，3就是奇數了，10除以2的5，6和10不能被2除盡。

使用偶數 8px可以輕松一致地縮放各種倍數而不失真，大多數流行的屏幕尺寸都可以被8整除，足夠普適，以 8px為增量進行縮放可提供大量選項，所以推薦 8px。

列 + 列間距 + 大邊距：

柵格系統由3個部分組成：列、列間距、左右大邊距。柵格系統是由列和列間距交替分布形成的，列是柵格的數量單位，虛擬的垂直塊，用于對齊內容，我們以百分比或固定值定義列寬。豎直方向根據頁面內容是可以無限延伸，所以柵格系統在豎直方向的柵格可以不體現出來，設計時只要在水平方向保持規律變化就可以了。

通常設定柵格數量說的就是列的數量，如12柵格就有12列、24柵格就有24個列。列間距把控頁面留白，數值越大，頁面留白越多，視覺效果越松散；反之，頁面越緊湊，畫片分割的越碎。

大邊距就是設計內容區以外的空間。我們在設計中一般將大邊距寬度定義為固定值，該值決定每個設計的最小呼吸空間，靈活的邊距占據了由列，列間距組成的網格后的剩余空間。左右大邊距是計算在柵格的總寬之內的，刪格系統的寬度就是列、列邊距、大邊距之和。

也有彈性大邊距，會根據不同的屏幕尺寸而變化，就是頁面邊距可以隨著屏幕尺寸的變化而變化。頁面邊距在移動設備上通常是 12px 到 40px 之間，在平板設備和桌面設備頁面邊距變化就相對多了。

容器：

我們按照頁面結構從組件 – 容器 – 區塊 – 頁面 – 場景進行依次拼裝成最終形成產品設計方案。容器集合了下級組件，也可以是多個復雜元素的集合，文字，圖片，按鈕。如登錄區塊是由多個標簽、輸入框、按鈕組成。容器是成組的設計元素，形成了獨立的內容或功能盒子。區塊嵌套容器，由區塊組成了頁面內容。

柵格規范的是容器間比例，而非具體寬度。容器大小收到柵格系統的限制，柵格系統可以根據需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具體采用哪種比例的組合需要根據需求來定。柵格系統 / 設備分辨率大小在變換的同時會帶動區塊大小的變化，從而使容器發生變化，如元素尺寸變化，文字換行等。

如下圖，共有32個容器。對于緊密相關的內容，請考慮組成區塊。頁面被分割的越碎時，設計中越難把控。

1.5 拓展知識

960 柵格系統：

這是一個比較單純的框架。從 1990 年代后期開始就基于表格的布局開始使用的柵格系統 960 Grid System。與早期計算機相比，雖然今天的屏幕分辨率達到了很高的尺寸，但使用960像素的寬度依舊可以確保在許多屏幕上能夠正確顯示。

960 Grid System，是由 Nathan Smith 開發的CSS框架，因為早期的電腦螢幕寬度約為1024，扣除瀏覽器的卷軸及邊框，為960px， 960 Grid System有12欄位、16欄位版本，960正是意味著，12能被3、4、6整除，能建立3欄、4欄、6欄的版面配置，網頁的使用也比較靈活。網頁版面可以輕松配置，合并，也不會有畸零數，非常適合排版。

960 Grid System 是使用固定寬度960px，置中對齊畫面的方式呈現在網頁上，去除左右兩邊各10px的邊距空間，留下中間940 px的設計內容區，以20px作為槽。

而超出960的部分的設計元素，就使用定寬設計。

Bootstrap 網頁框架：

今天市面上看見的響應式網站，多數使用了一些開源的代碼或者框架。而應用最廣泛的，就數 Bootstrap 了。

Bootstrap 是 Twitter 推出的一套強大網頁框架，是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 JavaScript 插件，也提供了快速建立響應式網頁的功能。已經更新到 V5.0.1 版本了 Bootstrap 中的柵格系統是一套響應式、移動設備優先的瀑布流式柵格系統。市面上很多前端框架會對 Bootstrap 進行補充或基于 Bootstrap 開發。

Bootstrap提供的柵格系統，也是一樣將內容區分12等分。

它將系統分為 12 列，當然也可以通過變量來改變列數和列寬，水槽寬度，屏幕浮動寬度；其實設置屏幕浮動寬度就是我們看到的屏幕自適應，就是根據屏幕寬度來選擇顯示參數。Bootstrap 中的柵格流只能作為大的布局定義，那么針對最小單位是該用 8、10、15 還是多少也是需要根據需求去做分析。

12列結構可以進一步分解4等分，3等分大小的模塊。

Bootstrap英文網https://getbootstrap.com/

Bootstrap中文網https://www.bootcss.com/

02 如何搭建柵格

2.1 確定屏幕寬度

柵格設計的第一步就是創建畫布，對于不同設計的項目，寬度設定是不同的。需要注意第一屏重點內容全部顯示，瀏覽器和 Windows 底欄都會占用屏幕的高度空間，第一屏縮減默認高度 -100px (可調整)。

屏幕寬度：

設計師有存在從最大的屏幕 1920 著手設計界面的習慣，最后考慮最小的屏幕上的顯示效果。這意味著絕大多數的設計都是從大尺寸開始設計的，通常大尺寸的內容和功能更全面。從小往大適配容易，但是從大往小適配問題就特別多。以 1920px 寬設計的界面在面向小尺寸屏幕的時候多數都很不友好，甚至到了部分頁面無法正常預覽和使用的地步。所以優先設計最小適配屏幕，然后給出適配方案進行調試。

C端設計的屏幕寬度是找全網平均數值，而B端的目標受眾更細分、更具體。類似政府、學校、企業等等，計算機都是統一購買的，這種情況并不需要你去統計全網和其它渠道數據，只要了解具體受眾使用什么分辨率即可，以它作為主要輸出的畫布寬度。如果B端設計受眾屏幕寬度實在不清楚，可以參考螞蟻中臺設計團隊統一的畫板尺寸為 1440。

是否定寬(版心)：

如果是定寬的設計，便不需要考慮自適應與響應式適配屏幕寬度。版心是源用平面上的說法。根據實際情況，定寬設計如果以 1024 的屏幕為內容主體，1366、1440、1536、1600、1920的屏幕適配 1024 的內容主體，多余的空間為左右大邊距，這種方式設計上容易輸出，適配方式更加高效，隨之就是可用性較低，對于使用高分辨的用戶來說，布局會留下很大的空白。如知乎：

還記得第一次做網頁練習的時候我使用的定寬為 1000px。

2.2 確定柵格區域

屏幕終端的寬度不等于我們要柵格的寬度。我們在確定柵格區域設計前，先來熟悉一下 web產品界面的基礎模塊和分層邏輯，以常見的B端布局為例。

根據模塊自身屬性及功能定義，常見的模塊有九類，分別為頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主內容模塊、左內容模塊、右內容模塊、抽屜模塊、彈窗模塊。

全局控制層為常置的的功能底層，是提供穩定性和可預測性、必不可少的層級，具體有頂部導航模塊、左側導航模塊等；內容層可分為常置展示層，具體有主內容模塊、左右內容模塊或上下模塊等；臨時層為動態出現的功能頂層，始終疊加在基礎層及內容層上方，是鏈接上下體驗流程的模塊，具體有抽屜模塊、彈窗浮層模塊。

梳理了相關模塊所組合的柵格布局。Web端有三種基礎布局和多種擴展布局。一般來說，柵格區域就是指內容層。前面我們提到了定寬(版心)，版心和內容層還是有差別的，版心+兩端頁邊距=內容區。

那其他模塊能用柵格嗎？當然可以，有需要就用，不過需要注意使用效率。

2.3 確定列數、列間距、大邊距

首先，創建一個低保真或高保真的原型，設計一些基本元素和交互流程之后，考慮最優的列數。列間距的區域不可以放置內容，我們一般會給列間距設定一個定值來確定列寬大小，這個列間距也是模塊間的間距。

柵格數量：

常見的柵格系統通常被劃分為 12 柵格或 24 柵格。劃分的格子越多，承載的內容越精細。也有較少項目會根據實際情況也會劃分成 16 柵格、20 柵格，移動設備屏幕尺寸小于PC屏幕，想要有更靈活發揮空間，就必須采用列寬較小的柵格。

12 柵格：

12 柵格系統在流行的前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用，一些商業網站、門戶網站通常劃分成 12 柵格，適用于業務信息分組較少，單個容器內信息體積較大的中后臺頁面設計。根據業務場景可以很容易的將12柵格區域劃分成 2 等分、3 等分、4 等分、6 等分，以及根據等分容器組合的多種不等分場景，組合也是柵格作為一個界面輔助系統非常方便的原因。

24 柵格：

24 柵格系統適用于業務信息量大、信息分組較多、單個容器內信息體積較小，場景復雜的頁面設計。相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。我們常見的B端web設計一般選用24柵格，柵格系統大小就是24列+23列間距+2大邊距。

Ant 采用了 24 列、23 列間隔的柵格系統。其中間隔數值是固定的，內容區域減去 23 列間隔后，剩下的部分等分成 24 列。

注意：

其內容模塊必須位于若干列上，可以任意分割，比如 6×2,3×4,4×3，下面是不同分割方式設計的信息模塊。
只要父級模塊對齊柵格，子級元素可以不對齊列，同時子模塊也可以有自己的柵格系統。

列寬無法永遠精準整除，而相差的像素值往往是無法被用戶以肉眼察覺的，柵格不是為了每一像素的精確，而是為了保證瀏覽效果的秩序、協調與統一。

確定列間距與大邊距

列間距與大邊距選擇8(最小單位)的倍數，網格將更加一致?？梢詫㈤g距值把常用的數值整理成號碼表，間距復用化：小= 8px，中= 16px，大= 24px ，x大= 32px等等…這樣一來，保持一致性更加容易，更加合乎邏輯，并且開發人員也會高興，因為他們可以根據屏幕元素之間的關系安全地假定間距。

注意：

列間距的數值越大，頁面留白間隙越多
列間距的區域不可以放置內容模塊，內容區從列間距開始到列間距結束

非常規設計時不需要柵格系統，根據設計場景可自定義。

03 柵格與適配

柵格系統適配過程中需要考慮三個原則:等比縮放、彈性控件、文字流自適應。隨著設備多樣化，通用的適配方式是自適應與響應式布局，隨之就是柵格系統的變化。我們先聊下斷點。

61b76斷點，用瀏覽器打開一個網站，檢查元素，右上角會顯示視窗當前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。

斷點設計主要考慮基礎的3端，一般大于等于1440為web布局，1439-500為平板布局，小于500為手機布局。每經過一個斷點，可以改變柵格大?。ū热?6柵格改為8柵格），固定改為拉伸，樣式（文字、顏色）。制作精良的話可以設計多個斷點，如480、600、840、960、1280、1440和1600px。

3.1 柵格的行為

固定柵格：

固定網格的最大特征是在網頁收縮過程中，經過一個斷點就會自動減少最邊緣元素，其他元素基本保持不變。通過在嵌入式塊中排列圖塊，在工具欄中放置圖標等，可以用固定的框來形成網格。柵格列數隨著瀏覽器寬度的減少而減少，邊緣圖塊自動換行，或者有時會溢出滾動條。

首先通過最小單位選擇一個基本尺寸，然后以基本尺寸的倍數構建每個盒子框，就會出現一個個網格。

流動柵格：

流動柵格是元素隨著設備尺寸變化而比例變化，當到屏幕大小變化的斷點時，列可以增長或收縮以適應可用空間，邊緣元素被減掉。但并不是每一個斷點都需要去減少元素，可以適當的按照元素的比例進行大小調整。流動布局兼容性高，能更好的適配多分辨率。

流體柵格非常適合編輯內容，儀表板，圖像，視頻，數據可視化等。對用戶而言，縮放事物的大小比縮放可見事物的數量更為有用。

在每個斷點處，列數是固定的，在斷點范圍之間，實際列寬是柵格區域百分比縮放，而不是最小單位倍數。內容區域是動態運動，就需要運用柵格系統。

混合柵格：

內容區域流動和固定柵格組合也是常見的做法，混合柵格既有流動的寬度，也有固定寬度?；旌喜季謱τ脩羰钟押?，如下圖左側是固定柵格，右側是流動柵格。

3.2 響應式與自適應

在初期，網頁使用的是絕對靜態布局為主。靜態布局中如果用戶的屏幕大于或小于設計預期，結果會出現的滾動條，過長的行以及對空間的不良使用。后隨技術發展，為了兼容各種瀏覽器，出現了針對各設備適配的解決方案，自適應布局。

后來移動互聯網爆發，html5 標準發布，與移動設備、平板電腦和智能設備(游戲機)等需要提供了更豐富的功能，用戶希望能夠使用各種設備訪問任何網站，結合自適應的思想，出現了響應式布局的概念——2010 年由 Ethan Marcotte 提出。

自適應：

自適應布局是網頁內容根據設備的不同而進行適應，來判斷當前訪問的設備是PC端、平板還是手機，為不同終端分別提供獨立的前端代碼。自適應設計可以更好地適應用戶在現場的各種需求，缺點是成本較高。

自適應設計即創建多個布局，每個靜態布局對應一個屏幕分辨率范圍。比如你對自適應網站的窗口大小進行調整，每經過一個斷點就可以得到不同的布局（頁面元素位置發生改變），但在每個布局中，沒有經過斷點時頁面元素不隨窗口大小的調整發生變化。每經過一個斷點，布局和位置是可改變的，也有特殊，如兩個斷點間等比縮放，可以保留用戶在多個設備間的操作習慣。

自適應設計，變化沒必要過于復雜，保留必要的功能入口，不必要的可以隱藏給不同設備切換不同的樣式，在同一設備下(斷點范圍下)實際還是固定布局。

響應式：

響應式是通過一套代碼，無縫匹配符合電腦、平板、手機效果的前端技術，開發成本更低，高適應性；設計成本更低，一套設計應對多端，最大化提升用戶的操作體驗；響應式不提供自適應性那么多的控制，多端同步生效，減少運營成本，保障業務效率。

一個典型的響應式布局，通過改變瀏覽器的寬度就會發生響應變化，而不是像自適應經過設備斷點時內容才發生改變。響應式布局中會出現諸多差異較小的狀態，同樣讓響應式布局更加的難以測試和預測。

響應式也存在斷點，是網頁在收縮的過程中的最小范圍。當網頁到達這個范圍以后，網頁內部的元素就要進行相應的變化，用來適應屏幕的變化。

響應式設計的前提有兩點：1，頁面布局具有規律性，元素寬高可用百分比代替固定數值；2，網頁圖片必須是可伸縮的。這正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式是順理成章和高效快捷。

響應式網頁測試工具：我有反應嗎？和 designmodo

總結一下：

自適應布局是內容根據終端不同進行適應，響應式布局是網頁的布局針對屏幕大小進行響應。響應式布局等于流動柵格，而自適應布局使用固定斷點來進行多個布局。自適應布局給了我們更多設計的空間，因為只用考慮幾種不同的狀態；而在響應式布局中就會出現上百種不同的狀態，雖然絕大部分差異較小。

自適應與響應式如何選擇用哪個呢？

頁面功能不多，用戶交互少，不需要經常升級，響應式設計從運營的難易和維護的便利性考慮會更好，如邏輯簡單并且內容大致相同的官網和展示頁面；頁面個性化多功能方面考慮，自適應設計更合適，用戶體驗更好，如功能復雜、用戶交互頻繁的網站。

全平臺適配
除此之外，隨著移動設備的生產力逐步加強，手機、折疊屏、平板、電腦之間的界限變得模糊，端與端的差距也在縮小。蘋果推出 iPadOS ，讓移動端的便捷和桌面端的超強生產力進一步融合。而從應用的開發而言 Electron、Flutter 等跨系統框架層出不窮，開發者也在不斷嘗試在不同平臺上用一套代碼提供同一套服務，減少系統隔閡所帶來的維護成本。

48b96盡管全平臺系統設計的概念還不成熟，但我們可以看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應用的基礎規則，正如當初的響應式設計。