提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
每两周归纳总结一篇B端设计、产品、交互、视觉的相关内容。接受各种批评,希望也能给予你一定的设计启发,共同成长。
很多刚入门的设计师并不了解珊格系统,也不会利用珊格系统依靠秩序与逻辑去完成设计,这份基础指南,帮你学会珊格系统设计。
一、栅格历史
最早的网格原型,是13世纪由建筑设计师 Villard de Honnecourt 画的图表,其中的比例布局十分和谐,直到现在也依旧应用在书籍设计当中。
16世纪晚期的《圣经》的手抄本。其中有一页采用了两端对齐的排版方式,文字排成两栏并以中心轴为对称轴,这种左右对齐(两端对齐)的排版规则持续了450年,当时还没有“网格”这个概念。直到 20 世纪 40 年代后期,第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 Josef Müller-Brockmann(约瑟夫·米勒-布罗克曼)所著的《平面设计中的网格系统》一书。
二、栅格优势
1. 减少决策成本保持设计一致性。
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本;UI 设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够确保各个布局之间的一致性,提升体验和视觉的一致性,使设计更有秩序感、节奏感。
2.响应式布局
随着响应式设计的流行,使用网格可以跨不同屏幕尺寸的多个设备体验连贯。响应式的要点是为同一个页面设计多种布局形态,分别适配不同屏幕尺寸的设备。
3.提高效率
对设计师:能让设计师高效准确设计界面,多端口屏幕设计减少,提高设计效率;
对开发:节省开发成本,增加配合效率,落地实现更精确;
对用户:秩序感的界面降低了用户的理解成本,让用户体验更好。
三、栅格构成
栅格系统的基础要素主要有:最小单位、屏幕总宽度、列数、栏宽、水槽、安全边距、内容区域。
栏宽度:是栅格当中内容所占的基本宽度,一个栏宽度往往是通过内容宽度、页边距、水槽 排除过后所剩的宽度平均得出,一般常用标准删格分为2,3,4,6,12列页面中水槽及边距设定定值,即浏览器在一定范围扩大或缩小,栅格的栏宽度会随之扩大或缩小,但水槽边距的宽度值固定不变。
最小单位
Ant 有一个最小单位为 8px 的常用模度表,可以作为参考, 这对我们设置页面布局规则将有提效。按照AntDesign的“亲密性”原则,定义了常用的几个间距:
推荐一个sketch插件
Gutter Cutter插件可以帮你在sketch中快速创建自定义的栅格,支持创建水平和垂直的栅格,而且可以自定义列行、槽宽、留白等参数,帮你提高效率。
使用方法:
选择一个图层
执行 Plugins > Gutter Cutter > Vertical / Horizontal Guides 分别可创建水平 / 垂直栅格
在弹出的对话框分别可自定义列 / 行数、槽宽及留白
执行 Plugins > Gutter Cutter > Remove All Guides 可删除所有栅格
Figam小伙伴可以安装Dot Grid插件
四、设计布局
在设计过程中,设计师还需要建立适配的概念,根据具体情况进行适配,以及考虑那些区块需要动态布局。中台系统的用户的主流分辨率为 1920*1080、1440*900 和 1366*768,一般常用画板1440进行区块动态适配。(优势适配误差相对较小)
左右布局的适配方案
左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域,其中顶部菜单栏、左侧菜单栏为固定宽度,右侧主体内容根据珊格进行动态缩放;常用标准删格分为2,3,4,6,12列
四分布局
八分布局
上下布局的适配方案
上下栏布局包括顶部菜单栏和主体内容两大区域,其中顶部菜单栏为固定结构,做法是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
五、总结
栅格系统有助于我们让更好的去设计,而非限制,通过排列组合形成千万种可能性,在界面优雅布局中,结合可用性,要想做出优秀的设计,还需要进一步了解设计背后的科学方法论,不仅要在视觉上突破,更要在设计方法论上得到求证,让做出的设计作品科学合理有理有据,希望能对大家有所帮助,谢谢!
分享两个开源组件库:
ant.design
element.eleme.cn
原文:设计老怪Alan(公众号)
作者:设计老怪Alan
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册