当前位置:365bet平台注册 > 新闻资讯 > 网页UI的视觉体系,网页设计的分割布局秘密

网页UI的视觉体系,网页设计的分割布局秘密

文章作者:新闻资讯 上传时间:2019-09-23

蓝蓝设计:随着互联网的高速发展,各种各样的网站界面设计层出不穷。在这样的环境下,用户是如何在浩瀚的互联网海洋中快速挑选网站设计的呢?网页设计师又如何能让自己的网站设计在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式——分割布局,这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。作为网页设计师,我们可以参考的ui设计范例和布局原则有很多,比如说:栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式,将页面两等分。**

随着互联网的高速发展,各种各样的网站层出不穷。在这样的环境下,用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式——分割布局,这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。

版权申明:请转载和引用本文时载明原文出处和作者,尊重原创,谢谢!

虽然在一开始听起来有点傻,但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时,我们的视线常常会沿着一个之字形移动。而如果用户的视线是沿着一条水平线移动时——就像在Z型布局里一样,那么他/她就会很专注(或者说尝试着专注)。但由于初来你网站90%的用户都不会很仔细的去关注你的页面,因此让你的设计浏览起来友好肯定会获得不错回报哦!

作为网页设计师,我们可以参考的设计范例和布局原则有很多,比如说:栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式,将页面两等分。

从今天开始,我们也来聊聊UI设计。当我们谈论UI设计时,其实我的知识贡献范围也只能是WEB端,当然WEB端和软件端大同小异。但不管是设计网页界面还是软件界面,作为设计师,那就绝对不会否认这一点:比例、颜色、大小等微妙的元素间的平衡不是一项轻松的工作。

图片 1

虽然在一开始听起来有点傻,但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时,我们的视线常常会沿着一个之字形移动。而如果用户的视线是沿着一条水平线移动时——就像在Z型布局里一样,那么他/她就会很专注(或者说尝试着专注)。但由于初来你网站90%的用户都不会很仔细的去关注你的页面,因此让你的设计浏览起来友好肯定会获得不错回报哦!

图片 2

眼动和之字形

图片 3

网页UI设计也是一样,一个网站就像和其他传统的艺术创作一样遵循同样的规律,最终达到视觉的艺术效果。这是美学的范畴,同时隐含着现代商业的法则。一个优秀的网页设计必定是让人轻松又足够吸引的。

从雅虎的眼动追踪研究可以发现:

眼动和之字形

视觉的创作组合

人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。用户仅仅在三秒内就会对页面做出决定如果用户决定留在页面,他们会最关注屏幕顶部的内容。

从雅虎的眼动追踪研究可以发现:

让我们先谈谈,网站界面的三个功能。

网站的用户总是很匆忙,他们有其它的事情要做,你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的,但是这并不能完全激发访问者去采取行动——去点击立即购买或者了解更多按钮。

人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。

引导用户——网站对用户的引导,就像暗中一只无形的手,会指引用户通过点击等操作按钮浏览网站,了解信息,而不会带给用户压迫感。比如square这个网站,当你不断下拉的时候,会出现相应的文字提示你接下来继续到哪里。

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

用户仅仅在三秒内就会对页面做出决定

图片 4

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

如果用户决定留在页面,他们会最关注屏幕顶部的内容。

呈现内容间的关系——按照一定的布局去展示网站的主次内容优先级,比如abduzeedo这个网站,就将主推的内容放在了最大的顶部三个卡片展示上,其他的普通内容则在下方以列表的方式展示,底部则是一些标签分类的链接。

图片 5

网站的用户总是很匆忙,他们有其它的事情要做,你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的,但是这并不能完全激发访问者去采取行动——去点击立即购买或者了解更多按钮。

图片 6

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

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

建立情感联系——人们去餐厅用餐,其实不会只把餐厅当做一个解决食欲的地方。他们会关注到餐厅的场地、氛围、菜式甚至是其中的一些特别的情调,他们在这里交谈、交易。同样道理,用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。

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

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

浏览模式:人眼焦点预测

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

图片 7

就像你的眼睛会更快关注到快速移动的物体,或当你在街边被高冷美好的模特吸引一样。人眼会在看这一行为中自动启发对眼界中出现的某个物体的特别注意力,我们这里可以称之为焦点。大部分的人都会被页面中的焦点所吸引。

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

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

例如一篇文章的展示,也会遵循相同的浏览模式。99Designs的设计作者Alex就提到了两种主要的浏览模式。

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

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

图片 8

将分割布局应用到设计中

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

F模式

图片 9

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

这主要在一些以文字为主的网站出现,例如博客。F模式就是指,用户通常会沿着左侧垂直浏览而下,先去寻找文章中每个段落开头的兴趣点,这时,如果用户发现了他喜欢的,他就会从这里开始水平线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。

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

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

The Nielsen Norman机构曾对232名用户对上千个网站的浏览习惯进行观察,总结出F模式的特点:

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

将分割布局应用到设计中

  • 用户极少逐字阅读文字。
  • 每个段落的开始两个字最为重要,这将决定内容是否能留住用户。
  • 初始段落,副标题和要点都要保持醒目。

教程未完,请看下一页!

图片 10

图片 11

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

下图里的页面可以看到,重要的内容很清晰的展示出来,并且不会让用户花很多时间去浏览,而次要的内容也能快速尽收眼底。F模式对于那些嵌入广告的网站也是极为有用的,即使有了广告,也不会影响到内容。只要记住,内容为王,导航可以让用户更深入地浏览下去。

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

在所有浏览模式中,F模式就是一个引导路线图,而不仅仅是一个页面。因为,F模式的网站除了顶部展示区外,其他的内容会显得更平淡。就像下图所示,顶部1000像素后,网站就在水平方向加入了一些卡片式的内容组件,让网页内容更有趣。

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

图片 12

图片 13

Z模式

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

Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏,还是就仅仅因为从左到右自上而下的阅读习惯,用户首先关注的页头水平方向上的内容。当视线抵达底部时,又遵循着从左到右的习惯模式,重复再水平扫视页尾的最底部的内容。

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

图片 14

图片 15

Z模式几乎可以适用到任何的网页交互,Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话,那么用这个模式,效果就会稍差。当然,这些都不是绝对的。当Z模式简化布局,就可以增加转化率,下面这些是可以去简化的地方:

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

  • 背景——运用独立的背景能将用户的视线范围锁定在你的框架内容里。
  • 要点1——你的LOGO放置的首要位置。
  • 要点2——增加一个颜色鲜明的辅助操作指令,帮助用户遵循Z路线浏览模式。
  • 页面中心——页面的中心独立于页头和页尾的部分,引导用户Z路线浏览视线。
  • 要点3——增加可以从正在浏览的位置移动去到底部的图标,也就是可以随时抵达最终目标。
  • 要点4——Z模式最底部的水平线上的内容,这将是提供给用户首要操作的最佳位置。

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

预测用户的视线将会占有极大的优势。在布局你的页面元素时前,你就可以知道优先的该摆放在什么位置。一旦你知道你想要用户先看到什么,你就能可以通过视线的规律,将你的重点内容放在用户的“热点”里。

但是如果你做了这样一个简单的调整呢?

你可以在整个页面不断重复Z模式的规律,就像你在下图中看到的那样,一开始这个页面就有一个注册按钮,通过水平位置的浏览,用户已经获悉了这一信息,下拉会出现产品的卖点,这些卖点的展示就是遵循重复着Z模式的最佳例子,直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。

图片 16

图片 17

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

后记:

图片 18

在设计中,我们所思考的总是比我们呈现出来的更多。不管怎样,这两种模式只是一个小结,实际创作过程全是花样百出,绝不是两种模式就能轻松完成的。但是,在规律面前,多多益善总不会错。灵活运用规律才是关键。

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

本文原文出自我的博文:网页UI的视觉体系(一):F模式和Z模式

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

有效的分割布局的例子

随着Facebook新的时间轴的设计,分割式布局受到了众人的注目

。留意一下,你的视线多轻易就从一个帖子流向了另一个。

图片 19

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

图片 20

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

图片 21

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

图片 22

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

图片 23

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

图片 24

总结:

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

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

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

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

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

本文由365bet平台注册发布于新闻资讯,转载请注明出处:网页UI的视觉体系,网页设计的分割布局秘密

关键词: