分享

<font><font>如何设计大屏幕时代的大拇指 </font></font>

 啊哈小李 2017-05-25

经过多年的阻力,苹果iPhone 6公布上周正式发出了巨大屏幕时代的黎明。

它将会大大的崩溃成为存在。就在这个星期一,苹果公司宣布,他们在预订的开幕之日向手机销售了超过四百万的预订。只有一个晚上,他们去年卖掉了整个开放周末的iPhone5s和5c的几乎一半。

所以看起来就像3.5“和4”屏幕的yore将开始不可避免的下降很快。这意味着,我们熟悉的应用程序,响应式站点和移动优化的网页浏览方式,我们已经考虑到旧的方式,有一些学习(包括我自己)。

衰落已经开始。Adobe的2014年移动基准报告声称,4“屏幕或更小的手机之间的移动浏览下降了11%。

这意味着学习如何设计拇指现在比以往任何时候都重要。幸运的是,它有助于这些手机显示尺寸实际上是通用的。一个粗略的检查是最热门的Android屏幕尺寸指向范围内的5.1”和5.7”

随着更小的屏幕尺寸消失,苹果的变化将使我们的生活更轻松。但只有当我们学会适应我们的设计。

如果没有,未来对于这些大拇指来说将是相当痛苦的。

这对于那些只在构建iOS应用程序的用户而言尤其重要。所有我们认为我们从未担心过的这些设计权衡,突然就在我们面前 - 这是一场雪崩的预订。

苹果电视广告从2012年起就是“Thumb”。

设计大拇指?

设计拇指的意思是什么?这意味着构建在我们的拇指的自然,清扫弧中使用最舒适的界面。

但这很复杂。我们无意识地调整我们的手机方式,以达到屏幕各个方面的某些控制。在任何一天,我都会赌注你的手感,扼住手机,或者让它变得更容易到达困难的地方。

但我们必须从某个地方开始。研究表明,我们大多数人以下列方式持有我们的手机:拇指的底部位于右下角:

这一假设来自于移动专家Steve Hoober去年初与1,333人进行的研究。他发现人们以下列方式持有电话:

  • 一手:49%
  • 抱抱:36%
  • 双手:15%

手工数字也很有启发性:

  • 屏幕上的右手拇指:67%
  • 左侧拇指在屏幕上:33%

Hoober指出,人口中的左撇子数字约为10%。因此,观察到的左手使用率可能与同时进行其他事情的人相关 - 吸烟,骑自行车,喝咖啡,吃咖喱汁等。

由Luke Wroblewski创作

拇指区

拇指区是各种热图。这是一个很好的猜测,我们的大拇指轻松地点击手机屏幕上的区域。

让我们使用Hoober的研究来创建一个Thumb Zone地图,代表什么似乎是最常见的用例:

  • 单手使用
  • 右手拇指在屏幕上
  • 拇指固定在右下角

自2007年以来,这里是应用于每个iPhone显示屏尺寸的Thumb Zone热图:

这是一个比较直接的iPhone 6和iPhone 6 Plus之间的对比:

您会注意到,“安全”绿区保持大致相同(更多的是为什么iPhone 6 Plus在一秒钟内不同)。这是因为我们的大拇指不会随着屏幕大小而神奇地缩放。这也是不幸的,因为我像一个孩子一样爱着街头霸王 Dhalsim 。

但是,“Ow”空间的巨大变化是什么,这对iPhone 6 Plus来说是显而易见的。

此外,您会注意到iPhone 6 Plus的“自然”区域的形状如何变化。这是因为它需要一种不同的抓地力,因为它的大小,使用你的小指作为稳定器。令我感到惊讶的是,经验有多不同。

一个注释:我的拇指没有完全穿过手机的屏幕。也许你有比我更大的手。所以条款和条件肯定适用。

窒息

让我们分析当你转移你的握力时,拇指区如何改变。有时您可能会遇到这样一种情况,即在垂直中点用拇指的锚点轻松手机。

以下是iPhone 6和iPhone 6 Plus的操作说明:

请注意,由于iPhone 6 Plus的屏幕尺寸,iPhone 6 Plus实际上会获得自然拇指空间。相比之下,iPhone 6刚刚耗尽了房地产。

可达性

尽管如此,使用iOS 8的“可达性”功能可能不需要窒息。(也就是说,如果苹果有机会教人们关于它的存在)。通过双击主页按钮(与“点击”不一样显示正在运行的应用程序),iOS将把握屏幕的顶部。

以下是可达性的演示:


而这个功能可以通过iPhone 6 Plus上覆盖的Thumb Zone来实现。注意什么?

是的,苹果的演示图像放置拇指正好 “自然”区。

关于可达性的另一个观察结果,正如John Gruber所指出的那样:“6”的可达性使得显示的进一步下降,比六分之一更为显着,这就是将显示器的顶部移动到典型的拇指长度从设备的底部。“

这是在行动中:

这是什么意思?

移动屏幕尺寸总体上变得越来越相似,这是一件好事。但这也意味着我们不能仅仅将5.5“范围内的屏幕视为较小型手机的放大版本。抓握完全改变,并且您的界面也可能需要这样做。

我认为原型设计将变得更加重要。所以,如果你没有跳上那列火车,现在是时候了。(PS - 我下周将为设计师推出Xcode,其中教授设计师如何在不到一周的时间内在Xcode中构建交互式原型,这是一个完整的视频,并且拥有非常棒的预发行折扣。如果你有兴趣的话)

下载更新的Thumb区域模板

想要我为这些截图绘制的Thumb区域图的副本?你运气好 您可以在这里将其作为单独的JPG下载。

立即下载我的Thumb Zone模板

希望这有助于您当前的项目。如果你有任何价值,我会感激你分享它。您可以点击一下即可发布。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多