‘前端开发’ 分类的存档

从gmail开始,前端总结出了ajax的概念,也让前端开发工程师们得到了更多的重视,前端技能是一个很庞大的体系,W3C标准,Dom结构,Css样式,Javascript编程 ……

没有评论垂直栅格与渐进式行距(上)

2009年12月7日

准备工作

去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描、阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.
但是大部分栅格系统是在水平方向上的布局,其实,我们的垂直方向也是有栅格系统的——也就是我们的“垂直韵律”.

垂直韵律的就像好比我们手上拿着的线格本子,有着一行行的网格线,安排着垂直方向上的文字排版。“排版中的空间就像是音乐里的节拍. ”音乐的节拍虽然有许多变化,但是几乎每首歌都会有一个固定的节拍来掌握整个歌曲的节奏. 这就是为什么栅格系统一般用固定宽度的网格阵列来指导和规范网页中的版面布局以及信息分布.
其实,那么,在网页里,垂直韵律应由三个因素控制: 

认真考量这三个因素的值,才能实现垂直韵律.

没有评论网页栅格系统研究(4):技术实现

2009年12月7日

前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。

Blueprint的实现

Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能。我们来看demo页面
阅读全文…

没有评论网页栅格系统研究(3):粒度问题

2009年12月7日

研究(2)中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。(注:如非特别指明,栅格系统均指24列960栅格系统)

淘宝的首页截图)目前尚未严格遵守栅格系统,如果重构的话,宽度方向可以考虑采用下面的栅格布局(只考虑页面主体部分,忽略高度的比例):

(图1) 阅读全文…

没有评论网页栅格系统研究(2):蛋糕的切法

2009年12月7日

首先澄清一个应用场景问题。研究(1)中指出,对于结构复杂的网站,不少设计师们喜欢采用960固定宽度布局。但要注意的是,960并不是万能钥匙,大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局,最大限度的呈现信息。Google更是简简单单,主题部分就一个列表。eBay的页面非常简洁,商品页面宽度自适应,信息自然流畅,噪音少,购物很踏实。类似的站点还有很多,对于这些站点来说,宽度自适应布局更受青睐。

阅读全文…

没有评论网页栅格系统研究(1):960的秘密

2009年12月7日

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

网站 首页页面宽度 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.

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

阅读全文…