商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 建站经验 >

非理想主义的响应式栅格:三种国内外常见的类型

发表日期:2018-01-14 19:51聚圣源浏览次数: 本文关键词:非,理想主义seo,响应,式,栅格,三种,国内外,真,

  真正大范围使用、可以借鉴的、非理想主义的响应式栅格存在吗?本文作者答:肯定的。在此,她将要介绍三种国内外常见的类型。

  

非理想主义的响应式栅格:三种国内外常见的类型

 

  我曾经很推崇 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 的心态恐怕和时装周上的展品类似,一开始就没有抱着实用的心态,而是更多地勾画一个理想的方向。

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

  作者:Z Yuhan,知乎专栏:交互进阶

  来源:https://zhuanlan.zhihu.com/p/31435718

  本文由 @Z Yuhan 授权发布。未经许可,禁止转载。

  题图来自 unsplash

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/9847.html

网站设计案例推荐

热门文章

站长工具综合查询里面SSL证书不...

SSL证书不安全是怎么回事?但是点进去这个提示后,显示的是别人的tdk是不是被劫持或者被黑了?...

日期:2018-03-27 浏览次数:2002

简洁而实用的版权信息可增色网...

打开网站,人们自然会从上往下浏览,首先映入眼帘的一定是BANNER主视觉,然后是网站主体内容部分。相比较而言,注意到网站底部版权信息的浏览者确实不多,但这并说明网站版权信...

日期:2018-09-20 浏览次数:1894

网站设计需要注意的3点问题...

对于网站设计来讲会受到很多因素的影响,而且不同类型的网站,在设计时需要体现的元素也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信...

日期:2018-02-12 浏览次数:1820

企业网站为什么要改版 改版选择...

网站改版,是每个建站企业必须面临的工作。相信也有不少站长问,已经做好的企业网站,为何还要大费周章重新进行改版设计呢?下面小编就来给大家说说,企业究竟为什么要改变,并...

日期:2018-03-26 浏览次数:1353

永城网站制作:模板建站不可不...

随着互联网建站尤其是自助建站热潮不断高涨,建站行业涌现出越来越多的自助建站平台,这些平台普遍都提供网站模板可选。...

日期:2018-04-30 浏览次数:946

相关文章

「富裕县seo」响应式网站建设:...

成绩电商销量神化 抖音告白精准引流 随着移动网站流量的连续增长,公司不能再耽搁相应性网站建立的时间。 相应式网站计划早就退出了早期接纳者阶段。互联网用户如今完全盼望网...

日期:2019-04-04 浏览次数:71

「古县seo」2019年最佳非营利网站...

创建最佳的非营利性网站计划和用户体验对新老构造来说都是一个挑衅。 缘故原由如下: 非营利构造的有影响力的网页计划必须不但仅是一本数字手册,而是一台饥饿的在线贩卖呆板...

日期:2019-03-29 浏览次数:61

「缙运县网站建设」5G时代来临...

2019年,5G的脚步近了。 环球移动通讯体系协会CEO洪曜庄猜测:20 峨眉山 25年后,5G将笼罩环球40%生齿,中国或将成为5G最大的市场。5G技能不但可以或许提供更快的网络,更能通过低时延...

日期:2019-03-25 浏览次数:68

「阳泉市网站建设」响应式网站...

随着当代科技的不停生长,互联网技能的不停深化,电子 宿州 产物推陈出新的速率也随着在加速,就现在的互联网终端装备来说,就具有多种范例,常用的就有PC、Pad、手机、TV等等,...

日期:2019-03-13 浏览次数:81

响应式网站设计好处?中企动力...

随着互联网技能的不停深化,其应用范畴也越来越广。直到本日,岂论是社会的经济照旧人们一样平常的生存早已经与互联网密切地接洽在了一起。有数据称,2017年环球范畴内连入互联...

日期:2019-03-02 浏览次数:73

随机推荐

站长为什么会选、该怎样选择美...

美国独立IP虚拟主机介绍与推荐...

互联网空间其实并不大 玩转社区...

睢县网站建设:新手必学实战网...

天下数据香港自建机房服务器升...

「山西网络推广」新手和企业如...