在移动界面设计中应用费茨法则

   在人机交互理论中,费茨法则是非常基本的准则。无论是桌面界面设计还是笔记本的界面设计,都要遵循这一定则,对于日益复杂的移动设备来说,这一法则是否依然适用?我们一起来探索一下。

  首先,来了解一下什么是费茨法则。Fitts法则最基本的观点就是任何时候,当一个人用鼠标来移动指针时,屏幕上的目标的某些特征会使得点击变得轻松或者困难。目标离的越远,到达就越是费劲。目标越小,就越难点中。


  从鼠标到达目标的时间可以用公式Time = a + b log2 ( D / S + 1 )来计算。

  其中:D:鼠标达到目标的距离;S:目标的宽度(尺寸)费茨法则为人机交互提供了一个度量的法则,从而也为我们设计人机交互界面提供了科学依据,也就是告诉我们怎样设计一个界面可以让用户比较容易使用,提高用户的操作体验。

  费茨法则最基本的理念便是,目标越小,越难以操作。

  我们拿Windows和Mac来做个对比:

  Windows的滚动条,向上箭头在上方,向下箭头在下方。这种设计更符合日常的心智模型,引导用户效果更加。

  而Mac的滚动条,向上箭头和向下箭头是贴在一起的,这是根据费茨法则而设计的,目的是让导航更加迅速。


  在用户体验设计中,必须要考虑到操作所耗费的时间,耗时太长,用户会感到不耐烦,因此需要研究费茨法则。所以,操作对象需要尽可能的大一点,这样操作起来毫不费力。

  费茨法则在桌面中的应用

  尺寸和距离

  尺寸和距离是交互设计中最常考虑到的两点,尤其是UI元素在与用户进行交互的时候。一般来说,按钮的尺寸和彼此距离都比较小,以便保证联系性。同时也要注意像”删除”、”退出”这种比较”危险”的按钮,应该尽可能的离一些经常使用的按钮远一点,避免误操作。


  边缘

  边角

  因为鼠标指针可以在边角停止,因此边缘的宽度可以被认为是无穷大的。用户在此处的操作可以很精确,因为鼠标很容易就能到达边缘。这就是为何Windows的开始菜单以及Mac的菜单都处于边角。


  顶部和底部

  因为屏幕有所限制,所以顶部和底部很容易就能到达。


  菜单

  弹出菜单

  弹出菜单会在光标附近显示,从而减少移动距离,减小移动时间。


  环形菜单


  弹出的环形菜单让选项之间联系更加紧密,更近距离。但是环形菜单为何不常见呢?因为首先设计起来不是很容易,其次没有得到普及。

  费茨法则和移动界面设计

  首先要分两种:一种是手机移动界面、另外一种是平板移动界面

  其次,持握方式、横竖屏也是关键。

  虽然移动设备主要为触控,但是费茨法则依然有效。跟桌面系统不一样,手指无所限制,不受边角以及屏幕四个边缘的限制。

  拇指热区

  我们可以根据拇指热区来研究拇指的移动范围,进而考虑到费茨法则的影响。

  费茨法则和手机

  屏幕竖直

  竖直屏幕相较水平屏幕在手机操作中更为常见,图中为拇指的热区(注意是右手拇指),然而拇指无法覆盖上边缘,这让费茨法则的应用出现了一些变数,也让整体操作不是那么的流畅、一体。


  所以,一些比较危险的操作对象(关闭、删除等等)应该放在热区之外,避免错误操作。高频使用的按钮放在哪里不用我多说了吧?

  屏幕水平

  一般用户用双手进行操作,热区出现如下变化


  屏幕中间的区域不是很易于操作,顶部的中央和底部的中央也是如此。

  一手握住,一手点击

  对于打字和游戏来说,这种持握方式不是很理想,但是手指操作范围更广。


  费茨法则和平板

  平板比较复杂,用户的身体姿势不同,持握方式也不尽相同,具体情况请自行想象。

  竖直方向

  在Josh Clark的”触摸设计”中指出,大部分人会握住平板左右两侧的中部。因此顶部的两个边角变为了操作热区。当然在输入的时候,很多人会握住平板左右两侧的底部。

  水平方向

  一般都是两手操作,不像竖直,还可以单手握住。要记住菜单和按钮尽量放在侧边,这样拇指操作起来方便。

  倚靠模式

  这种模式下,操作不受拇指热区限制,整体遵循费茨法则。


  无缝转换

  在实际应用中,用户会很随意的进行屏幕方向的转换。然而有些转换不是那么的流畅,我们需要更加无缝的转换,让界面更具”弹性”

  结论

  屏幕方向、持握方式,若想改善移动设备的用户体验,必须仔细研究这两点。费茨法则在移动设备中依然有效,但是要受到这两点的限制,情况更加复杂。

  科学的思考,细心的观察,打造更好的移动用户体验。

时间: 2024-09-08 05:38:54

在移动界面设计中应用费茨法则的相关文章

圆形元素在界面设计中的运用

  圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状.圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到.也正因为如此,在使用圆形元素设计界面时会有一些注意事项. 一.圆形头像 放眼望去,圆形头像已然占领了我们的手机.不妨看看下面举的这些例子,如下图所示. 从左到右依次是搜狗地图.QQ.Instagram.当然,还有很多其它的例子,就不一一列举啦.此刻,肯定有同学已经按耐不住要跳出来反驳了,微信和Facebook就不是圆形头像,不信你看下面两张图.

深聊界面设计中的动画原理

  这篇文章是关于变速过渡效果的,看似简单,但真正想让动画自然流畅,还需要深入了解动画的基本原理.今天我们将会逐步学习:基本概念.探讨加速减速,拆解缓冲曲线,最终学会运用到界面设计中. 你认为这两个球在做什么? 绿球弹跳很明显,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样.然而,红球感觉很机械,而绿球让人感觉它确实在弹跳.为什么我们会有这种感受上的差异呢? 答案是变速过渡效果(Easing). 1. 时间和空间位移 (Timing and Spacing) 首先

界面设计中的那些版式-图版篇

  这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧. 界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率.留白就是为了凸显层次.突出内容. 手持设备屏幕较小,决定了信息显示是有限的.用户有效接受信息并不与界面内提供的信息量成正比,有的时候提供的越多,用户反而真正接受的越少.妄想满屏都是信息是不可能的.用户越来越受不了满屏的信息了. 让用户接受该接受的有效信息,是关键. 在设计界面的时候,因为内容和页面都比较

网站界面设计中应该避免的六个错误

网站的界面设计是否精美决定着你的网站是不是足够吸引客户?很多设计师很迷茫,到底网站该重功能还是重设计,无法去满足所有用户的需求.下面小编为你总结了在网站界面设计中应该避免的六大错误,教你怎么留住客户. 避免程序太过复杂:必须使你的客户从打开网站到完成交易的整个过程都非常简单.安格瓦斯基表示,评估网站设计优劣时首先要站在顾客和浏览者的角度思考.从用户的角度出发,是作为一个网站最先应该考虑的.要让客户买得舒心才是最终目标. 避免全而不精:一个网站不可能面面俱到.仔细挑选要放上网的内容,精心组织,做到

移动界面设计中的渐变

  iOS7采用了色彩新鲜的渐变效果,老实说,每个设计师都应该掌握这种最简单的装饰技巧.而且渐变效果千变万化,好的渐变效果能够成就一款设计,而糟糕的渐变效果会毁了一款设计.渐变效果的好坏取决于"色彩调整"以及"整个主题的搭配度".除此之外,渐变效果还可以根据"流行色"来进行适度的调配.现在流行使用霓虹灯色彩般的渐变,让人感觉光鲜可鉴,再加上纤细简约的字体,线条简练的图标,整个界面将变得非常极简且高雅. 今天我们要探讨的可不是渐变,要探讨的是移动界

对称性交互—界面设计中的重点

对于界面设计,很多人都很好奇,实际上,在界面设计中,对称性的信息呈现方式非常普遍,信息等价并且均匀分布在规则的几何图形周边能带来和谐的比例与平衡.在交互设计过程中,让用户的操作流也以对称性的方式完成,我们称之为对称性交互(Symmetry of Interaction).比如iPhone手机的开关机过程,都是以如下流程进行: 开关机作为手机常用的一套相关操作,其设计思路也采纳了对称性交互原则,让两者遵循同样的流程进行,很容易理解和学习.事实上,大部分手机的开关机都是通过同一套流程或者同一个按键控

ios开发中storyboard界面设计中的约束功能

首先约束的设置菜单在打开storyboard界面的[Editor -> pin -> ...]菜单中,这里面有几个功能: 设置宽度,高度: 这个作用不明显 设置两个view之间横向和丛向的距离: 设置view到superview的上下左右的间距: 设置两个view等宽,等高: 我觉的第三个功能拿来做不同尺寸自适应非常好. 看一下设置的例子,例子中我们做了两个元素等高额的约束,但是发现1处有个红点剪头,而且2处结束线是橘色,说明这个约束没有设置完毕呢,设置完毕应该是蓝色的线条.那我们点击处的剪头

界面设计中的结构

构建界面视觉层级的元素有颜色的显著程度,图片.文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息.数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰.快捷.那么,如果进行结构设计呢? 结构设计---内容的分组使用线.框.背景色来分组 这是最常见的分组方式,在UI设计中历史悠久. 使用线来分组 使用框来分组 使用背景色分组 不管是线.框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉

界面设计中的结构设计

构建界面视觉层级的元素有颜色的显著程度,图片.文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息.数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰.快捷.那么,如果进行结构设计呢? 结构设计---内容的分组 使用线.框.背景色来分组 这是最常见的分组方式,在UI设计中历史悠久. 使用线来分组 使用框来分组 使用背景色分组 不管是线.框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视