秘密公开!网页设计必看的分割布局原理

2013-06-06 10:33  出处:pconline 原创  作者:视觉中国   责任编辑:mohaichou 

  有效的分割布局的例子

  随着Facebook新的时间轴的设计,分割式布局受到了众人的注目。留意一下,你的视线多轻易就从一个帖子流向了另一个。

不可不知!网页设计的布局分割秘密
图07

  Apple公司也采用了分割式布局。这里是iPad mini的页面,看看它是多么轻易地将每个展示iPad mini不同特征的图片联系起来的。感觉不错吧!

不可不知!网页设计的布局分割秘密
图08

  很多人认为,微软为它最近的品牌重塑铺设了很多新方式,下图就是他们Surface的信息页,这个页面也采用了分割式布局。

不可不知!网页设计的布局分割秘密
图09

  Stacey是1/2型布局的极简写照。

不可不知!网页设计的布局分割秘密
图10

  我很喜欢Quora的主页,分割式布局能被示范的更简单一些么?

不可不知!网页设计的布局分割秘密
图11

  Consumerbarometer.com 利用动画将“之”字形提升到了一个新的等级,并且对之进行了三角形变异。

不可不知!网页设计的布局分割秘密
图12

  总结:

  那么,我们学到了什么呢?

  ·用户仅在三秒内就能对你的页面做出判定;

  ·为了吸引访问者的注意力并且降低页面跳出率,我们应该试着让我们的页面布局“浏览起来友好”;

  ·就在中心位置划分你的布局,并且将重要元素调整到“之”字形的端点上,以确保你的访问者在浏览后记住更多的细节;

  本文仅仅是一个善意的提醒,我们在设计网页时,不应忘记使用基本布局和基本设计方法。实际上,如果应用合适的话,这将会提高你的转换率。

  原文地址:大公开!网页设计的分割秘密

相关阅读:

小清新风格!Google主页UI概念设计图赏

http://pcedu.pconline.com.cn/331/3314593.html

霸气的奢华!兰博基尼Egoista概念车曝光

http://pcedu.pconline.com.cn/331/3314568.html

 

键盘也能翻页,试试“← →”键
本文导航
第1页:网页分割手法说明
第2页:网页分割布局例子