火星網(wǎng)校
想要用好網(wǎng)格系統(tǒng)，這8個小技巧你必須知道
發(fā)布時間：2024-03-12 20:53:12 瀏覽量：109次
什么是網(wǎng)格設(shè)計？
網(wǎng)格是設(shè)計好任何界面的基礎(chǔ)，可以將其理解為布局的框架。這套框架有助于組織UI元素、引導用戶并確定設(shè)計的各個部分。
常用術(shù)語
網(wǎng)格（Grid）由網(wǎng)格單元（Grid unit）組成。布局放在網(wǎng)格上，它包含一定數(shù)量的列，列的左側(cè)和右側(cè)都有外邊距（Margin），每列之間都有內(nèi)邊距(Padding)，也叫水槽。
技巧1，正確地選擇列數(shù)
雖然 12 列 Bootstrap 類似網(wǎng)格是最受歡迎的選擇，但它不是強制性的。選擇網(wǎng)格時，根據(jù)設(shè)計真正需要來確定用多少列的網(wǎng)格，做到不多不少。（彩云注：可以根據(jù)自己的界面主要尺寸來定義列數(shù)，常見的可以按4的倍數(shù)或者8的倍數(shù)來設(shè)置）
技巧2，了解限制條件
始終以你正在設(shè)計的設(shè)備屏幕為基準，了解目標用戶的使用習慣， 利用這些限制并學習使用它們進行設(shè)計
最常見的屏幕分辨率 (px)
- PC: 1440x1024
- 平板電腦: 768x1024
- 手機：320x640（這里指的是1x圖）
技巧 3，間距保持一致
統(tǒng)一垂直和水平間距，使得布局更具吸引力和一致性。
技巧 4 ，用好網(wǎng)格基線
使用基線網(wǎng)格來排列內(nèi)容并為文本和布局元素帶來視覺一致性。（彩云注：保持文字底部對齊的網(wǎng)格）
額外提示——調(diào)整字體行高以匹配基線網(wǎng)格。
例如：如果選擇4px作為基線/網(wǎng)格單位，對齊文本，需要將字體的line-height設(shè)置為單位的倍數(shù)，即行高應(yīng)該是 4、12、32、64 等
技巧 5，利用好框架和顏色
把框架作為一種工具，將用戶的注意力集中在某個布局部分上， 在需要的地方添加額外的視覺重量。（彩云注：比如為凸顯某個數(shù)據(jù)而改個卡片顏色，在做后臺界面時比較常見）
技巧 6 ，打破網(wǎng)格
將某些元素排除在網(wǎng)格之外，使用這個分解技巧來增加價值并使你設(shè)計的某些部分能脫穎而出，引導用戶。（彩云注：比如出界的設(shè)計，或者大小有比較大的對比）
技巧7，動態(tài)網(wǎng)格
確保你設(shè)計的布局能適應(yīng)常見的屏幕尺寸、并適配多種終端保持體驗一致。（彩云注：該布局不改變網(wǎng)格體系，間距那些依然可以保持不變）
技巧8，靈活運用網(wǎng)格系統(tǒng)
沒有網(wǎng)格的設(shè)計對于小型項目確實是可以的，但對于相對較大的項目，使用網(wǎng)格就非常有必要了，甚至是強制的。
學習使用網(wǎng)格進行設(shè)計，但也并非生搬硬套，你需要不時觀察布局，為你的需求找到最有創(chuàng)意的解決方案。
熱門課程推薦
熱門資訊
-
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. 武漢UI設(shè)計培訓班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓班的學費價格以及學習內(nèi)容。
-
10. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
