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

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


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

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

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

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

关于栅格:

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

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

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

再比如飞机格:

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

关于系统:

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

相关推荐

  • 交互设计篇|经历一个产品从0到1我都学会了什么

    好的设计不仅能满足用户需求、提升易用性,还能弥补技术上的短板。在经过一个产品从0到1的实现后,对这一点感受的尤其深刻。下面列出几个我产品设计中的教训和收获。图书馆打印插队如果不给出理由则此行为被接受的概率为60%;如果给出一个理解则此行为被接受的概率为94%;甚至在解释原因时只提供“因为”而无实质原因的情况下,此行为被接受的概率竟然为“93%”。足见,“人就是单纯地喜欢做事有个理由”。那么,产品与用户“交流”时,就需要有个“理由”让用户看到自己行为操作与产品回应之间的解释,从而顺应操作规则从而更好的使用产品。

    2017-05-06
  • UED专访 | “看不见的城市”:带你了解城市地下空间

    由广州市人民政府主办、广州市住房和城乡建设委员会承办、《城市·环境·设计》(UED)杂志社协办、广州地铁设计研究院有限公司支持的“看不见的城市——城市市政与公共交通论坛”作为“2017年广州首届国际设计论坛”的四个分论坛之一,探讨城市骨架中更为基础的市政、公共交通的相关问题,共同解读城市发展与设计中重要的一环。我们邀请到了本场论坛的主持人,广州地铁集团副总工、广州地铁设计院总工、住房城乡建设部专家、城市轨道交通和地下工程专家、教授级高工...

    2018-02-08
  • 开始自己的建筑笔记 | Sketch Journal 作品展示

    大家是否在网络时常看到精美的建筑师手绘本?是否也准备打造一本属于自己的建筑笔记?今天为大家带来笔者大一阶段的Sketch Journal。笔记虽不算精美,但却是自己一年辛勤努力后的结果,它记录的不只是这一年的想法,更是自己一年的学习历程。相信这也是大家在不断完成自己的建筑笔记时最享受的一个过程吧。建筑笔记的几点心得:慎用大尺度手绘本!笔者本科第一年的Sketch Journal选择了A3尺寸,结局是很悲惨的。你需要付出比常人多的时间去完...

    2018-04-21
  • 实战分享:核桃App界面设计及视觉规范

    因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

    2017-05-13
  • 精髓干货!一组精挑细选的用户体验设计网站和书目

    精髓干货!一组精挑细选的用户体验设计网站和书目 学校可以为你传授很多知识,但是有些职业学校教不来,产品经理、用户体验设计师、交互设计师、程序员鼓励师这样的职业都在此列。这样的职业通常都有几个显著的特性…

    2015-11-14
  • 多款智能手表的对比

    终于 Apple Watch 将要在下个月上市了。在目前还不知道这款产品售价的情况下,相信设计会成为不少消费者朋友选择产品的重要标准之一。Apple Watch 已经获得了 iF 设计金奖,不过可能有人觉得这无法令他们信服,他们…

    交互设计 2015-03-10
  • 用体验设计方法论,结合商业诉求对APP进行改版设计

    这个产品是做什么的?
    这个平台安全吗?
    购买哪个比较好?
    怎么购买理财,外汇,股票类的产品?
    收益如何?
    ……有什么新活动?
    是否能继续提升自己利益?
    以前买过的产品有什么新变化?
    ……

    2017-05-19
  • 当用户操作错误时,如何在不影响用户体验的情况下快速处理好

    在很多界面中,错误的产生不可避免。一旦发生错误,要帮助用户快速轻松地处理好。

    2017-05-23
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • 抽屉式导航怎么用?这4种场景教你正确的设计姿势

    …上图的 APP 将选项卡(tab row)变成抽屉式导航菜单(drawer menu),用户在相应功能间的切换率急剧下降。…很多用户还没有建立起相应的心理模型(尤其是抽屉式或者汉堡包菜单)尽量将 APP 的核心功能放在用户可以看得到地方。
    ——能露出来, 就别藏着触摸操作中,手势永远要比点击优先级低。现代触摸操作习惯毕竟只流行了几年,然而传统PC上的操作习惯已经实行了将近20年。所以通过滑动来切换Tab不会比点击切换来的直观。
    ——石头们

    2017-05-30