阅读更多
【编者按】网页设计中,视觉层级的组织十分重要,它可帮助用户快速抓取所需关键内容,获得愉悦体验。目光追踪定位技术可帮助实现这一点,其可帮助设计师更好地懂得如何设计既高效又有审美趣味的网站。Jerry Cao在Webdesigner Depot上发表了《How Eye Scanning Impacts Visual Hierarchy In  UX Design》一文,详细介绍了F-模式、Z-模式,并分析了iZettle、DropBox、Evernote等知名网站如何利用这两种模式完美搭建页面布局的。CSDN对该文章进行了翻译,内容如下。

欢迎加入CSDN用户体验交流群:190426269,进行行业探讨。
从希腊的花瓶到意大利的教堂,艺术在几千年的历史长河中,熏陶了我们对“美”的理解,伴随着最近“目光追踪定位技术”的发展,让我们知道了人是如何以一个动态的视角去感知这个世界的。更让人兴奋的是,这项技术帮助我们更好地懂得如何设计既高效又有审美趣味的网站。

网页设计(作为一种视觉艺术)与传统艺术形式遵循着一样的规则。本文中,我们将简要概述视觉组织的重要性,然后说明“目光跟踪定位技术”是怎样改变Web界面布局的。

创建好的视觉组织结构

毫无疑问,一个网站的视觉效果影响着它能否成功,找出这个原因很重要。作家及雅虎的高级产品责人Luke Wroblewski在他的论文《Communicating with Visual Hierarchy》中提到一个Web界面的视觉呈现要点应包括以下几部分:

很自然流畅的向导

优秀的界面能引导用户很自然地进入下一操作,而不会给用户带来霸道而专横的感觉。你也许会认为企业所做的一切都是商业行为,但毫无疑问Uber是一个流畅到让人难以置信的结构化网站。关键点在于顶部的滚动设计,紧随其后的是一个有趣的滑块来提供不同的汽车选项,然后按照某种逻辑关系帮你顺利地找到所在城市的座驾。



与用户进行交流

通过拼接不同的信息碎片,不用任何的交流信息来说明,UI就可以在用户头脑中形成一个信息链。看看流行的设计网站Abduzeedo是怎么设计的:头部是占一大块区域的分类信息,特色内容在中间部分,细小分类则在页脚部分。



产生情感共鸣

不要错误地把你的网站仅仅当做一个呆板的工具。网站也能与用户建立情感上的联系,如果你不这样做,你的竞争可是会的。事实上,如果你做出一个有积极情感的网站,用户更容易原谅你界面上的缺陷。MailChimp就是一个完美的例子,它的界面使用起来令人心情愉悦,使用起来更是一种享受。



人的视觉具有倾向性

有时,似乎你的眼睛也有他们自己的思想。经过多年的进化,眼睛有了发现我们认为重要的对象和动作的能力,不管是某个人以性感的身姿穿过马路或是可爱的卡通熊的蜂蜜广告都能吸引我们的注意。当然在每个人心中所谓的“重要性”是不一样的,因人而异,唯一不变的是他们的行为倾向。通常在浏览一个网页时大部分人的行为倾向是一样的。

所谓“行为倾向”有两个,我们将详细讨论。99Designs作家Alex Bigman的文章《6 principles of visual hierarchy for designers》展示了那些有从左往右阅读习惯的用户群,当设计一个网站布局时有两个非常通用和有效的设计模式。

第一是F-模式,常用于文本(当然也可以用于其它用途)。第二是Z-模式,可用于任何视觉布局。我们将在下面分别解释他们各自的优点和缺点。
F-模式

F-模式的页面往往包含大量文本,比如博客、新闻资讯、文章等站点页面。

当面对成段的大量文字信息的时候,大多数读者会纵向地先浏览每段左边的文本,特别是在段落开始的几个句子中寻找关键词或者他们的兴趣点。最终读者找到他们喜欢的东西,再开始正常地横向阅读。最终的结果是看起来像字母F或E。

Nielson Norman团队中的Jakob Nielson发起了一个基于232人浏览成千上万个网站可读性研究。通过他的研究,他记录了他认为的“F-模式”的实际意义:

用户很少会认真地读文本的每一个字;
前两个段落是最重要的,它应该包含你的要点;
在段落的开始、副标题和关键位置中放入吸引人的关键词。
当然,左上角是最重要的,因为这是所有有从左往右阅读习惯的人群阅读开始的地方。用户通常会水平地通读头部,所以这是一个很好地放置导航条或(和)“用户行为号召”的地方。然后用户从左侧纵向浏览下来,直到遇到感兴趣的内容。最终,用户的目光结束在页面的右侧,这是一个放置“用户行为号召”或广告的地方。只是不要让侧边栏遮挡住内容。

但F型并不是一个定式——没有事实说明它是最好的,但更像是由大部分用户的行为习惯而总结出来的一些松散的规律。请牢记这一点,因为F-模式在开始几行后就失去了它的有效性。

Kickstarter使用一张卡片来展示特色项目,这使得用户不会在浏览完开始的500像素后就变得视觉疲劳。

另一方面,iZettle在主页上采用了一种更传统、遵循F-模式的方法。不管怎样,它通过在背景图片的上层叠加主文本(使用iZettle来增长您的业务)和“用户行为号召”来设法避免过于模板化的外观。我们认为这是适应这种阅读模式最基本简洁的方法。



Z-模式

此外,Z-模式是最简单、最通用的模式,普遍用于任何基于文本的网页。读者首先横向的浏览顶部,接着回到左边,然后再横向地浏览整个底部。

理解通用的Z-模式很重要,因为它解决了网站的核心需求:层次结构、品牌化和用户行为号召。它的美在于既简单又具有“用户号召”型网站的理想布局。当然,对于更复杂的或包含大量内容的网站,Z-模式可能过于简单。

考虑一下Z-模式是否适合你的网站?下面有一些最佳实践可以更好的优化该模式:

背景:保持背景在它应该处于的位置:隐蔽在内容之下。不让它分散读者的注意力。
要点1:作为第一个要点,将Logo放置在固定位置。
要点2:虽然主要的用户号召应该放在后面,这对二级用户号召来说是一个好位置,可强调或突出导航条(一个漂亮的图形或图像滑块将有助于分割页面的顶部和底部,鼓励读者按照Z模式所期待的方式来浏览)。
要点3:选取最佳位置来吸引读者对其它链接的注意,或者吸引读者的目光到网站的最终目标:要点4。
要点4——作为“终点”,这是一个完美的放置主要用户号召的地方。
首先你需要做的是把页面上的元素按照重要性进行排序。然后,从结果中挑选出适当的“热点”就会变得很简单。

此外,Z-模式可以重复和扩展到整个页面。我们来看看Evernote是如何按“之”字型向下放置他们的“用户号召”和卖点的。



DropBox没有使用任何背景图片,很简单地实现了这种“曲折”的模式。相反的,更多功能型的设计内置在了布局中,比如用户号召“浏览更多”,当用户浏览整个网页时,它帮助用户链接进入每一板块的细节部分。这也有助于通知读者点击到下一个相关页面,而不需要先去通读页面所有内容。



设计趋势预测

一个优秀的界面设计应该像一个无形的手在左右用户思考的速度。从F-模式和Z-模式设计趋势获得的最重要的一点就是:你应该将你认为最重要的内容很自然地展现给读者,而不是让他们感觉到在强迫他们看。

能敏锐地把握细节,对任何页面布局来说都是一个优势。这些模式可以让用户感觉是为他们提供一些相关建议,而不是强迫他们接受。(责编:陈秋歌)

原文链接:How Eye Scanning Impacts Visual Hierarchy In  UX Design
  • 大小: 45.3 KB
  • 大小: 64 KB
  • 大小: 25.8 KB
  • 大小: 53.6 KB
  • 大小: 34 KB
  • 大小: 19.6 KB
6
0
评论 共 5 条 请登录后发表评论
5 楼 jianghf2014 2015-04-29 15:24
 
4 楼 jianghf2014 2015-04-29 15:24
[b][i][u]
引用
[flash=200,200]
[flash=200,200][url][img][list]
[*]
引用
[/list][/img][/url][/flash]
[/flash]
[/u][/i][/b]
3 楼 Z_Libra 2015-04-21 13:11
xuan351 写道
              
[flash=200,200][url][img][list]
[*]
引用
[u][i][b][/b][/i][/u]
[/list][/img][/url][/flash]
[color=red][/color]

2 楼 Z_Libra 2015-04-21 13:10
引用
1 楼 xuan351 2015-04-13 13:53
              
[flash=200,200][url][img][list]
[*]
引用
[u][i][b][/b][/i][/u]
[/list][/img][/url][/flash]
[color=red][/color]

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 谈谈23种设计模式在Android源码及项目中的应用

    本文首发于个人博客:Lam’s Blog - 谈谈23种设计模式在Android源码及项目中的应用,文章由MarkDown语法编写,可能不同平台渲染效果不一,如果有存在排版错误图片无法显示等问题,烦请移至个人博客,如果个人博客...

  • 配色、布局、交互设计,大牌设计师的良心分享

    理论是艺术设计的基础,是设计思维的根本核心。

  • UI界面设计中的5个实用版面排版技巧

    实际上, 排版本身并不是选择字体,也不是制作字体和布局,它是塑造文本的呈现形式,达到最佳体验的过程。 安全、简便获取UI界面的方法: 1 对于新手来说版面排版,不是一件简单的事,这个时候需要临摹学习...

  • 交互设计7大定律

    在交互设计领域有很多经过时间...我们在产品设计的过程中会经历非常多的决策阶段,大到一个功能流程的闭环设计,小到思考一个元素的最合理布局,在这些场景中,我们首选的解决方案当然是更适合当前功能特性和使用场...

  • 2019年正在流行的16个网页设计趋势

    时间进入2019年,我们在网页设计中看到旧有风格的重生,也见证了新的设计趋势的诞生。 Web 技术的快速发展,不仅让设计和产品足以满足更多更细致深入的需求,也让设计师能够进行更细腻更独特的表达。现今的网页设计...

  • 手把手教你icon图标设计规范

    icon图标是界面设计中最常见的元素之一,具有指示信息的功能,具有很高的视觉传达效率。在界面设计中,高质量的icon图标设计可以使其视觉效果更加惊人,在描述信息的同时可以直观地丰富视觉体验。icon图标设计规范对...

  • 移动互联网2014年移动应用交互设计10大趋势

    导语:移动APP越来越强调沉浸式的体验,页面和页面之间切换也需要更加的...在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来。2014年,又有哪些新的设计趋势脱颖而出呢? 百度MUX有一群关注趋势的小

  • Hero image网站转化这么高?21个最佳案例给你参考

    Hero image是网页设计中一种特定的术语,也是目前最流行最引人注目的网页设计趋势之一。Hero Image通常指的是一种大尺寸横幅图片展示在网页上,通常放在靠前并居中的位置。它囊括了网站中最重要的内容。Hero image...

  • 大势所趋!十大令人振奋的移动端APP设计趋势

    从移动端兴起,主流设计风格定型,再到Uber、Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境。促成这一切的影响因素很多,比如社会发展趋势的变化、共享经济的大热、新技术的积累,等等等等。这些事物的...

  • 你的作品集够好了吗?20份精选UI设计作品集给你灵感

    面试UI设计师的小可爱们,是不是总是被面试官要求看看你们的作品集呢?作品集的重要性对于设计师可以说是不言而喻的,作品集不仅是设计师设计能力的最好证明,更是一块求职时的金牌敲门砖。但要做出一份优秀的作品集...

  • web前端入门到实战:16个网页设计趋势

    时间进入2019年,我们在网页设计中看到旧有风格的重生,也见证了新的设计趋势的诞生。Web 技术的快速发展,不仅让设计和产品足以满足更多更细致深入的需求,也让设计师能够进行更细腻更独特的表达。现今的网页设计...

  • web前端入门到实战:16个网页设计趋势,你都有知道吗?

    时间进入2019年,我们在网页设计中看到旧有风格的重生,也见证了新的设计趋势的诞生。Web 技术的快速发展,不仅让设计和产品足以满足更多更细致深入的需求,也让设计师能够进行更细腻更独特的表达。现今的网页设计...

  • 20条不该打破的设计规则

    本文列出了一些基本的规则和技巧,从字体、排版到色彩、样式,涵盖了大部分设计中常见的错误,帮助你在设计中避免它们。 1. 不要忘了字间距。 设计中糟糕的字间距是常犯的错误,初期定好恰当的字间距很重要。 ...

  • 网站界面设计规范

    网站界面设计规范 网站用户界面(Website User Interface)指网站用于和用户交互的外观、元素和程序等等。  如果你经常上网,就会看到很多网站设计很朴素,看起来给人非常舒服的感觉;有的网站很有创意,常常给人...

  • 2014年移动应用交互设计10大趋势

    在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来。...希望 这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。 1 转场动效的极致平滑(TRANSITION ANIM

  • 平面设计如何影响交互的未来

    百度无线MUX团队在《2012年移动应用十大设计趋势》中提到了“平面化的视觉风格”这一趋势,同时微软在Windows 8平板中引入了Metro风格。所以,平面设计渐渐地印象着我们。 文章作者Mike Kruzeniski目前是Windows ...

  • setting.xml文件,修改Maven仓库指向至阿里仓

    setting.xml文件,修改Maven仓库指向至阿里仓

Global site tag (gtag.js) - Google Analytics