交互设计十大法则之费茨定律

用户头像
北京/UI设计师/10年前/4044浏览
交互设计十大法则之费茨定律
用户头像
bauhausm

如果你曾经为用户界面的问题与人争论过,你很可能已经听说过“费茨定律”。它的原理很简单:一个东西越大,离光标越近,它就越容易被点击上。

Fitts’ Law / 菲茨定律(费茨法则)


1、一句话描述:

任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。


2、定律内容:

从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(下图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。



                                     T = a + b log2(D/W+1)


T=移动设备所需时长;a,b是经验常量,D=设备起始位置和目标位置的距离;W=目标的宽度大小。


3、菲茨定律的启示:

① 按钮等可点击对象需要合理的大小尺寸。

② 屏幕的边和角很适合放置像菜单栏和按钮这样的元素,

③ 出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

④ 要让不常用或危险的UI元素难以被点击。


4、典型应用及案例:

例一、油门和刹车:增大目标大小、减小与目标的距离来提高效率。





例二、window和mac系统菜单设计:增大目标大小以缩短定位时间(边缘无限大)。

两大主流OS中又有非常好的案例:Mac OS X默认将底栏(Dock)放到了屏幕的最下方;这样的话底栏就变得“无限可选中”。


                              Mac OS X默认将底栏(Dock)放到了屏幕的最下方


在Windows中,开始菜单在屏幕的左下角,这个角落是“无限可选中”的,因为不管用户朝左下角方向做多大幅度的摆动,光标总是会停在开始菜单按钮的上方。


                                Windows7,开始菜单在屏幕的左下角


(另一个案例:QQ右上角吸附隐藏,光标移动到右上角弹出)


                                                     

                                         屏幕角落,W无限大



                                                                   

例三、用户拖拽想要删除的应用到顶部删除,顶部W无穷大,增加了用户操作效率和精准度。



                                        miui系统中的删除应用


例四、随着手机屏幕的越来越大,集中把功能放到用户的单手可操作区域中,也是减少用户操作距离,节约使用时间。




总结如下:

        1、我们想要更容易点击到控件,就应该放在屏幕的边缘或角落里。让常用的控件更大,更容易辨别。


        2、使用屏幕的边缘和角落让控件有效扩大。


        3、边缘之外的地方,也可以算作目标点的面积,这样一来,目标的面积就被无限的放大了,也更方便用户操作。

 

先写这样, 资料来源于网络,自己做了总结和分析,谢谢曾经共享的朋友们!谢谢。


30
举报
|
35
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
户外旅行飞机情侣假日出行
【新年UI图标】礼物/活动icon
【新年UI图标】旅行icon
我的钱包-UI界面设计-app
新拟态风格 UI设计组件库
UI界面 组件
【新年UI图标】活动icon
森系3D渐变流体抽象矢量UI背景图
钱包ui模板
UI通用设计素材1
【新年UI图标】钱包icon
3D渐变流体抽象矢量UI背景图
UI应用平面图标
【新年UI图标】美食icon
【新年UI图标】体育icon
UI 登录界面设计模板包
APP/小程序商业项目UI模板|99个高保真UI+79个原型
高级表盘系列UI源文件
【新年UI图标】汽车icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新能源APP应用UIKit
Security Camera UI kit
智能家居中心 简约 UI设计组件库
科技医疗透明柜UI界面设计
你可能喜欢
大家都在看
登录注册