火星网校
想要用好网格系统，这8个小技巧你必须知道
发布时间：2024-03-12 20:53:12 浏览量：109次
什么是网格设计？
网格是设计好任何界面的基础，可以将其理解为布局的框架。这套框架有助于组织UI元素、引导用户并确定设计的各个部分。
常用术语
网格（Grid）由网格单元（Grid unit）组成。布局放在网格上，它包含一定数量的列，列的左侧和右侧都有外边距（Margin），每列之间都有内边距(Padding)，也叫水槽。
技巧1，正确地选择列数
虽然 12 列 Bootstrap 类似网格是最受欢迎的选择，但它不是强制性的。选择网格时，根据设计真正需要来确定用多少列的网格，做到不多不少。（彩云注：可以根据自己的界面主要尺寸来定义列数，常见的可以按4的倍数或者8的倍数来设置）
技巧2，了解限制条件
始终以你正在设计的设备屏幕为基准，了解目标用户的使用习惯， 利用这些限制并学习使用它们进行设计
最常见的屏幕分辨率 (px)
- PC: 1440x1024
- 平板电脑: 768x1024
- 手机：320x640（这里指的是1x图）
技巧 3，间距保持一致
统一垂直和水平间距，使得布局更具吸引力和一致性。
技巧 4 ，用好网格基线
使用基线网格来排列内容并为文本和布局元素带来视觉一致性。（彩云注：保持文字底部对齐的网格）
额外提示——调整字体行高以匹配基线网格。
例如：如果选择4px作为基线/网格单位，对齐文本，需要将字体的line-height设置为单位的倍数，即行高应该是 4、12、32、64 等
技巧 5，利用好框架和颜色
把框架作为一种工具，将用户的注意力集中在某个布局部分上， 在需要的地方添加额外的视觉重量。（彩云注：比如为凸显某个数据而改个卡片颜色，在做后台界面时比较常见）
技巧 6 ，打破网格
将某些元素排除在网格之外，使用这个分解技巧来增加价值并使你设计的某些部分能脱颖而出，引导用户。（彩云注：比如出界的设计，或者大小有比较大的对比）
技巧7，动态网格
确保你设计的布局能适应常见的屏幕尺寸、并适配多种终端保持体验一致。（彩云注：该布局不改变网格体系，间距那些依然可以保持不变）
技巧8，灵活运用网格系统
没有网格的设计对于小型项目确实是可以的，但对于相对较大的项目，使用网格就非常有必要了，甚至是强制的。
学习使用网格进行设计，但也并非生搬硬套，你需要不时观察布局，为你的需求找到最有创意的解决方案。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
