|
|
[/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¬humb=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
|
发表于 2014-8-9 01:22:25
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏