垂直栅格与渐进式行距(下)（2）
作者：宗羲 来源：Taobao UED 发布时间：2009-07-09 16:52:00
标签：垂直,栅格,布局
垂直栅格与渐进式行距应用举例
这 套理论看起来略显枯燥。所以，我还是得举个应用的例子，不然理论对于现在来说没有任何意义。前几天，我遇到了一个问题是这样的：有一个系统，它能够用像 iGoogle那样的模块迅速搭建一个页面用于淘宝的各个子页面。但是，用模块搭建却常常遇到开天窗的问题，就像下面这样：
再看看模块本身，文字基线均未对齐，行距七零八落：
好， 现在，我们开始开刀。首先，我们用6px的红色网格线，画好标尺。为什么用6px呢？我们在前面的例子中，正文行距是24px，边注行距是18px，那么 他们的最大公约数就是6px. 也就是说，如果我们画好以6px为单位的横线族，那么，每3条横线就是一个18px单位，每4条横线就是一个24px单位。
画上线后，工作简单啦！利用18px和24px这两种行距，将文字的基线都挪到红色网格线上。
去掉网格看看吧：
回顾一下优化前的样子：
全部使用了18px或者24px的行距。其中，将右边模块的资讯条数由8条缩减为5条。甚至，我们可以继续发现，应用了垂直韵律之后，垂直的行数可以做自由得调整，而两个模块的高度可以保持高度一致。例如我们缩减了行数：
应用了垂直韵律之后，既美观又灵活，何乐不为呢？哇咔咔～
最后
当然，垂直韵律和渐进式行距还有很多应用的方法。总之，作为设计师，特别是网页设计师/交互设计师，我们不应当单纯地凭借感觉，应当专注到像素级别，严谨设计。
“严谨”一词，永远受用。送给我和大家。
0
投稿猜你喜欢
- 一、conn.asp<％ '@Language="VBSCRIPT" CO
- 页面自动刷新代码大全，基本上所有要求自动刷新页面的代码都有，大家可以自由发挥做出完美的页面。 1)10表示间隔10秒刷 ...页面自动刷新代
- 如果是在Oracle10g之前，删除一个表空间中的数据文件后，其文件在数据库数据字典中会仍然存在，除非你删除表空间，否则文件信息不会清除。但
- 页面中header部分一般位于最上端（有时根据需要也会位于某一侧，不管它在页面中的位置如何，在XHTML代码中它总是优于其它元素先加载），内
- //********************** index.asp ************************//<
- 本文整理了3种鼠标经过图片，图片边框加粗或改变颜色的方法，希望大家喜欢。下面3中只是提供了一个方法，具体的鼠标经过图片的样式，你自己可以修改
- [sql] --1.将每个老师的工资更新为原来的工资+奖金 --定义两个变量，用来存储ttid与reward declare @tid in
- 到目前为止，我们连接的都是两张不同的表，那么能不能对一张表进行自我连接呢？答案是肯定的。有没有必要对一张表进行自我连接呢？答案也是肯定的。
- 作为互联网产品设计师，在和前端开发人员沟通时你是否常常会听到这样的声音： —— “大姐，给点专业精神好不好，这个表格是自适应的，你
- 在我供职的公司不仅仅拥有Oracle数据库，同时还拥有SQL Server数据库，所以我经常遇见人们向我提两种问题。 第一种通常都是以&qu
- ASP 内建对象Active Server Pages 提供内建对象，这些对象使用户更容易收集通过浏览器请求发送的信息、响应浏览器以及存储用
- 内容摘要：在像网站首页这样的资源比较集中的页面中，那些栏目最经常被用户点击？居左居右对广告的点击率的影响是什么？“一切用数字说话”：以上问题
- 在这里给出是的WindowsXP操作系统下的安装过程一、下载安装文件到MySQL官方网站找到ZIP文件提示:有些是安装文件，安装时会有提示，
原文：10 Principles Of Effective Web Design翻译：熊猫2008-02-03本文由熊猫同学授权翻译首发。并- 1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。代码:div{ b
- 第四篇《WEB标准能有多难？》专栏文章将结束关于文本部分的XHTML的讲解。那么这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换
- 问：Perl下应当如何连接Access数据库答：首先需要安装Win32-ODBC模块，具体的步骤如下：1：从TOOLS栏目中下载Win32-
- 【原文地址】New "Orcas" Language Feature: Extension Methods【原文发表日期
- 内容摘要：图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示，当你进入一个网站时它的banner总是不同的，或者总有内容不同的
- 你的设计为什么平平无奇，为什么吸引不到别人的眼球，这里先来说说什么是焦点（也可以称兴趣中心或者视觉中心），我认为用焦点更能简单准确的阐述。有
