新注册会员免费送彩金 > 网页教程 > 设计分享 > 网格设计:更科学的排版方法

网格设计:更科学的排版方法

时间:2018-08-15    作者:sky   来源:白菜网送彩金2018的设计日记

为什么要学习网格

有效、有规律的设计布局是设计的一个基本原则,网格无处不在,可能只是你没有注意到它的存在,简单理解就是把一个页面,根据版心划分为无数统一尺寸的网格,广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。

它能让你的设计更有秩序、更有规律,简单来说就是用更科学的方法去排版。

▲ 谷歌material响应UI基于 12 列网格布局

该网格在布局之间创建视觉一致性,同时允许各种设计的灵活性,网格列的数量根据断点系统而变化。

2. 网格的基础概念   

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

▲ PC端 970 为分辨率网格分为 12 列

▲ 移动端一般分为 6 列

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

内容模块

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

组合区域

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

水槽

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

▲ 图中橙色区域就是水槽

这里做设计时候是模块和模块之间间距,最好不要放内容。

屏幕边距

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

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

上述基本就是网格的一些常用单位,当然还有更细分的流线,标记,还有各种网格类型。但是今天白菜网送彩金2018主要学习移动端的网格,只需要掌握:移动端一般分为 6 列,内容区域(UI设计元素,内容)一般放置到内容模块和组合模块,水槽和屏幕边距保持留白,不放内容。

相关推荐
版式设计:深入浅出学会网格系统的应用
界面设计:如何用网格系统设计出大师般的APP界面?
网页设计教程:20步创建完美网站布局设计
UI布局设计:文章列表与内容详情页设计案例赏析
新手教程:9款经典网页布局设计推荐

精彩推荐

热门教程

博聚网