咨询,就免费赠送小米移动电源,咨询热线:18030402705当前位置: 主页 > 建站知识 > 建站指南 > 策划方案 >
推荐内容
联系我们
电话咨询:18030402705
E-mail:web@07fly.com
地址:成都校园路99号(西南交大旁)

资深设计师心得:网格,更科学的排版方法

作者/整理:07fly 来源:人人都是产品经理 2018-09-12 Tag:


9b2qitkmnw3cfdav.jpeg

作者:sky,微信公众号“我们的设计日记 ”

为什么要学习网格

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

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

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

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

2. 网格的基础概念   

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

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

▲ 移动端一般分为 6 列

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

内容模块

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

组合区域

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

水槽

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

▲ 图中橙色区域就是水槽

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

屏幕边距

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

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

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


本文零起飞网络为您整理编辑,版权归原作者所有,转载请注明原文来源出处。
本文章链接:http://www.07fly.com/Guide/plan/9196.html
07FLY专业做网站,网站建设,网站优化,主机托管,网站推广一条龙服务,让您省心到底