网页的栅格系统设计（2）
作者：青云 来源：Taobao.com UED Team 发布时间：2008-09-19 21:13:00
栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：
yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格 ：
从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：
在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……
当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。
呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。
0
投稿猜你喜欢
如你所见，功能很简单。只有基本的播放，停止，甚至只针对一首歌曲，仅供初学者参考学习用。代码from tkinter import *from- 如下所示：depot_name = models.CharField( u'设备库房名称', bla
- 此前piscdong已经做过一次评测了,这次的Beta正式推出,我也来参与一下.当回小白鼠吧.新的界面设计非常让人兴奋750){this.r
- 通过?pandas.DataFrame.shift命令查看帮助文档Signature: pandas.DataFrame.shift(sel
- 喜欢用Python写脚本的小伙伴可以跟着一起写一写呀。编写环境：Python2.x00x1：需要用到的模块需要用到的模块如下：import
- 前言本文主要给大家介绍了关于Python中序列的修改、散列与切片的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
- MySQL/MariaDB/Percona数据库升级脚本MySQL/MariaDB/Percona数据库升级脚本截取《OneinStack》
- 根据当前时间戳获得整小时时间戳unit = 3600start_time = int(time.time())/3600 * 3600根据当
- 在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。针对这个问题，第一想法，自然是H5提供了input color，可以实
- 先放关键代码：i = tf.train.range_input_producer(NUM_EXPOCHES, num_epochs=1, s
- 1、关于参数的区别实例方法：定义实例方法是最少有一个形参 ---> 实例对象，通常用 self类方法：定义类方法的时候最少有一个形参
- 源自MySQL 5.7 官方手册 手册地址一、SELECT…INTO介绍SELECT…INTO用
- python 读取语音文件时，常用的无非以下三种方式，但是在我们数据量变的很大是，不同的读取方式之间的性能差异就会被进一步放大，于是本文着重
- 实验环境：python 3.6 + opencv-python 3.4.14.51建议使用 anaconda配置相同环境背景人脸识别步骤图1
- 问题我试图打印some_cell.font.color.rgb并得到各种结果。对于一些人，我得到了我想要的东西（比如“ FF000000”）
- 本文针对Python的全局变量实现方法简述如下：先来看下面一段测试程序：count = 0def Fuc(count): pri
- 毫无疑问，JavaScript 是一种非常灵活的脚本语言，有时候它像一只难以驯服的野马——你受益于它的灵活性的同时，也要时刻提防它变得失去控
- 表的创建CREATE TABLE `lee` (`id` int(10) NOT NULL AUTO_INCREMENT, `name` c
- 目录一、pyecharts绘制饼图语法简介二、绘制普通饼图三、绘制圆环图四、绘制饼图-玫瑰图一、pyecharts绘制饼图语法简介饼图主要用
- Django的核心(1.4+)可以运行在从2.5到2.7之间的任何Python版本。我的电脑是操作系统是window10 ，内存是4G。1。
