了解网页设计中分割布局[1]

  • 作者:不详
  • 来源:webdesign.tuts
  • 更新时间:2013-06-26 13:19:22
  • 点击:16877
[0分]

翻译:39℃

作为网页设计师,我们可以参考的设计范式和布局原则有很多,例如:栅格化、众向一致性、F-layout布局、Z-layout布局、三分法则、黄金分割法等等。注重这些原则会产生视觉上的吸引力和功能 性——现在让我们来看看一个页面被简单划分为两个相等两半的例子。

虽然刚开始听起来有点傻,但这个基本的布局是非常有效的。当我们通览一个页面的时候,我们的视线往往跟着zig-zag(常说的“之”字)移动。如果用户的实现只是沿着一水平直线移动时,那么 他/她会很专注(或者说是尝试着专注)。但事实上由于初来你网站90%的用户流量都不会太仔细去关注你的的网页,因此尽量使你的设计“浏览起来很友好”肯定会有不错的回报。

设计理念 网页分割布局

眼球运动和曲折
从雅虎的眼球追踪研究可以发现:

1、用户通过浏览一个网页的主要部分来判定它是关于什么的,他们是否想多呆一会儿。

2、用户会在短短的三秒内对页面做出判定。

3、如果用户决定留下来,那么他们最关注的是在屏幕顶端部分的内容。

Web用户总是匆匆忙忙的。他们有其他的事情要做,所以你不要奢望他们会留下来慢慢欣赏你的网站的美学。尽管好的设计是非常重要的,但它并不能充分激发游客马上采取行动——点击“现在购买 ”或“了解更多”的按钮。

我们不能为此而埋怨他们。永远记住,当你想查询什么东西时?你会急着打开谷歌的第一个搜索结果并且火速看完,或者更确切的说,是粗略的浏览整个页面。大多数时间,你甚至是毫不留意就将鼠 标滚动到了页面底部。经过这个阶段后,如果你认为这个页面值得你花时间,你就会又回到页面顶端并且着实花精力去阅读和关注。

那么,用户初始浏览的目的究竟是什么呢?就是在你最初扫视页面时,捕捉到尽可能多的信息。如果我们以某种方式“制定”这种浏览模式,应该就能够得到更多访问者的关注。通过观察大量网站的 热图,我得出了一个共通的趋势。

设计理念 网页分割布局

在上图中你会发现,你毫不费劲就能看到那些红点。奇怪的是,就经验看来,相比于斜线而言,我们的视线能更轻易的跟随水平线移动——因为我们都是沿着直线阅读。但请注意,我讨论的是在初始浏览阶段,并不是你关注网站每个细节时的阶段。

每当你不是很专注时,你的视觉流向很自然的就会呈现为“之”字形。除非有对比度更高或者更重要的元素“召唤”你,不然你的视线就将会遵循上图的模式。你还会发现,这种模式看起来和F型布局非常相似,并且用户会在红色端点有短暂的停留。

你的大脑会在这些“暂停点”生成快照。在之字形布局里,在这些“暂停点”布置一些包含重要信息的元素,用户的大脑就会很自然的吸收更多的细节,并将这些作为独立实体存在的“之”形端点联结起来。

“设计不仅仅是它的外观怎样或者感觉如何,而是它是如何工作的。——史蒂夫·乔布斯”

举例来说,你可以利用半分割布局的这一特点去有效的布置你作品集的预览、你的产品或服务的重要特性,这样很快就能引起网站访问者的注意。最终会激励用户在您的网站停留更久,并说服他们采取行动。这样的话,结果会是怎样呢?将给您的网站带来更高的转换率,同时给访问者带来更好的用户体验。

应用分割布局设计

设计理念 网页分割布局

让你的设计和布局兼容“之”字形非常简单。实际上,这和将你的页面分为两等份一样简单!两等分的效果很好,因为“之”字形的端点或多或少能对齐到这两等分的中心。叠加使用,它们能很好的相互呼应。将重要元素放置在你网页中“之”字形的红色端点处,这就是分割布局或者说1/2布局包含的基本理念。

最近,我致力于设计一个“即将来临”的登陆页面。我尝试了多种布局,但是没有一种效果让我满意。我几乎试了每一种——比如栅格化,黄金分割比,F型布局等。但是仅当我将页面两等分时,那一刻有一种强烈的“我找到了!”的感觉。解决的办法竟如此简单!它看起来优雅而整洁,并且提醒了我一个重要的事实:简单不一定是坏事。你看到微软的新标志了吗?

简洁是终极的复杂.——莱昂纳多·达·芬奇

设计理念 网页分割布局

你能看到两等分如何体现出一种良好的视觉层次。首先,顶部的“即将来临”的红色缎带很引人注目。其次,标志也很鲜明。现在,跟随我之前提到的“之”字形,访问者看到右半部分的图片滑块,最后,到达电子邮件提交表格。

现在让我们来看一下,分割布局在一个网页设计师的作品集页面中能起到多大作用?设计作品集页面的目的是为了向潜在顾客快速展示你作品的主体部分。随着现在这个产业如此饱和,顾客的选择有很多很多,为什么他们要付钱给你呢?因此,一个很棒的第一印象将会在你的事业方向中起到决定性作用。让我们看看,我们可以做些什么?

设计理念 网页分割布局

上图的布局被划分为两等分,但是并不遵循我之前提到的“之”字形原则。

虽然它看起来是个不错的布局并且易于观看,但是在看完前两块元素后就会让人感到非常沉闷死板。打破这样的视觉流向并且增添视觉趣味性将会让之有所改变。不仅如此,当你试着去浏览上面这种布局时,你的眼睛会最先看到第一张图片,然后跳转到第二块的文本上。然而你的访问者并没有打算在这个阶段阅读,因此,他们会跳转到其它的点,或者彻底离开你的页面!

如果你做了一个简单的改变?

设计理念 网页分割布局

这样变得更生动有趣了,对吧?简单的互换每个项目里文本和图片的位置来增加视觉上的生动性,像这种一致性就不会让你的用户感觉到无聊了。同时,你还能在“之”字模型后放置一个行为召唤按钮。

设计理念 网页分割布局

这个“联系我”按钮将会有更大的机会被注意到,并且被你更多的用户点击(为什么不进行一个A/B测试去再次验证一下?)

“设计是一项计划,它将所有元素以最好的方式组织起来去完成一个特定的目标——查尔斯·埃姆斯”

在行动的分割布局的例子

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

设计理念 网页分割布局
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华