AMO全媒体运营
首页 交互设计 UX/UI设计中常见的6种网格类型和5个技巧

UX/UI设计中常见的6种网格类型和5个技巧

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

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

UX/UI设计中常见的6种网格类型和5个技巧

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

  六种网格类型

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

1) 基线网格

UX/UI设计中常见的6种网格类型和5个技巧

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

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

UX/UI设计中常见的6种网格类型和5个技巧

2) 单栏网格

UX/UI设计中常见的6种网格类型和5个技巧

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

3) 分栏网格

UX/UI设计中常见的6种网格类型和5个技巧

UX/UI设计中常见的6种网格类型和5个技巧

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

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

UX/UI设计中常见的6种网格类型和5个技巧

4) 模块化网格

UX/UI设计中常见的6种网格类型和5个技巧

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

5) 像素网格

UX/UI设计中常见的6种网格类型和5个技巧

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

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

UX/UI设计中常见的6种网格类型和5个技巧

6) 层级网格

UX/UI设计中常见的6种网格类型和5个技巧

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

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

UX/UI设计中常见的6种网格类型和5个技巧

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

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

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

UX/UI设计中常见的6种网格类型和5个技巧

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

2) 不要只使用网格设计

UX/UI设计中常见的6种网格类型和5个技巧

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

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

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

UX/UI设计中常见的6种网格类型和5个技巧

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

UX/UI设计中常见的6种网格类型和5个技巧

4) 不要忘记基线对齐

UX/UI设计中常见的6种网格类型和5个技巧

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

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

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

UX/UI设计中常见的6种网格类型和5个技巧

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

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

最后

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

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

让动效设计提升UI/UX用户体验

让动效设计提升UI/UX用户体验

今天为大家分享的是「动效设计」。和听觉语言、视觉语言一样,动作也是语言的一种,可以在有限的空间内传递更多信息,轻松传达静...
这11条交互界面设计原则,设计师都应该看看

这11条交互界面设计原则,设计师都应该看看

在交互设计中,设计师与目标用户的联系很密切,我们需要时刻考虑用户在什么场景下做了哪些操作,确保产品功能好用、易用,符合用...
方法+实战!一站帮你搞定设计系统度量

方法+实战!一站帮你搞定设计系统度量

成熟的设计系统是一个强大的生态体系,在这个体系下,各系统部分协同运行,促进平台产品之间的一致性,为更大规模的产品提供“标...
怎样利用设计降低认知负荷?

怎样利用设计降低认知负荷?

当你使用形形色色的APP时,是不是时常不由自主地感慨“这个APP的界面太丑了”、“这个APP太难用了,连入口都找不到”,...
5种动效输出格式优缺点对比,含一键输出AE动效参数方法

5种动效输出格式优缺点对比,含一键输出AE动效参数方法

作为用户体验领域不可缺少的一部分,动效随处可见。日常工作中,我们可能只用1-2种动效格式,对其他格式的了解有所欠缺。 这...

发表回复

返回顶部