1. 自营销首页
  2. 设计

掌握这个神器可以让版式更加高级

上篇文章这个神器掌握了,轻轻松松搞定高级感设计,很多小伙伴反应还不错。之前答应大家的满200“在看”我就分享另外一个神器,今天正好兑现承若。
今天分享这个神器与界面中版式设计有关,不管是做UI设计平面设计、又或者还是杂志设计等都离不开网格的运用。

国内外很多知名公司都会运用网格去规范设计体系,包括IBM、Google和Airbnb等这样企业,国内百度、阿里、腾讯等大厂也都有运用网格。
掌握这个神器可以让版式更加高级
掌握这个神器可以让版式更加高级
掌握这个神器可以让版式更加高级

上面就是IBM设计语言里面运用网格设计一些案例。

看到这样网格,有伙伴可能觉得这种网格很麻烦,还要去计算,其实这些根本不需要去算,有了今天这个插件,它可直接创建出来。
掌握这个神器可以让版式更加高级
掌握这个神器可以让版式更加高级
掌握这个神器可以让版式更加高级
网格在网页设计中UI设计中是非常常见,掌握好网格排版,可快速提高我们排版设计能力,排版节奏运用,同时提高我们设计专业性。
好了,现在正式介绍这个插件,名叫「Flavor」它有4个功能,导出文件到PXcook、可以数据填充、快速复制,最后一个亮点功能就是网格搭建。
掌握这个神器可以让版式更加高级

上图是Flavor的网格搭建面板,参数也是比较简单且直观清晰,大家从这个背景网格就能感受到他实现网格的方式。
掌握这个神器可以让版式更加高级

对于平面中的网格,它搭建起来也是非常容易。

那么如何使用呢?可能有部分同学不太懂网格,这里我简单说下,首先我们来认识下网格。
掌握这个神器可以让版式更加高级
如上图,一个基本网格系统就由边距、列和水槽组成。一般是放内容的,如界面布局元素,边距水槽一般不放内容,其中水槽是可以和列组合起来使用。

如下图一个简单案例:

掌握这个神器可以让版式更加高级

现在大家大致清晰知道网格的工作方式了,下面我简单说下,运用这个插件定义它的方法。
如下图,我的设计尺寸是1080X1920,是安卓设计尺寸,我想左右边距是72px,移动端网格我用6列,水槽间距定义40。

掌握这个神器可以让版式更加高级
这就简单完成网格的定义,可能很多有人有疑惑,就是我如何去确定边距到底用多少水槽间距。
首先,对于列数量移动端一般6列居多,当然也有4列大网格,但作为响应式布局使用,正常布局暂时用不到。
边距水槽间距一般都是偶数,要避免基数,不然宽度除不尽会有小数点。这里我推荐大家去使用4或者8的增量去定义。比如16、24、32、40、72、96等。
掌握这个神器可以让版式更加高级
这就是一个移动端完整的布局网格。是不是很简单就出来了,省去了在哪里计算的麻烦。

为了便于大家理解,我特意找了一份网格系统的PDF书籍,给大家去更深刻学习。
掌握这个神器可以让版式更加高级

这是PDF里面一些截图,大家一会去后台领取,领取方式在文末。


需要注意点:Flavor只是网格搭建插件,仅仅是一个工具,它可以快速帮助我们完成网格搭建,便于我们能高质量排版和统一多页面之间排版风格。


今天网格运用技巧对于平面设计类,它运用思路完全是一致的,来看下IBM网格的运用思路视频,大家就知道网格的重要性不言而喻。

来源:功夫UX,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/48071

发表评论

电子邮件地址不会被公开。 必填项已用*标注

侵权联系
分享本页
返回顶部