【UI交互设计】菲茨定律在UI中的应用

用户头像
北京/UI设计师/2年前/314浏览
【UI交互设计】菲茨定律在UI中的应用
用好菲茨定律你的页面就成功了90%!
菲茨定律定义:
从一个起始位置移动到最终目标点所需的时间由两个参数来决定,到目标距离(D)和目标的大小(W),可以用数学公式表达为
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzNjQ=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
此处有2个参数条件:
距离(D):
既起始位置离目标位置距离越远,我们到达目标位置所花费的时间就越长。反之,离目标位置越近,我们所花费的时间就越短;
目标大小(S):
即目标面积越大,我们定位到目标的所花费的时间就越短。反之,目标面积越小,精准定位到目标上的时间就越长。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjM0MDg=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
在互联网的背景下,大而近的目标区域意味着用户需要耗费太大的精力即可轻易点击或者关注到目标,反之,小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下,让用户耗费时间和动作的操作,会使人产生负面的用户体验。
举个生活中一个开灯的例子:
汽车上的刹车踏板和油门踏板相距很近,并且刹车踏板的物理面积要比油门踏板大,这样可以使驾驶员能在相对最短的时间内把脚从油门踏板移动到刹车踏板上,从而最快最准确的触发刹车踏板,确保事故的发生率和减少事故的损伤。这也就是为什么右脚正确的姿势是脚跟始终在刹车踏板下,加速时,以脚跟为轴,脚掌向右旋转至油门位置并轻踩油门,目的都是为了在最短的时间、最自然的行为下,快速触发安全操作。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjM0MTI=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
菲茨定律应用:
目前菲茨定律通常被用来解释鼠标(PC端)和手势(移动端)在界面中的移动规律。因此我们在做用户体验设计的过程中,将可以通过控制界面元素的大小以及各元素之间相应的距离,来进行界面的布局,从而提高用户交互效率,进而提高用户体验。
01、合理控制元素的大小
正常来讲,元素越大用户越容易点击,所用交互时间越短,效率越高。但是我们通常所见的系统界面(手机、电脑、ipad等)中,屏幕大小是一定的,界面的分辨率是存在固定值(上限极值),所以大小是相对制衡的,所以在系统界面中存在多个元素的时候,要根据具体情景和需求制定合理的大小(包括肉眼大小和实际热区大小)。在iOS人机交互指南中也规定了最小点击热区为44*44px,所以一般图形的热区大小都要高于这个大小,才能便于点击。其他大小要根据功能需求进行制定。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzNzI=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzNzY=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzODA=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
02、控制元素间合理的相对距离
相对距离指的是在同一系统界面内,各个元素之间的距离。一般会通过研究用户在执行某一操作时的整个交互动作,然后把相互关联的操作手势/元素的相对距离缩小,从而减少用户在执行操作的交互时间。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzODQ=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzODg=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
03、特殊的绝对位置:屏幕边界
在系统界面中,往往最为较特殊的地方就是边界位置。因为不管光标如何无限向外移动,最终都无法超过显示屏的边界线。所以在这样的位置经常都会放置一些比较固定特殊的元素(菜单栏、按钮等),可使用户快速找到。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzOTI=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjMzOTY=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
04、逆向的交互行为:增加时间来达成业务目标
在某一些特殊交互行为场景中,通常会存在一些交互样式与用户目标相违背的场景。有些时候为了阻碍用户操作,往往会做出一些违反规则定律的行为。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjM0MDA=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
总结:
费茨定律在所有UI交互都是能够常用的一个基础交互设计原则,通常情况下我们在做交互设计的过程中,都会合理的控制各个元素的大小与相对距离来缩小交互时间,提升用户体验。
除非当遇到业务目标与用户目的相违背的时候,将会通过反向设计阻碍用户行为,达到起初的业务目标。
【UI交互设计】菲茨定律在UI中的应用(图ZMTQ2MjM0MDQ=) - 教程 - 站酷设计师是一颗李子原创素材 - 站酷ZCOOL
收藏
(图片均来自网络,侵权必删)
「只要每天都在进步,积累起来就会有无限可能」
4
举报
|
3
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】钱包icon
3D卡通UI界面图标可爱插画免扣素
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
我的钱包-UI界面设计-app
拟物风质感写实UI卡片合集源文件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】积分icon
钱包ui模板
UI通用设计素材1
【新年UI图标】体育icon
科技医疗透明柜UI界面设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
Security Camera UI kit
【新年UI图标】活动icon
【新年UI图标】秒杀icon
【新年UI图标】汽车icon
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册