2022-06-18 分类: 网站建设
作为网页设计师,我们可以参考的设计范例和布局原则有很多,比如说:栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式,将页面两等分。
从雅虎的眼动追踪研究可以发现:
·人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。
·用户仅仅在三秒内就会对页面做出决定
·如果用户决定留在页面,他们会最关注屏幕顶部的内容。
网站的用户总是很匆忙,他们有其它的事情要做,你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的,但是这并不能完全激发访问者去采取行动——去点击“立即购买”或者“了解更多”按钮。
我们不能去埋怨这些用户。永远记住,当你想查询什么东西时?你会急着打开谷歌的第一个搜索结果并且火速看完,或者更确切的说,是粗略的浏览整个页面。大多数时间,你甚至是毫不留意就将鼠标滚动到了页面底部。经过这个阶段后,如果你认为这个页面值得你花时间,你就会又回到页面顶端并且着实花精力去阅读和关注。
那么,用户初始浏览的目的究竟是什么呢?就是在你最初扫视页面时,捕捉到尽可能多的信息。如果我们以某种方式“制定”这种浏览模式,应该就能够得到更多访问者的关注。通过观察大量网站的热图,我得出了一个共通的趋势。
在上图中你会发现,你毫不费劲就能看到那些红点。奇怪的是,就经验看来,相比于斜线而言,我们的视线能更轻易的跟随水平线移动——因为我们都是沿着直线阅读。但请注意,我讨论的是在初始浏览阶段,并不是你关注网站每个细节时的阶段。
每当你不是很专注时,你的视觉流向很自然的就会呈现为“之”字形。除非有对比度更高或者更重要的元素“召唤”你,不然你的视线就将会遵循上图的模式。你还会发现,这种模式看起来和F型布局非常相似,并且用户会在红色端点有短暂的停留。
“设计不仅仅是它的外观怎样或者感觉如何,而是它是如何工作的。——史蒂夫·乔布斯”
举例来说,你可以利用半分割布局的这一特点去有效的布置你作品集的预览、你的产品或服务的重要特性,这样很快就能引起网站访问者的注意。最终会激励用户在您的网站停留更久,并说服他们采取行动。这样的话,结果会是怎样呢?将给您的网站带来更高的转换率,同时给访问者带来更好的用户体验。
让你的设计和布局兼容“之”字形非常简单。实际上,这和将你的页面分为两等份一样简单!两等分的效果很好,因为“之”字形的端点或多或少能对齐到这两等分的中心。叠加使用,它们能很好的相互呼应。将重要元素放置在你网页中“之”字形的红色端点处,这就是分割布局或者说1/2布局包含的基本理念。
你能看到两等分如何体现出一种良好的视觉层次。首先,顶部的“即将来临”的红色缎带很引人注目。其次,标志也很鲜明。现在,跟随我之前提到的“之”字形,访问者看到右半部分的图片滑块,最后,到达电子邮件提交表格。
上图的布局被划分为两等分,但是并不遵循我之前提到的“之”字形原则。
虽然它看起来是个不错的布局并且易于观看,但是在看完前两块元素后就会让人感到非常沉闷死板。打破这样的视觉流向并且增添视觉趣味性将会让之有所改变。不仅如此,当你试着去浏览上面这种布局时,你的眼睛会最先看到第一张图片,然后跳转到第二块的文本上。然而你的访问者并没有打算在这个阶段阅读,因此,他们会跳转到其它的点,或者彻底离开你的页面!
“设计是一项计划,它将所有元素以最好的方式组织起来去完成一个特定的目标。——查尔斯·埃姆斯”
那么,我们学到了什么呢?
·用户仅在三秒内就能对你的页面做出判定
·为了吸引访问者的注意力并且降低页面跳出率,我们应该试着让我们的页面布局“浏览起来友好”
·就在中心位置划分你的布局,并且将重要元素调整到“之”字形的端点上,以确保你的访问者在浏览后记住更多的细节
我们在设计网页时,不应忘记使用基本布局和基本设计方法。实际上,如果应用合适的话,这将会提高你的转换率。
分享文章:了解网页设计中的分割布局
转载注明:/news10/168710.html
成都网站建设公司_创新互联,为您提供品牌网站制作、微信公众号、企业建站、网站建设、做网站、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容