首页 > 网页教程 > 设计分享 > 深入分析网页栅格系统的规范制作

深入分析网页栅格系统的规范制作

时间:2012-08-04    来源:良无限-UED

随着业务的不断推进,现在我们的后台项目越来越多。但是由于前端和后台之间联调复杂导致项目经常会推迟。为了能优化项目流程,提高开发效率。交互和前端决定一起做一套DPL,做一系列的规范出来。这样可以减少交互,前端,后台互相的沟通成本,同时能够沉淀下这段时间大家的收获。

交互参与的DPL中我们主要是做栅格体系,控件体系,视觉体系,下面我来和大家分享下DPL中的栅格体系设计

栅格

研究网页栅格系统前,来看一组数据:

网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960

上面列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点,它们的首页宽度没什么固定规律,共同的特点是:功能专一,页面结构相对简单。

根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px。

这是一件很有趣的事情,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?

上面的"自然"出现,细究自然是不让人信服的。设计者们在没有喝醉酒的情况下选择了960,而不是其它什么1000之类的整数,自然另有奥妙。

那么如何设计一个栅格系统?接下来我们将通过实例,详细的介绍一下网页栅格系统的原理与应用:

在网页设计中,我们把宽度为"W"的页面分割成n个网格单元"a",每个单元与单元之间的间隙设为"i",此时我们把"a+i"定义"A"。他们之间的关系如下:

W =(a×n)+(n-1)i

由于a+i=A,

可得:(A×n) – i = W

注:960是加上最后一个i(i=10)的长度,950是没加上i的长度

为了减少1.0版本的改动,我们保持了i=10xp

我们的N是多少,A是多少?W是多少?

n的特点:是3倍数,我们需要有一行三列的情况,同时不希望有重要信息在最后面(我们的系统在内页才有栅格,所以1280下能展示全,但是1024不一定能全部展示),所以最好是整个栅格能平均分成3列

A的特点:是5的倍数,在设计控件等都是很方便的

W的特点:最好符合大众化的

得:3x*5y-10=W 其中x,y为整数

15x*y-10=w

上面列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。

列举下现在网站的栅格

网站

首页页面宽度(xp)

a*b(xp)

Yahoo!

950

64

淘宝

950

64

网易

950

64

Live Search

958

64.5222

良无限系统

1000

66.1333

结论,现有网站在n和A的特点下,x*y是整数的只有64.

很多成熟网站都是12或24栅格。

当栅格为12(即3x=12)时:

4y=64

y=16即A=80

当栅格为24(即3x=24)时:

8y=64

y=8即A=40

考虑到1.0的控件改动尽量少,后台系统布局结构比较统一。我们采用24栅格

即:

我们的栅格是:

(80×12)- 10 = 950

基线 

栅格设定好之后只是控制了纵向的整齐,横向的需要用基线来控制。

在描述基线之前,我们先要了解下前端对于输入框的结构吧

如果我们设置一个12号字的输入框,那么前端会对这个输入框设定结构。text area(蓝色部分)他是个基础,pading(内白色部分)他是text area和框描边的空隙,border(黄色部分)是框的描边宽度,margin(黄色外虚线框范围)他是鼠标划过的hover状态的延伸区域。我们的12号字是在text area里面的。比如图中,我们的text area设置的行高是18像素,字高12像素,居中的,上下各有3像素的间距。

根据这点,我们把表单里面的输入框元素和栅格元素一起考虑,设置了每个控件在栅格里面的效果:

(其中蓝色部分就是text area的内容)

相关推荐
腾讯CDC:泛泛而谈界面中的斑马纹设计
简单而又不单调的网页视觉设计技巧
如何杜绝网页设计中视噪对用户的影响
如何让手绘应用于视觉设计中而增强亲和力和感染力
网页视觉设计如何针对用户有效表达信息
网站页面设计中光的特效设计引导用户视觉焦点
网页PS设计教程:手把手教你制作漂亮的商业模板
网页PS设计教程:手把手教你制作WordPress新闻博客模板
网页设计教程:5个原则助你设计一个成功的购买按钮
案例分析社交型网站首页设计的优秀设计原则
从网站可用性的角度深入分析苹果和微软官网设计的优劣
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
视觉设计之材质绘制的色彩理论
网站设计之10个儿童网站分析及设计特点总结
网页配色经验分享:叠柔配色技巧及图解分析
工具型网站设计及典型案例分析
深入探讨图片格式与网页设计的那点事儿
分享:网页核心内容对视觉表现的影响
响应式网页设计正成为移动互联网大势所趋
20个超棒的photoshop网页设计教程分享
浅谈界面设计中的结构设计
网站营销活动页面制作过程图文分享
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
分享:360安全桌面主题设计过程及思路总结
网页设计教程分享—能影响观众的网站首页设计10个要点
网页Banner设计的风格、排版以及配色经验分享
国外精彩网页界面设计案例赏析
中文网页设计排版之破格的好例子
30个国外立体动感的视差滚动效果网站欣赏
网页设计教程:关于网页设计的那些事儿
网页设计中使用不对称设计创建不平衡中的平衡
最新Web设计8个趋势:视差滚动 响应式设计等
淘宝店铺广告文案排版快速设计经验分享

精彩推荐

热门教程