首页天道酬勤急诊布局规范(如何做网页布局)

急诊布局规范(如何做网页布局)

admin 11-28 22:54 192次浏览

很多朋友对网格很困惑,知道网格的概念却不知道怎么用,为什么用,每次提到都很头疼。其实网格并没有那么难。网格是一种辅助设计、减少设计工作量、使设计更加合理和规则的方法。屏幕响应不同大小的页面更省时省力。一种方法是减少我们的工作量。看看这里是不是刺激,再往下看~

一、什么是栅格

10-1010网格就是网格,也就是规则网格。

哈哈,这不是很接地气吗?英文翻译是grid,但是为什么现在叫grid就不得而知了。

网格最早应用于平面设计,20世纪初产生于西欧,20世纪50年代在瑞士完善。规则网格用于指导布局。

网格设计也广泛应用于屏幕端,它不仅服务于设计,而且在响应性开发中也发挥了很大的作用。虽然开发哥提到的网格和我们理解的不一样,但是也降低了通信成本。

00-1010网格是页面网格系统的最小单位。在PC端,我们通常使用8作为网格的最小单位。

为什么用8?

尽量保持单元尽可能的平整,这样当页面放大或放大或缩小时就能清晰。在偶数的前提下,用“2、4、6、8、10、12……”作为最小单位是可以的。

通常PC侧水平固定,可以垂直滚动。根据2019年中国PC的分辨率统计,“4,8”只能被1366整除,其他都可以。因为4太小,dddlc不容易直观区分区别,所以我们选择8作为最小单位。之后,所有值都是8的倍数。

00-1010列是显示内容区域。

PC终端通常有12个网格或24个网格,这意味着垂直方向有12列或24列。

檐槽是两列之间的空间。插槽数量比列数量少一个。

假设网格宽度为w,列宽为c,槽宽为g,如果有N列,则有N-1个槽,这样我们就可以推断出我们可以计算出w=n * c (n-1) g。

忘记列槽=列的概念(个人感觉没用,欢迎不同意见讨论。)

为什么使用第12列或第24列?

第12列和第24列常用于PC,第4列多用于移动。划分越细,多变的内容越丰富。但是太薄的话,页面会变得很碎片化,差感和节奏感会降低。第12列或第24列可以分为2等份、3等份、4等份、6等份、12等份,也可以按照1:23:1、1:2、13:23:1等比例划分。这提供了足够的变化。

以下是JD的截图。COM的首页,应该是12格,分别采用了两等份、四等份、六等份、2:233602、2:10。

00-1010网格宽度之外的边距通常是一个自适应的距离,例如,当小屏幕响应大屏幕时,边距会改变。

00-1010网格宽度是需要网格设计的区域的宽度,不是显示器的宽度。

例如,假设我们使用1920px屏幕作为画板,并使用24列网格。将列的宽度设置为32px4(原子单位),凹槽的宽度设置为16px(2个原子单位)。

那么网格宽度W=24列32列宽度23列16槽宽=1136px,其余宽度自适应。

在1920屏幕宽度,如下图所示:

应用原则:

内容必须落在吧台上,而不是水槽里;父元素需要与网格对齐,子元素可以再次作为网格;尽量用网格等分,也可以等分成5等份。

,前端工程师就需要改底层结构了。

二、为什么用栅格

1. 不用栅格设计行不行? 行!

行,不用栅格没问题。很多优秀作品都没有刻意的遵守传统的栅格,反而显得更加灵动。但是打破规则前得知道规则才行。

2. 使设计更有规律和逻辑

基于栅格设计,按一定的规律把文字和图片排列在页面之中,使版面不光具有视觉感官的美感,也具有严谨的逻辑和一定韵律。

3. 利于团队协作

有了统一的栅格标准,就可以解释为什么“这个宽度要用120px,那个宽度不能用140px……”之类的问题。设计团队之间沟通成本就大大降低,同时也能提高团队作业的一致性。

4. 响应式设计

现在人们使用的设备不在局限电脑或者手机,用户可能使用任何尺寸的设备来访问我们的设计。所以我们不能为单一的设备来设计,怎么动态的构建我们的设计、响应不同尺寸的设备,是设计师在起初就应该考虑的。

三、栅格系统如何响应的

1. 什么是响应式设计

通俗的讲就是:为了让设计在各种尺寸的设备上都保合理、持美观,用户无论用手机、平板、电脑使用我们的产品时都有良好都体验。检测到不同的屏幕尺寸的时候改变栅格的一些数值,变成我们预先设计的样式,这就是响应式设计。

2. 栅格是怎么响应的

(1)固定栅格

栏和槽的宽度是固定不变的,不随屏幕的大小而变化。到一定的临界值的时候栅格列数会发生变化。

假设在我们以1920的屏幕大小为画板,栅格宽度是1136,看到的如下图:

在2560的屏幕下看页面,两侧的留白就会变大,中间的内容保持不变。如下图:

在1024的屏幕下看页面,就会出现横向滚动条,页面仿佛被截断一样。如下图:

在更小的屏幕下,栅格的列数会发生变化。但无论怎么变化,栏和槽的宽度是不变的。如下图:

在临界值之间设计的布局不会改变。具体到什么临界值栅格的列数会发生变化,需要跟开发说清楚。临界值设置多少、设置多少个临界值要根据实际情况来制定。

优点:设计的还原度是最高的,无论在什么什么屏幕下,核心样式是保持不变的。

缺点:在小屏下会有滚动条。在大屏上左右留白过多,有点浪费空间。

(2)流动栅格

栏的宽度是变化的,随屏幕的大小而变化。槽的宽度固定不变。到一定的临界值的时候栅格列数会发生变化。

假设在我们以1920的屏幕大小为画板,栅格宽度是1136。看到的如下图:

在2560的屏幕下看页面,槽的宽度保持不变,栏的宽度发生改变。如下图:

在1024的屏幕下看页面,槽的宽度保持不变,栏的宽度发生改变。如下图:

问题来了,这样一算栏的像素就不但不是偶数,而且还不是整数了,怎么办,屏幕该怎么显示呢?没关系,有的卡片可能是351个像素,有的是356个像素,这样1像素的差距在屏幕上很难看出差别来,为了在不同大小的屏幕上适配,这1像素是可以忍受的。

需要把子元素内的布局样式,那些是可以变动的地方跟前端说明即可。(例如:当连变化时,卡片内的图标保持左对齐,左边距不变。文字左对齐,每行的文字数量自适应。)

优点:在不同屏幕下会自动放大或缩小,更充分的利用空间。

缺点:由于栏宽是不固定的,样式可能会发生变形。文字可能会变成多行或者超长的一行。

(3)混合栅格

在同一页面中可以分成多个区域,每个区域做不同栅格类型。

四、从0建立后台栅格系统

1. 确定栅格的基准

根据自家的业务场景定下最小单位和栅格数量,我们以8为最小原子单位距离,之后所有的数值是8的倍数,栅格数量采用12举例。

2. 确定栅格区域

后台系统和网页不同,往往逻辑复杂、数据量大,同时需要获取、比对很多的信息。

信息以表格、表单居多,所以屏幕的宽度就显得很重要了,寸土寸金。所以通常选中全部填充的样式,舍弃两侧留白的样式。

我们选择设备比例最多1920×1080为画板。(这里主要将纵向栅格,暂不考虑浏览器自身的标签栏和菜单栏的高度)

制定如下的样式,数值仅供参考,照搬的请慎重。

3. 放置内容

在栏内放置内容,内容不能在开始和结尾不能在槽里,内容的高度也需要保持8的倍数。

4. 响应策略

(1)大/小屏幕响应

当屏幕变大时,左侧蓝色菜单栏保持宽度不变(固定栅格)。右侧栅格区域的槽保持不变,栏等比例扩大。(流动栅格)

当屏幕变小时,左侧蓝色菜单栏保持宽度不变(固定栅格)。右侧栅格区域的槽保持不变,栏等比例缩小。(流动栅格)

(2)平板响应

当屏幕小到平板的尺寸时候,栅格区的内容就无法正常显示了,十分影响体验。于是就是改变栅格的数量,变成6列栅格,同时菜单栏收缩简要模式,这样就完成了平板端的适配。

(3)手机响应

当屏幕是iPhone8、8P…等手机尺寸时候,栅格区就改为更少的栅格,同时菜单栏变为汉堡按钮。还可以把一些内容做隐藏处理,例如常见的咨询客服、相关推荐等。

5. 小结

栅格就是网格适配时通常槽的宽度不变、栏的宽度自适应栅格区域是内容区不是屏幕区域栅格响应类型:固定栅格、流动栅格、混合栅格

#相关阅读#

手把手教你做设计规范(1):颜色篇

手把手教你做设计规范(2):图标篇

手把手教你做设计规范(3):设计原则篇

手把手教你做设计规范(4):文案篇

作者:Iron设计邦;微信公众号 IRON设计邦

本文由 @Iron设计邦 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

Java架构师-十项全能40周完结无密计划v成本package.json和package-lock.json怎么使用Java聊天室之使用Socket实现传递图片DeepRust匹配:有更好的方法吗?C++构造析构赋值运算函数怎么应用
随心所欲而不逾矩图片(怎样做到随心所欲不逾矩) 圣康尼跑鞋系列哪个好(最好的跑鞋)
相关内容