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

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


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

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

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

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

关于栅格:

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

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

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

再比如飞机格:

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

关于系统:

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

相关推荐

  • 交互设计 | Tmall金妆奖 交互体验装置

    天猫金妆奖 · 体验交互装置中国上海· 3.04.2018***装置交互体验概念***Step 1: 待机状态Step 2: 装置检测到观众体验,即将展开体验流程Step 3: 系统提示拍摄区域Step 4: 实时检测体验者面部表情Step 5: 拍摄表情即将开始Step 6: 拍摄完成,正在为观众制作纪念卡***纪念卡设计***纪念卡/拍摄表情等级1:平静纪念卡/拍摄表情等级2:微笑纪念卡/拍摄表情等级3:开心纪念卡/拍摄表情等级4:...

    2018-03-15
  • 案例分析:聊聊扁平化设计的六点优势

    著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

    2017-05-10
  • 交互基本功:如何设计一个好用的搜索框?

    搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。

    2017-05-04
  • 设计不懂开发,严重脱节的设计是怎么影响开发的

    编者按 :Anders Lassen 是 Fuse 的创始人兼首席行政官。Fuse 是一款面向设计师和开发者的本地应用工具套装。 移动应用现在已经变得十分普及,以至于技术圈的大部分人都认为开发应用是一个简单直接的过程。然而,当…

    交互设计 2015-08-04
  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 腾讯CDC标叔力作!聊聊我与交互设计的那10年

    编者按:很有幸能看到这篇文章,作者见证了腾讯CDC从寥寥数人变成一个成熟团队的整个过程,成长经历相当有可读性,且值得设计师学习反思的地方太多,无论是哪个领域的同学,都推荐阅读收藏。 前言:今年同时是我工…

    2015-11-29
  • 万豪国际集团打造智能交互体验客房

    作为全球酒店业的创新者,万豪国际集团近日携手两大全球领先企业 -- 三星与罗格朗,重磅推出 “智能交互体验客房”,探索有可能提升宾客体验的各种新概念,创造更为高效的客房设计,从而为宾客带来未来酒店体验。宾客可在万豪国际集团“智能交互体验客房”镜子上投射瑜伽练习视频万豪国际集团全球首席商务官Stephanie Linnartz表示:“我们的宾客期望在生活中的方方面面都能获得个性化的体验,酒店入住也是如此。智能交互体验客房使得宾客可以按照自...

    2018-01-30
  • 从9个方面聊聊用户体验设计的发展

    今天饿了么UED的小满同学给大家翻译了一篇国外的用户体验 设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很有可能成为未来优秀设计师必备的硬能力。在甲方的阴沟里待久了,来仰头展望下真正「以人为本」的设计思考。

    2017-05-29
  • 交互设计需要掌握哪些"必备"心理学知识?

    交互设计是以人为中心的设计,设计者要站在用户的角度出发,深入、全面的了解用户的需求才能够设计出具有良好用户体验的产品。而想要在作品集中向考官体现同学们对用户心理需求的把控能力,除了做好用户调研之外,也要掌握一些常用到的心理学知识。交互设计是人与其他一切事物之间的行为设计,而人的行为中包含感知和认知这两种与心理学密切相关的要素,因此,同学们在设计项目时,每一个功能设计、每一个操作流程以及UI的设计都要基于了解用户心理学的基础上开展设计。本...

    2018-04-10
  • 极致用户体验的养成

    上周五约了朋友吃晚饭,提前约的顺风车。由于堵车,司机到了办公区的北门。经过沟通,我从定位地点过去找他。四扇车窗都是开的,他坐在副驾驶,烟刚抽了三分之二,后视镜旁还有未散尽的烟雾。他回头看见了我,我朝他微笑示意。确认了眼神,我是他的乘客,他马上把烟灭了。左手在空中挥了挥,右手扭转了空调按钮,抬起头在空中胡乱吹了几口气。隔着车窗看见副驾驶有件外套,说了句“久等了”,我便从右后侧上了车。刚落座,他就急忙表现出歉意:不好意思,不知道你走过来这么...

    2018-04-25