课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
随着互联网的不断发展,越来越多的人都在学习UI设计的相关技术知识等内容,而本文我们就通过案例分析来了解一下,UI设计菲茨定律的用法分析。
1、放大可点击元素的尺寸
大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离,并且再进行精细的调整才能选中,这样不仅难以点击、且需要花费更多的时间。
这里的大指按钮的实际大小、也就是点击热区的大小,包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮,四周大量留白。
而移动端设计里通常会扩展宽度,使用各种通栏按钮,使用户操作更加容易和快捷,可点击图标也会放大可点击区域。
适用边界:并不能无限的放大
大小给可用性带来的加成是有限制的,如果把一个很小的按钮放大,它会变得更易于点击;但是如果按钮尺寸已经足够大,那么再放大尺寸,也并不会提高可用性和用户操作效率。
2、减少移动的距离
依据菲茨定律所言,距离目标越近,用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离,来提高用户的使用效率和交互体验。
·减少绝对距离
因为移动端用户通常为单手操作,也就是大拇指为主要操作工具,在现在大屏手机泛滥的情况下,屏幕很多地方是单手无法触及的,所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。
3、相关元素靠近
相关的内容或者交互元素要彼此靠近,可以在视觉上增强他们之间的相关性认知;对于可交互元素还可以减少鼠标在它们之间移动所需要的时间和距离。这条和格式塔原理的亲密性原则是有共通性的。
4、屏幕的边缘和角落无限大
因为屏幕的边角有一个隐形的“结界”,可以阻止用户鼠标因为大幅移动而超出目标区域范围,因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落,而不用进一步微调。
所以屏幕的边角适合放置菜单栏、按钮这样的元素,不管箭头移动多远,终会停在屏幕的边缘并定位到菜单上。
适用边界:要综合考虑屏幕尺寸
使用MAC操作系统时,用户点击某个菜单所需的平均时间要比Windows上快0.4秒,因为MAC的菜单利用了“无限的边界”,而windows需要更仔细的选择。
如果再考虑到用户通常会自定义调整软件窗口的大小,并不都是全屏视图的话,我觉得菜单跟随软件窗口的处理反而更合适一些。
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销,赚更多好礼。