尹广磊 发表于 2010-5-23 18:50:19

反Box的布局设计方式

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

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

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

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

Box布局方式:



反Box布局方式:



此示例RP源文件下载:

尹广磊 发表于 2010-5-23 18:51:58

更多参考资料:
2009年海外Web设计风潮(上)
2009年海外Web设计风潮(下)

尹广磊 发表于 2010-5-23 21:01:43

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

尹广磊 发表于 2010-5-23 21:06:09

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





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

蔡子煊 发表于 2010-5-31 16:12:20

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

guosuyang 发表于 2010-6-1 08:48:06

开阔视野,创新实践。

错过纽约的春天 发表于 2010-6-2 09:03:04

不错 支持一下1

尹夕奎 发表于 2010-6-2 15:56:47

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

张晓 发表于 2010-6-18 11:02:33

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

蔡一波 发表于 2010-7-1 19:00:55

我们确实被框的太严重了

zkminer 发表于 2010-7-8 16:18:04

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

tinyfog 发表于 2010-7-22 12:25:02

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

gl56770978 发表于 2010-7-23 08:46:47

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

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

gl56770978 发表于 2010-7-23 08:47:44

顺便问下,如何获得虚拟币?

刘瀚予 发表于 2010-7-26 11:22:57

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

尹广磊 发表于 2010-7-26 12:45:19

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

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

丁丁当当 发表于 2010-8-8 00:39:47

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

王祥贵 发表于 2010-9-2 15:00:23

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

阿沐 发表于 2010-9-29 18:07:31

关于框架思维,我想起了老北京的四合院和胡同文化,这也是我们中国的传统,而框架思维也是我们中国人的一种传统思维模式,喜欢的话不妨可以继续发扬

hxjiang 发表于 2010-10-13 13:36:31

学习了!
页: [1] 2 3 4 5
查看完整版本: 反Box的布局设计方式