查看: 87462|回复: 80

[交互文章] 反Box的布局设计方式

[复制链接]

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74232
QQ
发表于 2010-5-23 18:50:19 | 显示全部楼层 |阅读模式
尹广磊公众帐号
过去传统的Web设计,基本上都一个个的矩形块,不管什么内容都要框在这个矩形框当中,然后加以布局。
这样带的设计问题时:
1. UI中多出了太多在使用中没有用的框框线线。
2. 不论什么内容都放在矩形块里,即形不成阅读重点,又不利于对页面内容的识别。
3. 造成审美疲劳,形式大同小异,缺少页面创意表现。

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

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

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

Box布局方式:
网易通行证.png


反Box布局方式:
index.jpg


此示例RP源文件下载

网易通行证改造.rar (384.59 KB, 下载次数: 1406)

评分

2

查看全部评分

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74232
QQ
 楼主| 发表于 2010-5-23 18:51:58 | 显示全部楼层

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74232
QQ
 楼主| 发表于 2010-5-23 21:01:43 | 显示全部楼层
腾讯Qzone2011新体验首页
http://qzs.qq.com/qzone/qzoneact/2011/index.html

Qzone 2011版 新体验 新起点.jpg

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74232
QQ
 楼主| 发表于 2010-5-23 21:06:09 | 显示全部楼层

0

主题

3

回帖

465

积分

会员

Rank: 5Rank: 5

积分
465
QQ
发表于 2010-5-31 16:12:20 | 显示全部楼层
最早这个概念是听一个老外说的,中国的设计师确实有线框情结,似乎是潜意识中的一种共性,跟传统文化有关?

0

主题

97

回帖

446

积分

会员

Rank: 5Rank: 5

积分
446
发表于 2010-6-1 08:48:06 | 显示全部楼层
开阔视野,创新实践。

0

主题

3

回帖

42

积分

会员

Rank: 5Rank: 5

积分
42
发表于 2010-6-2 09:03:04 | 显示全部楼层
不错 支持一下1

0

主题

63

回帖

42

积分

版主

Rank: 7Rank: 7Rank: 7

积分
42
QQ
发表于 2010-6-2 15:56:47 | 显示全部楼层
框框布局的确太限制人的思维了,如果在一个开放式的界面上布局,更考验设计师的水平,当然这也是一种趋势

0

主题

51

回帖

167

积分

会员

Rank: 5Rank: 5

积分
167
QQ
发表于 2010-6-18 11:02:33 | 显示全部楼层
学习了,框框框的我现在思维都有点迟钝了。看了这么,突然眼前一亮。

0

主题

35

回帖

295

积分

会员

Rank: 5Rank: 5

积分
295
QQ
发表于 2010-7-1 19:00:55 | 显示全部楼层
我们确实被框的太严重了

0

主题

2

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2010-7-8 16:18:04 | 显示全部楼层
后面那几个图,其实也有线条,只不过是隐性的线条。整齐美观才是目的,线框只是一个手段。

0

主题

12

回帖

196

积分

会员

初学者~

Rank: 5Rank: 5

积分
196
发表于 2010-7-22 12:25:02 | 显示全部楼层
大概反box就是把框框仅留在设计者心中,展现时去掉它们吧=.=

0

主题

35

回帖

12

积分

会员

勇敢的海上战士

Rank: 5Rank: 5

积分
12
发表于 2010-7-23 08:46:47 | 显示全部楼层
说的很对,但是从表现上,我们只是淡化了表格,而布局上,依然有一定的按表格布局的习惯,不管是腾讯还是苹果。

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

0

主题

35

回帖

12

积分

会员

勇敢的海上战士

Rank: 5Rank: 5

积分
12
发表于 2010-7-23 08:47:44 | 显示全部楼层
顺便问下,如何获得虚拟币?

0

主题

2

回帖

202

积分

会员

Rank: 5Rank: 5

积分
202
QQ
发表于 2010-7-26 11:22:57 | 显示全部楼层
限制我们的并不是所谓的框框。任何年代都有开放式的设计。
一个web页面要有它的”韵“或者是某种情绪,对的方法一定是多种多样的。而错误的方法一定是无法感染、感动看到这个页面的人。

514

主题

6310

回帖

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
74232
QQ
 楼主| 发表于 2010-7-26 12:45:19 | 显示全部楼层
16# 刘瀚予
“对的方法一定是多种多样的”这个说的好,
不过最成功或最有影响力的案例可能却是最简单、重复、有效、单一的。

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

0

主题

9

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2010-8-8 00:39:47 | 显示全部楼层
恩  这个不错  曾经用了很多矩形做出了个UE   结果UI做完给我  我头大了   5层框框.....   这个挺值得学习的~!

0

主题

35

回帖

43

积分

会员

迷途中的羔羊

Rank: 5Rank: 5

积分
43
QQ
发表于 2010-9-2 15:00:23 | 显示全部楼层
太精彩了。我终于再次找到人生的方向了。

0

主题

5

回帖

12

积分

会员

Rank: 5Rank: 5

积分
12
发表于 2010-9-29 18:07:31 | 显示全部楼层
关于框架思维,我想起了老北京的四合院和胡同文化,这也是我们中国的传统,而框架思维也是我们中国人的一种传统思维模式,喜欢的话不妨可以继续发扬

0

主题

5

回帖

11

积分

会员

Rank: 5Rank: 5

积分
11
QQ
发表于 2010-10-13 13:36:31 | 显示全部楼层
学习了!
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-4-18 22:28

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表