查看: 925|回复: 0
打印 上一主题 下一主题

反Box的布局设计方式

[复制链接]

11

主题

10

帖子

49

积分

新人

Rank: 1

积分
49
跳转到指定楼层
楼主
发表于 2014-8-9 01:22:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[/url]

反Box的布局设计方式


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

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

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

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

Box布局方式:
[url=http://www.aipingce.com/attachment.php?aid=1281&k=1e48e958cd3b7edc14688db22ec61d37&t=1407517200&nothumb=yes&sid=880099pAT7kNACGR86Krl%2FMyUEikZ6jHRvf2%2Fw2%2FGXEWGoY]下载 (115.09 KB)
2010-5-23 18:50




反Box布局方式:
下载 (237.5 KB)
2010-5-23 18:50




此示例RP源文件下载

网易通行证改造.rar (384.59 KB)下载次数: 1136
2011-4-11 15:59


2评分次数
收藏分享评分

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?马上注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
[url=http://www.giertsenco.com/citrix/magasin-hollister-france/‎]hollister[/url
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

毒镜头:老镜头、摄影器材资料库、老镜头样片、摄影
爱评测 aipingce.com  
快速回复 返回顶部 返回列表