网页设计中的栅格 第1篇
网格是构成页面栅格系统的最小单位。PC端我们一般用8作为网格的最小单位。
手把手教你做规范--布局规范(栅格)
为什么用8?
尽量保持单位是偶数,这样在页面放大或者放大或者缩小时还能保持清晰。在保证偶数的前提下,使用“ 2、4、6、8、10、12... ”作为最小单位都是可以的。
通常情况下PC端横向是固定的,纵向是可以滚动的。根据2019年中国PC端分辨率端统计,“4、8”只有不能被1366整除,其他都可以。由于4过于小,普通用户从视觉上不容易分辨差别,所以我们选用8作为最小单位。之后所有的数值都使用8的倍数。
网页设计中的栅格 第2篇
创建页面
设计页面时,我们通常从小尺寸做起,缘由后续详述。
添加栅格(竖直)
添加栅格(水平)
我们一般不添加水平栅格,而是用参考线替代。如果要添加的话,同理,在设置中选择“Rows”即可。
网页设计中的栅格 第3篇
为什么设计页面要“从小做起”?
我们应避免一开始就创建固定为 1980×1080
像素的页面,因为这样的设计往往难以灵活适应不同设备和屏幕尺寸。相反,我们建议先从一个较小的、更基础的页面布局开始设计。
因为小尺寸的设计更容易适配到更大的屏幕上,实现响应式布局。而直接从大尺寸设计开始,则可能面临难以向下适配到小屏幕设备的挑战。
此外,值得注意的是,现代浏览器普遍支持向上兼容的页面,即能够较好地渲染和展示为更大屏幕尺寸设计的网页内容。因此,我们仍应优先考虑从小尺寸出发
当我们的小页面设计好后,我们应该去做更大的页面。
这时,就可以使用 Figma 的 Auto layout (自动布局) 功能来实现。
我们以这个低保真原型网页为例子,来实现响应式布局。
可以发现,当我们拖拉改变页面大小时,页面内的元素是混乱无序的。
那么我们如何使内部的元素仍然按原先的布局排布呢?
Auto layout
可以帮我们实现。
我们以中间这个版块为例:
这里因为想把右边两个元素当成一部分,所以选中元素,按 Shift + A
给右边部分添加一个小框架。
选中全部元素,按 Shift + A
添加外部的大框架。
这时我们会发现,内部的元素间距有些混乱。
所以,我们要进一步操作。
选中子元素外的小框架,在右边的操作栏中调节 padding
,这里调为 0
。
选中小框架,调节元素之间的间距 gap
重复步骤(4),调节左侧元素的 padding
选中外部大框架,修改 gap
为 10
。
如此,我们就完成了基本框架,接下来只需修改每个小框架的对象尺寸和对齐方式。
选中每个小框架,在右边的的操作栏中修改对象尺寸。