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

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧

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

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

Fitts' Law

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

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

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

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

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

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

osx vs. windows scrollbars

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

费茨法则在桌面中的应用

尺寸和距离

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

边缘

边角

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

顶部和底部

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

菜单

弹出菜单

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

环形菜单

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

费茨法则和移动界面设计

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

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

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

拇指热区

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

费茨法则和手机

屏幕竖直

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

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

屏幕水平

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

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

一手握住,一手点击

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

费茨法则和平板

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

竖直方向

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

水平方向

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

倚靠模式

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

无缝转换

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

结论

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

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

原文地址:tutsplus
优设网翻译:@MartinRGB

转载请注明:114教程网



浅谈极简主义设计
0 点击  / 0 评论
在移动界面设计中应用费茨法则
0 点击  / 0 评论
小而美的交互细节
0 点击  / 0 评论
ios7视觉/交互设计测试讲解(邵飞设
0 点击  / 0 评论
如何打造成功的电商APP应用
0 点击  / 0 评论
那些不务正业的品牌Apps
0 点击  / 0 评论
锦上添花:让图示穿上颜色说说话
0 点击  / 0 评论
圆形风格的移动应用手机界面设计实
0 点击  / 0 评论
高手之路:浅谈多终端产品视觉一致性
0 点击  / 0 评论
五条法则,帮你打造典型扁平化产品
0 点击  / 0 评论
APP用户体验之通过设计让APP变快的
0 点击  / 0 评论
设计师最需要的5种营养补充
0 点击  / 0 评论
最美APP的9条闪光定律
0 点击  / 0 评论
不要让“合理性”成为阻碍设计前行
0 点击  / 0 评论
如何开发出完美的App
0 点击  / 0 评论
相关文章:


3大速成法则帮你轻松搞定极简主义网站!  刘兵克字体设计经验分享-我的字体法则01(字  网页设计中的分割法则(设计师必须知道的网页  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014