
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
网格设计是大多数UI设计师在设计网页或者是设计app界面的时候会经常用到的一种设计方法,而本文我们就通过案例分析来简单了解一下,网格设计的概念与类型分析。
1、什么是网格?
网格是一种对齐工具,它由一些横向和纵向的线组成,主要用到对齐图形,文字以及图片,主要建立这些内容的秩序和规则,终保证设计一致性的一个基础框架。这些线也只有设计师看的见,其实网格的运用在生活中很常见。
2、网格的几种类型
1.手稿型网格
手稿型网格:也是简单的网格类型,常用在书籍上面比较多,它本质就是一个大型矩形框,内容占据了大多数空间。
适合场景:传统书籍杂志,手稿网格适合于都是文字的设计,但是也不局限于文字,图片也可以当内容,在互联网设计中,新闻类产品,偏内容阅读比较适合手稿型网格。
2.多列网格
多列网格:顾名思义,多列网格有几列,大家可以这么记住它,你创造的列越多,网格就越灵活,多列网格对于很多复杂的,不同的内容布局非常有用,使用多列网格,可以为不同内容创建趋势。
适用场景:绝大数产品,网页,平面设计,这个多列网格也是现在运用比较广泛的,很多产品都运用到。
3.模块化网格
模块化网格:就是网格垂直和纵向拆分成多个模块的网格,形成井字形模块,每一个小模块形成一个单元格,当我们需要面对比较复杂布局,模块化网格为页面提供了灵活的内容格式。
适用场景:报纸,杂志,电商设计,表单之类的场景。
4.基线网格
基线网格:是设计中垂直间距的基础结构,它主要用于保证页面水平对齐的层次结构。
适用场景:文本对齐时候,图片展现类似网站。
3、运用网格的好处
在移动产品设计中,人们使用的设备越来越多,从智能手表到手机到iPad到PC,屏幕越来越多,设计师必须创建一套网格系统来组织内容,使得这套网格细节能适应各种场景和分辨率。
更清晰的一致性:网格是设计的基础,比如页面节奏,空白,都说影响设计很重要的因素,网格系统能,保证这些元素的一致性,有效的网格能引导我们的眼睛去阅读,使我们更容易扫描屏幕上面内容,同时一致性也能帮助我们了解内容后采取下一步的行动。
提升阅读性:人们大脑在不到一秒时间做出判断,设计不合理,排版混乱的商品显得不那么值得买,好的排版能强化视觉层次结构。
团队协作:网格系统本身就能保证团队设计对齐一致性,好的网格系统能解决页面中骨架统一性,减少在设计间距,留白上的不一致。
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销,赚更多好礼。