了解网页设计中的分割布局.pdf

了解网页设计中的分割布局 随着互联网的高速发展 ，各种各样的网站层出不穷。在 样的环境下 ，用户是如何在浩瀚的互联网 海洋中快速挑选网站的呢 ？网页设计师又如何能让自己的网 站在用户匆匆一瞥后就迅速吸引到他们 进一步注意的呢 ？本文作者向用户介绍了一种简单的页面布局方式——分割布局 ， 种布局方式试 图让用户初览页面时感受到 一种友好的浏览体验。 下面进入翻译正文 ： 作为网页设计师 ，我们可以参考的设计范例和布局原则有很多 ，比如说 ：栅格化、纵向一致性、F 型布局、Z 型布局、三分法则、黄金分割法等等。注重 些原则将会给你的设计带来视觉吸引力和 功能性——现在让我们来看一种简单的方式 ，将页面两等分。 虽然在一开始听起来有点傻 ，但是 种基本布局确实能起到非常好的效果。当我们通览一个页面时 ，我们的视线常常会沿着一个“之”字形移动。而如果用户 的视线是沿着一条水平线移动时——就像 在Z 型布局里一样 ，那么他/她就会很专注 （或者说尝试着专注 ）。但由于初来你网站90%的用户都 不会很仔细的去关注 你的页面 ，因此让你的设计“浏览起来友好”肯定会获得不错回报哦 ！ （图1 ） 眼动和“之”字形 从雅虎的眼动追踪研究可以发现 ： ·人们通过扫视页面的主要部分去判定 是个什么网站以及他们是否想在 多呆一会。 ·用户仅仅在三秒内就会对页面做出决定 ·如果用户决定留在页面 ，他们会最关注屏幕顶部的内容。 网站的用户总是很匆忙 ，他们有其它的事情要做 ，你不要指望他们会停下来去欣赏你网站的美学。 虽然良好的美学设计是非常重要的 ，但是 并不能完全激发访问者去采取行动——去点击“立即 购买”或者“了解更多”按钮。 我们不能去埋怨 些用户。永远记住 ，当你想查询什么东西时?你会急着打开谷歌的第一个搜索结果 并且火速看完 ，或者更确切的说 ，是粗略的浏览整个页 面。大多数时间 ，你甚至是毫不留意就将鼠 标滚动到了页面底部。经过 个阶段后 ，如果你认为 个页面值得你花时间 ，你就会又回到页面顶 端并且着实花精力去阅 读和关注。 那么 ，用户初始浏览的目的究竟是什么呢 ？就是在你最初扫视页面时 ，捕捉到尽可能多的信息。如 果我们以某种方式“制定” 种浏览模式 ，应该就能够得到更多访问者的关注。通过观察大量网站的 热图 ，我得出了一个共通的趋势。 （图2 ） 在上图中你会发现 ，你毫不费劲就能看到那些红点。奇怪的是 ，就经验看来 ，相比于斜线而言 ，我 们的视线能更轻易的跟随水平线移动——因为我们都是沿着直线阅读。但请注意 ，我讨论的是在初 始浏览阶段 ，并不是你关注网站每个细节时的阶段。 每当你不是很专注时 ，你的视觉流向很自然的就会呈现为“之”字形。除非有对比度更高或者更重要 的元素“召唤”你 ，不然你的视线就将会遵循上图的模式。你还会发现 ， 种模式看起来和F型布局非 常相似 ，并且用户会在红色端点有短暂的停留。 你的大脑会在 些“暂停点”生成快照。在之字形布局里 ，在 些“暂停点”布置一些包含重要信息的 元素 ，用户的大脑就会很自然的吸收更多的细节 ，并将 些作为独立实体存在的“之”形端点联结 起来。 （图3 ） “设计不仅仅是它的外观怎样或者感觉如何 ，而是它是如何工作的。——史蒂夫·乔布斯” 举例来说 ，你可以利用半分割布局的 一特点去有效的布置你作品集的预览、你的产品或服务的重 要特性 ， 样很快就能引起网站访问者的注意。最终会激励 用户在您的网站停留更久 ，并说服他们 采取行动。 样的话 ，结果会是怎样呢?将给您的网站带来更高的转换率 ，同时给访问者带来更好的 用户体验。 将分割布局应用到设计中 （图4 ） 让你的设计和布局兼容“之”字形非常简单。实际上 ， 和将你的页面分为两等份一样简单 ！两等分的 效果很好 ，因为“之”字形的端点或多或少能对齐到 两等分的中心。叠加使用 ，它们能很好的相互 呼应。将重要元素放置在你网页中“之”字形的红色端点处 ， 就是分割布局或者说1/2布局包含的基 本理念。 最近 ，我致力于设计一个“即将来临”的登陆页面。我尝试了多种布局 ，但是没有一种效果让我满意 。我几乎试了每一种——比如栅格化 ，黄金分割比 ，F型 布局等。但是仅当我将页面两等分时 ，那 一刻有一种强烈的“我找到了 ！”的感觉。解决的办法竟如此简单 ！它看起来优雅而整洁 ，并且提醒 了我一个重要的事实 ： 简单不一定是坏事。你看到微软的新标志了吗 ？ （图5 ） “简洁是终极的复杂.——莱昂纳多·达·芬奇” （图6 ，ht t p://www.f utf o lle.co m/ ）