恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网格系统总结:从初识到应用
0.0°
2020-05-18 原创文章 经验/观点 举报 1483 9 8 0

目录:

  • 1.什么是网格

  • 2.为什么要使用网格

  • 3.网格系统中都包括什么

  • 4.如何制作网格系统

  • 5.如何使用网格系统

  • 6.总结



1.什么是网格


“网格”简单来说就是一些横竖相互垂直的线,将页面分为各种“列”或“模块”。这种系统开始是书面书籍的辅助线,在打印版式中备受青睐。它可以把页面分成许多区域,将文字或图片变成“设计元素”填入其中。避免让设计师在大空白页上抓瞎。



就好比画素描面部时候的“三庭五眼”。也是需要提前画出比例辅助线,再在其中画出细节。鉴于平面设计和界面设计当中有很多的共同点,通过后续演化,这种技术已完美的移植到了互联网线上产品当中。网格系统也已成为界面设计当中不可或缺的辅助技术之一。




2.为什么要使用网格

①梳理页面

网格是一种可以梳理结构的利器。它可以让显示的信息更加规整且平衡。用户希望可以快速的梳理出页面当中的信息。如果页面过于杂乱,影响了用户的认知速度,后果就是会直接关闭页面离开。



②响应式设计

现在人们会用多种不同设备去查看页面内容。如果不按照一些标准或框架去约束设计,当网页被缩小放大时,其中的内容就会变得异常混乱。对于用户来说,在阅读体验上是灾难性的。同样也会给开发人员带来很大的麻烦。


如果将网格当做标尺,对页面进行很好的切分布局,那么在这种“一致性”的标准下,可以大大减少开发的成本。这种“一致性”,也让整套页面看下来更有节奏,因为用户的眼睛一直在被无形的框架引导着。无论页面的大小如何变,框架依然会让页面保持整齐。



③效率性设计

一整套页面都用同样的框架来设计,可以让我们不再为调整细节而消耗时间。可以很好地做到重复性使用,大大提高设计效率。在对接项目的时候,对接人也可以按照标准快速上手。后期修改或改版时,也有规律可循。



④专业性体现

当甲方因不满意而让我们修改页面的时候,有一部分原因是我们没有很好地表达出自己的想法,没有让甲方充分理解我们的思考过程。当页面附带上网格且添加了说明,这种严谨专业的形式势必会减少沟通成本,让对方更加了解我们的设计思路,有理有据体现专业性。




3.网格系统中都包括什么

既然是系统,那就不可能是简单的几根辅助线这么简单了。网格系统中,主要包括的元素有“宽度”、“列”、“水槽”以及“边距”。


①宽度

内容区域宽度,是我们的主要设计区域。但也有一些特殊的设计,比如悬浮的装饰、内容的延展等等,是可以合理超出内容区域宽度的。不过,核心内容需要在宽度内显示。

别对映像研出手官网


有一种网格被称作“网格之王”,也被叫做“960网格”,它的内容区域宽度是960像素。原理是现代显示器至少支持1024×768像素分辨率,而960可整除2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320和480等数字。这使其成为一个高度灵活的数字,且有更高的延展性。因此,被称作“网格之王”并不为过。


https://960.gs/  有很多关于“960网格”的内容



现在,显示器的屏幕尺寸越来越大,“960px”的经典尺寸在某些领域网站的页面中显得有些力不从心。比如视频类网站、电商网站、工作室网站等等。这些网站很多都强调视觉冲击力或者是信息量巨大。因此,个人认为网站的宽度还是要“具体内容具体分析”。需结合所属领域或展示内容,以及公司规范来制定具体内容区域宽度。

awwwards.com


国内的设计类网站宽度一般在1200-1400px;视频类网站在1600-1800px不等;电商类网站在1200px左右,可供参考。



②列

最常使用的列数是12列、16列等,每列宽为60-80像素。但列数和列宽的数值并不是绝对固定,和设备以及展示内容有很大关系。比如在PC端上是16列,到了平板上就会变成8列,手机端又变成6列或4列。像一些个人网站、图库网站并没有那么多的内容,可能仅需4列就足够了。而后台页面因为展示内容非常多,信息量大。因此,可能会需要更多的列数。



③水槽

水槽是列与列之间的间隔,最小间距不小于8像素。常用的间距有8px、10px、20px等等,数字并不固定,和列一样需要匹配具体内容。列+水槽的组合,也可被称为“栅格”。



④边距

边距是内容区域之外的内容。我们左右拉伸一个页面,内容区域与两边边界始终有一段留白区域,保护着内容不与显示器边界挤在一起。这个边距一般是不能放任何内容的(特定的装饰元素除外)。类似于印刷品中的“出血”。数值并不需要太多,一般在10-20px左右。而移动端的左右边距尺寸在20px-40px不等。




4.如何制作网格系统

①公式

假设内容区域宽度为W,列宽为a,列数为n,水槽/外边距宽为i

那么可得W=(a*n)+(i*n)-i  

因为a+i=A

所以W=(A*n)-i 

 

例:

当我们使用12列网格设计,每一列网格宽为80px,水槽宽为20px;套入公式可得W=(80+20)*12-20=1180   内容区域的宽度为1180像素。得到了公式,我们只要填入相对应数值,就可以得出其他的数值。




另一种情况:

我们可以设定内容区域为整数值,外边距为20px;在前端开发时,可以使用css中的Margin属性挤出外边距。这样可以保证宽度的整数值尺寸。


像素范官网


②工具

a.PS参考线设置

新建画布——视图——新建参考线版面——调整数值




b.Sketch参考线设置

新建画布——view(视图)——Layout settings(布局设置)——调整以数值




c.网站Grid.Guide

右上角调整宽度、列数、外边距即可。



③注意事项

a.如果不确定宽度、列数等参数,我们可以先画草图,并通过观察测量相关主流产品寻找灵感。


b.时刻考虑自适应的问题,要考虑页面在不同宽度以及移动端时候的状态。网格系统要时刻保持并使用。


c.不能为了网格而网格。我个人也接触过一些页面的源文件,发现里面的网格虽然规范,但与实际内容并不匹配。所以,网格是手段,而不是目的。



5.如何使用网格系统


①8点网格

建议我们的设计元素都要是8的倍数。因为,大多数流行的屏幕尺寸都可以被8整除。“8”这个数字在开发人员那里更容易理解,且更有说服力。同时,用8作为设计的最小单位是可以除尽的。8/2=4、4/2=2、2/2=1;而其他数字比如6或者10,只能除一次。再缩小就会出现半像素的情况。iOS的@1x,@2x,@3x图,用 8 为基数可减少出现是奇数造成一像素偏移模糊的情况。





②网格类型

a.流动网格

当窗口缩放时,内容等比例缩小。到达临界值时,内容排版会改变。


b.固定网格

固定网格,列宽和水槽宽不会改变。当窗口缩放到达临界值时,内容条目的排版会发生改变。


c.混合网格

混合网格,页面缩放时,内容并不是等比例缩放。在不同的页面宽度,会有不同的缩放比。


③模块布局

通过网格的制作,给我们的页面提供了约束后的空间。我们可以在这样规整后的空间中,进行各种模块化的分布设计。



④设计边界

核心设计内容要在网格系统内。同时,设计内容的边界与网格的边界是一致的。如果设计边界不与网格边界对齐,就会出现多余的留白。


内部的水槽不推荐放设计元素。水槽不仅仅是网格的间隔,同时也是设计元素的间隔。

⑤保持创意

网格系统虽然可以让我们的设计更便捷、更有效率、更有一致性,但这也带来了同质化的问题。如今同属性的网站或APP,比如电商类、视频类页面的排版都很相似。虽然,确保了整体的规范以及专业性,但是页面变得不再那么新颖。这不仅需要我们在视觉上更加吸引眼球,在排版布局上也要下功夫。必须在两者之间找到平衡。



6.总结


1.什么是网格:一种帮助设计师梳理页面并提供合理约束的手段。

2.为什么用网格:效率、规范化、延续性、专业性。

3.网格系统中都包括什么:内容宽度、列、水槽、外边距。

4.如何制作网格系统:ps新建参考线版面、sketch--view(视图)--Layout settings(布局设置) 、网站Grid.Guide

5.如何使用网格:设计元素均用8的倍数、模块化设计、外边界与内间隔、保持创意。


网格系统是帮助我们更好完成设计的方法,而不是制约我们的工具。规范化、专业性都十分重要,但对于设计来说我们的创意更不能丢失。网格系统帮助我们更有效率的进行设计,给我们节省了调整细节以及复用等问题的时间,这样就可以让我们更好的在排版上下功夫。


参考文章

1.http://printingcode.runemadsen.com/lecture-grid/

2.https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

3.https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

4.https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde86325.https://www.carbondesignsystem.com/guidelines/2x-grid/basics/

Powered by Froala Editor

微信公众号:Fly Lab

更新:2020-05-18

收藏

9人已收藏

FLYXMF

WeChat:774842582

  • 31

    作品

  • 3218

    粉丝

  • 36

    关注

  • Midjourney进阶篇,告别开盲盒!一些高效的使用技巧
  • 依靠关键词智能作画丨「Midjourney」基础使用手册
  • 赋予设计理论支撑!经典「交互理论」在实际案例中的应用
  • 金融产品APP Redesign

    猜你喜欢

      2020-05-18 原创文章 经验/观点 举报 1483 9 8 0

      网格系统总结:从初识到应用

      0.0°

      你确定要举报网格系统总结:从初识到应用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      9
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录