最专业的八方代购网站源码!

资讯热点
经典好文!如何为拇指设计?

发布时间:2022-9-23 分类: 行业资讯

不久前,我与另一位同事就界面操作按钮的位置发生了争执,所以我想出了关于这个问题的进一步想法,我希望每个人都会受到启发。中国应该有学者研究过这类问题。如果有不同的意见,欢迎一起讨论。

本文结合国外实验研究,探讨设计师应该在手机界面的交互式设计中设计的思维 - 为拇指设计。

本文参考文献:巨大屏幕时代的大拇指

专为拇指设计

什么是为拇指设计的?简而言之,用户界面旨在为用户提供舒适的感觉,与我们的手指自然移动的弧线一致。然而,用户的操作非常复杂,我们将下意识地调整我们的保持装置的姿势以触摸显示器的不同可操作区域。我敢打赌,进入大屏幕时代之后,您将伸展手柄或调整角度,以便更容易到达不同的区域。

我们需要做一些思考。研究表明,大多数用户都采用以下方式抓握握手:以拇指底部为支点,在手机的右下角。

这个假设来自手机专家Steve Hoober的一项实验。共有1,333名参与者参加了这项研究。他观察到用户将使用以下三种手势进行手机操作:

单手操作:49%

单手支持,单手操作:36%

实践操作:15%

△用户如何使用手机

当然,上述数据来自大约60%的被观察者,大约40%的被观察者不操作手机屏幕,而是在说话,听音乐或观看视频。

在单手操作的情况下,使用右手和左手的比率:

右手拇指操作:67%

左拇指操作:33%

胡伯指出,左撇子人口约占总人口的10%,但观察到的左撇子使用者比例高于此。可能的原因是一些观察者在操作手机时仍在做其他事情,例如吸烟,骑自行车,喝咖啡,吃德国咖喱香肠等。

拇指区域

这里的拇指区域以热图的形式显示。它可以显示用拇指操作手机屏幕区域是多么容易。使用Hoober的发现,绘制拇指热图的最常见用法:

单手操作

右手拇指操作

拇指底部固定在手机的右下角

△iPhone6和iPhone6 Plus之间的Thumb热图比较

您会发现安全的绿色区域大致相似但不同。因为我们的拇指不会随着屏幕的大小而改变。

与iPhone 6相比,iPhone 6 Plus的OW区域(不可触摸的区域)显着增加。此外,iPhone 6 Plus的绿色舒适区的形状也不尽相同,因为当尺寸变大时握把手势会发生变化,并且用户使用小指来稳定手机。这段经历让我感到有些惊讶。

注意:我的拇指不能触摸整个屏幕,但你的手掌和拇指可能比我的大。每个人的条件可能不同。

如果手的位置发生变化,拇指的活动区域会如何变化?有时,您可以将手向上移动并将拇指底部固定在手机中间的垂直方向,以便更轻松地触摸屏幕的某些区域。如下图所示:

△拇指底部固定在手机垂直方向的中间位置。

图为iPhone 6 Plus可在大屏幕上触摸的自然区域。相比之下,iPhone 6上的自然区域较少。

辅助功能

事实上,Apple系统长期以来一直在考虑这个问题(从iOS 8开始)。通过点击主页按钮两次(不按主页按钮以显示正在运行的应用程序),iOS将整个屏幕区域向下移动,防止用户被动地改变手势以执行所需的操作。

以下是iPhone 6 Plus上拇指区热图和可访问性的示意图:

△苹果演示图片中拇指的位置位于绿色自然区域

另一个观察结果来自John Gruber:在可访问性方面,屏幕在6 Plus上移动的次数多于第6次,因为可访问区域比典型的拇指长度更合适(固定在拇指底部的右侧)下角的常见情况)。如下图所示:

总的来说,手机的尺寸往往相似,这是一件好事。但是,这也意味着我们不能简单地将5.5英寸屏幕用作小屏幕的放大版本。手势已经改变,您的用户界面需要更多考虑。因此,在真实场景中进行原型设计和执行用户测试更为重要。

个人总结

原始文本使用iPhone6和iPhone6 Plus作为研究对象,但随后的新系列iPhone看起来基本相同(显示和体型),因此结论仍可供参考。

值得注意的是,最近发布的iPhone X的实际尺寸在8到8 Plus之间,而X显示器是5.8英寸,尽管屏幕宽度与6,6S,7,8相同但高。超过145pt,高出约22%。因此,设计人员设计一个操作舒适的交互式界面更为重要。特别是在创新设计和更少界面操作元素的情况下,您可以考虑为拇指设计。

最后,让我们使用下面的简单案例让您更好地理解拇指:

图1是根据Apple的设计规范设计的。底部标签有五个标签。如果在不改变标签大小和位置的情况下将标签数量减少到三个,您会如何选择?图2还是图3?

根据拇指热区的上图,与图2的交互界面相比较。参照图2。图3更符合单手拇指的舒适操作。但是,在实际项目中,仍然需要通过用户测试进行验证,并且可能需要适当地调整标签的位置,而不是简单地删除额外的标签。

« 案例+策略201 8如何让您的圣诞营销与众不同? | 电子商务营销有针对性的力量阿里妈妈帮助细分市场反击 »