反Box的布局设计方式

尹广磊

过去传统的Web设计，基本上都一个个的矩形块，不管什么内容都要框在这个矩形框当中，然后加以布局。
这样带的设计问题时：
1. UI中多出了太多在使用中没有用的框框线线。
2. 不论什么内容都放在矩形块里，即形不成阅读重点，又不利于对页面内容的识别。
3. 造成审美疲劳，形式大同小异，缺少页面创意表现。

反Box的布局设计方式，正是不再拘泥与传统的Box布局模型，而是回归到对页面表达内容的关注。
首先考虑，页面所要传递的信息本身，适合什么样的表现方式：
比如，有一个人的头像、姓名和其它一些基础信息，如何表达；
          一段新闻稿，有一张新闻配图，如何表达；
          介绍一些新产品，有产品的图标和文字介绍如何表达；
          天气预报、地图、留言、导航、视频等等，如何表达。

了解了这些内容本身适合什么方式表达之后，发现它们本身就具有一定结构外形。
我们需要做的就是将它们根据页面需要摆放在适当地位置，
然后注意到它们之间的留白、隔断、阴影、淡变等，辅助来完成这些布局。
结果发现，这样的布局更显简洁，同时一眼扫过去，对页面内容的识别也更容易了。

下面是网易通行证的帐户中心，Box布局和反Box布局的对比结果：

Box布局方式：

2010-5-23 18:50

反Box布局方式：

2010-5-23 18:50

此示例RP源文件下载：

网易通行证改造.rar (384.59 KB)

下载次数: 513

2011-4-11 15:59

尹广磊

更多参考资料：
2009年海外Web设计风潮（上）
2009年海外Web设计风潮（下）

尹广磊

腾讯Qzone2011新体验首页
http://qzs.qq.com/qzone/qzoneact/2011/index.html

2010-5-23 21:01

尹广磊

iPad技术规格
http://www.apple.com.cn/ipad/specs/

2010-5-23 21:06

http://www.apple.com/iphone/preview-iphone-os/

2010-6-1 01:30

蔡子煊

最早这个概念是听一个老外说的，中国的设计师确实有线框情结，似乎是潜意识中的一种共性，跟传统文化有关？

guosuyang

开阔视野，创新实践。

错过纽约的春天

不错 支持一下1

尹夕奎

框框布局的确太限制人的思维了，如果在一个开放式的界面上布局，更考验设计师的水平，当然这也是一种趋势

NMTuan

的确,这两年都在画框框.....
像淘宝啊,迅雷啊,这些经常关注的站点风格...都是框框的..

张晓

学习了，框框框的我现在思维都有点迟钝了。看了这么，突然眼前一亮。

蔡一波

我们确实被框的太严重了

zkminer

后面那几个图，其实也有线条，只不过是隐性的线条。整齐美观才是目的，线框只是一个手段。

tinyfog

大概反box就是把框框仅留在设计者心中，展现时去掉它们吧=.=

gl56770978

说的很对，但是从表现上，我们只是淡化了表格，而布局上，依然有一定的按表格布局的习惯，不管是腾讯还是苹果。

我想，是不是可以把摄影的构图思想和表现方式，融合到网站的设计中来呢？

gl56770978

顺便问下，如何获得虚拟币？

刘瀚予

限制我们的并不是所谓的框框。任何年代都有开放式的设计。
一个web页面要有它的”韵“或者是某种情绪，对的方法一定是多种多样的。而错误的方法一定是无法感染、感动看到这个页面的人。

尹广磊

16# 刘瀚予
“对的方法一定是多种多样的”这个说的好，
不过最成功或最有影响力的案例可能却是最简单、重复、有效、单一的。

iPod买到全球70%的市场份额，三星、索尼的MP3产品多种多样，却远元达不到这个数字。

nhk17173

其实这个还是框。怎么都是框。

丁丁当当

恩  这个不错  曾经用了很多矩形做出了个UE   结果UI做完给我  我头大了   5层框框.....   这个挺值得学习的~！

王祥贵

太精彩了。我终于再次找到人生的方向了。