即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

Ui设计中网格解析和运用

编程语言 UI设计达人 86℃ 0评论

作者:skys

链接:http://www.ui.cn/detail/225105.html

1. 为什么要学习网格?

有效有规律的设计布局是设计的一个基本原则,网格无处不在,可能是你并没有注意到它的存在。简单理解就是:把一个页面,根据版心划分为无数统一尺寸的网格,广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。它能让你的设计更有规整次序也更加的有规律。简单的来说,就是用更加科学的方法去排版。

谷歌Material响应基于12列网格布局。该网格在布局之间创建视觉一致性,同时各种设计的灵活性。网格列的数量根据断点系统而变化。

2. 网格的基础概念

– 列 –

“列”是网格的垂直部分也可以理解为内容区域。网格中的列越多,其灵活性越大。但是列并不是越多越好,PC端一般是12列,移动端一般是6列,特别是移动端不适合列太多,列太多会让页面更碎,这里大家只要记住,PC用12列,移动用6列。

970为案例分为12列

移动端一般分为6列

– 行 –

行是网格的水平部分。也是横向部分,他们通常在网页设计中被省略。具有行和列的网格称为模块化网格。移动端行间距用的比较少可以忽略,一般在UI设计师中就是横向的间距。

– 内容模块 –

也叫做内容区域,填充设计内容,模块是用由行和列交叉创建的空间单位。

– 组合区域 –

区域是形成组合元素的列,行或模块的分组。

– 水槽 –

列和行有水槽分隔。沟渠越紧,视觉张力就越大。如果你希望你界面间距大点,水槽就可以留大,相反水槽越小,越紧凑。注意一点:水槽里面不要放内容,除非和区域一样组合使用,内容尽量放在模块里。

图中橙色区域就是水槽,这里做设计的时候是模块和模块之间的间距,最好不要放内容

– 屏幕边距 –

边距是网格列月行之外的空间。不要填充内容,移动端主要是两侧空间和屏幕边缘的距离,这里设计的时候切记不可填充内容,保持页面骨架边界。

橙色区域就是屏幕边距,设计的时候切忌填充内容,保持设计骨架统一

上述基本就是网格的一些常用单位,当然还有更细分的流线,标记,还有各种网格类型,但是今天我们主要学习移动端的网格,只需要掌握:

移动端一般分为6列,内容区域(ui设计元素、内容)一般放置到内容模块和组合模块,水槽和屏幕边距保持留白,不放任何内容。

3. 如何定网格,各模块大小

问题来了,我们知道了网格的基础概念,那么我们如何自己定义一套科学标准的网格系统,和骨架,来保证骨架的科学性和设计连续性呢?

第一步:定最小的设计单位

我们都学过化学,在化学里面有最小单位原子,原子可以组成分子,分子可以组成更多的化学元素,那么在UI系统中其实也一样,我们先要保证你的这个世界里面的元素是有个基础的,常用的单位有3(淘宝、天猫、蘑菇街等最小单位),4(funcy),5(raby、亚马逊、pinterest等)这个具体看你们产品的复杂程度,目前整体设计区域是最小单位越来越大,像Airbnb,pinterest等都是大留白,单位都是5甚至6

第二步:定边距和水槽大小

前面说过,先定最小单位,加入我们最小单位是5,总宽是375(sketch1倍设计尺寸)那我们产品内容我希望整个系统设计风格别那么满,留白稍微多点,我们左右边距是10,中间内容和内容之间我也想留10,这里注意,单位一定是前面我们定的5的倍数。

掏出计算器:

(375屏幕总宽- 边距左右两边20 – 水槽五个50)➗(6内容移动端是6)= 51(四舍五入)

边距:10

水槽:10

内容:51

这就是我们定的栅格,系统骨架,设计时候必须保证每个设计元素,在我们框架内,保持规则,边距不要出现内容,水槽也不要放内容,如果放,尽量以组的形式。

必然会出现除不尽的情况,这个避免不了,取整数,必然有个内容区域面积会少1个px,但是这个木有什么关系。

也可以根据不同情况做不同的组合网格,这个具体还是要看是什么的业务场景。

第三步:定横向间距

前面我们虽然说过,我们在定骨架时候可以忽略横向,但是在我们UI系统中需要对横向的设计间距进行统一,我们需要保证横向的所有设计产品是有规律的,这里有个科学的方法:

斐波那契数列

在数学上,斐波那契数列是以递增的方法来定义:

用文字来说,就是斐波那契数列由0和1开始,之后的就是由之前的两数相加而得出。首几个斐波那契数列是:

0,1,1,2,3,5,8,13,21,34,55,89,144,233

研究过很多国外设计系统,都是类似有节奏的设计间距来搭建系统,并不是我YY出来的,结合前面我们定的5的栅格,我们可以得出

当然这个间距只是一个运用斐波那契数列的一个参考,如果在运用过程中觉得间距不够用,完全可以去添加或者调整,但是一定要再系统的原则基础上加有规律的间距。

 4. 国外运用案例

5. 网格制作工具

ps推荐辅助线工具:guideguide

http://guideguide.me/

sketch推荐:craft插件

http://www.invisionapp.com/craft

关注UI设计达人』

看更多精选UI设计文章

↓↓

转载请注明:CodingBlog » Ui设计中网格解析和运用

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情