网页设计费茨法则的应用

网页设计费茨法则的应用

随着互联网的发展,现在的人们会花费更多的时间浏览网页、网站。然而网页上每一部分的大小,每一部分的长宽比,都是怎样的数值才能让用户获得更好的体验跟更精准的点击呢?有没有一种科学的依据呢?费茨法则就是一种科学的界定大小、长宽比的非常科学的法则。依据费茨法则,可以设计出拥有更好用户体验的网页。

一、费茨法则是什么

费茨法则(Time=a+blog2(D/S+1)),其中D是鼠标到达目标的距离,S是目标的宽度或者说是目标的尺寸,a代表设备的启停时间(截距),b代表设备的固有的固有速度(斜率)。费茨法则主要是为人机交互提供了一个度量的法则,每个目标的大小,距离屏幕的距离都提供了一个科学的依据。其实费茨法则已经运用在电脑操作的各方各面上,不仅仅是网页设计。一打开电脑,桌面上的图标的默认大小就是经过费茨法则设计过的,才能使用户在使用的时候既能快速又能准确的点击到客户想要点击的目标。

二、费茨法则的应用

费茨法则在生活中的方方面面都是在使用着的,例如汽车的设计。汽车的刹车和油门的大小就是经过费茨法则设计过的。在汽车上,刹车和油门的距离较近,并且刹车的大小比油门大一些,这就是运用了费茨法则进行的设计。刹车与油门距离较近,可以使得使用者能尽快的踩到想要踩到的目标,而刹车的大小较大可以使用户想要踩刹车时比较快速的踩到刹车,防止一些事故的发生。然而在游戏厅的赛车游戏中,刹车和油门的大小与正常车的大小成反比,也就是油门比较大,刹车比较小。这是因为在赛车游戏中,操作者更加需要快速踩到油门的时间比较多,需要踩刹车的时间比较小。而且操作者会希望比较快速的完成游戏,踩油门的几率十分高。在电脑操作系统上费茨法则的运用频率也是十分高的,例如windows系统和macintosh系统。非常大的一个差别就是macintosh系统的工具栏是始终在屏幕最顶端,而windows系统的工具栏是在标题栏的下方。事实表明,工具栏固定放在屏幕最顶端比放在工具栏下方更容易点击。当鼠标想要点击工具栏时,使用macintosh系统可以鼠标直接向上移,不用担心会因为移动的距离过于大而无法快速的点击目标,而使用windows系统时就需要斟酌一下鼠标移动的距离,不然就会因为移动的距离过大而错过目标。

三、费茨法则在网页设计中的应用

很多设计者其实在无意中都会运用费茨法则来进行设计。比如最经常用到的百度网站,它就会把一些经常用到的按钮比较集中的放在一起。同时,搜索引擎最重要的搜索框放在最中间,最醒目的地方,并且在让用户舒服的前提下让搜索框尽量的大一些,使用户能更快速更精准的点击到搜索框。微博也是一个很好的费茨法则的例子,还未登陆之前,重要的登录入口和一些活动页放在最顶端也是最醒目的地方,同时能吸引住还未注册的用户注册并同时进行广告宣传。登陆入口就在活动区域的右侧,能顺利且快速的找到并点击想要的目标,同时将登陆入口放在右边较醒目的位置能减少用户使用鼠标从当前位置到目标的路程距离。登陆进入后的页面,新微博占据了较大的空间位置。想新微博的用户能迅速准确的找到自己想要寻找的目标进行新微博的,不想新微博的用户可以运用滚轮进行浏览。在利用滚轮进行浏览时,微博的用户信息的大小就进行了一番设计。头像占据了一块比较大的距离,那是因为比起文字,大多数人更倾向于记忆图片。然后是用户的名称,用户名称也是使用的用户经常会点击的区域,所以用户名也是比较大的。相对来讲,点击微博时间的人数会少很多,所以在设计上,时间运用了比较小的字体,占据的位置也不是十分重要。微博内容有时会十分长且复杂,所以设计者在设计内容布局上比较注重文字的清晰程度,运用了和用户名相同的大小,但是更加清晰的文字来使用户更加清晰快速的获得想要获得的信息。费茨法则在网页中的应用多种多样,比较常见的就是运用在链接的点击区域上,例如登陆界面,用户名输入框的大小、长宽比,密码输入框的大小、长宽比,确认和注册按钮的长宽比,他们之间的距离,在页面中的位置都可以运用费茨法则来进行设计。费茨法则在网页设计中的应用是十分广泛的。虽然费茨法则的应用十分广泛且实用,但是也不必刻板的遵循费茨法则。有时,脱离了费茨法则定义的设计反而会使得网页更加生动有趣。费茨法则在网页设计中主要是给点击区域,文字,图片的大小和长宽比以及各种元素之间的距离给定了一个可以依靠的科学依据。让设计者们在设计时可以拥有一个站得住脚的科学依据。

四、结束语

本文主要就费茨法则的应用进行了讨论。经过本文的讨论可以发现,费茨法则是与我们生活息息相关的一条法则。不止是在小小的电脑屏幕上,只要是人类与机器的交互上就会或多或少的使用到费茨法则。只是某些时候费茨法则不应当是一个约束,只是将其当做一个可以合理解释为何这样设计、为何设计成这样的科学依据将能更好的理解与应用费茨法则。

作者:侯晓雨 单位:山东女子学院