垂直栅格与渐进式行距(下)（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
投稿猜你喜欢
Git设置1.Git安装2.SSH密钥设置 生成密钥ssh-keygen -t rsa -C example@mail.com&n- 1.简述：xlrd是读取excel表格数据；支持 xlsx和xls 格式的excel表格；三方模块安装方式：pip3 install xlr
- 一、标识符何为标识符？标识符是用来标识某个实体的一个符号。在编程语言中，标识符是计算机语言中作为名字的有效字符串集合。标识符是用户编程时使用
- 今天遇到一个需求，就是将一个list文件读取后，存入一个txt配置文件。存入时，发现list文件无法直接存入，必须转为str模式。但在读取t
- 在MySQL中删除数据有两种方式：truncate（截短）属于粗暴型的清空delete属于精细化的删除删除操作如果你需要清空表里的所有数据，
- 问题： jsp中想要输出的中文被显示成“？” 解决方法 ： 在eclipse-windows- preferences中 搜索jsp ， E
- APScheduler简介在平常的工作中几乎有一半的功能模块都需要定时任务来推动，例如项目中有一个定时统计程序，定时爬出网站的URL程序，定
- jQuery源码里自己也有很多用到each方法。其实jQuery里的each方法是通过js里的call方法来实现的。下面简单介绍一下call
- 1. 查询 除了单条记录的查询，这里我们来尝试查询一组记录。IUserMapper接口添加下面方法：List<User> get
- 1、先放个大招：去除字符串中所有的空格和tab换行符str=" a b c de f "pri
- 软件版本Python 2.7.13; Win 10场景描述1、使用python读取指定长度的文本；2、使用python读取某一范围内的文本。
- 简介困扰在 Python 中使用并发编程来提高效率对于数据科学家来说并不罕见。在后台观察各种子进程或并发线程以保持我的计算或 IO 绑定任务
- 1. 像素基本操作1.1 读取、修改像素可以通过[行，列]坐标来访问像素点数据，对于多通道数据，返回一个数组，包含所有通道的值，对于单通道数
- 在使用pre-train model时候，我们需要restore variables from checkpoint files.经常出现在
- 一、下载MySQL msi版本下载地址：https://dev.mysql.com/downloads/mysql/二、安装直接右击点击安装
- 1、什么是全局变量？在Python中，全局变量指的是可以作用于函数内部和外部的变量。在这里有两种情况：在函数的外部定义和内部定义添加glob
- 先上一张效果图：以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠。今天在这个项目 http
- 本文讲述的是通过python+tkinter编写一个简单桌面放大镜的代码示例，具体如下。代码思路：首先全屏截图，然后在鼠标当前位置以小窗口进
- 本文实例讲述了Python爬虫之pandas基本安装与使用方法。分享给大家供大家参考，具体如下：一、简介：Python Data Analy
- 本文实例讲述了Python简单实现Base64编码和解码的方法。分享给大家供大家参考，具体如下：Base64编码是一种“防君子不防小人”的编
