火星网校
从栅格系统实例，了解栅格基础知识
发布时间：2024-03-12 10:55:11 浏览量：121次
本文将为大家介绍设计网页里非常重要的一个网格系统，也叫栅格系统。那么栅格系统的作用以及设计要点是什么呢？本文将为大家揭晓。
“UI设计的不就是这些细节，难道要比谁画的圆更圆谁画的方更方嘛？”
——引用自我设计路上的引路人美mo语录
这篇我就给大家介啥一下设计网页里非常重要的一个网格系统，也叫栅格系统英文为“grid systems”。
这东西的作用其实有点儿像小时候写字的田字格本子，它起到的作用就是让你就算字写的很难看，但是最起码能在这个横平竖直的田字范围里显得规规整整。
第一步先是规整，大小整齐划一，第二步再是慢慢写好看，秩序是美感的重要前提。那故宫的建筑和布局，横平竖直田字分布，规整中透着美感，规整中透着威严，天下尽在掌握的感觉扑面而来。
你品，你细品～
这种秩序的美感在我们的网页设计里也是非常重要及基础的一个环节，规范的页面基础栅设计也能让前端与UI无缝对接加速开发并保证视觉还原，减少撕逼的时间，你好我好大家好～
栅格系统实例
960 gird栅格系统从2009年就开始正式推出。http://grid.guide/在这个网站你可以根据不同宽度的网页来制定你要的列宽和间距，这就是栅格系统，一个网页版的田字格，可以根据不同的网页风格调整内容宽度，产生不同间距和不同列宽。
怎么用呢，先看看下面的案例。很多网页给人的感觉非常不同，有的宽松大气，有的内容繁多乱中有序；
页面的边缘间距是相同的，同页面内容里的间距也是固定的，上面的页面同等宽度下分成了8列、5列，下面的页面分成了3列，整个页面给人的感觉就不同，上版面紧凑，下一个版面舒展，相应的，他们的栅格也有区别。
栅格在页面上起到统一间距，让每个板块可以在固定的尺寸下保留相同的间距，让页面风格统一规范。
下面这两张，就是在栅格的基础上做的“填字游戏”。在固定列宽里做组合，既保持了等间距，透气感相似，又在纵向上做模块占比不同的跳跃式分布。
响应式布局
栅格在网页最重要的一个作用是为了迎合不同尺寸的屏幕适配问题，迎合响应式布局而产生的一个设计体系，是跨屏设计优化体验的重点。设计不同的页面选择不同的栅格选项，一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）根据你产品覆盖的设备类型做选择。
栅格通常分为12列，即每行最多可容纳12列，最早的960栅格还有分成12列、16列、24列三种。12X（60+20）、16X（40+20）、24X（30+10）三种。
目前网页的主流的宽度有 960px / 980px / 1190px / 1210px /1440px等，内容宽度目前主流的淘宝京东等是做成1190px，从最早的960px扩展而来，也是网页显示器尺寸越来越大越来越宽的缘由。
1190px的内容宽度分成12列，12X（90+10）、12X（79+22）、12X（68+34），页面排布就根据列宽和间距进行排布，当然有的不一定完全是在栅格线上的，根据实际情况做取舍。
而现在后台网页宽度一般会设计成1440px，下面列举两种实例运用，
- 一种是：左侧导航208+右侧内容区域1232，栅格12x（88+16）；
- 第二种：左侧导航224+右侧内容区域1200，栅格12x（85+16）；
后台页面一般会固定左侧，而右侧则根据屏幕大小可以拉宽，根据页面需要灵活调整右侧的布局宽度。你可以缩到很小，也可以拉很宽，会根据页面给你一个灵活调动的适配。
栅格的作用
- 栅格类是页面结构的规范
- 在设计团队配合和协作的时候可以起到统一作用，设计师可以根据栅格快速作出设计，让整体变得有规律
- 和开发无缝衔接保真还原视觉效果，整个网页使用一种栅格可以提高复用性，提升开发效率
- 根据不同尺寸屏幕切换做响应式布局，优化跨屏连贯体验
栅格作为网页设计不得不学的一个重点，大家要知其然还要知其所以然，用的时候边用边学，对你的设计提升也是很大的哦。还有，一定一定要和你的前端开发小哥哥多沟通，他会教给你很多意想不到的知识哦
好啦，以上就是今天的分享。
作者：就不，公众号：就设计
本文由 @就不 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash， 基于CC0协议
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
