[译] Facebook Paper 手势之痛

更新:以前粗译有不实之处,现结合本身的理解做以校订。 - 2014.11.02php


Facebook 昨天发布了全新交互体验的阅读客户端 Paper,这能够说是自 Instagram 以后一系列平庸产品的突破之举。让不少人都认为,这可能就是手机交互将来的一瞥。segmentfault

但我并不这样认为。若是它是将来,那将是一种伤害,一种对人身体上的(physical)伤害。app

虽然 Paper 在内容浏览方式上是全新的,但当涉及到一些默认(基本的)交互时,要求立马就多了起来 —— 须要费很大劲来让手指以不天然的方式学习如何使用它。这样一直弯曲拇指来操做,可能会让它的重度用户在几年后开始使用关节炎药物(此处做调侃)。post


用弯曲的大拇指来操做

Paper 最大的问题就在于它可能最被叫好的功能:躯体(拇指)驱动在屏幕底部的惯性动做,让用户从一开始就主动不断地去寻找喜欢阅读的内容。但不妨仔细来看看,这是一个惯用右手的用户浏览 Paper 的故事列表时的手指动做:学习

thumb hook

这意味着,对于占用户中大约 90% 的右撇子,默认的操做方式会是一个钩形的大拇指,试着用这种手势连续操做 10 次,20 次,甚至 30 次。而后操做地更快些。spa

我不知道你是什么状况,反正我是不会让本身的手指作这样的连续动做。若是你用一只手使用 Paper 的话,它会让你十分频繁地重复这个手势,由于这是找到你值得一读的内容的惟一途径。ip

不少人不会在这点上深刻考虑,也许已经习惯了大拇指被诸如 Flappy Birds / Angry Birds / Mailbox 之类的应用强迫弯曲成这样来操做。但这是一个重大的演变,它已经打破了大拇指区的基本规则。get

“大拇指区”(THE "THUMB ZONE")

《Designing Mobile Interfaces》的做者 Steven Hoober 介绍说,大拇指区是“单手触摸操做最舒服的一片区域”。并且这其中有许多因素都在做用,他还发现大约有 49% 的用户习惯单手操做,而且基本只用大拇指。1产品

来具体点看看。Paper 只发布了 iOS 版本,因此这里只看 4 英寸的 iPhone 屏幕上的大拇指区:it

thumb zone

两个极端的“OW”区,右手手持很难触到;“STRETCH”区也是相对不太温馨的操做区域。接着再看。

Paper 和“大拇指区”

如今来看一下 Paper 覆盖拇指区的状况,你会发现这里有和栏目(Topic)选择步骤以及主导航(Topic 里阅读信息流)一样的问题。

paper swipe

你会发现 Paper 看起来像是正常的,大多数导航控件都在绿色覆盖区内(请看 “light is green, trap is clean” reference),这样应该是没问题的对吧?

不是的。

若是我想要尽快地看到尽量多的内容,会想着最大化个人触摸和划动范围,要作到这一点,我就得将拇指从手机的右侧,快速轻划到左侧,这意味着我必须让拇指钩着从红色的“Ow”区开始(至少也得是“STRETCH”区)。

middle swipe

固然我也能够停留在绿色区域,从中间开始划起,同时拇指不会变钩。但这样并不理想,手机上一个从中间向左划动的手势,会让 Paper 没法产生使人兴奋的物理动做,并且每次的操做手势决定划出来的新内容没有从红色区域开始获得的多。更糟的是,拇指覆盖了大部份内容,我必须作一个“涂抹”的动做才能看到持续不断的新内容。

解决拇指钩

要解决这个问题,只须要实现划的动做不是在严格的 X 或 Y 轴上(能够按照手指的天然弧度)。

好比:

img-5

它所须要仅仅是缩小分配给上面的主题(Topic)部分的空间,同时给下边的内容导航多分配 50 个像素的空间。这样实际上能够在支持它原有功能的同时,能够推进你去(更主动)阅读其中你认为有趣的内容。只须要很简单的50个像素的改变,便可:

  • 消除拇指钩,让用大拇指操做内容变得更天然

  • 更多的空间分配给内容浏览,将这一重要导航元素突出给用户

  • 更多的空间用于预览故事内容(照片和文字)


免费:下载“拇指区”模板

这里提供一份本身画的“拇指区”的截图副本,以供参考。

从 Dropbox 下载拇指区模版(包括草图文件和 JPG)。

即便如今的咱们每一个人都是这个新兴的移动应用世界的推进者,咱们仍是要时刻记住,天然、温馨的操做姿式不会改变(也不该改变)。我在这里批评 Facebook,同时也很高兴看到它的又一次创新。我也一样期待 Paper 发布以后移动应用产业的再次提高。


原文 FACEBOOK PAPER'S GESTURAL HELL
更多阅读 Facebook Paper 相关


  1. How Do Users Really Hold Mobile Devices?
相关文章
相关标签/搜索