巧妙利用栅格化方法设计响应式网站。

要知道怎样巧妙利用栅格化方法设计响应式网站,我们先来了解一下响应式网站。

巧妙利用栅格化方法设计响应式网站(图1)

——关于响应式

在移动互联网的大时代iOS 和 AndROId的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的挑战,我们无法估计用户的终端设备和网络状况,更不可能为每种设备都专门设计一套网站,如何实现网页在多终端设备中的适配呢?

响应式,火火火火起来了!

2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design",响应式网页设计提供了一种设计方法,可以使同一网站在智能手机、桌面电脑,以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸,合理地为现有及将来的各种设备提最佳的浏览体验。

Ethan Marcotte称响应式设计是基于网格建立一个网站。Marcotte定义这项技术后,网格引入网页设计,出现了很多CSS网格框架,几乎成了网页设计的标准。目的是让网页布局更合理,信息呈现更加美观易读,风格工整简洁,对前端开发来说,更加灵活与规范,在网页设计中的定义可以理解为以规则的网格阵列来指导和规范网页中的版面布局以及信息分布,这样做的好处是给予一种规范,令排版者可以较为方便的组织标题、列表、段落、图片等元素,保持版面元素之间的一致性。对"流体式"的响应式网站更是一个重要的设计规范。

——我对栅格的理解

以前有很长一段时间,我一直搞不明白到底什么是栅格,首先我们必须要对栅格系统有一个基本的认知,关于栅格,栅格是由网格演变而来的另一种说法,都是一个意思——格子,所以栅格也没有多高深复杂,就是和小时候的作业本,方格本一样。作用之一也是异曲同工

——规范。将栅格视为一种秩序系统来进行使用,是网页设计师某种特定的精神和态度的表达,应为它体现设计师是以一种结构、逻辑的方式来进行构思和设计的。

——巧妙利用栅格化

在网页设计中,如果把网页宽度平均切分为多个网格单元,每个单元之间预留一定的空隙,此时整个页面就如同一个栅格系统。标准的栅格系统中所包含的几个部分,分别是总宽w、列宽c、槽宽g、外边距m几个部分。这样总宽的公式如下:

槽宽g=2*m

总宽w=2m+N*c+(N-1)*g

总宽w=g+N*c+(N-1)*g

总宽w=N*c+N*g

总宽w=N*(c+g)

巧妙利用栅格化方法设计响应式网站(图2)

边距部分不显示内容的,用于将网页主题内容和边缘进行分割。可以改变面数和槽宽,设计出很多栅格系统。(推荐个栅格工具: http://grid.guide/ http://gridpak.com/ )

第一步,适合的页面宽度

选择多大的网页宽度设计,根据以下

巧妙利用栅格化方法设计响应式网站(图3)

根据上面的公式根据上面的算法,可以得到:

N(360) = N(2^3 * 3^2 * 5) = 22

N(480) = N(2^5 * 3 * 5) = 22

N(720) = N(2^4 * 3^2 * 5) = 28

N(750) = N(2 * 3 * 5^3) = 14

N(800) = N(2^5 * 5^2) = 16

N(960) = N(2^6 * 3 * 5) = 26

N(1000) = N(2^3 * 5^3) = 14

N(1024) = N(2^10) = 9

N(1440) = N(2^6 * 3^2 * 5) = 34

N(1920) = N(2^7 * 3 * 5) = 30

我们得到一个有趣的结论: 要使得N(width)最大,width的取值有两个系列:

A系列: …, 320, 720, 1440, …

B系列: …, 480, 960, 1920, …

N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活!

目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了。

第二步,调整栅格

那么现在我们就用960的宽度看看栅格给我们设计的巧妙用法,上面推荐的两个网站,

第一个http://gridpak.com/ ,边距部分不显示内容的,用于将网页主题内容和边缘进行分割。可以改变面数和槽宽,设计出很多栅格系统。常见的栅格系统:

巧妙利用栅格化方法设计响应式网站(图4)

第二个http://gridpak.com/,和公式是同样道理的栅格系统,这个更灵活些:

巧妙利用栅格化方法设计响应式网站(图5)

选取8倍数,因为大多数的主流屏幕都可以被8整除,足够普适。且以8为一个步进既不会使你的系统过于细碎(比如6点栅格),也不会使你的系统过于拘束(比如10点栅格),8、16、24...最终你要拿捏一个最合适的步进作为你的栅格基础。

根据网站的设计风格定列距,窄的(严谨,精致,极致,完美),宽的(舒适,轻松,愉快)。

根据网站内容定列数,内容多列数可以多些,这样排版更灵活。

第三步,填充内容

在我们确定了栅格后,开始根据网站架构内容划分排版,做出每个内容板块比例,然后还有根据比例而定横栏间距比例。在设计的时候要注意的是响应式网站由大屏到小屏布局流动

遵"从由左上到右下"这样的形式来设计内容。

巧妙利用栅格化方法设计响应式网站(图6)

做好网格比例以后,我们开始进行填充内容,再根据实际的内容情况对间距做出相应调整。所以栅格对我们设计上帮助还是很大的,规范并没有完全限制,而其结果还是有很多可能性,留白多少,间距,文字与图片的组合搭配。

第四步,添加修饰

在页面设计出来之后,可以增加辅助的几何,点线面装饰,让整个视觉画面灵活起来。

总结

经过对响应式网站的了解和栅格的运用,对页面宽度选择,栅格列数间距的调整,进行初步内容规划排版,再按照实际情况对最终的稿作调整。可以大胆的在设计上尝试,大间距,文字大小的搭配,画面图形松紧,利用栅格设计出对画面更有节奏呼吸的排版,巧妙利用栅格,响应式网站更合理,分享就到这了。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/216875.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年2月14日 01:34
下一篇 2023年2月14日 01:34

相关推荐

  • 消除响应式网站设计中的缺陷。

    在过去的5年里,移动流量的份额增长了20%,今天响应式网站设计已经被认为是理所当然的了。到2020年,您可以通过手机访问任何网站,它会很好用。大多数用户如果看到一个网站在他们的智能手机或平板电脑上表现不佳,…

    2023年2月24日 SEO操作
    01
  • 【移动端网站建设】从用户的直观感受出发做移动端手机网站设计。

    移动终端是未来的发展趋势。现在越来越多的消费者选择用移动客户端浏览企业网站。但移动终端不仅是移动网站,也是其他移动产品。现在企业越来越重视移动端!如今,许多各行各业的企业都有自己的官方移动网站。每个…

    2023年2月16日
    01
  • 一个好的响应式网站需要融合SEO优化。

    一个优秀的H5响应型网站可以帮助企业开拓版图,那么如何用SEO创建一个优秀的H5响应型网站呢?这与域名、空间和网站建设程序是分不开的。今天,小编将简要介绍网站域名、网站空间、网站程序的组合。 1、网站域名。首…

    2023年2月15日
    01
  • 企业网站用响应式网站建设有什么弊端。

    响应式网站在建站领域里是非常火的一个话题,能够兼容不同浏览设备,当用大小不同的终端屏幕浏览,这套技术,会根据屏幕大小进行自动适应,不用针对大小不同的终端屏幕进行特定制作,现在的企业都想要一个响应式的…

    2023年2月20日
    00
  • 分析响应式和营销型网站各自的特征和用途。

    目前,在网站制作中,除了已经得到大多数企业认可的营销网站建设外,一种新型的企业网站建设也很流行,即相应的网站类型。虽然两者都是企业进行网络营销有效的助手,而且都是根据企业的需要定制的,但两者之间存在…

    2023年2月16日
    02
  • 响应式网站设计对搜索引擎优化的好处。

    随着科学技术的发展,移动设备已逐渐取代PC设备。各种平板电脑、智能手机等设备已成为主流。对于网站设计来说,固定宽度的页面设计量已经不能满足时代发展的需要,而响应式的网站设计更符合多样化用户的需求。目前…

    2023年2月25日
    00
  • 响应式网站建设与传统网站建设的6大区别。

    网站可以分为传统网站和响应式网站,传统网站即只需要考虑PC端展示的网站,而响应式网站是根据电脑、Ipad和手机端的不同设备而显示不同的界面格式。由此看看出响应式网站建设不同与传统网站建设,响应式网站建设需…

    2023年3月2日
    00
  • 自适应与响应式网站设计:最佳比较指南。

    自从2007年第一代iPhone问世以来,移动设备在日常使用中变得更加方便。目前约有25亿人使用智能手机来完成日常活动,其中包括浏览网站。由于越来越多的用户更喜欢使用移动设备而不是更大的电脑,因此网页设计师们将…

    2023年2月15日 SEO操作
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息