巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
建站专提News

基础小科普!3种国内外最常见的响应式栅格 - 网页设计 - yinxi.net

一佰互联网站开发设计(www.yinxi.net) 发布日期 2019-04-10 02:16:01 浏览数: 229

Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统,花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。

可当真正需要用到响应式这东西时,在做完竞品调研后,我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统,因为:

  • 那两张英文图表对艺术背景的设计师来说真的很难理解。
  • 你设计的产品很有可能比 Material Design 的预期更加复杂。
  • 你的开发团队很有可能不能够 or 不愿意花费时间尝试这么复杂的系统。
  • 连 Google 自己的产品都没怎么使用这套栅格系统。

那么,真正大范围使用、可以借鉴的、非理想主义的响应式栅格存在吗?答案是肯定的,下面我要介绍三种国内外常见的类型。

一. 摆不下就换行

顾名思义,这种栅格中,卡片(即内容区块)尺寸和间距不变,每行能放几张卡片就放几张,摆不下就换行,逻辑非常简单。典型的例子有 Youtube 、Pinterest、Behance ……

△ Youtube

这么简单的响应式栅格系统,其问题也很明显:

  • 页边距不确定,所以为了视觉的平衡感,大多将列表居中(像 Google Play 那样坚持左对齐也不是不可以)。
  • 一整页最好只有一种尺寸的卡片,否则边距无法不统一。
  • 固定的卡片尺寸和边距可能在大屏里看起来太小,小屏里看起来又太大。

但是如果产品够简单,列表单一的话,用这种是没问题的。

二. 弹性伸缩填满

这种栅格系统的间距和页边距是固定的,卡片尺寸在一定程度下弹性伸缩,以确保填满整个屏幕。因为间距和页边距固定,也不用担心卡片混排。典型的例子有: Google Drive 、Spotify ……

△ Spotify

这种方式为了保证页边距不像第一种方式那样来回变动,不得不让卡片在一定范围内弹性伸缩,这样做的好处是,不同大小的卡片混排也不会造成混乱。但是在缩放浏览器时,你会发现卡片的尺寸无可避免地时大时小(如上图)。

这种响应式栅格稍微复杂一点,我下面画图示意设计方法:

1. 画出基准界面:

用一个理想宽度的屏幕,用适当的间距摆下理想尺寸的卡片。

2. 标出固定部分:

页边距和卡片间距是不变的,把它们用色块标记出。

3. 画出基准栅格:

横向延展间距色块,就得到了这个界面的基准栅格。

4. 准备几个不同宽度的页面,标出页边距:

5. 把基准栅格放上去:

6. 判断一下每行能放几列:

原则是确保卡片伸缩比例最小,且每行至少要有一列。

7. 调整栅格以适配页面:

8. 把卡片按照适配的栅格摆上:

三. 定制类响应式布局

其实国内的大部分网页并没有做响应式布局(比如知乎、淘宝、爱奇艺等),即便是部分做了的(比如简书、京东、腾讯视频等),也大多没有使用上面讲的那两种自适应的栅格,而是定制类响应式布局。

以腾讯视频为例,你可以看到它的尺寸伸缩并不是依赖一套通用的规范,而是人为设计了几种尺寸。这个例子还算相对复杂了,如果你去看国内其它响应式界面,可能因为是人力设计,所以大多变化范围并不大,最大尺寸和最小尺寸之间的差别有限。

这种方式的统一性就比较低了,能适配的的屏幕类型也不多,可是长远来看付出的人力成本反倒更高一些。

如果可能的话,有一套一劳永逸的响应式栅格规范肯定是最好的,但是对于刚接触响应式不太久,或着不太需要适配不同屏幕的产品而言,先用这种定制式响应布局也是比较现实的选择。

总结

《我做设计这七年里的心态变化》 里我把自己目前的状态描绘成「随意」,其实并不是说设计师会因为现实的残酷而不得不妥协圆滑什么的,而是要认清时代及环境的局限,并从取舍中获得平衡。

上述这些响应式栅格各有优劣,都不是最完美的解决方案。但是世界上没有最完美的解决方案,Google 能设计出 Material Design 那样细致的栅格系统,却也没有办法在自己的产品上广泛使用

不过作为一家「有理想」的互联网品牌, Google 推出 Material Design 的心态恐怕和时装周上的展品类似,一开始就没有抱着实用的心态,而是更多地勾画一个理想的方向。

但是对于大部分负担不起理想主义的产品、公司和个人而言,还是现实一点,冷静地选择真正适合自己的位置吧。

「让你深度认识栅格系统」

  • 《网页设计中,如何突破栅格的限制又保持协调?》
  • 《最热门工具推荐!为响应式网站而生的40款栅格神器》
  • 《让设计更高效!正式为大家安利这个好用的「8点栅格」》
  • 《网页的脊梁!20款素质过硬的响应式CSS栅格系统》

================明星栏目推荐================

优优教程网: yinxi.net 是巅云旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://www.yinxi.net/

巅云大课堂

一佰互联是全国知名建站品牌服务商,我们有九年网站建设网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。更多资讯:tags标签

相关新闻more

15
04月
在重庆想要找一家好的网站建设公司应该要考虑哪

一家比较好的网站建设公司一定要拥有较为优秀的团队,不仅要在技术方面还是服务方面都要拥有完善的设计理念与服务理念,对于网站建设公司来讲,网站完... >>详情

15
04月
Windows 10难以扭转PC颓势 201

09月24日报道:Windows 10和英特尔的Skylake处理器的组合被视为提振PC市场的关键。Windows 10是多年来微软收到评价... >>详情

16
04月
专业网站建设-做好网站,企业的网络营销才有希

做好网站,企业的网络营销才有希望!企业网络营销是开始于网站建设,结束于网站运营管理。好网站是企业做好网络营销的第一步。什么样的网站才是好网站... >>详情

03
05月
SEO之谷歌作者排名的作用详解

谷歌作者排名的出现使得人为因素对网络文章排名产生了影响。谷歌会提取文章作者信息,通过在社交网络(facebook、Google+、Twitt... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站