作者：C7210
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
触类旁通：多终端时代的触屏界面设计试读：
前言
在过去的几十年间，我们几乎完全依赖鼠标和键盘来探索数字世界。我们在桌面的“塑料砖”之间穿梭，点击按钮，通过屏幕上的小箭头与软件界面互动。
时过境迁，现在我们已经可以将界面掌控于手中。智能手机的普及使数十亿人每日、全天沉浸在触屏世界中无法自拔，人们用手指戳戳点点，操控着屏幕上的内容。我们探索数字世界的方式彻底改变了：人与信息直接互动的体验模式成为主导，这就要求界面设计师掌握新的技巧并采取不同的视角。触摸操作使原本虚幻的设计有了身体的特征。有史以来第一次，作为设计师，我们要拷问自己：一项设计被拿在手里使用的感觉如何？
这些正是本书关注的重点。看看如今的世界，触屏已无处不在，从出租车和飞机的座椅，到大街上的自动贩卖机，更不用说我们口袋中的手机、背包里的平板电脑和腕上的手表。据统计，从2010年到2014年，近一半的美国人购买了平板电脑；其中，仅2011年，苹果卖出的iPad的数量就超过了其在过去28年里卖出的Mac电脑的总数（http://bkaprt.com/dft/00-01/，http://bkaprt.com/dft/00-02/）。此外，触屏也渗透到了桌面领域，配备了包括触屏在内的多种输入模式的混合型设备正在被越来越多的用户所青睐。
尽管触屏设备的浪潮汹涌澎湃，但多数网站的设计与实现方式却仍然固执地停留在键盘和鼠标主导的阶段。设计师们本该更早地将新理念与新技术付诸实践。几年前，响应式设计的出现给行业上了一课：网页的呈现不应局限于单一的输出形式（桌面屏幕）。现在，另一个发现是：网页的呈现也不应局限于单一的输入形式。当前，触控是一个交织了多种输入的复杂模式，包括键盘、鼠标、触控板，甚至图像、音频、体感设备等。错综复杂的技术环境要求我们必须从最基本的人机互动层面转变设计理念，而界面的响应式布局等只是这种转变的外在表现。为触屏而设计，我们需要考虑的远不止“将按钮设计得大一些，以便胖手指可以点击”这么简单。
本书将为这种转变提供助力，带你了解如何面向手机、平板手机、平板电脑及混合型设备等主流触屏平台进行交互设计。我们将一起探索怎样针对不同的软件环境进行设计，同时不会忽略在围绕触屏进行设计的时候怎样兼顾其他非触摸的输入模式。
面向触屏，我们需要重新思考、改造，甚至在必要的时候摒弃过去几十年里的一些传统设计模式。通过阅读本书，你将了解一些更加适用于新时期硬件生态的设计模式，包括潜力巨大的手势操作，以及有着微妙影响力的界面动效等，并能将其中一些共通的设计原则运用到本地App及网页设计的实践当中。
不妨做做热身，我们即将起航。1实体化界面
一家全球知名的科技公司推出了一款超赞的电话，它的工作方式与当时市面上其他的同类产品完全不同，外观也相当新颖、迷人，且不失科技感。几乎整个业界都对它自然、高效、有趣的操作方式赞赏有加。它很快便成了某种身份的象征，一开始仅有特定的一小部分人拥有，但随着时间的流逝，几乎达到了人手一部的程度。人们对它逐渐习以为常，甚至无法想象“电话”这种东西还能以任何其他的形式存在。
我指的是贝尔电话公司在1963年推出的按键式电话。
按键取代了拨盘，全新的界面形式走进了千家万户。如今，按键拨号对我们来说已经是再自然不过的交互方式了，但在当时，为了打造更快捷、更可信的拨号界面，贝尔的研究员们设计并测试了16种不同的按键布局（如图1.1所示）。“我们需要了解的重点，就在于不同的布局方式对用户拨号的速度、准确性及手法偏好可能会有怎样的影响，”研究员们如是说，“若加以一定的练习，拨号效率能否提升？用户拨号时的手法是否遵循着某种系统性的模式或规律？”（http://bkaprt.com/dft/01-01/）图1.1 贝尔的研究员们将16种按键布局分成了6组，每次测试其中的3种（编者注：I-A、IV-A、VI-A的按键布局相同，故计为1种）。
为了找出这个模式，他们把按键按照不同的布局排列，例如半月形、十字交叉形、对角线形、圆形甚至枪把形，最终选定了现在为人们熟知的网格形。为了提升拨号的速度及准确性，他们不断调整按键的尺寸和间距，甚至包括按键上的数字字体，以几分之一秒的效率提升为目标持续改进。他们向被测者了解键盘使用的舒适度，测试按键松紧度与拨号效率之间的关联，甚至对按键被按下时是否应该发出“咔嗒”声都进行了详尽的分析。
贝尔的研究员们关注的绝不仅仅是拨号键盘的视觉形式，他们更在意界面在实际应用场景中的表现。让时间快进到新世纪，虽然现在已经是由触屏和个人设备主宰的年代，但设计师们依然需要沿着前辈们在探索实体界面时所开辟的道路继续前行。数字与工业设计的融合
触屏设备上的那块玻璃板就是我们构筑人机互动界面的舞台。对于我们这些数字时代的设计师来说，为二维屏幕设计界面早已不是新鲜事了。不过与以往不同的是，触屏设计要兼顾手指的操作，并要求我们必须着重考虑界面（Pixels）在人们手中的感觉。
新的交互维度需要我们将视野扩展到传统的界面设计领域之外，尝试从其他设计学科中寻找相通之处，例如更擅长塑造实体互动行为的工业设计领域。在现实世界中，蹩脚的外形会令物品难以使用；而在数字领域，触屏界面设计的成功与否最终也会体现在用户将其拿在手中使用时的舒适度上。所以，与工业设计相仿，对触屏界面设计来说，手与设备之间的互动方式同样是关键所在，也是我们接下来将要关注的重点。
人们怎样使用触屏设备
人的手怎样与触屏设备互动？这个问题实际上是本书所有内容背后最为关键的要素，其答案可以为我们揭示出怎样的布局设计才更加高效和易用。常见的触屏设备分为多种类型，包括手机、平板手机、平板电脑及带有触屏的混合型笔记本电脑等，其中每一类都有各自不同的人机互动特征及相应的界面设计规则。
与此同时，这些设备在人机互动方面又存在一些共性，其中尤为突出的便是拇指在操作过程中均扮演着重要的角色。无论对手机还是平板电脑，人们在多数时候都是通过拇指进行触屏操作的。这一状况有助于我们深入探寻具备跨平台能力的设计原则。本章将对人们使用各类触屏设备的实际方式进行全面的研究，并以此为基础揭示“拇指原则”对触屏界面设计的重要意义。
手机无疑是我们在日常生活当中打交道最多的触屏设备。据统计，在我们每天醒着的时间中有20% 是对着这块小屏幕的，我们平均每天打开屏幕的次数有221次之多（http://bkaprt.com/dft/01-02/）。就让我们从这里出发，开始触屏设计的探索之旅吧。人们怎样使用手机
2013年，研究员Steven Hoober走上街头，对1300多名路人使用手机的方式进行了观察（http://bkaprt.com/dft/01-03/）。结果表明，人们使用手机的方式基本可以分为3类：单手持机操作，约占49%，比例最高；一只手持机，另一只手的拇指或食指进行操作，约占36%；余下的15% 基本都采用“黑莓祈祷者”的方式，即双手同时持机操作（如图1.2所示）。图1.2 人们使用手机的方式基本可以分为3类，而且时常会在这些方式之间切换。
这项研究同时也验证了一个我们很多人所共有的习惯：人们确实会根据情境的不同而频繁切换持机方式，以寻求最为便捷的操作姿态。我们会从单手切换为双手，或从左手切换至右手；有时我们会在忙于其他事情的同时无意识地在手机屏幕上戳戳点点，有时又会停下其他事情而将注意力全部集中到手机上。此外，还有不少人无论使用哪只手都可以非常灵活地操作手机。Hoober发现，虽然单手持机操作的人当中有90% 是右手习惯，但实际上使用右手持机的人只占单手持机总人数的66% 左右，这就意味着有很多人通过非惯用手操作手机，而惯用手则忙于其他事务，例如写字、泡咖啡、抱孩子，或是捧着一本关于触屏界面设计的书。
虽然会时常切换持机方式，但人们在多数时候显然更加钟情于单手持机操作，因此我们需要特别关注拇指的运用——单手持机时，拇指是唯一能够用来操作界面的手指。Hoober在研究当中还发现，即便切换为一手持机、另一手操作的姿态，很多人仍然会通过拇指进行触控。将这两类情况叠加起来，我们便可以得出一个非常明确的结论：对手机来说，75% 的触屏交互行为是由拇指驱动的（如图1.3所示）。图1.3 我们常说的“对手指友好的界面设计”，在多数情况下其实是指对拇指友好。
手机的拇指热区
虽然拇指看上去可以扫过手机屏幕的大部分区域（屏幕超大的平板手机除外），但实际上，拇指无须费力便可轻松触及的区域只占屏幕总面积的三分之一左右，大致位于屏幕下方与拇指相对的那一侧。如果是右手持机，那么拇指可以很自然地停靠在屏幕左下方的一个弧形区域当中，无须费力伸展或移动机身。对于双手同时持机操作来说也是如此，不过弧形区域会更大一些，这是因为拇指的运动范围变大了。
然而，轻松触及并不完全等同于精准操作。阿里巴巴的钱菲（音）通过研究发现，在拇指的舒适地带中，只有一个独立的扇形区域真正便于精准触控（http://bkaprt.com/dft/01-04/，需要订阅权限）。此外，对右手持机的用户来说，屏幕的右上角和右下角都是难以准确控制的区域（如图1.4所示）。
而对左手持机的用户来说，拇指热区便很自然地从屏幕左侧转到了右侧。不过，是左还是右的问题实际上并不十分关键，毕竟人们会在不同的情况下频繁切换持机手。当然，即便如此，专门针对一侧拇指进行的设计优化也势必会给另一只手的单手持机操作带来一定的负面影响。所以，较为理想的解决方案是将重要的功能元素集中放置在屏幕底部中央附近的区域，因为这里同时属于左手持机和右手持机两种情况的拇指热区。图1.4 单手持机时，左边的弧形区域对拇指最为友好，操作的舒适度和精准度最高。而对于四角的深色区域，则要尽可能敬而远之，如果必须加以利用，也建议将交互元素的尺寸放大，以便拇指进行操作。
相较于左手和右手的差异，纵向上的位置关系更值得重点关注。无论你使用哪只手，在屏幕底部的大部分区域进行操作都是比较舒适的，而屏幕上方的区域则需要尽力伸展拇指才能触及。这一问题在拥有超大屏幕的平板手机上尤为突出。人们怎样使用平板手机
iPhone出现之后的几年，手机屏幕的尺寸基本都保持在4英寸以下（以对角线计算），非常便于单手操作。然而，随着大屏手机不断涌入市场，到2014年年中，已经有将近三分之一的移动Web浏览量来自这些设备。大屏手机填补了传统触屏手机与平板电脑之间的空白地带，有些大屏手机的屏幕甚至达到7英寸之巨（如图1.5所示），因此也获得了一个略显蹩脚的绰号——平板手机。图1.5 三星的7英寸机型Galaxy W及同类大屏机型使手机与平板电脑之间的界线越发模糊。此照片由三星授权使用（http://bkaprt.com/dft/01-06/）。
这类设备虽然有着巨大的身形，但人们仍然会将其作为手机使用，前文中描述的3类持机方式在很多时候依然适用。不过，与小屏设备的情况不同，为了在如此巨大的屏幕上舞指自如，用户必须更加频繁地在不同的持机方式之间切换，而且在多数时间里需要双手同时参与。Hoober和Patti Shank在他们的另一项研究中发现，平板手机用户在将近70% 的操作时间里会同时使用两只手（http://bkaprt.com/dft/01-07/，需要订阅权限），其中一手持机、另一手食指操作的方式最为普遍，约占35%。不过即便如此，对平板手机来说，真正占据交互主导地位的却依然是拇指：在60% 的时间里，用户会通过拇指进行触屏操作，无论持机方式是单手还是双手（如图1.6所示）。图1.6 虽然就某一姿态而言，一手持机、另一手食指操作的方式占据的比例最高（35%），但包含拇指操作的所有持机方式的总和却达到了60%。
平板手机的拇指热区
由于拇指操作同样占据主导地位，所以对平板手机来说，拇指热区的重要程度与在小屏手机上的情况旗鼓相当。不同之处在于，平板手机用户会更加频繁地通过双手拇指同时进行操作。在这种情况下，拇指热区也会相应地分为两部分，分别位于屏幕下方的左右两侧，其中还会产生交集，而屏幕上方的广阔区域则是拇指在正常情况下难以触及的。不过，对设计师来说，需要优先考虑的仍然是拇指热区范围最小的持机方式，也就是单手持机操作。
其实这也正是我们的第一条拇指设计原则：无论对何种规格的触屏设备，都要优先考虑拇指热区最小、操作局限性最高的持机方式，这样才能确保人们在任何姿态下都能与界面进行正常的互动。因此，对平板手机而言，我们首先应该聚焦的仍是单手持机操作的情况。
这里有个挺有意思的现象：同是单手持机操作状态，平板手机上的拇指热区面积却比普通手机上的小。这是因为，在小屏规格范围内，无论屏幕尺寸如何变化，拇指热区基本都能保持相似的形状及位置，而一旦屏幕尺寸突破了某个临界值，人们通常需要将小指从屏幕下边缘移至机身背后，使其与另外三根手指一起托住手机才能保持稳定，但这种姿态会使拇指的活动范围及相应的热区面积变得比平时小（如图1.7所示）。图1.7 单手操作平板手机时，人们必须将除拇指之外的四根手指托在机身背后才能保持稳定，这就使拇指的活动范围及相应的热区面积变小了。
在单手状态下，平板手机的屏幕上方会有很大一部分区域处于拇指的控制范围之外。面对这种情况，人们在实践中也有对策，例如直接握住或托住机身中部靠上的位置，使拇指的控制区域得到变相的扩展（如图1.8所示）。我们稍后会对这种使用方式带来的影响进行讨论。图1.8 高位持机方式可以向上扩展拇指热区，但同时会使屏幕下方的更多区域脱离拇指的控制。平板电脑：屏幕更大，变数更多
相较于小屏手机和平板手机，平板电脑的情况更加复杂。更大的屏幕意味着更加多样的使用方式。虽然拇指原则依然适用，但即使对同一款平板设备来说，拇指热区也并非一成不变，具体的形状和位置取决于人们的站姿、坐姿等多方面因素。
站立使用平板电脑时，我们通常会用两只手同时拿住机身左右边缘靠上的位置（如果过于靠下，机身会由于自身的质量而后仰）。有些人还会像使用写字板那样，一只胳膊环抱机身，另一只手进行操作。不过，根据Hoober和Shank的研究，人们在更多的时候是坐着使用平板电脑的，其实际比例达到88%，而坐着使用手机的比例只有19%。当我们坐在桌前时，通常会用一只手拿住平板电脑侧边靠下的位置将其撑在桌上，同时用另一只手进行操作，而坐卧在沙发上时，我们则更习惯于将平板电脑立在自己的身上。此外，设备与眼睛之间的距离也会随着使用姿态的变化而有所不同，例如在站立使用时，我们会将平板电脑拿到距离眼睛较近的位置，而在坐卧时，距离则相对较远。在屏幕朝向方面，竖屏与横屏的使用比例约为60% 和40%。
屏幕越大，机身越重。根据Hoober和Shank的观察，人们在超过60% 的时间里会将平板电脑放在某件物体上使用。其中，40% 是平放在桌子或大腿这类表面相对水平的物体上，还有22% 是竖立放置。而7到8英寸的小尺寸平板电脑由于质量相对较轻，69% 的情况下人们会将其直接拿在手中。
无论是平放还是竖立，借助外物放置或支撑的使用方式使平板电脑在很多时候更像是传统的桌面设备或混合型设备的显示屏。对于后者，我们将在后文中专门讨论。
平板电脑的拇指热区
对于平板电脑，我们很难在不借助任何外物支持的情况下单手持机操作，所以我们将重点关注双手持机操作的情况。在这里，拇指又一次扮演了最为关键的交互角色。双手持机操作时，我们习惯于拿住平板电脑的左右两侧，即使上下位置会有一些偏差，但拇指通常还是会比较自然地停靠在中间靠上的区域。这就使操作屏幕两侧及顶部左右两端的区域比较容易（如图1.9所示），而操作屏幕顶部及底部中央的区域则要困难很多，尤其是底部，毕竟这里距离拇指习惯停靠的位置最远，而且在很多时候，底部的带状区域甚至是不可见的。想想看，在现实中，躺着使用平板电脑恐怕是最慵懒同时也是最舒服的姿势了，在这种情况下，屏幕底部区域很容易埋进被子或衣服的褶皱当中。
当然，在实际使用时，我们经常需要将手伸到屏幕中间的一大片区域进行操作。屏幕尺寸越大，手指移动的距离就越长。然而，与轻轻动手便能在全屏范围内移动的鼠标指针有所不同，要想让手指在屏幕上四处移动，人的整个臂膀都会被牵扯进来，相应地做出抬起、放下、前移和回撤等动作，时间稍长便会感到疲劳。不要让界面成为“健身工具”，要尽可能将高频功能元素集中放置在拇指的控制范围内，从而避免人们频繁移动手臂。图1.9 人们通常会拿住平板电脑的左右两侧进行操作，相应的拇指热区与手机上的也大为不同。混合型设备：带有键盘的触屏
如果单单增大屏幕尺寸就会带来如此多的变数，那么再给设备配上键盘的话，复杂度显然会进一步提升，人们的坐姿，包括手和臂膀的姿态，都会随着产品形态的变化而产生相应的调整。说起这类混合型设备，我们不得不提起Windows 8。
2012年，微软对Windows进行了大规模的改造，并将触控引入这款全世界普及率最高的操作系统。相应的，同时配备触屏及实体键盘的笔记本电脑应运而生，并很快涌入消费市场。设备生态再次发生改变，设计师也面临新的挑战。
从人机交互的层面来看，混合型设备的复杂之处就在于人们需要在键盘（包括触控板）和触屏之间频繁切换。在真正进入市场以前，很多人认为这种产品概念从人体工学的角度来看有些站不住脚：双手不停地在两种输入设备之间往返切换的操作方式过于费力，很容易使人患上一种被业界戏称为“大猩猩臂”的疲劳症。《少数派报告》和《钢铁侠》里的人机互动方式看上去固然炫酷，但在现实当中，有多少人能像钢铁侠那样长时间挥舞双臂来操作界面？“触屏不该被竖直放置？”史蒂夫·乔布斯在2010年的时候这样评价道：“虽然看上去不错，但用户很快就会感到疲劳，手臂会变得越发沉重。”（http://bkaprt.com/dft/01-08/）
不过，也有一些相关的研究告诉我们，这种顾虑在某种程度上可能是没有必要的。一份来自英特尔的报告显示，人们其实很容易接受在混合型设备上进行触屏操作的交互方式。人们使用触屏的时间比例达到了77%，远超键盘和鼠标（http://bkaprt.com/dft/01-09/）。参与测试的用户认为，虽然鼠标指针的可见性强，操作起来也更加精准和省力，但使用触屏的感觉更加直接，与界面之间的距离似乎更近了。在其他一些相关报告中，我们也能发现类似的较为感性的反馈。其中一份报告称，在浏览页面上的商品时，与传统的鼠标操作相比，人们似乎会对他们能够实际触摸到的内容产生更高的价值认同（http://bkaprt.com/dft/01-10/）。透过触屏，原本冷冰冰的数字化界面仿佛变成了有着温度与情感的实体。在本书后文讨论手势操作的时候，我们还将对这一话题进行更深入的探索。
不过，混合型设备上的触屏并不能彻底取代键鼠，它更像是某种辅助增强模式。“感觉像是一台有着附加功能的笔记本电脑”，一位参与测试的用户这样告诉英特尔的研究员。测试期间，人们大都可以比较轻松地在触屏、键盘、鼠标或触摸板之间切换，具体选择哪种方式则取决于当时的需求。然而，反复的切换操作并没有给人们的手臂造成严重的不适，原因在于他们很快就掌握了在不抬起手臂的情况下操作触屏的方法。John Whalen在研究中发现，人们在多数时候会让双臂停靠在键盘两侧，从而使双手可以很自然地在屏幕两侧靠下的区域操作触屏（http://bkaprt.com/dft/01-11/）。
混合型设备的拇指热区
双手停靠在屏幕底部两侧时的自然操作范围界定了混合型设备的拇指热区（如图1.10所示）。尽可能将高频交互元素放置在这两个区域中，使人们无须抬起手臂便可以轻松地通过拇指进行操作。图1.10 混合型设备的触屏拇指热区位于底部两侧（右），而使用食指进行操作时的热区正好相反（左）。
然而，双手控制屏幕底部两侧的方式并不是唯一的选择，一部分用户（尤其是新用户）会倾向于通过食指来更加自由地操作触屏。这会给设计师带来一些麻烦，因为相应的食指热区与前面一种情况下的拇指热区正好形成了互斥关系。对食指来说，屏幕中央靠上的一大片区域是最容易控制的，而边边角角的地方则要麻烦一些。
这样看来，针对双手拇指进行的设计优化会在一定程度上导致食指体验的折损，反之亦然。不过二者总要取其一，和其他类型的设备相仿，既然有相关的研究表明拇指依然占据着触屏操作的主导地位，那么选择哪种情况来重点关注便不言自明了。实际上，在经过一段时间的使用之后，那些食指用户也会自然而然地将双手停靠在屏幕两侧，从而转化为拇指用户（如图1.11所示）。图1.11 混合型设备的中高级用户更加青睐拇指操作，有时甚至不惜费力伸长拇指来触碰屏幕的中央区域。照片来自英特尔Free Press的Flickr相册（http://bkaprt.com/dft/01-12/，http://bkaprt.com/dft/01-13/）。
汇总下来，我们便可以发现各类触屏设备共有的交互特性：无论屏幕大小，拇指都是触屏操作最主要的驱动力。与其他手指相比，拇指在保持着较大控制范围的同时，给肢体带来的运动负荷却相对较小。实体易用性——这正是贝尔的研究员及众多工业设计师在考虑人机互动方式时重点关注的，也是触屏界面设计中的决定性因素。接下来，我们先了解一些对各类平台普遍适用的基本设计原则，然后分别对特定的设备类型进行讨论。触屏设备界面布局设计
关于人与主流触屏设备进行互动的常见方式，我们已经有了比较全面的了解。人的持机方式及相应的拇指热区分布可以告诉我们，对特定的设备类型来说怎样的界面布局方式才是最合理、最便于操作的。接下来，就让我们将这些认知转化为具体的设计指导思想吧！先来了解一些跨平台的通用基本设计原则。
拇指原则
对于前文介绍过的每一类触屏设备，拇指操作都占据着主导地位。所以，我们的第一条基本原则就非常明确了：尽可能将高频功能元素集中放置在拇指热区中。同时，对于哪些元素适合被布局在热区以外的问题，也要认真考虑。将一些相对敏感的交互元素，例如可能会对数据内容产生变更的功能控件，放置在热区以外，通过不便来换取安全。要记得，界面的布局方式不仅要满足高频操作对便捷性的需求，也要对那些可能造成破坏性后果的误操作进行防御。
除了要考虑手与触屏之间的互动方式是否舒适、便捷，我们还需要留意一个重要的问题——手会遮挡内容。
手会遮挡内容
到目前为止，我们的关注焦点一直集中在手上，但是在操作触屏界面的过程中，眼睛显然同样发挥着重要的作用。触屏设备无法提供实体般的触感反馈，我们在用手指戳戳点点的同时，必须时刻留意周围界面状态的变化。我在家的时候总会因为挡住家人的视线而让他们不爽，因此，我们在设计界面时也必须考虑内容可见性与手指位置之间的关系，否则不爽的将是用户。
内容在上，控件在下
留意一下身边及历史上那些经典的数字或机械设备，你会发现工业设计领域一条重要的基本设计原则：内容在上，控件在下。无论是计算器、仪表还是打字机，用于输出内容的组件永远位于操作区域的上方，因为只有这样才能避免内容被手遮挡（如图1.12所示）。图1.12 如果这些设备将内容载体放置在操作区域下方，那么用户的肢体在操作设备的同时势必会遮挡内容。
其实，过去数字界面的设计师无须过多担心这方面的问题，尤其是在桌面设备中，我们通常采用的方式正好相反，即工具、菜单或导航控件位于界面顶部，而用于呈现内容的区域则位于其下方。这样的布局不会造成太大的困扰，因为小小的鼠标指针遮挡的面积实在太有限了。但是，对于触屏设备来说就没有这么简单了，相对粗大的手指取代了相对细小的鼠标指针，手指本身也会时常进入屏幕区域，这些都极易遮挡内容。
不妨假设手指下方的控件会被完全遮挡，这就使我们必须重新思考交互元素自身的标识方式，以及怎样对触屏操作进行状态反馈。在键鼠设备上，我们习惯于使按钮在被点击时呈现出某种高亮状态，而在触屏设备中，被手指遮挡的交互元素即使样式发生变化，也没有实际意义，因为用户根本看不到。所以，在某些情况下，要考虑将状态反馈提示移出点击区域，例如放置在触摸点上方，如果交互元素中包含重要的文字信息，也要确保这些内容呈现在触摸点上方（如图1.13所示）。图1.13 多数触屏设备的键盘会将被点击的按键放大并显示在手指上方区域，帮助人们快速确认。
人的视线与人体工学结合起来的运作规律可以为触屏设计带来有效的指导，“内容在上，控件在下”就是其中最典型的设计原则之一。然而在实际应用中，设计原则的执行方式并非一成不变，屏幕规格与系统环境都是重要的影响因素。操作系统与浏览器都会以不同的方式争夺屏幕空间，设计师必须在特定的设备类型及系统框架中灵活应对。本章剩余的部分将逐一探索不同类型的触屏设备及系统平台对设计原则执行方式的影响。手机的界面布局
触屏交互打破了我们长久以来在桌面设备上所熟知的界面设计原则，对小屏设备来说更是如此。触屏手机上的导航及主要功能控件大都位于屏幕底部，以便拇指更加舒适、便捷地进行操作。同时，内容区域移至触摸点上方也尽可能避开了手指的遮挡。这种模式在iOS中尤其常见，Tab栏与工具栏的底部布局方式都是最典型的体现（如图1.14所示）。图1.14 为了便于拇指操作，iOS的工具栏被放置在界面底部。
不过正如我们前面提到的，不要忘记考虑哪些元素更适合被布局在拇指热区以外。iOS设计规范建议将“编辑”按钮放置在界面右上方的位置，但这里对拇指来说显然是不友好的，操作难度比较高（如图1.15所示）。然而，这样做的原因也是显而易见的：编辑功能会对数据产生影响。将这类控件放在难以操作的位置上，就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。图1.15 iPhone上的Twitter，“发推”按钮被远远地放置在界面右上角，而拇指热区则留给了Tab导航。这种布局使用户能够更方便地获取内容，同时可以尽量避免无意义的“发推”行为（看起来，似乎只有界面布局可以对欠考虑的低质量“发推”行为起到一定的限制作用，但是选择权仍在用户手里）。
不过，并非所有涉及数据变更的功能元素都要放置在远离拇指热区的位置。如果某个产品的主要功能流程确实涉及频繁的数据创建或变更，那么相应的控件理应放置在拇指热区中。毕竟，好的设计方案需要面向高频次的主要任务进行优化，使其更加高效、便捷。iPhone上的Swarm和Instagram便是典型的案例，它们将“签到”或“发照片”这样的核心功能直接放置在界面底部Tab栏的中间，无论用户使用左手还是右手，均可便捷地进行操作（如图1.16所示）。
这样看来，事情似乎不算太复杂。但是不要忘记，我们到目前为止只是在以iPhone为例。毕竟在iOS当中，一旦进入App环境，系统级的功能控件便会让位，设计师无须担心App的界面空间会被系统抢占。不过，到了其他平台，情况就不同了。图1.16 iPhone上的Swarm（左）和Instagram（右）将创建内容定义为产品的高频和主要功能，将其与导航元素一起放在拇指热区中。
为操作系统让路
一旦系统强行宣布界面空间的“领土主权”，设计师就只能让路。在这类系统中，看似简单的“内容在上，控件在下”原则，实践起来会略显复杂。
例如，在Android中，屏幕底部的系统导航栏使设计师必须更小心地处理这片区域。显然，Android系统自身就在遵循拇指原则，但是这种固化在拇指热区中的系统控件很容易与App的界面元素产生冲突。作为设计师，如果盲目遵守“内容在上，控件在下”的原则，最终便会使App内的控件与系统导航栏堆叠（如图1.17所示），这简直就是在变相引导用户进行误操作。图1.17 不要让App的控件与Android自身的系统导航栏产生堆叠。例如，Instagram这样的App（左），甚至Android系统首屏（右），在这方面似乎都存在一些问题，上下堆叠的布局方式很容易在拇指热区中造成认知混乱和误点击。
其实，界面任何位置上的控件堆叠现象都会带来问题。交互元素挤在同一片区域，根本不利于手指的精准触控，只是这种情况出现在屏幕底部会使问题进一步加剧而已。一方面，拇指热区便于操作的交互特性反而会提升误操作的可能性；另一方面，时常覆盖在屏幕上方的拇指也会给这个区域的界面可视性带来限制，使人们更加难以清楚地认知数量繁多且布局拥挤的交互元素的位置，进一步提升了误操作的可能性。
至于解决方案，看上去也只有为操作系统让路，尽可能将App的控件放置在顶部（如图1.18所示）。但是，这并非真正理想的方式，毕竟拇指很难触及顶部区域，即使尽力伸直手指，手的其他部分也会同时遮挡更多的内容。不过权衡利弊，这种不便仍然比元素在底部堆叠所造成的认知混乱和误操作更容易被人接受。如果一定要在“不便”和“出错”之间选择，那么前者似乎是更好的选项。图1.18 iOS版本的Facebook App以标准的方式将Tab导航放置在界面底部（左）；而在Android版本中，同样的导航位于内容上方（右），这是为了避免与系统导航栏产生冲突而脱离拇指热区，但同时也迫使原本位于顶部的“状态”、“照片”和“签到”功能下移到了内容所在的区域。
Android设计规范明确要求，对于小屏设备，要将App内的导航和功能控件放置在顶部区域。这与iOS的情况恰好相反。毕竟在iPhone中，唯一的“Home”键完全不会带来类似的冲突。Android设计规范向设计师推荐了操作栏（Action Bar）设计模式，这是一种始终位于屏幕顶部的标准导航控件。
所以，“内容在上，控件在下”的原则本身没有问题，只是在实践中必须首先考量“下”的位置是否已经被占用。对Android平台来说，系统级控件永远占据着这个位置，App必须为其让路。而在iOS中，App可以自由地使用全部界面空间——除非你在设计基于浏览器的Web App。
为浏览器让路
无论是普通网站还是Web App，都运行在浏览器之中。或者换一种说法，网站是运行在另一个App当中的App，而这个所谓的“另一个App”往往会带来很多麻烦。虽然不同的浏览器所做的基本工作大致相同，但它们呈现页面的方式却或多或少存在着一些差异，这一点会让设计师有些头痛。在触屏环境中，浏览器自身的界面布局方式又会使问题进一步复杂起来：顶部有一些控件，底部有一些控件，这些控件当中的一部分还会随着页面的滚动而反复消失又出现。
这些状况都会给面向触屏的网页设计带来很多难以防范的潜在问题。以iPhone的Safari为例，其自身的工具栏位于屏幕底部，如果像设计本地App那样将Web App的导航固定在界面底部，那么页面在实际呈现时，导航控件便会紧贴浏览器的工具栏，和工具栏一起堆叠在屏幕下方，这种情况和我们在前面探讨过的Android系统中的问题如出一辙。
此外，Safari和其他很多浏览器的底部工具栏还会在滚屏的时候自动隐藏，而当用户停止滚屏并点击屏幕底部区域的元素时，浏览器的工具栏又会自顾自地在底部出现。在这一瞬间，页面整体，包括用户想要点击的按钮在内，都会随着工具栏的出现而自动上移一段距离，非常灵敏地避开用户的操作，用户必须追着它再点击一次才行（如图1.19所示）。图1.19 在iOS的Safari里，点击底部区域时，原本收起的浏览器工具栏会自动出现，而页面本身连同用户想要点击的目标元素则会同时上升一段距离，以便给浏览器的工具栏留出位置。用户的第一次点击无效，必须将手指上移到目标元素所在的新位置并再次点击。
从这些问题出发，我们可以归纳出一些相关的设计原则。
不要将网页或Web App的导航控件固定在界面底部。实际上，实现技术中的问题也会变相促进这条设计原则的落实。一些设计师习惯使用CSS里的position:fixed将页面元素固定在某个位置，但是很多移动浏览器对这个属性的支持并不完美，呈现方式也很怪异。例如，在某些浏览器中，本该始终保持固定的元素时常会随着滚屏操作产生抖动，有些还会产生位移，然后突然回到所谓的固定位置。此外，还有一些浏览器根本不会对这条规则进行响应。不要让用户在访问页面的时候头晕眼花，在移动浏览器中使用底部固定导航的做法完全是个坏主意。
也不要将导航固定在页面顶部。将此类控件固定在页面的任何地方对触屏浏览器来说都不是个好主意，别忘了顶部空间同样已经被浏览器自身的控件占据。当然有人会问：手机屏幕正在变得越来越大，终归可以分出一部分空间放置页面自身的控件吧？
的确，一部分手机的屏幕已经变得很大了，但你不能否认世界上还有很多设备并没有这么大的显示空间，更不用说那些仍然拥有固化实体键盘的、屏幕比邮票大不了多少的手机了。我们不能假设所有的目标用户都拥有大屏手机。
而且，即使是大屏手机，在横屏状态下，界面高度也会极度缩减，留给页面的纵向展示空间相当有限。举个例子，在采用响应式技术之前，Barney’s的网站将Logo与导航栏固定在页面顶部。在多数手机的竖屏状态下浏览，效果尚可，然而一旦切换到横屏状态，内容部分几乎完全消失（如图1.20所示）。更糟的是，由于Logo和工具栏都是固定在顶部的，所以用户只能在剩下的狭长区域中浏览内容。操作区域和内容区域均如此狭小，Barney’s的旧版设计势必遭到淘汰。
进一步说，在小屏设备中，即使是会随着页面一起滚动的顶部导航栏也并非理想的设计。因为空间过于局促，所以对某些类型的页面来说，与其将位置留给导航控件，还不如直接将主要内容提上来。“很多移动版页面在体验上都不够理想……你总会先看到一长串导航菜单，而不是内容本身，”Luke Wroblewski在他的Mobile First（http://bkaprt.com/dft/01-14/）一书中写道，“在移动设备的典型情境中，时间资源是非常宝贵的，下载页面也是需要资费的，所以要尽可能让人们在最短的时间内获取他们所需的实际内容。”图1.20 Barney’s的旧版移动站点，横屏时的状态惨不忍睹，浏览器自身的导航栏和工具栏占据了太多的空间，将网页内容夹在了一个狭长的区域中（右）。
对于移动版本的网页，尽可能直接进入主题，并尝试将导航控件放置在页面下方的区域。注意，是页面下方，而非屏幕底部。如果将导航固定在页面的某个位置对移动设备而言不是理想的做法，那么最简单和直接的解决方案就是把它们放到页面中去。Wroblewski推荐了一种非常实用的设计模式，你可以在The Session的网站（http://bkaprt.com/dft/01-15/）看到实际范例：在小尺寸浏览器中打开页面，默认状态下看不到任何导航菜单，点击“下箭头”按钮后才会显示菜单（如图1.21所示）。
导航快速展开的形式看上去像是某种下拉菜单或浮层，而导航原本就位于页面底部，下拉按钮也只是一个锚点链接，点击之后页面便自动跳转到底部的菜单区域。此时，点击导航菜单底部的“上箭头”按钮，或者直接点击浏览器的“返回”按钮，都可以使页面回到顶部位置。这一切背后的HTML再简单不过了：
试读结束[说明：试读内容隐藏了图片]