页面布局 - UCD大社区

突破网格设计的僵局

its — 2009-02-17 12:44:44

11月的一个深夜，我飞临我的故乡亚利桑那 Tucson 的上空，我为这个城市网格式的布局所打动，Tucson 是美国通过规划而建造的城市之一，从上空看，这个城市的所有东西都被设计者精心布局（图1），我刚从伦敦回来，伦敦正好相反，伦敦的城市布局（图2）曲里拐弯，看上去更像是出之天然。

图 1：亚利桑那的 Tucson

图 2：伦敦

我构想这篇文章已久，这两个城市的俯瞰图让我联想到 Web 设计，当今的技术可以让我们自由实现网格式设计，或者完全跳出网格之外，这种选择对 Web 设计师的推动是毫无疑问的，然而真正的挑战是，我们该如何放弃那些闭塞的思想而跳出网格之外思考。

城市的感觉

将城市规划推之 Web 设计，二者之间的相似之处很有趣。网格布局非常适合创建可预见的，易于导航的网站，网格可以很好地帮助设计师进行规划，让用户易于访问（图3）。

图 3: Ryan Brill

从正面意义上看，Tucson 这个城市当然很容易访问，一点方向感或一张街道图就足够了，居民向别人指示自己的方位，只需说，我在 Campbell Avenue 和 Prince Road 交叉路口的西南拐角处就可以了。公共交通都是正南正北或正东正西，辨路是很容易的。

而从另一方面说，Tucson 的设计者最初的规划只考虑到有限的扩张，当城市发展到规划之外的地方，问题就出现了。Tucson 网格化的局限阻止了不同风格社区或邻里的出现，很多 Tucson 的居民觉得这个城市缺乏一个充满活力的市中心或众多有个性的社区，结果，即使这样的区域出现了，也容易前往，他们也懒得去找。

伦敦却不同，它简直是个迷。我知道伦敦人自己也要靠城市指南才可出行。这个城市的交通系统充满挑战，那些出租车司机需要通过专门的考试才能上岗。这个城市的自然成长并没有让它成为一个容易出行的地方。

然而在伦敦，精彩纷呈的城区与口味独特的邻里到处都是，文化聚集区以及奇趣社区也不一而足。虽然更难出行，因为口味纷呈，人们反而更乐意置身其中。

这个隐喻也适合那些趋向自然的 Web 设计，人们如何才能轻松地在那些曲里拐弯的胡同中穿梭？从另一个方面说，漂亮的设计可以通过打破我们所一直遵从的条条框框而得以实现。图4中你可以看到，突破网格设计的规矩如何让设计既保持易用性，又看上去与众不同。

图 4: AIGA Los Angeles

网格代码的迷思

作为一个更多注重代码而不是设计的人，我很迷惑地发现我们的设计是如何拘泥于代码，我相信是长期的表格布局让我们画地为牢（图5），联想到最新的 CSS 布局，很容易知道这是为什么。

图 5: k10k

表格布局很适合网格设计。表格的代码本身就是重现一个网格，我们只是在单元格中填入图片，文字，界面元素来完成我们的设计（图6）。如果我们想实现复杂的非结构化设计，就需要在文档中运用大量图片，导致整个文档的臃肿。

图 6: Weightshift

表格布局有一些优势，然而跟城市规划一样，优势有时候也可以变成劣势。基于表格的网格保证它里面的所有单元格规规矩矩，要想让所有的列拥有同样的宽度？太简单了，表格的天性如此。让单元格之间保持一致的间隙？也是小菜一碟。然而，如果你不想要这种整齐划一的结构怎么办？很不幸，你做不到。

CSS 改变了这一切，这是我认为我们还未学会为 Web 而设计的理论依据。我们，尤其是那些从长期的表格布局转到 CSS 的人，刚刚开始明白 CSS 的视觉模型对打破网格设计的陈规多么有帮助。CSS 布局完美吗？并不，在 CSS 带来的好处之外我们还失去了一些东西。整列扩展对 CSS 设计来说是很大的问题，单元格的间隙问题也是。

CSS 无非是边线与盒子，网格中也有，然而二者的本质区别是，CSS 允许我们将一个盒子从其周围的环境中独立出来任意处置（图7）。

图 7

我们可以使用 position 或 float 属性定位，我们可以用轻量级图片充当背景，因此使用 Box 的时候我们既可实现网格布局，也可以更有效的实现非网格布局，你可以在 Dave Shea 的 Blood Lust 中看到这个例子，这是他在 CSS Zen Garden 中使用的众多设计之一（图8）。

图 8: CSS Zen Garden: Blood Lust

图9展示了 Blood Lust 中运用的基于 BOX 的非结构化设计，也展示了如何使用 CSS 和 BOX 实现相互独立的非结构化网格。

图 9

一旦我们明白了 BOX 的能力，我们就可以很容易突破网格的束缚。图10中展示了一种高度非结构化，甚至是自由的设计。

图 10: Kutztown University: Communication Design Department

这些 BOX 使用 CSS 定位：

图 11

不仅代码变得更干净，对熟悉 CSS 布局的设计者而言也更直观简单。而这种设计也同样直观易用且不落俗套。

展望

现代布局技术之美是我们有更多选项可选。使用 CSS 我们可以创建易于管理，轻量，视觉丰富的设计，如果乐意，也可以是网格设计，同时，我们也可以很容易地打破或解除这个网格。

这为当代 Web 设计带来更多机会，我们不应因为对网格设计更熟悉而重蹈覆辙。

对于我们这些长期耽于表格布局的人来说，面临的困难尤其大。对多年的 Web 设计者，这意味着同一直使用的东西决裂，有些人也许并不觉得难，然而绝大多数人会心存畏惧。我们需要学习 CSS 模型的工作原理，还要勇于同陈规告别。

有一些新人，他们从未从事过表格布局设计，对他们来说，我们过去的方法既奇怪又死板，正是从这些人中，我们有希望看到更多对设计陈规的突破。

Web 正在走向成熟，我们设计方式也在改变，我们的面前有更多的创新与创意。我们不会拘泥于被规划的城市，我们可以实现独特的设计，我们这些老设计师，联合当今的新人会让 Web 日新月异。

本文作者

Molly E. Holzschlag 是一个知名的 Web 标准倡导者与传授者。她的30多本著作中最畅销的是她同 Dave Shea 合写的 The Zen of CSS Design （禅意的 Web 设计）。Molly 是 W3C 工作组受邀专家，也是 Web 标准项目组（WaSP）的前主管。Molly 同设计者，开发者，执行者与决策者们一起，为实用的，漂亮的，有意义的 Web 提供推动力。

译后记

这是一篇发表于 A LIST APART 的 2005 年的文章，2005年，CSS 布局还不像现在这样普遍，而表格布局已经让很多人不堪其重，作为 Web 领域资深的专家，作者 Molly E. Holzschlag 也是表格布局的长期使用者，当 CSS 接近成熟，基于 CSS 的布局让人耳目一新的时候，她对基于表格的网格设计的心情是复杂的，从文章中可以看出。

然而时间到了2009年，当 CSS 已经无孔不入，CSS 布局也变得烂熟的时候，我们很有必要再次对网格设计进行思考，网格死了吗，或者说表格是邪恶的吗？答案并不那么简单，当今的 Web，无论怎样变化，它的宗旨是永恒的，除了 Web 应用，Web 永远不变的使命是表达和传递信息，如果你是一个文人，你会爱上伦敦，然而如果你是个邮递员，你会选择 Tucson。因此不管是网格设计还是自然设计，并没有绝对的优劣，网格设计更清晰整洁，自然设计更优雅精炼。

而表格，也并不象很多人说的那么邪恶，须知，现在的表格已不是昔日的表格，BOX 可以结合 CSS，表格也可以，完全使用 CSS 进行修饰的表格就像一组有机组合并互动的 BOX，当你并不需要其中的单元格精确定位的时候，表格是一种比 BOX 更完美的容器，因为它对所有浏览器的兼容是最好的，它不会坍塌，不会长短不一，它的行为更容易符合预期，最重要的是，它是人们对事物进行组织的一种最直接的方式。

本文国际来源：http://www.alistapart.com/articles/outsidethegrid
原文作者 Molly E. Holzschlag
中文翻译来源：COMSHARP CMS 官方网站，译者35公里。

资讯类网站版块之间的排序

jerry — 2008-09-08 01:39:44

1.符合用户的浏览习惯

版块之间的排序应当符合用户的习惯。用户浏览网页通常是从上到下，从左到右，所以排布各个版块的时候应该根据用户的视线流走向将网站最重要的和最想让用户看到部分放在视觉流的上游，简单的来说就是最重要的最先被看见。

如果网站提供社区服务和搜索服务的话，用户登录和搜索通常也应该在第一屏出现。如果网站并不是以资讯为主，而是以功能性为主，比如提供邮件服务或者B2C性质的网站，那“帮助页面”的入口也应该被安排在靠近页面的顶部。

2.版块的排布在视觉上尽量符合纵向分割

在板块排布的时候在视觉上尽量在符合纵向分割，能在纵向上对齐。避免在纵向上出现犬牙交错的布局，见下图。当然，横向和纵向都能对齐那就更好了。但对于大部分门户网站来说比较难。

3.以用户的角度出发，将版块划分成几个独立并且连续的区域。

从用户的角度出发，将版块按用户需求划分成几个区域。每类版块都占据一块独立并且连续的区域。不同分类的版块的信息不能混合分布在同一个区域。这样做，可以方便用户了解整个网站的主要内容和结构；减少用户在浏览网站时的干扰信息。

以门户类网站为例，可以将整个页面划分成以下板块：头部，导航，搜索，分类新闻区，工具区，互动与社区，辅助信息区，商业信息区（或者说是广告区），页脚。这几个部分。在这个方面腾讯首页做得还是蛮好的。见下图。

]

页面分为三栏。左栏分两个区域：一个是腾讯的产品区域，另一个分类新闻区域。中栏也分两个区域：一个区域包括了推荐内容、专题内容和博客，另一个是分类娱乐和休闲资讯区域。右栏可以看做广告和辅助信息区域。这样的做的好处是用户很容易就掌握腾讯网首页的结构，寻找他们自己感兴趣的信息而，将可能干扰他们的信息噪音减到最少。关心各种新闻的用户，在左栏里就可以找到他们自己感兴趣的信息。关心休闲和娱乐的用户可以在中栏找到他们想要的。这样用户就不用在整个页面中寻找自己需要的信息，而且也最大程度减少广告或者其它干扰信息对用户的影响。而与之对比的网易在右栏这块区域的版块排布就不那么清晰了，广告和内容交替出现，给网友的浏览带来一定的障碍

4.在同一区域里内容相关的版块相邻，或者按照用户习惯来排序。

在同一区域（同类版块）中不同内容的版块也需要排序。这里遵循的原则是内容相关的版块相邻。或者符合用户习惯的来安排版块间的先后顺序。还是用QQ首页作为例子。QQ首页中许多内容都是通过标签切换的，但相邻标签的内容大部分都是相关或者符合用户浏览习惯的。如下图。

5.根据用户的需求来组织版块，避免版块划分粒度太粗或者太细。

在组织版块时，应该从用户的需求出发，来分类各个版块。而不是因为分类而分类。这样做通常会将版块划分的太粗或者太细。这里就这两种情况各举一个例子。

版块的粒度划分得太粗

视觉中国可以按照“资讯”“竞赛”“展览”对它的信息进行划分。这样的划分对于用户来说粒度就太粗了。访问视觉中国的网站有平面设计师，网页设计师，工业设计师等等。仅仅将信息分类成“资讯”“竞赛”“展览”显然让用户承担了更多的信息压力。这时用户可能会抱怨：“我想看动画设计方面的信息，为什么有这么多平面设计的信息？”所以按照不同的设计门类来划分信息类别，比如：”平面设计”,“动画设计”等等，更加方便用户查找信息。

版块的粒度划分得太细

在做太平洋汽车网的一个频道“国际新车”的页面改版时。我发现原来的页面就出现了因为分类而分类的的问题。在对发布新车的消息的划分中，有三类：第一类“新车巨献”内容是官方已经正式推出新车的消息；第二类是“新车谍报”内容是官方未正式推出该新车，但民间已经有这些车的一些信息（这些信息通常是被证实）；第三类是“新车预测”内容为一些车型的预测和传闻（这些信息未被证实）。首先这样的分类太过细致和复杂，用户对于理解这三块发布新车资讯内容的区别会有困难（当然，这里三个板块的标题都不太好理解，也是重要的原因）。其次这样的信息组织结构并不符合用户对这类信息的需求。其实用户只想知道自己感兴趣的车的信息。而信息本身的可信度完全可以由用户自己来判断。所以这里只需要将新车发布信息分为“已经正式发布车型的消息”和“未发布车型的消息”就可以了。这个频道的另一个问题是对信息属性的划分太细。页面第二屏的“国外新车”版块是用图片与文字链的形式介绍最新的国外新车的资讯。而在页面最底端“新车图辑”版块是以图片的形式来展示新车。我觉得这里有些重复了。可以将两个板块和并在一起，让用户自己去判断是选址文字信息还是图片信息。

相关话题：页面布局源地址：http://www.novastudio.cn/blog/post/76.html

腾讯网首页诞生的艰辛历程

小li — 2008-10-21 22:44:13

酝酿了将近一个春夏秋冬的腾讯网首页终于亮剑！反响热烈！让我们来分享它成功背后的酸甜苦辣吧。
　　腾讯网首页改版终于开花结果。于2008年3月25日6：00准时上线。整整一年的时间，经历了无数次的挫折和挑战，无数次的等待和蜕变，终于破茧化蝶。本次改版完全颠覆性的大胆尝试，迈出了建站以来至为关键的一步。

一、QQ首页改版背景

　　无论是从用户体验还是页面结构设计来看旧版的腾讯网首页都已不能很好的满足用户的需求和承载公司的业务展现了。QQ.Com是公司级平台，为了巩固现有门户的媒体资讯优势，加强公司其他业务的拉动，打造中国第一的网络平台，提高公司的影响力，重新规划和设计现有的网站刻不容缓。这中间我们将面临最大的挑战是：
　　1．如何平衡资讯/业务/广告的需求？繁杂的内容如何通过板块划分来合理布局和协调？
　　2．如何突显自己的风格？既容易被大众接受又不乏个性化？

　　这些看似矛盾的诸多方面将是我们本次改版的关键点和难点。
　　往年的QQ首页对比大观：

二、QQ首页引人瞩目的亮点

　　本次改版经历了无数次脑爆，无数次破陈推新，积累了很多别出心裁的闪光点，也淘汰了很多不合时宜或者过于前卫的想法，最后留下来的是最宝贵的沉淀。

1．个性化换肤设计：一方面突出soso的表现，一方面借此位置展现丰富个性的皮肤设计：

2．新颖的天气icon：细腻的天气图标将是页面上的点睛之笔，该套天气图标的风格将会延续应用到所有其他公司产品上。

3．布局的大胆整合：强化推广业务的能力，增加用户的互动性。新闻区满足地区用户个性化的定制。

4．其他调整：

　　页面宽度：为适应宽频的普及，本次采用了910尺寸，承载更多的信息量。
　　文字大小：采用“14”号字体，适应宽屏的显示。符合阅读的流行趋势。
　　视频广告：提供更加丰富的广告表现方式，提升广告价值，给用户带来全新的视听享受。

三、腾讯网首页蜕变的七次历程

　　腾讯网首页是跨团队合作的项目，最终的成功上线与科学的工作流程分不开的，更与整个团队的奋斗分不开的。

设计流程：

　　需求分析——交互设计——视觉设计

1．专业的需求分析：
　　全面的战略规划/用户分析/竞品分析

2．激情的交互创新：

　　交互体验的创新是交互设计阶段最头疼的一件事情，经历了无数次的尝试，这是能力和耐力的较量，是精益求精的雕琢，一个小小的button优化都可能直接影响着点击量和收入的变化，这中间太多的挫折和考验…

3．坎坷的视觉之路：

　　成功=无数次失败+ 永不言败。
　　迄今为止，参与过QQ首页设计的视觉设计师有9位之多。我们摸索了近一年的时间。
　　这中间尝试的设计稿不计其数，大的风格调整就多达十几次。所有设计稿件近百份。
　　让我们看看业务导航区的细节调整稿：

　　风格演变过程：

　　这一年时间里，经过和“小马哥”（马化腾）的七次碰撞，也是QQ首页经历最重要的七个阶段，他有时甚至亲自指导：每一个模块的位置和表现、文字的大小和颜色；包括业务导航区的每一个产品都是他亲自斟酌敲定。
　　2008年03月25日6：00，这激动人心的时刻，所有人都坐立在电脑面前，刷新！刷新！再刷新！看到新版的那一刻沸腾了，我们期待的太久，激动的心狂跳不止，无法用言语表达，大家不约而同的鼓掌庆祝，这一刻我们终于等来了。

四、腾讯网首页改版的满意度调查

　　本次上线同时对外发布了《腾讯网首页改版用户满意度调查》问卷，让我们第一时间听到用户的反馈声音……

　　“改版后的风格更加简洁，专业。更加像一个门户网站了。多了一个清新的SOSO导航搜索工具，并且可以自定义10种颜色，同时显示当地的天气情况。 ”
　　“腾讯网首页今日改版。新版界面第一直观感受，大气、信息、热点体现到到位。还提供了10套颜色样式供选择，很个性，很2.0 ，呵呵。”
　　“今天晚上突然发现QQ.com改版了，打开页面后，感觉眼前一亮，比以前漂亮了很多，而且版面设置也比以前合理了，看起来也比旧版的更加简洁明了，一目了然，不像旧版的那样给人以很乱的感觉。
　　“新的QQ主页支持换肤功能，可以选自己喜欢的样式，和Yahoo的类似，不过Yahoo的只能换颜色，而QQ的还有花纹图案，比Yahoo的要高档一些，哈哈~”
　　“昨天见证了腾讯网首页改版！
　　一大清早上腾讯网首页也没有发现它改版了，晚上回到家里，把腾讯网一打开发现首页变化好多，全新的界面，帅呆了！
　　反正挺激动了，越来越明晰了，一个字形容，帅闭了！”

　　本次回收了有效样本上万份，根据新版得分的平均分和分布情况判断，对新版的满意度较高。并且平均分值相比同类网站都要高。5分以上占56.8%（7分制）。说明腾讯网首页改版较为成功，并且比腾讯以往的改版数据都要振奋人心。

　　CDC一直期望能为大家展现每一次的高水准的作品，本次改版还有很多不足之处，但我们会不断的摸索和尝试，全力以赴的精益求精，努力打造“中国第一网络平台”。

相关话题：页面布局首页源地址：http://cdc.tencent.com/?p=223

从各网站布局调整移动到操作系统桌面调整

尹广磊 — 2008-09-21 22:29:32

最近白鸦的一篇“关注各网站的布局调整”关注了各网站主导航布局变动的问题。
我也感想了一下，是屏幕越来越宽了，现在不光网站可以把导航拿左拿右了，操作系统的桌面及资源管理器也可以调整。
下面是我的桌面，不光主导航的位置换了，因为屏幕我都在使用大字体和大图标。长时间舒服。

如果是宽屏的话，这样放左侧，任务栏能放下的窗口多多了。不放右侧是为了快速移动鼠标到屏幕右上角点关闭窗口时方便。

右侧主窗口操作区，设为预览图方式还可以直接预览照片。文件处理完了，还可以直接拖放到左侧的文件夹内。

让打开“我的电脑”默认是打开“资源管理器”的方法：（这样可以直接将右侧工作区文件拖放到左侧文件夹。）
照下图，将图中所示设为默认值。

关注各网站的布局调整

白鸦 — 2008-09-19 16:32:02

1、前不久，friendfeed.com把主导航从上面，移到了右侧。现在，又改到了左侧。

2、现在，twitter.com把页签（相当于二级导航）从主内容区的上面，移到了右侧（同时下面还有辅助信息）。

3、除了friendfeed和twitter，还有不少2.0网站都在做着这样的，把导航拿到侧边的布局尝试和调整。

4、放在左边和放在右边主要考虑的是眼睛，而非鼠标。但，这都不重要，重要的是，从占高度变成了占宽度。
我认为这跟宽频越来越多有关。当然，我相信他们在相互借鉴。

5、facebook.com也在不停的做着各种布局尝试。不同的是，facebook把本来在左边的东西，不停的尝试着拿到上面或下面，用各种花样和方式。
为什么？在给广告留空间？似乎不是的。

6、自从Yahoo收了flickr.com以后，flickr就像被人点了穴，设计上一直停止不前。
前几天，flickr加强了一些SNS的功能，同时也在布局上作了调整。

7、随着硬件的发展，随着用户使用环境的变化，随着用户应用的增加，用户界面的变化出现一些小颠覆，很正常。
但，不同网站，不同用户习惯，不同复杂程度的类目，都不能套用同样的布局。
这些网站最近做的，一些界面布局上的调整，值得研究、分析、学习。

相关话题：页面布局源地址：http://uicom.net/blog/?p=786