网页栅格系统研究:蛋糕的切法(4)
作者:玉伯 来源:Taobao.com UI Team 发布时间:2008-10-24 17:07:00
栅格系统的优势
上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少,为什么我们还要努力的让网页栅格化呢?
栅格系统具有以下优势:
能大大提高网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。
基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。
对于设计师们来说,灵活地运用栅格系统,能做出很多优秀和独特的设计。(详见《超越CSS》一书)
对于大型网站来说,我相信栅格化将是一种潮流和趋势。
下面讨论栅格系统中的黄金分割。
黄金分割
黄金分割可以归结为数学问题:对于长度为1的线段,将其分成两部分 x 和 1 - x, 使得:
x / 1 = (1 - x) / x
化为简单的二次方程:
x^2 + x - 1 = 0
正数解为:
x = (sqrt(5) - 1) / 2 ~= 0.618
这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域,在管理、工程设计等方面也有着不可忽视的作用。 (这是个自然界的魔数,类似的还有真空光速、普朗克常数、精细结构等等,感兴趣的Google吧)
在平面设计领域,黄金分割点被广泛采用。比如下面这种图:
数一数上面有多少黄金分割?
对于960栅格,实际宽度是950. 两栏布局时,黄金分割为:
对于 24 x 40 的情景,最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15. 但实际使用时,因为窄栏经常用来做导航或放辅助信息,并不需要350px这么宽。因此实际情况下经常被采用的布局是:
上面讲的都是宽度方向上的栅格化,下面我们看看高度方向上如何应用。
高度方向上的栅格
还记得研究(1)中那张红红的很刺眼的图吗?注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比较大,同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格:
这样,我们就在宽度和高度两个方向上都实现了栅格化。
下一篇将详细阐述960栅格系统的模块化应用。


猜你喜欢
- 因为权限不够,导致Pycharm在运行脚本时报错:socket.error: [Errno 1] Operation not permitt
- 封装数据库操作,并且提供事务处理。 使用DbProviderFactories的数据库操作类 Imports System.Data Imp
- 知识点文件读写基础语法字符串处理字符拼接代码解析导入模块import platformimport stringimport random将
- 1.点算子点算子是两个像素灰度值间的映射关系,属于像素的逐点运算,相邻像素不参与运算。点算子是最简单的图像处理手段,如:亮度调整、对比度调整
- 本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下功能描述在输入框中输入行和列,点击按钮,生成拥有
- 一、go语言内存布局想象一下,你有一个如下的结构体。type MyData struct {
- QWidget基本介绍基础窗口控件QWidget类是所有用户界面对象的基类,所有的窗口或者控件都直接或者间接的继承自QWidget类。窗口坐
- 一. 效果演示1.1、好友右键菜单:1.2、分组右键菜单:1.3、群组右键菜单:二. 实现教程接下来我们以好友右键菜单为例,实现步骤如下:2
- 一、自定义数据集现有数据如下:5个文件夹,每个文件夹是神奇宝贝的一种。每个图片形状、大小、格式不一。我们训练CNN的时候需要的是tensor
- 1.scrapy基本了解Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架。可以应用在包括数据挖掘, 信息处理或存储历史数据
- 本文为大家分享了SQLServer存储过程中事务的使用方法,具体代码如下create proc usp_Stock@GoodsId int,
- 一、前期准备CREATE TABLE `t1` ( `id` int(11) NOT NULL AUTO_INCREMENT,
- 问题描述有时在遇到一个文本需要统计文本内词汇的次数 的时候 ,可以用一个简单的python程序来实现。解决方案首先需要的是一个文本文件(.t
- 在Centos上部署项目发现一个奇怪的问题,数据库连接一直抛异常。于是花了两个小时搜了各种数据库连接异常导致的原因,最终问题得以解决。同时,
- 简介使用faker可以获取很多模拟数据,如:姓名、电话、地址、银行、汽车、条形码、公司、信用卡、email、user_agen等等学会使用这
- 前言或许你已经用过装饰器,它的使用方式非常简单但理解起来困难(其实真正理解的也很简单),想要理解装饰器,你需要懂点函数式编程的概念,pyth
- <% '************************************************
- 1:listWidget 以滚动窗口显示文件下的所有文件: self.listWidget = QtWidget
- 什么是字符串格式化,为什么需要这样做?我们有时候刷抖音/B站看到封面很好看,但是进入直播发现,不过如此!想必主播通过某种方式把输出转换为读者
- 问题你想将几个小的字符串合并为一个大的字符串解决方案如果你想要合并的字符串是在一个序列或者 iterable 中,那么最快的方式就是使用 j