火星網(wǎng)校
學習UI設計 |如何入門B端柵格化布局
發(fā)布時間：2024-03-12 17:25:22 瀏覽量：246次
如果你是一名B端設計師，那么“柵格化”布局一定是聽到過這個名詞的。
作為B端界面布局中最為底層的布局邏輯，“柵格化”一直是處于飽受爭議兩極分化的一個狀態(tài)。有些人覺得“柵格化”華而不實，工作中從來不用，而另一些人則認為“柵格化”是設計專業(yè)度的體現(xiàn)，是最基礎的布局規(guī)范。
那么“柵格化”對于B端設計師而言，到底是否有價值？我們又應該如何科學的理解柵格化呢？
今天這篇文章，就帶大家快速的了解柵格化對于實際工作的意義：
柵格化的前世今身：
柵格化脫胎于平面設計中的“網(wǎng)格系統(tǒng)”(Grid systems)——最基礎的柵格化也就是我們在設計中常用的輔助線。
（平面設計時代：無網(wǎng)格，不排版）
早在20世紀初，德國、荷蘭、瑞士等國的平面設計師們就開始提倡用客觀的設計原理進行文字的編排，二戰(zhàn)后這種理念在瑞士得到了良好的發(fā)展，直到20世紀40年代后期，第一次出現(xiàn)了使用網(wǎng)格進行輔助設計的印刷作品。至此，這一設計理念開始蓬勃發(fā)展，直至今日。
（網(wǎng)格系統(tǒng)的橙皮寶書）
時至今日，互聯(lián)網(wǎng)時代，網(wǎng)格系統(tǒng)演演變成了柵格系統(tǒng)，但是基本邏輯還是一樣的。
網(wǎng)格系統(tǒng)的基礎邏輯非常簡單：通過橫向與縱向的輔助線，將畫面分割成若干等高寬的“網(wǎng)格”，然后將元素基于網(wǎng)格對齊，就能獲得較為有視覺秩序的設計作品，并且從閱讀體驗上來說，也是較為舒適的。
（平面時代的網(wǎng)格系統(tǒng)）
網(wǎng)頁時代，由于單屏幕的信息承載量較大，如果沒有整齊的布局，那么信息的傳達有序性就會被削弱，所以人們借鑒了平面設計中的柵格系統(tǒng)，將之演變成了“柵格系統(tǒng)”。
（柵格化，既是美感需要，又是技術需要）
柵格化基本組成：
要理解柵格化，那么我們就需要科學的理解柵格化的基本組成元素：
1. 網(wǎng)格 | Grid
網(wǎng)格是構成頁面柵格系統(tǒng)的最小單位。也可以稱之為“最小基本顆?！?。
以網(wǎng)頁為例子，最常見的“最小基本模塊”通常都是8像素或者10像素。這是最為常見的基礎網(wǎng)格參數(shù)。
注：最小基本單位在設定的時候，有2個需要遵循的基本規(guī)則：
1、不能出現(xiàn)小數(shù)點（1像素是無法被切割的）
2、盡量是雙數(shù)（所有分辨率數(shù)據(jù)，都是雙數(shù)）
2. 柵格寬度 | Container
柵格寬度是頁面柵格系統(tǒng)的總寬度。
這里需要注意：柵格總寬度不等于頁面總寬度，而是給予內(nèi)容展示的安全區(qū)域來進行計算的。
3. 列和槽 | Column&Gutter
列是柵格的數(shù)量單位，常見的列數(shù)有8、12、16、20、24、36。但是這并不是一定的，需要根據(jù)實際情況調(diào)整列數(shù)。
柵格系統(tǒng)中，一列中包含了列寬（Column Width）、以及槽（Gutter）兩部分。槽和列的寬度，都應該是網(wǎng)格（Grid）數(shù)值的整倍數(shù)。
4. 區(qū)塊 | Col-n
建立好基礎柵格之后，一塊內(nèi)容通常會占用幾個列，我們把這個區(qū)域理解為內(nèi)容區(qū)塊，用于承載一個區(qū)域的內(nèi)容。
（區(qū)塊=BOX）
常見入門問題解答：
1、柵格布局是否在高度上會起到作用？
答：并未強制規(guī)定。通常情況下，柵格只作用于寬度。若你對于比例關系有專業(yè)層面的執(zhí)著（這里執(zhí)著是褒義，畢竟設計就是講細節(jié)的），亦可自行進行控制。
2、柵格是否會對“區(qū)塊”內(nèi)的元素有影響？
答：并未強制規(guī)定。通常情況下，柵格只作用于寬度。若你對于比例關系有專業(yè)層面的執(zhí)著（這里執(zhí)著是褒義，畢竟設計就是講細節(jié)的），亦可自行進行控制。
3、不使用柵格能進行網(wǎng)頁設計么？
答：理論上來說，只要你注意對齊問題，也是能進行設計的。但是從開發(fā)角度和視覺精細度來說，柵格化都是比較好的解決方案。
柵格化在B端的應用：
由于B端的頁面信息內(nèi)容往往較為復雜，所以柵格化系統(tǒng)在B端中，是被普遍應用的。B端常用組件庫Ant design就是典型的基于8像素基礎網(wǎng)格的柵格化設計的典范。
B端柵格化常見問題1：
柵格化在B端應用中是否需要填滿頁面？
并不是如此，在B端界面設計中，我們的柵格區(qū)，只作用于內(nèi)容層上。
B端的框架布局千變?nèi)f化，但歸根揭底，基礎變化就3種：
上下布局的情況下，我們的柵格作用區(qū)域如下：
左右布局以及T形布局的情況下，我們的柵格作用區(qū)域如下：
B端柵格化常見問題2:
如何確定柵格總寬度？
以內(nèi)容區(qū)域?qū)挾葹榛境叽?，去掉邊距后，確保柵格總寬度是網(wǎng)格（Grid）數(shù)值的整倍數(shù)即可。
（邊距的使用，既是為了好看，也是為了好計算）
B端柵格化常見問題3:
如何確定自己設計的界面應該用幾列的柵格？
B端柵格化常見問題4:
如何設置柵格：
最簡單的辦法：
只要我們做一些簡單的寬度、列與槽的數(shù)值，就能生成對應的柵格。
網(wǎng)站提供PNG下載，下載后直接貼到文件里就可以使用。
另一種方式：使用SKETCH進行設計，直接在“布局”中進行設置就好。
Sketch中相關參數(shù)，只需要理解本文中相關的參數(shù)，即可進行科學的設置。
總結(jié)：
從平面時代的網(wǎng)格系統(tǒng)，到互聯(lián)網(wǎng)設計時代的柵格系統(tǒng)，雖然叫法上有一定差異，但是起的作用和基礎的規(guī)則都是相通的。只要科學的進行理解，那么柵格的理解還是較為容易的。
來源網(wǎng)絡
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內(nèi)容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
