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

人们怎样使用平板手机

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

平板手机的拇指热区

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

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

平板手机的界面布局

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

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

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

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

　　　　　　　　　　　　　　　　　　【图8】
　　　 Android的“通讯录”是一个典型的例子。用户可以直接点击Tab本身，也可以通过左右滑动操作来切换Tab。

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

　　　　　　　　　　　　　【图·9】
三星的单手模式可以将界面整体缩小至小屏手机的规格（左），而苹果的“触达性”则是将界面下移至拇指的控制范围内（右）。

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

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

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

用w3c读取xml 文件使用的jar包：xml-apis-1.0.b2.jar
public static void main(String[] args) throws ParserConfigurationException, SAXException, IOException {//得到DOM解析器的工厂实例DocumentBuilderFactory dbFactory = DocumentBuilderFactory.newInstance();//从DOM工厂中获得DOM解析器DocumentBuilder dbBuilder = d…...
2024/4/18 12:36:43
Java-九九加法表
package hello11;public class jaja {public static void main(String[] args) {for(int i=1;i<=9;i++) {for(int j=1;j<=i;j++) {int h=j+i;System.out.print(j+"+"+i+"="+h+"\t");}System.out.println("\t");}}}再来个别的pac…...
2024/4/14 0:43:48
揭开勒索软件的真面目
一、前言 2013年9月，戴尔公司的SecureWorks威胁应对部门（CTU）发现了一种名为“CryptoLocker”的勒索软件，它以邮件附件形式分发，感染计算机并加密近百种格式文件（包括电子表格、数据库、图片等），向用户勒索300美元或300欧元。据统计，仅在最初的100天时间内，该勒索软件…...
2024/4/18 10:59:46
Apache配置伪静态
dz论坛目录下.htaccess文件内容: 程序代码 # 将 RewriteEngine 模式打开 RewriteEngine On # 修改以下语句中的 /bbs 为你的论坛目录地址，如果程序放在根目录中，请将 /bbs 修改为 / RewriteBase /bbs # Rewrite 系统规则请勿修改 RewriteRule ^archiver/((fid|tid)-[/w/-]+/.…...
2024/4/12 23:08:28
linux常用网络测试命令
文章目录Pingtelnettraceroutewget Ping ping + IP(域名) ping 192.168.1.175telnet Telnet ip 端口Escape character is ‘^]’这个意思是ctrl键+]这个键，ctrl +] 可以进入telnet交互命令行 traceroute 路由跟踪命令traceroute 用法：traceroute 域名或IP。这条命令可以进行路…...
2024/4/12 23:07:58
浅析WPhone、Android的Back与Home键
Back　　在导航页面的制作方面，WPhone比Android在开发过程中体现地更加人性化，微软的API中有一个Go Back方法，能够使你回到之前的界面，即Back堆栈中的最新条目。如果Back堆栈中没有任何条目，则此方法将引发异常，所以在调用此方法前，始终都要检查 Can Go Forward。而Andr…...
2024/4/12 23:08:03
IOS学习之响应设备的横竖屏状态，旋转界面达到横竖屏效果
监听 UIDeviceOrientationDidChangeNotification的广播，再根据[[UIDevice currentDevice] orientation]获取到屏幕的方向。-(void) viewDidLoad {// Request to turn on accelerometer and begin receiving accelerometer events[[UIDevice currentDevice] beginGeneratingDev…...
2024/4/16 21:20:52
python中使用join()方法对各种数据类型中元的素进行合并拼接
"连接符".join(列表或元组或字符串或字典)返回的是一个使用连接符进行拼接的字符串如果对象是列表,元组,就是以一个下标元素为单位进行拼接如果对象是字符串,就是一个单词元素为单位进行拼接如果对象是字典,就是以一个键为单位进行拼接列表In [4]: a = ["12…...
2024/4/12 23:08:08
二级目录的 URL重写
RewriteEngine onRewriteBase /newadmin/RewriteCond $1 !^(static|upload|index\.php)RewriteRule ([^/]+)(.*)$ /newadmin/index.php?%{QUERY_STRING} [L]1.RewriteBase要写准确这将影响所有的Cond 以及 Rule的前部注意,与Rule的后部无关2.Wamp 2.0以上版本(不包括 2.0…...
2024/4/5 1:28:51
u-boot中网络命令 ---- dhcp命令
[u-boot: v2012.04] [Author: Bo Shen <voice.shen@gmail.com>]在平时使用u-boot通过网络下载linux内核，我们的通常做法是手动设置serverip，ipaddr，然后通tftpboot命令把linux内核下载到指定地址，最后通过bootm命令来启动linux内核。其实，这一切都可以通过u-boo…...
2024/4/28 10:00:21
Nagios 服务端简单安装
Nagios 服务端安装第一步：修改YUM源码cd /etc/yum.repos.d/wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo第二步：调整字符集echo export LC_ALL=C>> /etc/profilesource /etc/profileecho $LC_ALL第三部：关闭防火墙/etc/i…...
2024/4/12 23:07:58
ListView+Adapter适配器的使用与Listview常见的UI显示问题
一.ListView的事件：1.setOnItemClickListener()点击事件　　　　　listview.setOnItemClickListener(new OnItemClickListener() {@Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) {Toast…...
2024/4/12 23:07:58
dynamic、object、var 之间的区别
dynamic .net 4.0 动态类型ExpandoObject 应用dynamic Customer = new ExpandoObject(); Customer.Name = "Name001"; Customer.Age = 12; Console.WriteLine(Customer.Name + Customer.Age); 可实现不同类型之间的连接 s…...
2024/4/13 8:16:50
.htaccess问题
1.项目在当前目录下的一个文件夹test ############################################ ## you can put here your magento root folder ## path relative to web rootRewriteBase /test/############################################2.网站视频播放 ##########################…...
2024/4/16 2:18:32
Windows下CMD常用命令符的基本操作（包括Linux常用指令）【科普贴】
目录1. 打开CMD窗口2. 命令(1)切换盘符(2)切换目录（cd）(3)清除当前屏幕显示（cls）(4)查看文件（dir）(5)`删除文件（rm-rf*）`(6)查看网络是否通畅（ping）(7)查看网络链接状态(netstat)(8)查看当前电脑的IP信息（ipconfig）(9)查看当前电脑信息（systeminfo）(10)创建文件…...
2024/4/18 0:52:05
android适配器Adapter
一.什么是适配器,适配器有什么用？适配器是AdapterView视图（如ListView - 列表视图控件、Gallery - 缩略图浏览器控件、GridView - 网格控件、Spinner - 下拉列表控件、AutoCompleteTextView - 自动提示文本框、ExpandableListView - 支持展开/收缩功能的列表控件等）与数据之…...
2024/4/8 21:10:13
Goddady下Magento URL重写问题
对于使用Godaddy的主机来说，Magento的设置比较特殊。.htaccess文件里面也有专门设置godday的代码 ############################################ ## GoDaddy specific optionsOptions -MultiViews ## you might also need to add this line to php.ini ## cgi.fix_pathin…...
2024/4/12 23:09:14
社会工程学——基础与认知建立
社会工程学（Social Engineering）在上世纪60年代左右作为正式的学科出现，广义社会工程学的定义是：建立理论并通过利用自然的、社会的和制度上的途径来逐步地解决各种复杂的社会问题。世界第一黑客凯文米特尼克在《欺骗的艺术》中曾提到，人为因素才是安全的软肋。很多企业、…...
2024/4/20 17:01:11
IOS学习动画一之 UIKit动画
IOS的普通动画可使用UIKit提供的动画方式；复杂动画可使用Core Animation。1、通过动画上下文使用UIKit动画-(void)animationOfUIKit { UIView *redView=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)]; [self.view addSubview:redView]; //开始…...
2024/4/12 23:09:09
c++ 实现“实时”读取不断有增量写入的文本文件
啥也别说，先上代码/** File: readuntil.cpp* Author: @肖武 <tsxw24@gmail.com>** Created on 2013年8月30日, 上午10:44*/ #include <iostream> #include <fstream> #include <string> #include <unistd.h> #include <ctime> #include…...
2024/4/8 21:10:09

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

人们怎样使用平板手机

平板手机的拇指热区

平板手机的界面布局

相关文章

最新文章