主页 > 设计 >

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

2020-03-25 03:06| 发布者: admin| 查看: | 来自: 未知

  本文适合对栅格系统不熟悉的新人阅读,大量的配图和深入浅出的阐述可以让你快速理解什么是栅格系统。栅格系统可以辅助我们制定网页设计的规则,了解栅格的基本原理和前端应用对于网页设计来说就变得非常重要了。

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

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

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

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

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

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

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

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

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

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

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

  建立好基础栅格之后,一块内容通常会占用几个栏和列的宽度,我们把这个区域理解为内容盒子,用于承载一个区域的内容。

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

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

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

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

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

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

本周热门
晋江东石数宫灯的习俗你
晋江东石数宫灯的习俗你
今年东石元宵线年元宵闽台东石灯俗系列活动将火热...
郑州高级美容师证能做皮
郑州高级美容师证能做皮
美容行业是服务行业,想要吸引更多的顾客进店消费...
石家庄传统婚庆服务面临
石家庄传统婚庆服务面临
随着新人们婚庆消费级别的不断提升,如今的婚礼庆...
昆明延安医院杰西艾美容
昆明延安医院杰西艾美容
在一项问卷调查中,你最容易接受的整形美容项目是哪...
穿衣服好看的男明星 赵本
穿衣服好看的男明星 赵本
戴衣服好看的男明星,赵本山、陈奕天、宋小宝、高...
古文中祝福结婚的诗句 祝
古文中祝福结婚的诗句 祝
结婚祝福想要玩出新花样就不得不花些心思,有着美...
人民日报:保险公司养老
人民日报:保险公司养老
北京通州居民赵大妈最近接到保险公司的通知:7年前...
大王叫我来巡山深耕婚庆
大王叫我来巡山深耕婚庆
在刚过去的金九银十季,婚庆商家可谓是趁这段时间...
黄磊开公司孙红雷参观文
黄磊开公司孙红雷参观文
河北新闻网讯(玉鱼)黄磊酷爱美食和做饭,此事已...
男士皮靴的百搭种类电力
男士皮靴的百搭种类电力
秋冬季节因为寒冷的天气,女士们纷纷穿起了皮靴,...

联系我们|娱乐新闻_明星绯闻_明星资讯简介 |关于我们|小黑屋 |侨网历史|广告服务 | 娱乐新闻_明星绯闻_明星资讯历史 (   

Copyright © 2002-2017 DEDECMS. 织梦科技 版权所有

Copyright © 2002-2017 DEDECMS. 织梦科技 版权所有

联系我们|简介|关于我们|小黑屋|历史|广告服务| (   

返回顶部