• ag亚游戏 2019-02-10
  • 基础知识!UI设计师需要掌握的栅格设计原理和技巧 - 优设网 - UISDC

    基础知识!UI设计师需要掌握的栅格设计原理和技巧

    2018/11/22 25652评论 14

    编者按:本文适合对栅格系统不熟悉的新人阅读,大量的配图和深入浅出的阐述可以让你快速理解什么是栅格系统。

    马小晴:我们都知道在平面设计里,运用网格辅助设计,可以让页面富有统一的秩序感和韵律。在网页设计里,我们也需要视觉表现出统一性和一致性,让页面更加专业和系统化;但同时,网页设计相对于传统平面设计也更强调动态化、体系化的思考。栅格系统可以辅助我们制定网页设计的规则,了解栅格的基本原理和前端应用对于网页设计来说就变得非常重要了。

    一、网页端栅格系统的必要性

    1. 专业

    制定一套页面的基础规则,可以保持整体设计的一致性、专业性;避免无效的设计尝试,专注于有意义的设计方向。

    2. 高效

    遵循栅格系统的设计细节,无论是元素、??榛蛞趁?,都有规律可循,减少设计决策的时间、减少外部的沟通损耗,提升工作效率。

    3. 布局基础

    栅格系统的应用,可以作为响应式网页布局的基础。

    二、栅格系统的基础概念

    • 网格(Gird):栅格系统的最小原子单位
    • 列、水槽(Column、Gutter)
    • 栅格总宽(Container)
    • 边距(Margin)
    • 盒子/区域(Col-n)
    1. 网格:栅格系统的最小原子单位

    栅格是由一系列规律的小网格组成的网格系统,网格构成页面的最小单位。通常,在网页设计中经常使用8作为栅格的最小步进单位,一些知名公司都以8为最小单位划分网格,规范页面秩序,比如:Ant Design、Matierial Design等。

    编者注:设计规范官网汇总 →?http://www.sscleihe.cn/design-specification-website

    这样做的好处有两方面。

    偶数思维:以8为基础倍数,元素大小可以被大多数浏览器识别并整除,最大程度避免出现半像素的情况。

    规律性:所有元素以8像素为步进单位,元素大小、间距有规律可循。

    为什么不是6、10或者其他?

    以8为步进单位,进度合适,既不显得过于琐碎,也不会因为间隔太大而显得内容分散;众多开源代码都以8的倍数作为默认设计大??;已被多次论证,8点栅格甚至已经形成了一套理论。

    凡事没有绝对,如果做固定结构的网页布局,不考虑响应式网页设计,也可以自行根据实际情况以偶数作为最小单位来设计网格。

    为什么强烈推荐「8点栅格」→ 《让设计更高效!正式为大家安利这个好用的「8点栅格」》

    2. 列+槽(Column+Gutter)

    列(Column):列是栅格的数量单位,通常设定栅格数量说的就是列的数量,比如12栅格就有12个列、24栅格就有24个列。通过设定列的内边距(padding)来定制槽(Gutter)的大小,剩余的部分称为栏。

    槽(Gutter):页面内容的间距,槽的数值越大,页面留白越多,视觉效果越松散;反之,页面越紧凑。槽通常设为定值。

    3. 栅格宽度(Container)

    栅格宽度(Container):页面栅格系统的总宽度。

    4. 边距(Margin)

    边距(Margin):栅格外边距,与屏宽保持一定的安全距离.

    行:栅格系统的横向网格,与纵向网格的列成垂直状态,列和行交叉的区域形成页面的内容区,由于目前网页多采用瀑布流形式,上下滑动区域变得不受限制,随意性很高,本文忽略这一部分。

    这里需要注意的是:我们把栅格的列(Column)看做是栏+槽的宽度,12栅格即是指12列。有一些文章对栏和槽的理解是下方左图的样子,而从开发角度来说,下方右图是前端理解的栅格。我们用栅格来制定页面视觉规则,同时也要理解开发怎样实现栅格,才能在工作中减少不必要的沟通误区。

    5. 盒子/区域

    建立好基础栅格之后,一块内容通?;嵴加眉父隼负土械目矶?,我们把这个区域理解为内容盒子,用于承载一个区域的内容。

    以上,栅格的基础概念已经清楚了,那怎样着手给自己的项目建立栅格系统呢?

    三、怎么样建立网页栅格

    1. 确定屏幕尺寸,确定安全范围

    当我们开始着手做一个项目时,首先应考虑在多大的尺寸范围内做设计,也就是确定栅格区域的宽度范围。

    2. 确定关键数据:列的数量、水槽的宽度

    常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量,划分的格子越多,承载的内容越精细。通常,在信息繁杂的后台系统常用24栅格,而一些商业网站、门户网站通?;殖?2栅格。

    栅格不是划分的越细越好,24栅格精细,但也容易显得琐碎,内容排布的规则太多,也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格,也是可以的。

    △ 槽的数值越大,页面留白越多

    需要注意的是,槽的区域不可以放置内容。通常,我们会给槽设定一个定值,用来确定栏的大小。

    计算公式

    我们假设内容区宽度为W(Weight),列宽为C(Column),列数为n,槽为定宽G,可以得出:W=C*n。由于槽不可以放置内容,可见内容区为:W=C*n-G。

    举例:我们为一个屏宽1440的项目划分栅格,首先确定内容区宽度为1440,24列,槽为定值16;那么可以得出列宽60,栏为48。

    内容区应从水槽开始到水槽结束:

    附:sketch 栅格工具

    目前,很多软件提供自动栅格设置功能,sketch也提供这样的功能:Layout Settings。

    • Total Width:相当于 Container,是内容区的宽度。
    • Offset:表示栅格的偏移量,表示栅格从哪里开始。
    • Number of Columns:表示栅格的数量。
    • Gutter on outside:记得勾选。勾选以后栅格的设置才是跟前端的栅格算法匹配。
    • Gutter Width:槽的值,通常是定值,控制页面留白间隙。
    • Column Width:列的值(栏+槽),也就是栅格单个内容区的宽度。

    欢迎关注「宜信大数据用户体验设计部」公众号:

    「栅格系统好文推荐」

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.sscleihe.cn/grid-design-principles-and-techniques

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    转场动效 设计师 扁平化设计 交互设计师 优设专访 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 海报设计 用户体验设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立至今,一直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里