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

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


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

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

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

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

关于栅格:

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

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

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

再比如飞机格:

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

关于系统:

我个人理解,系统就是规则,例如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

相关推荐

  • 交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。

    内容简介   遇到很多的人来咨询我什么是用户体验设计师,什么是交互设计师,UI与UE设计师有什么区别?为什么一个新生派的交互设计师职位一上来就在IT界有8000起的薪资待遇? 那么说了那么多,怎么才能成为一个…

    2015-07-15
  • 面试被问Axure水平?菜鸟这样学,快速做出能拿去面试的原型

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。面试者如果带一份好的标准的产品原型作品,会加分不少。那么一份能拿去面试的原型,长什么样呢?(以下是6周axure实战班同学作品)1、原型里,会梳理产品的功能流程2、标准的低保真原型3、清晰、明确、可读性强的原型注释如果你也想做出能拿去面试的原型图想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没...

    2018-04-20
  • APPLE WATCH案例学习!

    编者按:这篇实战的对象是Wallaby,一款个人财务APP,文章总结了四点经验:导航、通知、复杂任务以及动效。每个方面都有需要注意的问题和对应的解决方法,进入译文 >>> Wallaby是一款个人财务app,可以在…

    2015-05-21
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 柴静是个好的产品经理

    这几天,柴静刷屏,有捧有踩。但是从创业者的角度,谨以此文向由文艺青年找准路线之后成功转型的优秀代表柴静,她不仅是一位优秀的新闻工作者,还是一位极好的产品经理。 她做了一个很好的示范,互联网的时代如何打…

    2015-03-05
  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07
  • 译文 | 车载系统交互设计畅想Part3:主动性辅助面板-场景式车载助理

    在第一篇章中,我通过对智能汽车车载中控仪表的重新设计来减少驾驶中过多信息对驾驶员的注意力干扰。我的设计思路是通过多维度的交互操作来帮助驾驶员完成一些简单的操作任务,同时保证双手不离开方向盘。通过更多最对新手驾驶员的采访研究与测试,我又在第二章节中针对消除驾驶过程中的焦虑情绪做了分析与方案设计。在本章节中,我试图总结前两章节的研究发现,并设计一套针对智能驾驶的主动控制系统。

    2017-04-30
  • 交互设计师的60日计划第二十天

    这几天觉得好像没有什么可写了,会不会是姨妈所以脑子比较迟钝→_→昨天初中闺蜜突然叫我十一去秦皇岛玩,因为找不到人陪我去台湾所以果断的买好了所有票订好了房和她们去玩玩,晚上同事为了犒劳自己这几天准备晋级的…

    交互专题 2015-08-20
  • 【干货·扫盲】主屏幕尺寸,主屏分辨率,像素密度,PPI之间到底什么关系?

    今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。 咱们从手机开始说起吧。先上一张图,给大家看…

    交互设计 2015-09-08
  • 提升体验,要懂心理学之行为主义(一)

    有时我在设计用户体验的时候,在想,什么体验对用户来说是重要的?什么才是真正吸引用户?怎么样才能让用户,甚至会对自己设计的产品上瘾呢?

    2017-05-20