UI设计需要用栅格化布局吗?

  • A+
所属分类:经验思维

本文来源: 静电@静Design(公众号:jingdesign91), 共 2179 字

最近有一些小伙伴问到了栅格化的问题。其实栅格化是一个很古老的布局系统,注意抓重点,栅格化是一种“布局”系统。说的直白点,栅格化就是让设计师用一种更“规矩”的方式来将画布宽或者高画块儿的一种方式。要了解UI设计要不要用栅格化布局,我们需要先来了解一下什么是栅格化布局。

01,栅格化布局的前世今生

早在网页设计时代,栅格化布局已经开始风靡。检验一个前端的基本功就是考察他写的布局是否规范。由于网页设计主要基于比较宽的电脑显示器屏幕,因此设计师为了能让设计的分栏更加优雅和严谨,便将宽度进行了更有意义的划分,当时的网页宽度以950px,960px,1000px,1190px,1200px居多,并且网页设计过程中大多数内容是要分栏的,可是分多少合适呢?有些设计师会说,我随意划分宽度就好,只要视觉接受都是可以的。也有些更严谨型的设计师说,不行!我们要提供一些宽度比例,让这些分栏更接近于黄金比例的数字,这样会更优雅。于是,他们将网页区域画出n多个小块,然后让这些内容占据不同单位的块,因此就形成了下图的样子:

UI设计需要用栅格化布局吗?

最常见的布局就是24块分三栏的方式,左边n=4,中间分栏n=11,右边分栏n=9个单位。如下图的Yahoo!网页设计。

UI设计需要用栅格化布局吗?

这样做的好处显而易见,设计师更方便的计量页面宽度,各个分栏直接的间距,并且它们具有更高的一致性。在当时960Grid System更为流行,我们看到下图,就可以有更直观的感受。

UI设计需要用栅格化布局吗?

02,UI设计需要栅格化布局吗?

对于栅格化,其实内容还是非常多的,但我们今天就普及到这里,其实大家更想了解的问题就是:“UI设计过程中,需要栅格化吗?”

在解答这个问题前,我们先来分析下,为什么网页需要栅格化,其实原因很简单。网页设计大多数需要分栏,因为宽度大,切内容多。参考上边Yahoo!的例子,那么再看一看,你的APP设计过程中,真的需要分很多的栏(主要指宽度)吗?

现在做个练习,大家打开自己常用的APP,观察其界面,会发现,相对于网页设计来说,手机APP的布局可真的算是小儿科了,最多有2-3栏的设计已经算多的了。毕竟,虽然分辨率宽度和网页差不多,但内容占据的比例也大啊。更多的时候,我们在内容的布局上,可能是全宽也说不定,如下图是Enjoy的页面设计。

UI设计需要用栅格化布局吗?

所以在这种情况下,我们仍然可以创造自己的栅格化系统,将页面进一步分栏,但是网页端的分栏方式,这个时候已经不适用于APP的界面了,毕竟APP的分栏数并不多。此时我们可以将页面用分栏做设计,但是由于APP大部分时候属于自适应宽度布局(响应式布局方式),因此,栅格化的时候已经并不是那么好做了,当然,如果你还是坚持栅格化,那么也是可行的,但是需要计算好百分比。

可是,这样做的意义有多大呢?静电在这里不置可否,因为栅格化布局历来就存在着对立面,那就是“天才设计(Genius Design)”,什么是天才设计呢,就是直接依赖设计师眼睛做布局的方式。毕竟,很多设计师并不喜欢复杂的数学题。

因此,UI设计到底需要栅格化布局吗?静电在自己的设计过程中,其实是用的相对毕竟少的,原因很简单,就是移动端设计分栏真的少,大可不必再进行复杂的分栏设计。我们只需要保持设计过程中间距的统一即可。在提倡快速设计与迭代的移动端设计过程中,栅格化布局看起来已经不是那么的重要。

03,什么情况下使用栅格布局更有效?

再次强调,当你的页面布局中出现比较多的对宽度进行分栏的情况下,栅格化布局是更能发挥其作用的。比如下图的Dribbble页面。大家可以尝试对其进行栅格化布局设计(由于Dribbble属于响应式页面,因此栅格化更加复杂,百分百与定宽是混用的)。

UI设计需要用栅格化布局吗?

再次思考,下面的这种APP界面设计,有必要栅格化吗,如果非要栅格化布局,哪种更合适呢?

UI设计需要用栅格化布局吗?

04,严谨与感性设计方式的选择

其实,栅格化布局只是设计的一种方式,特别是我们需要更多的考量分栏的情况下,这种布局会发挥更理性和规范的作用。但并不是说设计过程中一定要进行栅格化,我们只要保证页面元素,间距的规范性,就算你不进行栅格化布局,那也没有任何问题。

况且,对于目前越来越多的响应式布局和设计而言,栅格化布局已经显得不那么重要了。说白了,就算你现在使用“天才设计(Genius Design)”,更自由的发挥,也并不是一件大不了的事情。

很多时候,设计是严谨的,但也有很多时候,设计更是感性至上的。“天才设计(Genius Design)”与栅格化设计的争议一直存在。至于要不要用,这并不是对错问题。我们任性点,你喜欢就好(摊手~)

05,延展思考:设计规范是金科玉律吗?

其实,这世界上并没有什么设计规范。有些设计师说,在APP设计上,文字一定要用多大号字,Navigation Bar一定要多高,透明度一定要是某个数值,颜色必须是某个色号,但是现实情况往往给他们一个大大的巴掌,越来越多的应用开始摆脱束缚,现在,你能否找到越来越多突破所谓设计规范的设计呢?

不要生搬硬套,在需要灵活的时候,尝试让自己的设计灵活点吧!抛开技术限制,只要最终我们的体验不是反人类的,是舒适的,好用的,那你的设计就是好设计。设计规范,不是设计公式!从另一个层面上讲,设计规范只是设计指导建议而已。设计这道题,不是只有对与错两种答案,只有这样,设计才更多的是一种丰富多彩的存在。让感性设计和理性思维并存,也许这才是设计最好玩的地方。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: