在UX/UI设计中使用网格系统的5个技巧
关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第122篇文章分享
网格是设计中组织布局的系统。互联网之前，平面设计师对印刷材料(书籍、杂志或海报)使用网格布局。现在，UX/UI设计师仍然广泛使用网格布局，因为它们是界面设计(网页、移动APP)的基础结构。
六种网格类型
每种类型的网格都有不同的用途，通过了解不同的网格类型帮助我们在设计的时候匹配最合适的网格。
1) 基线网格
基线网格是由等距水平线组成的密集网格，用于确定文本的位置。基线网格通常与分栏网格结合使用，以确保每列中的文本在界面上均匀对齐。
基线网格最简单的示例是一张划线纸，准确清晰地展示设计元素的位置。
2) 单栏网格
3) 分栏网格
这是日常设计中最常使用的网格类型，将一个页面拆分成多个垂直区域，然后将对象与之对齐。
报纸和杂志的排版设计、网页和APP的设计都会广泛使用分栏网格。
4) 模块化网格
5) 像素网格
在用Photoshop作图时，不断放大画布，会看到画布上有密集的像素网格出现。
数字屏幕是由数百万像素的微观网格组成的，为了设计的准确性，设计师需要逐个像素地编辑图像，同时也练就了“像素眼”。小到一个icon，大到整个网页，都可以借助像素网格来完成。
6) 层级网格
层级网格是指按照内容的重要性来组织界面元素，让用户能够按照主次的层级顺序浏览界面。层级网格主要用在网页设计中，形式比较自由形式，大多数是结合网页的内容来确定。
将界面中的内容进行优先级排序，按照层级结构清晰展示内容的优先级，为产品提效。
在UX/UI中使用网格的5个技巧
在工作中尝试使用网格系统时，下面的关键要点能帮助我们实现有效、灵活的设计：
1) 规划网格与页面的关系
2) 不要只使用网格设计
当接到一个全新的需求时，很多设计师习惯以常用的网格和栏宽作为标准开始设计。
3) 保持设计元素在网格内
4) 不要忘记基线对齐
确保基于列的设计中的所有文本遵循一致的基线，这样可以大大改善页面的和谐感和组织感。
5) 考虑使用8pt网格进行设计
我们的设计必须能保证在各种设备和屏幕分辨率下都能工作并且看起来很清晰。使用基数的倍数的尺寸和间距有助于使设计过渡清晰和系统化。
最后
以上是在UX/UI设计中常见的6种网格类型和5个技巧，希望通过这些内容能让你对网格系统的应用有更深的认识。
慢慢来比较快，如觉得有帮助，
添加微信,邀你进设计成长群🌟
🔥文章合集