浅析栅格系统的基础六要素

这是一篇非常非常基础的关于栅格的文章,如果你已经对栅格系统有了深入的理解, 就不用浪费时间看这篇文章了!


这是一篇非常非常基础的关于栅格的文章,如果你已经对栅格系统有了深入的理解, 就不用浪费时间看这篇文章了!

浅析栅格系统的基础六要素

以前有很长一段时间,我一直搞不明白到底什么是栅格,听过很多解释之后还是云里雾里的,后来发现有很多小伙伴也都有这样的疑问,所以决定分享一下自己对栅格系统的理解。

首先我们必须要对栅格系统有一个基本的认知,我将这四个字拆分开成“栅格和“系统”两个词来分别解释。

关于栅格:

栅格是由网格演变而来的另一种说法,都是一个意思——格子,所以不要觉得栅格有多高深复杂,如果把他描述成格子,你还觉得它有多难理解吗?

其实我们都是栅格专家,因为在我们几岁的时候,就已经接触了很多栅格,比如方格本:

浅析栅格系统的基础六要素

再比如飞机格:

浅析栅格系统的基础六要素

关于系统:

我个人理解,系统就是规则,例如ios系统,它有它的规则:屏幕尺寸规则,代码语言规则等等,想在它的系统里做app,就需要遵循的它的规则。

栅格有了规则,也就形成了我们所说的栅格系统。

所以今天的重点来了,栅格系统(规则)到底包含哪些内容呢?

我通过研究sketch软件的一些栅格设置选项来反推栅格系统包含的内容,得到栅格系统基础六要素,大纲如下:

  1. 栅格的最小单位
  2. 屏幕总宽度
  3. 列数
  4. 列宽
  5. 水槽
  6. 安全边距

1. 栅格的最小单位

最小单位是需要优先定好的,因为后面的所有规则都基于它来制定。

下图就是在sketch设置栅格大小的页面:

浅析栅格系统的基础六要素

如果你用sketch却不知道上面这个界面是哪里调出来了,请出门左拐去百度一下!

这里再简单介绍一下:pc端常用最小单位是10,移动端常用最小单位是3、4、5,不过这些也不是固定的,还是那句话,能解决工作上的实际问题就是正确的。

2. 屏幕总宽度

做界面设计会先依附于一个尺寸,由于内容的多少是不确定的,所以高度我们没有办法定死,但内容区的宽度是可以定的,sketch给我们的默认屏幕宽度是960,网页设计中最受欢迎的一个尺寸:

浅析栅格系统的基础六要素

3. 列数

简单来说就是整个界面纵向被分为几栏,sketch默认帮我们分为12列,这是网页端的常用分法,移动端一般是6等分。

浅析栅格系统的基础六要素

4. 列宽

当960宽度的界面被纵向12等分后,我们可以轻易的计算出每一份的宽度是80,而这80的宽度其实又包含两个内容,一个是列宽,一个是水槽,如下图:

浅析栅格系统的基础六要素

每一条灰色区域都是我们所说的一条列宽,sketch的默认列宽是60:

浅析栅格系统的基础六要素

5. 水槽(间隔)

灰色区域是列宽,所以红色区域自然就是水槽(间隔)了。

浅析栅格系统的基础六要素

毕竟界面内容之间是需要间隔的,不可能都堆在一起,所以水槽的作用就是将内容更规范的区分开来。

6. 安全边距

做app界面的时候,我们都会设置一个屏幕安全边距,因为当信息帖在屏幕边上的时候,不仅会影响可读性,也会影响美观度。网页端同样也会有一个安全边距,它是如何来的呢?

还是这张图:

浅析栅格系统的基础六要素

我们看上图,屏幕的最右侧是一个水槽,说明右侧是有安全边距的(一个水槽的宽度),而屏幕左边没有空隙,那我们是不是可以将最右侧的水槽分成两份,拿一份放置最左侧?如下图:

浅析栅格系统的基础六要素

当然是可以的,因为sketch已经帮我们做好了这个设置选项,如下图

浅析栅格系统的基础六要素

至于栅格的颜色、形式也可以自己调整,设置选项里都有。

以上就是栅格系统的基本认知及基础六要素,只有透彻的理解了这些基础概念,才有可能将栅格系统更好的运用起来。

举例验证

最后我们通过上面的讲解,验证一下你是否真的有理解这几个要素,比如现在我们要制定一个宽度为1920的网页栅格系统。

如果你用常用的12分栏,得到每一等分的宽度就是1920处12等于160,160包括列宽和水槽,我们就可以定列宽为120,水槽为40(列宽:水槽=3:1)。

安全边距是水槽的一半,就是20。

这样一个1920的栅格系统就基本出来了。是不是很简单。

大家一定要活学活用,很多数值都不是定死的,比如12分栏实在除不尽,那就16分栏;再比如列宽和水槽一定要3:1吗?也不一定,所以千万不要一根筋哦!

这篇文章很基础,等我后期研究研究,再写一篇深入一点的,不过先不给大家承诺时间了,哈哈!

#专栏作家#

菜心,微信公众号:菜心设计铺,人人都是产品经理专栏作家,华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22600/

(0)
CatherineCatherine
上一篇 2017-05-02 07:37
下一篇 2017-05-02 09:50

相关推荐

  • 在WEB/UI的交互设计中运用格式塔心理学理论

    UI或UX分析需求主要是以人机交互界面为主,而这个需求不仅仅是一些设计、视觉使用体验,在这里体验当中,我们可适当运用一些心理学,比如格式塔理论就是一个很好的分析法。[图片]格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学。由马科斯·韦特墨(1880-194

    微信热点 2018-02-04
  • Banner设计技巧:6招搞定点缀元素的运用

    今天我要给大家讲的是点缀元素的在Banner设计里的运用和玩法,它也是大家经常需要用却又经常忽略了或用不好的一个知识点。

    2017-05-04
  • 色彩在交互设计中的应用

    UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

    2018-04-24
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 给设计师的网页动画设计基础指南

    挤压和拉伸
    预期
    登台
    连续动作和姿态对应
    缓进缓出
    弧形运动
    次要动作
    时序
    夸张
    立体刻画
    吸引力

    2017-05-27
  • 饿了么 UED 又搞事情啦!

    近日,据保洁阿姨匿名举报,在上海饿了么总部的榴莲酥会议室内,有人在工作时间聚众搞事情……据说场面隆重,气氛活跃,不堪入目。本台记者 @孟小雨 迅速赶往了现场。-----据调查,这次始作俑者是作为宇宙霹雳无敌超级吃货公司饿了么中最有逼格+设计感的团队—— UED 部门。在这个辞旧迎新、恭喜发财、还不放假的时刻,该部门秘密召开了第一届 UED 年度颁奖典礼!记者被大会的美食吸引,潜入该组织内部,随即被惊呆了。说到颁奖会,你以为是这样的?领导...

    2018-02-25
  • 手机端官网设计:适配还是不适配,这是个问题

    Pc端使用平台:手机端使用平台:红米2增强版 自带浏览器 MIUI6.6.2.0(KHJCNCF)|稳定版

    2017-05-31
  • 玩转交互设计,给景观来点生命力!

    景观设计从一开始关注项日的审美性,再到功能性,全社会对于它的要求已经在逐步升高。现代景观设计中,公园、绿地,甚至校园景观、风景名胜区等需要从单纯的生态意义中提升到一个更高的层次。在诸多国内的项日中,虽然将“以自然为题,以人为本”定为设计目标,但是往往停留在服务于人们行为上的舒适性、安全性,而忽略了人性中的更多需求。与此同时,人们每天被层出不穷的新鲜事物所包围,绿色环境对人的吸引力逐渐降低。在现代化工业大发展的背景下,人与人、与其他生物间...

    2018-02-07
  • 淘宝UED:如何高效输出移动APP产品原型

    如何高效输出移动app产品原型? 清晰的产品思路,顺畅的协同合作,齐备的素材元素,真实的体验感受…保证过程的高效,更要保证有效的成果。下面我们将分三步走,来完成高效输出移动app产品原型。 一、输出以界面为单…

    2015-07-10
  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08