25选7福利彩票2018056
当前位置:首页 > 运营推广

当你在看网页时,你的眼睛在看哪里?

时间:2019-06-28 13:45:18来源:运营推广作者:seo实验室小编阅读:66次「手机版」
 

你眼睛在看哪里

C++="HTTP://image.woshipm.com/wp-files/img/46.png" />

理解人眼的阅读习惯,才能做出更加合理有效的设计

要创造正确的视觉层次,你就要理解我们的眼睛如何处理信息,UXPin的Chris Bank说。

一个艺术大师除了要具备创造力,还要考虑一些细节问题,比如写作、用色、尺寸、包含哪些内容,可能更重要的是舍弃哪些。这可不是容易的事,所以我们才会?#28304;?#33452;奇和梵高这样的大师推崇备至。

网页UI设计师应该如此。这本免费电子书网页UI最佳实战中讨论过,网站也是视觉艺术的一?#20013;问劍运?#29420;有的方式,它要遵循很多传统艺术?#38382;?#30340;规则。这是审美的科学,掺杂了一些商业准则,非比寻常的网站界面,必须让人感觉毫无压力、引人入胜。

组织视觉

Luke Wroblewski,专栏作家兼雅虎产品设计高级主管,在他的的文章通过视觉层次沟通中阐释了网站界面的视觉表现在以下方面的重要性:

通知用户——像一只无形的手,界面应该引导用户一步步采取行动,却不会让用户感到压?#21462;?#27604;如当你向下滚动,支付服务商Square引导你了解它的价值所在,每一步?#21152;?#30456;关的引导号召你采取行动。

传达内容之间的关联——界面展现内容的方式,应该符合用户对信息的优先级理解。例如,人气设计网站Abduzeedo在顶部包含了清晰的分类,推荐内容在中间,底部则是详细的分类。

影响情绪——人们去餐馆可不只是为了食物果腹。他们要的是口味、质?#23567;?#22806;观,还有令人难忘的环境。界面设计也一样,而且假如你建立了积极的情绪响应,人们可能更容易谅解网站的缺点。比如Wufoo就是个完美案例,界面非常实?#20204;?#20196;人愉悦

你的UI设计,最终目标是要解答以下三个问题:

这是什么?(有用)

如何使用?(易用)

关我什么事?(?#37322;?/p>

人眼的可预见性

不论是角落的匆匆一?#24120;?#36824;是?#38405;?#20010;路人的仔细打量,人的视线总是自动聚集在某些特定的兴趣点上。虽然这点因人而异,多数人还是容易遵循某?#32622;?#30830;的走向——也包括如何浏览网站。

在一篇关于视觉原则的文章中,99Designs的设计专栏作家,Alex Bigman,谈到了在左向右阅读的民族中,两种占据主导地位的阅读模式。我们依次来看看。

01. F模式

通常体现在文字密集的网站中,比如博客,读者首先沿着左侧的文字垂直向下浏览,?#29992;?#27573;的前几句寻找他感兴趣的关键词或要点,F模式由?#35828;?#26469;。

当读者?#19994;?#20102;?#19981;?#30340;东西,他们就开始正常阅读,构成了水平线。结果就导致了看似字母F或E的路径。CNN和NYTtimes两者都使用了F模式。

Nielson Norman Group的Jakob Nielson进行了一次易读性研究,基于232名用户浏览上千个网站,还有F模式涉及实践的详尽说明用户很少逐?#31181;?#21477;阅读。

前两段最重要,应该包含你的营销妙语。

起?#32423;巍?#21103;标题、重点列表中要带有诱人的关键词。

它会如何影响网站的界面设计?请看下图。

图中可以看到,数秒钟内就能看到最重要?#21738;?#23481;,下方立马接上更详细?#21738;?#23481;(还有行动号召),方便快速浏览。

对于想要嵌入广告和行动号召,又不希望内容被淹没的网站,F模式非常有帮助。切记,永远是内容为王,侧边栏的存在是加深用户的参与。?#25512;?#20182;所有模式一样,F模式是一?#23383;?#23548;方针——而非模版——因为读过F中的头?#24863;?#20043;后,F模式可能会让人感觉枯燥。

02. Z模式

Z模式浏览发生在不以文字为核心的网站?#23567;?#35835;者首先浏览页面顶部的一条横线,不论是因为?#35828;?#26639;,还是出于在顶?#30475;?#24038;至右浏览一遍的习惯。当视线到达尽头,它会飞速向左下移动(这也是出于阅读习惯),在页面下方部分重?#27492;?#24179;方向上的搜寻。

Z模式几乎可以运用于任何网站界面,因为它满足了网站的核心需要,比如层级、ai/ target=_blank class=infotextkey>品牌、行动号召。Z模式对于简洁至上、核心是行动号召的界面效果最佳。

在一个内容复杂的网站中强行使用Z模式,或许不如F模式来得奏效,但Z模式有助于带来一些秩序,导致布局的简化(还有转化率的上升)。牢记以下几则要点:

背景——分离背景,让用户的视线停留在网站结构内。

1号点——这是你logo的最佳位置。

2号点——增加一个彩色的次要行动号召,有助于顺着Z模式引?#21152;?#25143;。

页面中央——页面中央的?#27807;?#36718;播图能把顶部与底部区域分离开,引导视线顺着Z模式流动。

3号点——增加图标,从此处开始,顺着横轴移动,能将用户引导至4号点的最终行动号召。

4号点——这里就是终点了,是你主要行动号召的最理想位置。

预测用户的视线如?#25105;?#21160;能带来巨大的优势。在页面上排布元素之前,通过优先级?#39029;?#26368;重要和最无关紧要的元素。一旦你知道要给用户看什么,将它们置于各种模式的“热点区”,创造正确的交互,简直易如反掌。

你甚至还能在整个页面中贯穿和?#30001;靂模式,如果你觉得在行动号召之前还有更多有价值的主张,可以重复运用1-4号点。

原作者:Chris Bank

翻译:IFEC译文团队、译者十萬個為什麼

相关阅读

Excel的筛选功能应用教你在大数据中筛选出需要的数据

今天我们来讲一下Excel的筛选功能,筛选功能可以在一大堆的数据中,按照某个条件筛选出?#27425;?#20204;想要的数据;比如一整个年级的考试成绩,筛

为什么你在网购时?#19981;?#20351;用手机?

手机对零售行业的深刻影响如今已不言而喻。在PC时代,海?#21487;?#21697;的呈现方式一般都是“大而全”,而在移动?#20309;?#26102;代就有所不同了。因为移

使用打印机打印网页时出现的脚本错误的办法

现在很多打印功能是通过调用java插件来实现的,如果java功能异常,就会导致网页打印的时候出现各种报错。如图所?#23613;?、检查浏览器jav

十大最不起眼的赚钱小生意?第四个最暴利?看看有没有你

俗话说得好,饿死胆小的,撑死胆大的。机会永远只会掌握在少数人的手中,面对赚钱很多人不是没有欲望,只是缺乏坚持的勇气,也有些人对很多

大学生暑期兼职,请?#20142;?#30524;睛哦

每年暑期都是大学生兼职找工作的高峰时期,越是高峰期,越要注意鉴别,否则容易上当受骗。7月底,暑假在家的小超想找份工作,就在网站上搜

分享到:

栏目导航

推荐阅读

?#35753;?#38405;读

25选7福利彩票2018056
江苏十一选五复式 排列三组三直选复式奖金是多少 快乐8彩票 网上五分彩是什么彩票 七星彩排列五走势图 甘肃十一选五最大遗漏 贵州11选5投注思维 新69棋牌 二分彩是骗局 彩票手机官方投注软件