划重点:网页设计中的布局

时间:2018-11-25 10:17:29

  上下布局是最常见的布局方式,基本上都会在最上方有一个导航,下方是内容区,有的官网还会有页脚footer,站酷就是上下布局

tags:
网站地址:

发布者资料: baihua


  上下布局是最常见的布局方式,基本上都会在最上方有一个导航,下方是内容区,有的官网还会有页脚footer,站酷就是上下布局。左右布局在后台类、TO B类产品中比较常见,一般左侧为侧边栏,右侧为内容区。国字形布局和T字形布局其实算作上下布局,只不过比较典型,可以单拎出来作为一种布局类型。

  首先为什么要了解些前端的布局方式呢,直接甩给前端一个设计稿,让他去实现不就行了?其实这涉及到的是设计和开发之间的协作关系,一个有规律有规范的设计稿,前端实现起来更加容易,也方便他管理自己的代码,实现出来的样式也会更灵活,在出设计稿之前和前端沟通一下,采用什么布局方式,需要设计怎么配合,也费不了多少工夫。当然直接甩个设计稿,前端也能实现,但一些特殊效果真的是需要双方合作才能完成的。

  前端视角主要是指实现页面的各种CSS布局方式,我这里主要归纳了5种:静态布局、流式布局、响应式布局、弹性布局和Flex布局。除了静态布局,其他都能实现在不同分辨率下页面的自适应,来给用户最佳的视觉呈现。

  静态布局也叫做固定布局,网页内容区采⽤绝对宽度,网页内每个模块的尺寸大小固定,一般整体在浏览器内居中显示,并会设置最小宽度min-width,当分辨率小于最小宽度就会出现滚动条,如果大于最小宽度则内容居中外加背景 。

  应用场景:目前大部分的高校官网、医院官网、政府网站等都是静态布局,而且设计风格上也很老旧,你们懂得,当然并不是说静态布局的风格就是老旧,这个布局和设计风格没有多大关系哈,有很多新闻门户类、企业官网等网站采用静态布局,同样也很出彩。

  流式布局英文fluid layout,也可以翻译成liquid layout,是指页面按照百分比%定义宽度(也就是长度单位不是我们平常使用的px,而是百分数),来适配不同的屏幕分辨率,在不同的分辨率下网页布局保持不变,一般搭配min-、max-属性来控制尺寸流动范围,以免过大或者过小影响展示和阅读,页面内元素的高度和文字大小往往px来固定住,方便页面排版和阅读。

  缺点:当屏幕分辨率差异过大时,因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,有些页面元素宽度被拉的很高,页面缩小后,一些字或者图片或者图表等会产生堆叠,显示效果不太好控制。

  布局特点:基于栅格系统设计和开发,通过监测设备的分辨率来呈现不同的布局。Bootstrap(一个前端代码库)的响应式设计中,预设了六个响应尺寸:xs、sm、 md 、lg、 xl、 xxl, 当屏幕分辨率较高时采用XL或者XXL的布局,当屏幕过小时,采用XS的布局。

  网站示例:Uplabs网站就是基于栅格系统进行了响应式布局,宽屏模式下展示更多内容,包括上方的引导区和各种标签入口,当在小屏上市就折叠部分内容,同时作品缩略图也实现了基于栅格进行放大和缩小。

  因为最近在做设计规范,无意中发现shopify的设计规范的示例中设计了四种尺寸的设计稿:1440px、1024px、776px、320px,所以还是繁琐的。(这么多版本,设计和开发会吐血吧)

  em和rem是一个相对长度单位,页面内各元素的尺寸采用em/rem做单位,em是相对其父元素大小,rem是始终相对于html大小,即页面根元素。(有点看不懂是吧,没关系,你只需要他是个相对长度单位就行了)

  流动布局可以看做是静态布局的动态版,响应式布局可以看做是几个不同尺寸的流动布局,在每个流动布局之间进行自适应。流动布局、响应式布局、弹性布局和flex布局都能实现自适应的效果,只不过弹性布局是用em/rem为单位,流动布局和响应式布局是以百分比为单位,flex由于兼容性问题,PC端不太常用。

  首先,栅格化设计(grid-design )不等于栅格化开发(css grid )。我之前一直以为用栅格就要实现网页的响应式,由于我们是to b类的网站,所以刚开始很抵触,总觉得没法定宽设计某个模块,后来查了些资料才发现,这是两回事。

  栅格化设计是针对设计师而言,主要是为了提高网页的规范性和统一性,可以不考虑页面的响应式;而栅格化开发,是针对开发人员,特指前端攻城狮使用的css框架,用来实现页面的响应式布局。也就是你可以按照栅格去出设计稿,但不一定基于栅格开发,基于栅格开发意味着需要实现网页响应式布局。

  栅格包括列宽(column)、间隔(gutter)和外边框margin,gutter是左右均分,分别位于列宽的两侧,margin是位于整个网页的两侧的空白区,由1/2的gutter和一个padding组成,一般来说网页的总宽度是不包含左右两侧的margin的。

  一般来说,适配时,间距gutter宽度不变,只会改变列宽column,但是在material design中定义了多种宽度的gutter,当宽屏时使用16或者24px的gutter,窄屏使用8px的gutter,所以可以根据实际情况自己定义是否改变gutter宽度。

  我个人将栅格归为了4类:有间隔栅格、无间隔栅格、局部栅格、水平栅格。有间隔栅格最为常见,无间隔栅格也就是gutter为0,局部栅格一般适用于页面内有侧边栏固定的布局,侧边栏可以不算入栅格范围,水平栅格是指垂直和水平都进行栅格,感觉不太常用。

  12栏和24栏是最常见的,因为能够被2、3、4、6整除,也就是页面能够均分为2、3、4、6等份,其次是16列比较常见。列数越多,排版布局越灵活,列数越少限制性越大,同时页面的统一性更强 。可以根据网页特点选择合适的栏数,不必拘泥。


最新评论

( 查看所有评论 )


声明

  • 本站提供网站模板镜像备份文件下载,本站不拥有模板的所有权。希望用户本着学习的态度使用,对于侵权行为,自行承担责任。