触摸交互设计快速入门：手机篇

当拇指和食指的操作习惯还停留在桌面时代时，应该如何进行交互设计？交互设计师Josh Clark为你讲解在移动端触摸屏的交互设计中，设计师应该如何思考问题，应该怎样打造“手指交互友好型”界面。

伟大的移动端界面设计，要做的不仅仅是将视觉元素装进小小的屏幕中，还要考虑到交互问题。在触摸屏不断完善、市场占有率不断提高的背景下，越来越多的用户主用手指进行交互操作，关于手指的一些人机工程学，也应该作为设计的考量。新的交互形式，需要设计师不再局限于视觉和信息层级方向的设计，要把眼光放得长远，多多借鉴工业设计中人机交互的一些观点。触摸屏不仅仅是视觉交互，还包含了很多人机工程学的因素：用户在用手指操作时，感觉如何？

相关推荐：
《经验分享：APP设计中便捷的单手操作》
《优秀手机应用设计需要遵循的8大原则》
《网页与APP中那些优美的登陆表单》

拇指法则

针对触摸屏的设计需要深思熟虑，其中的一个问题便是：手指，通常在屏幕上的哪个部位进行操作？

例如，单手持握手机，除非你的手指天生长得特别特别长，一般你都会用拇指进行点击操作。因此，对于手机来说，为触摸进行交互设计，主要针对的就是拇指。

因为拇指，人类才具有具有精确的抓握能力，从而在进化中脱颖而出，成为智慧的物种，但在手机操作中，拇指的可控范围有限，缺乏灵活度。当然，如果你竭尽全力，拇指还是能够在整个屏幕上进行滑动操作的。但是在大屏手机上，拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。

将主要操作目标放在拇指的热区。例如，当用右手持握手机的时候，拇指的热区如下图所示，在左下角呈现一个弧形。

这就是为什么，工具栏和导航条一般都在手机界面的下边缘——这跟我们在桌面界面中的惯例截然相反。这正是由于拇指可控范围有限导致的，在触摸屏上的界面设计与传统惯例相反，导航条和主要操作目标被放到了底部。

针对屏幕底部，拇指的热区进行设计，解决了很多用户的问题。这比“左撇子”用户的问题更加重要。因为这个社会上，右撇子还是占据大多数的。而几乎每个用户在使用手机时，都有过“单手持握，拇指操作”的经历。（公交车上，一只手扶好栏杆，另一只手操作手机）

而屏幕底部的拇指法则，无论那只手进行操作，都适用。与此同时，它也给予设计师一些暗示：要怎样组织操作目标的视觉层级，以给予用户最便捷舒适的体验。例如，按iOS的设计惯例，一般把编辑按钮放在右上角，即明显，又能避免因为误碰而导致界面突然改变。

将控件打压置屏幕底部不仅仅关乎到拇指操作的舒适性，还关系到一个问题：如果放在上面，用手指操作时，会挡住阅读的视线。如果控件在底部，不管手怎么移动，至少不会挡住主要内容，从而给予清晰的视角。呈递内容的屏幕在上方，控制按键在下方。是不是感觉有一种很熟悉的感觉？没错，工业设计上很多经典产品也是这么布局的：iPod、计算器、老式手机，还有很多数不胜数的产品。

我，机器人

这条关于顶部/底部的设计规律很简单，也很实用。但不是所有按照其设计的产品都从其中收益：Android系统习惯将大量的控制元素塞到屏幕的下方。这些接近屏幕边缘的按钮大量拥挤在一起，再加上物理按键，手指非常不便于操作。Android为了将控件放到屏幕底部，不惜把搜索栏放到上方(下图）。这就是Android的主屏幕布局，非常失误。（这里想要说明的就是：其实设计规律依然有效，错误在于不合理的遵循设计规律，堆砌导致了空间布局问题）

（为了解决空间有限的问题）一定要避免在触摸交互界面中堆砌控件，尤其是底部区域。 不幸的是，这意味着安卓App不得不将控件放到屏幕的上方来避免拥挤问题。但也不理想：1.处于拇指热区之外。2.操作容易挡住视线。但总比原来的那种布局好，原来那种布局，对于手指肥胖的人来说，真是一场噩梦。

对于安卓来说，App导航栏和控件应该放在顶部。这和iPhone的惯例相反，因为iPhone只有一个Home按键，不会像Android，本身就有3个左右的物理按键，再加上屏幕底部界面中的控件，会很难以操作。iPhone上的Foursquare（右图），而Android上的Foursquare（左图）之所以这么设计，可不是偶然。

从某种角度上讲，这种反堆砌元素（为防止操作失误，提倡避免底部堆砌元素）似乎是“内容在上，控制在下”元素的对立。Android虽然有效的避免了元素的堆砌，减少了失误操作，但这种设计模式导致了前面提到过的问题：操作过程中，手会遮挡视线。

Web应用：在应用中进行应用

相似的，在移动端互联网中，反堆砌原则给互联网浏览带来了不便。网页以及网页应用，一般需要依托浏览器才能实现浏览。浏览器有自己的按钮和控件，而网页/网页应用 的界面中也有按钮和控件。如果你滑动屏幕，将网页中的导航栏滑动至屏幕底部，那么你会发现，附近还有浏览器的工具栏，这种界面元素冲突导致操作极其容易出现出错(见下图）。那就意味着，要尽量避免“网页的导航栏滑动到屏幕底部”现象的发生，这就需要我们将网站的工具栏放在顶部（部分指导准则中轻描淡写的写着：使用CSS代码position:fixed，就能实现固定，但殊不知，很多手机浏览器不支持此功能。）

Android的问题可不一样。Android的手机浏览器，也就是Chrome，将导航栏放到顶部依然不能解决它的问题，问题在于整体页面。因为Chorme的控件吃掉了大量的空间，用户在浏览过程中的体验非常不顺畅，有一种挤牙膏的感觉，再加上顶部导航栏，真让人窒息（见下图早期Chrome）。

因此，在《移动至上》中，Luke Wroblewski写到“当导航选项不再占据内容的空间，便是人机对话的开始”时间就是金钱，下载耗费流量，所以信息传递一定要快速直观（避免因为控件太多，占据大量空间，从而导致用户阅读速度下降）

不管这些问题，趋势依然是：网页浏览体验要以内容为主，并且将主要的导航栏限制在屏幕的底部。Wroblewski通过一种有效的设计模式解决了这一系列的问题，你可以在Ad Age移动版网站上看到，所有的导航元素被塞进一个菜单按钮，而菜单按钮在屏幕右上方。只需要敲击这个按钮，就会全屏弹出导航选项。仅仅需要锚链接就能跳转至页面底部进行浏览。

Wroblewski写到，这种方有几种优点：

“这种设计模式，用最少量的导航元素，占据最少量的空间，就能给予用户导航，让用户选择所需信息进行浏览，而且信息层级更少，仅仅需要简单的锚链接就能工作。无需购买昂贵的Javascrip，无需叠加层级，无需建立单独的导航页就能够实现——仅仅是锚链接，就能帮助用户跳至页面底部。这有点像HTML 0.”

“内容至上，控制处下”似乎只是一条简单的法则，但正如你所见，情况不同，我们也应该根据这条法则做出适当的调整。然后按需设计，让设计既能遵循这条法则，以保证用户的无障碍浏览（否则手依然会挡住视线），又能根据有限的空间进行布局，以保证页面不拥挤、不复杂。如果两全无法其美，也只能找个折中的办法了。

其实，移动端触摸屏的设计，本文提到的问题，通俗的讲，就是两个：

1.空间有限，元素过于拥挤会导致失误操作。
2.如果“控制”在上方，而“内容”在下方，用手操作的时候，会挡住视线，不方便阅读。

总结一下不同平台的设计模式：

1.iPhone中, 将 app 控件放到屏幕底部（内容至上）
2.Android中, app 控件放到屏幕顶部（空间有限）
3.对于网页app来说，全局导航放在整个页面的最底部（而不是屏幕的底部）

但是这些指导规则仅仅适用于手机；当在更大的触摸屏上，我们该如何进行交互设计？iPad上的游戏规则，再一次改变，我们下次再谈。

另：本文写于2012年，在一些技术细节上不免和今日有所差异，但一些原则性的论述是超越时间的。

谢谢观看!

作者：Josh Clark
翻译:@MartinRGB

本文由优设网原创翻译，转摘请注明优设网译文出处，谢谢各位小编。

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。
设计微博：拥有粉丝量61万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：