大屏时代的生态变迁，看平板手机的拇指热键与界面布局

引言：曾几什么时候，无数大大小小的触屏设备仿佛泄闸的洪水通常涌入这个世界。面对突如其来的生态变迁，界面设计师们别无选择，只有在急流当中奋力学习游泳，才能让本身不至于被洪潮所吞没。本文带你了解如何面向平板手机的拇指热键与界面布局，为这种转变提供助力。 
本文选自《举一反三：多终端时代的触屏界面设计》。

人们怎样使用平板手机

　　iPhone出现以后的几年，手机屏幕的尺寸基本都保持在4英寸如下（以对角线计算），很是便于单手操做。然而，随着大屏手机不断涌入市场，到2014年年中，已经有将近三分之一的移动Web浏览量来自这些设备。大屏手机填补了传统触屏手机与平板电脑之间的空白地带，有些大屏手机的屏幕甚至达到7英寸之巨，所以也得到了一个略显蹩脚的绰号——平板手机。
　　 
　　　　　　　　　　　　
　　　　　　　　　　　　
　　这类设备虽然有着巨大的身形，但人们仍然会将其做为手机使用。不过，与小屏设备的状况不一样，为了在如此巨大的屏幕上舞指自如，用户必须更加频繁地在不一样的持机方式之间切换，并且在多数时间里须要双手同时参与。平板手机用户在将近70% 的操做时间里会同时使用两只手，其中一手持机、另外一手食指操做的方式最为广泛，约占35%。不过即使如此，对平板手机来讲，真正占据交互主导地位的却依然是拇指：在60% 的时间里，用户会经过拇指进行触屏操做，不管持机方式是单手仍是双手。
　　　　　　　　　　
虽然就某一姿态而言，一手持机、另外一手食指操做的方式占据的比例最高（35%），但包含拇指操做的全部持机方式的总和却达到了60%。

平板手机的拇指热区

　　因为拇指操做一样占据主导地位，因此对平板手机来讲，拇指热区的重要程度与在小屏手机上的状况旗鼓至关。不一样之处在于，平板手机用户会更加频繁地经过双手拇指同时进行操做。在这种状况下，拇指热区也会相应地分为两部分，分别位于屏幕下方的左右两侧，其中还会产生交集，而屏幕上方的广阔区域则是拇指在正常状况下难以触及的。不过，对设计师来讲，须要优先考虑的仍然是拇指热区范围最小的持机方式，也就是单手持机操做。 
其实这也正是咱们的第一条拇指设计原则：不管对何种规格的触屏设备，都要优先考虑拇指热区最小、操做局限性最高的持机方式，这样才能确保人们在任何姿态下都能与界面进行正常的互动。所以，对平板手机而言，咱们首先应该聚焦的还是单手持机操做的状况。
　　这里有个挺有意思的现象：同是单手持机操做状态，平板手机上的拇指热区面积却比普通手机上的小。这是由于，在小屏规格范围内，不管屏幕尺寸如何变化，拇指热区基本都能保持类似的形状及位置，而一旦屏幕尺寸突破了某个临界值，人们一般须要将小指从屏幕下边缘移至机身背后，使其与另外三根手指一块儿托住手机才能保持稳定，但这种姿态会使拇指的活动范围及相应的热区面积变得比平时小。
　　　　　　　　　　　　
单手操做平板手机时，人们必须将除拇指以外的四根手指托在机身背后才能保持稳定，这就使拇指的活动范围及相应的热区面积变小了。

　　在单手状态下，平板手机的屏幕上方会有很大一部分区域处于拇指的控制范围以外。面对这种状况，人们在实践中也有对策，例如直接握住或托住机身中部靠上的位置，使拇指的控制区域获得变相的扩展。 
　　　　　　　　　　　　　　　　　　　　　
　　　　　　　高位持机方式能够向上扩展拇指热区，但同时会使屏幕下方的更多区域脱离拇指的控制。

平板手机的界面布局

　　随着手机屏幕的增大，更多的界面元素被迫移出拇指热区，布局设计须要针对这一状况进行调整。尽管平板手机用户更习惯于根据不一样的状况主动调整持机方式，但做为设计师，咱们有义务去下降额外的费力度。不管对何种规格的触屏设备，都要优先考虑拇指热区最小、操做局限性最高的持机方式，这样才能确保人们在任何状态下都能与界面进行正常的互动。所以，对平板手机来讲，也要尽量将高频功能元素集中放置在单手操做的拇指热区当中。或许你还记得，同是在单手操做状态下，平板手机的拇指热区面积实际上比普通手机的更小，不过这二者的形状及位置相似，所以一些基本的设计原则也是相通的。
　　在平板手机上，仍然须要将导航及高频功能控件放置在屏幕底部。不管用户怎样持机，平板手机的屏幕顶部区域老是相对难以触及。因此，和在小屏手机中同样，咱们在这里仍然要强调“内容在上，控件在下”的原则，从而使高频交互元素尽量保持在拇指热区范围内，并避免内容被手指遮挡。不过，例外状况仍然来自Android。虽然根据Android设计规范的要求，咱们应该在小屏手机中将App的导航与功能控件放置在顶部，以免与底部的系统导航栏产生冲突，可是在大屏设备上，能够将一些高频控件从标准的Action Bar中移出，并放置到屏幕底部。其实这种分体式Action Bar模式最初是面向小屏设备设计的，但现在已被证实对大屏手机更为适用。 
　　　　　　　　　　　　
在默认状况下，Android的Action Bar会将全部的导航及功能选项整合到界面顶部（左），而分体式Action Bar则会将一些重要功能放到屏幕底部，使其更便于被拇指点击（右）。 
　　

　　然而，适用并不等同于理想。在Android中，将交互元素堆叠在屏幕底部的作法确实容易增长误操做的可能性，这是客观事实。可是，鉴于平板手机巨大的屏幕尺寸，单手状态下又难以触及屏幕顶部区域，因此权衡下来，将一部分控件移到底部的作法仍是合理的，哪怕要冒必定的风险，也至少可让人们在单手操做的时候可以轻松点击。咱们在前文中提到过，系统平台复杂的环境特性须要设计师不断进行各类权衡与妥协。在犹豫不定时，要记得“两害相权取其轻”的原则——一方面是误操做的可能性增大，另外一方面是没法操做，在这种局面下前者显然更有利。 
　　此外，悬浮按钮也是很实用的设计模式。这类按钮一般位于界面右下角，悬浮于内容之上。能够经过这种方式将App全局或当前界面中最重要的功能提供给用户，例如发表照片或签到、发消息等。点击以后将悬浮按钮变形为横向工具栏或辐射菜单也是不错的交互模式。

　　　　　　　　　　　 
　　与分体式Action Bar模式相似，位于屏幕底部的、有可能致使误操做的悬浮按钮一样体现着妥协的初衷。不过毕竟单一按钮的尺寸较小，不会像在系统导航栏上堆叠一层工具栏那样带来很大的影响。在Android的UI体系当中，这种悬浮按钮称为“FAB”（Floating Action Button）。读者有兴趣的话不妨阅读Android设计规范（http://bkaprt.com/dft/01-16/），进行更加深刻的了解。

　　　　　　　　　　　　　　　　　
　　能够经过屏幕底部的悬浮按钮触发更多功能，同时避免与Android的系统导航栏产生大范围的冲突。
　　 
　　此外，也能够尝试将控件放置在顶部，但使其可以响应某种做用于屏幕下方的辅助交互形式。例如，能够将Tab导航放在内容上方，但使其切换可以被内容区域的左右滑动手势控制，这也是一种变相的拇指友好模式。

　　　　　　　　　　　　　　　　　　
　　　 Android的“通信录”是一个典型的例子。用户能够直接点击Tab自己，也能够经过左右滑动操做来切换Tab。

　　这种模式一般适用于Tab导航。在小屏手机上，用户能够相对轻松地点击顶部Action Bar中的Tab；而在平板手机上，直接在内容区域左右滑动实现切换显然是最为便捷的。实际上，早已普及的下拉刷新模式也是相同的道理，用户没必要与界面远端的某个控件产生交互，只要直接在内容上进行手势操做便可。 
　　对于移动版本的网页，仍然建议使用前文中介绍过的锚点连接导航模式。咱们在小屏设备上遇到的诸如CSS兼容性局限或页面元素与浏览器自身布局冲突等一系列问题，在平板手机中依然存在。诚然，将锚点连接放置在顶部的作法算不上对拇指友好，但综合考虑，这个因素在浏览器环境中的重要性就没有那么高了。我总会在用户研究中观察到这样的现象：对移动设备上的网页，除非用户在主要内容区域实在没法找到本身须要的信息，不然他们几乎不会想起主导航。从这个角度讲，将导航菜单放置在主要内容的下方，让用户在最须要的时候可以用到，也是很是合理的作法，同时不会使拇指受苦。 
　　避免手指跨屏操做。多数人的拇指长度不够在平板手机上进行横跨屏幕的点击。在单手持机的状况下，不用说对角线，即使让右手拇指去点击位于屏幕左端的元素也是至关困难的。因此，要尽可能避免将重要的交互元素紧贴左右两侧边缘放置。在尺寸方面，要尽量使元素的宽度达到屏幕宽度的三分之一以上，最好能够接近屏幕宽度，从而最大程度下降拇指操做的费力度。 
　　不要随着屏幕的增大而放大手势操做的触发区域。以横滑展开菜单为例，在平板手机上，不要放大横滑所需的距离，别让用户必须在整个屏幕范围内使用手势才能达到触发效果。人们使用屏幕巨大的手机，不表明他们有着巨人般的手，手势应该围绕手指进行设计，而不是围绕屏幕。 
　　总体移动。界面中的多数元素是静态的，须要咱们本身伸手触及。咱们要去点击按钮，而按钮历来不会主动移到咱们手边。但事情也并不是彻底如此。三星为其Android平板手机创造了一种独特的单手操做模式（如图1.26所示），整个界面会缩小到普通小屏手机的尺寸，这样就使几乎全部的交互元素都能位于拇指热区当中了。实际上，这种模式至关于临时把大屏手机缩小了。虽然操做便捷了不少，但常常这样使用又显得很尴尬——既然大屏没法获得充分利用，当初何须要购买这样的设备呢？
　　iOS则采用了一种称为“触达性”的设计模式。连续两次轻触“Home”键，界面便会总体下移，从而使顶部元素进入拇指热区。当用户完成接下来的操做以后，界面便会自动上移至初始位置。这种模式使得界面顶部的元素更容易被单手拇指操做，在效果上等同于用户将本身的持机手上移。相比三星来讲，苹果的实现方式有一个显著的优势——将界面移位而非缩放，能够避免交互元素自己的尺寸或布局发生变化。

　　　　　　　　　　　　　 
三星的单手模式能够将界面总体缩小至小屏手机的规格（左），而苹果的“触达性”则是将界面下移至拇指的控制范围内（右）。

　　除了苹果与三星提供的这类系统级的解决方案之外，咱们还能够在本身的产品中采用相似的思路，例如经过滑动面板的形式来承载内容。与系统提供的上下移动界面的方式不一样，在App或网页内部，一种更具实践性的作法是在界面边缘放置某种“抽屉把手”，形如按钮或Tab，点击以后便可展开整个面板。 
　　
　　　　　　　　　　　　　　　
　　　　　　　TIME在其移动版页面侧边放置了一个“抽屉把手”，点击以后会展开一个完整的近期新闻面板。
　　 
　　在屏幕左右边缘放置的交互元素极可能处于平板手机的拇指热区以外，但不管怎样也比放置在顶部更加容易操做。你也能够为这种模式添加横滑展开的手势，只要不与界面总体的横滑回退效果产生冲突便可。整体上讲，功能控件位于屏幕左右边缘的模式更适用于双手拇指同时操做的状况，所以在平板电脑的界面中更为常见。

　　本文选自《举一反三：多终端时代的触屏界面设计》，点此连接可在博文视点官网查看此书。
　　　　　　　　　　　　　　　　　　　　
　　想及时得到更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。