设为首页
收藏本站
用户名
Email
自动登录
找回密码
密码
登录
立即注册
只需一步,快速开始
快捷导航
登录
注册
论坛首页
BBS
建站模版
微站设计
虚拟主机
企业邮箱
博客日志
Blog
搜索
搜索
搜索
热搜
长春
优惠
活动
做网站
本版
帖子
用户
本版
帖子
用户
请
登录
后使用快捷导航
没有帐号?
立即注册
道具
勋章
任务
留言板
设置
我的收藏
退出
时时商务社区
»
论坛首页
›
资讯分享
›
今日头条
›
资深设计师心得:网格,更科学的排版方法 ...
返回列表
查看:
1625
|
回复:
0
资深设计师心得:网格,更科学的排版方法
[复制链接]
wx_pylelnL4
当前离线
积分
7532
2536
主题
2536
帖子
7532
积分
论坛元老
论坛元老, 积分 7532, 距离下一级还需 9992467 积分
论坛元老, 积分 7532, 距离下一级还需 9992467 积分
积分
7532
发消息
电梯直达
楼主
发表于 2018-8-25 10:27:35
|
只看该作者
|
倒序浏览
|
阅读模式
作者:sky,微信公众号“我们的设计日记 ”
为什么要学习网格有效、有规律的设计布局是设计的一个基本原则,网格无处不在,可能只是你没有注意到它的存在,简单理解就是把一个页面,根据版心划分为无数统一尺寸的网格,广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。
它能让你的设计更有秩序、更有规律,简单来说就是用更科学的方法去排版。
▲ 谷歌material响应UI基于 12 列网格布局
该网格在布局之间创建视觉一致性,同时允许各种设计的灵活性,网格列的数量根据断点系统而变化。
2. 网格的基础概念
列
列是网格的垂直部分也可以理解为内容区域,网格中的列越多,其灵活性越大。但是列并不是越多越好,PC端一般是 12 列,移动端一般是 6 列,特别是移动端不适合列太多,列太多会让页面更碎。
▲ PC端 970 为分辨率网格分为 12 列
▲ 移动端一般分为 6 列
行
行是网格的水平部分,也是横向部分,它们通常在网页设计中被省略。具有行和列的网格称为模块化网格,移动端行间距用的比较少可以忽略,一般在UI设计师中就是横向的间距。
内容模块
也叫内容区域,填充设计内容,模块是由行和列交叉创建的空间单位。
组合区域
区域是形成组合元素的列,行或模块的分组。
水槽
列和行由水槽分隔。沟渠越紧,视觉张力就越大。如果你希望你界面间距大点,水槽就可以留大,相反水槽越小,越紧凑,注意一点,水槽里面是不要放内容,除非和区域一样组合使用,内容尽量放在模块里面。
▲ 图中橙色区域就是水槽
这里做设计时候是模块和模块之间间距,最好不要放内容。
屏幕边距
边距是网格列和行之外的空间,不要填充内容,移动端主要是两侧空间和屏幕边缘的距离,这里设计时候切忌不要填充内容,保持页面骨架边界。
▲ 黄色区域就是屏幕边距,设计时候切忌填充内容,保持设计骨架统一
上述基本就是网格的一些常用单位,当然还有更细分的流线,标记,还有各种网格类型。但是今天我们主要学习移动端的网格,只需要掌握:移动端一般分为 6 列,内容区域(UI设计元素,内容)一般放置到内容模块和组合模块,水槽和屏幕边距保持留白,不放内容。
分享到:
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
0
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
用户反馈
客户端