咕噜噜

网格是设计中组织布局的系统。互联网之前,平面设计师对印刷材料(书籍、杂志或海报)使用网格布局。现在,UX/UI设计师仍然广泛使用网格布局,因为它们是界面设计(网页、移动APP)的基础结构。

小可爱们,我这里会定期推送插画、UI设计、排版等相关文章教程,有事没事来逛逛啊;
设计路上在学习,永不停歇,我们一起加油~

 

网格不仅能直观地组织设计元素,还能作为一种工具,通过增强可读性、明确信息架构和提供响应性设计框架来改善用户体验~

 

 一、六种网格类型

每种类型的网格都有不同的用途,通过了解不同的网格类型帮助我们在设计的时候匹配最合适的网格。

 

1、 基线网格

图片

基线网格是由等距水平线组成的密集网格,用于确定文本的位置。基线网格通常与分栏网格结合使用,以确保每列中的文本在界面上均匀对齐。

基线网格最简单的示例是一张划线纸,准确清晰地展示设计元素的位置。

图片

 

2、单栏网格

图片

单栏网格是最基础的形式,用来确定文本在页面中的位置,多用于书籍、杂志等以文字为主的版面设计中。 

 

3、分栏网格

图片

图片

这是日常设计中最常使用的网格类型,将一个页面拆分成多个垂直区域,然后将对象与之对齐。

报纸和杂志的排版设计、网页和APP的设计都会广泛使用分栏网格。

图片

 

4、模块化网格

图片

模块化网格是柱状网格的扩展,采用垂直方向的列并添加水平的行。相交的行和列创建“模块”,可用于管理内容较为复杂的界面或者海报设计。 

 

5、像素网格

图片

在用Photoshop作图时,不断放大画布,会看到画布上有密集的像素网格出现。

数字屏幕是由数百万像素的微观网格组成的,为了设计的准确性,设计师需要逐个像素地编辑图像,同时也练就了“像素眼”。小到一个icon,大到整个网页,都可以借助像素网格来完成。

图片

 

6、层级网格

图片

层级网格是指按照内容的重要性来组织界面元素,让用户能够按照主次的层级顺序浏览界面。层级网格主要用在网页设计中,形式比较自由形式,大多数是结合网页的内容来确定。

将界面中的内容进行优先级排序,按照层级结构清晰展示内容的优先级,为产品提效。

图片

 

 

二、在UX/UI中使用网格的5个技巧

在工作中尝试使用网格系统时,下面的关键要点能帮助我们实现有效、灵活的设计:

 

1、规划网格与页面的关系

图片

在《平面设计网格系统》这本书中,作者强调网格在页面中的位置以及页边距的设置对网格的功能和美感有很大影响。合适的页间距和留白会让页面看起来更舒服。 

 

2、不要只使用网格设计

图片

当接到一个全新的需求时,很多设计师习惯以常用的网格和栏宽作为标准开始设计。

虽然常用的网格系统设计起来更熟悉,但花时间弄清楚当前的项目实际需要什么样的网格,以及是否有其他需要考虑的因素也同样重要。这样做能够避免我们被困在一套网格标准中,限制设计的发挥。 
 
 

3、保持设计元素在网格内

图片

网格中每一栏之间都会有间距作为分隔,当页面中的文本和图形跨越多栏时,需要保持内容在网格每一栏的边缘,避免将元素放到间距的边缘。

图片

 

4、不要忘记基线对齐

图片

确保基于列的设计中的所有文本遵循一致的基线,这样可以大大改善页面的和谐感和组织感。

在数字设计项目中,基线对齐很容易被忽视,但它可以很好地平衡设计,对齐后页面会有更舒服的视觉效果。 

 

5、考虑使用8pt网格进行设计

图片

我们的设计必须能保证在各种设备和屏幕分辨率下都能工作并且看起来很清晰。使用基数的倍数的尺寸和间距有助于使设计过渡清晰和系统化。

现在通常使用8pt网格,这样无论是矢量设计还是基于像素的设计,都可以在视网膜屏幕上完美缩放。 
 
 
 

最后

以上是在UX/UI设计中常见的6种网格类型和5个技,希望通过这些内容能让你对网格系统的应用有更深的认识。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网 » 在UX/UI设计中使用网格系统的5个技巧

登录收藏
 
你可能喜欢的:
如何让你的设计看起来更有说服力?试试网格系统!如何让你的设计看起来更有说服力?试试网格系统!
浅谈网格排版浅谈网格排版
秩序之美(上)-浅析栅格系统秩序之美(上)-浅析栅格系统
UI 场景中常见的 3 个主题化区域UI 场景中常见的 3 个主题化区域
如何改进UI中的按钮设计,试试这5个方法!如何改进UI中的按钮设计,试试这5个方法!
双十一海报没思路,这样“抄”真不错!!双十一海报没思路,这样“抄”真不错!!
中后台产品的产研协同提效调研中后台产品的产研协同提效调研
“企业微信”的20年:腾讯是如何连接人和企业?“企业微信”的20年:腾讯是如何连接人和企业?
如何通过设计语言手册来传递品牌理念!如何通过设计语言手册来传递品牌理念!
花了三天扣的设计细节,回头看真的值了!花了三天扣的设计细节,回头看真的值了!