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

触摸交互设计快速入门 ：手机篇 当拇指和食指的操作习惯还停留在桌面时 时 ，应该如何进行交互设计 ？交互设计师Josh Clark为 你讲解在移动端触摸屏的交互设计中 ，设计师应该如何思考问题 ，应该怎样打造“手指交互友好型” 界面。 伟大的移动端界面设计 ，要做的不仅仅是将视觉元素装进小小的屏幕中 ，还要考虑到交互问题。在 触摸屏不断完善、市场占有率不断提高的背景下 ，越来越多 的用户主用手指进行交互操作 ，关于手 指的一些人机工程学 ，也应该作为设计的考量。新的交互形式 ，需要设计师不再局限于视觉和信息 层级方向的设计 ，要把眼光 放得长远 ，多多借鉴工业设计中人机交互的一些观点。触摸屏不仅仅是 视觉交互 ，还包含了很多人机工程学的因素 ：用户在用手指操作时 ，感觉如何 ？ 拇指法则 针对触摸屏的设计需要深思熟虑 ，其中的一个问题便是 ：手指 ，通常在屏幕上的哪个部位进行操作 ？ 例如 ，单手持握手机 ，除非你的手指天生长得特别特别长 ，一般你都会用拇指进行点击操作。因此 ，对于手机来说 ，为触摸进行交互设计 ，主要针对的就是拇指。 因为拇指 ，人类才具有具有精确的抓握能力 ，从而在进化中脱颖而出 ，成为智慧的物种 ，但在手机 操作中 ，拇指的可控范围有限 ，缺乏灵活度。当然 ，如果你 竭尽全力 ，拇指还是能够在整个屏幕上 进行滑动操作的。但是在大屏手机上 ，拇指的可控范围还不到整个屏幕的三分之一——主要集中在 屏幕底部、与拇指相对的另 外一边。 将主要操作目标放在拇指的热区。例如 ，当用右手持握手机的时候 ，拇指的热区如下图所示 ，在左 下角呈现一个弧形。 这就是为什么 ，工具栏和导航条一般都在手机界面的下边缘——这跟我们在桌面界面中的惯例截然 相反。这正是由于拇指可控范围有限导致的 ，在触摸屏上的界面设计与传统惯例相反 ，导航条和主 要操作目标被放到了底部。 针对屏幕底部 ，拇指的热区进行设计 ，解决了很多用户的问题。这比“左撇子”用户的问题更加重要。 因为这个社会上 ，右撇子还是占据大多数的。而几乎每个用户在使用手机时 ，都有过“单手持握 ，拇 指操作”的经历。 （公交车上 ，一只手扶好栏杆 ，另一只手操作手机 ） 而屏幕底部的拇指法则 ，无论那只手进行操作 ，都适用。与此同时 ，它也给予设计师一些暗示 ：要 怎样组织操作目标的视觉层级 ，以给予用户最便捷舒适的体验。例如 ，按iO S的设计惯例 ，一般把 编辑按钮放在右上角 ，即明显 ，又能避免因为误碰而导致界面突然改变。 将控件打压置屏幕底部不仅仅关乎到拇指操作的舒适性 ，还关系到一个问题 ：如果放在上面 ，用手 指操作时 ，会挡住阅读的视线。如果控件在底部 ，不管手怎 么移动 ，至少不会挡住主要内容 ，从而 给予清晰的视角。呈递内容的屏幕在上方 ，控制按键在下方。是不是感觉有一种很熟悉的感觉 ？ 没错 ，工业设计上很多经典产 品也是这么布局的 ：iPod、计算器、老式手机 ，还有很多数不胜数的 产品。 我 ，机器人 这条关于顶部/底部的设计规律很简单 ，也很实用。但不是所有按照其设计的产品都从其中收益 ：A ndro id系统习惯将大量的控制元素塞到屏幕的下 方。这些接近屏幕边缘的按钮大量拥挤在一起 ，再加上物理按键 ，手指非常不便于操作。A ndro id为了将控件放到屏幕底部 ，不惜把搜索栏放到上 方(下 图 ）。这就是A ndro id的主屏幕布局 ，非常失误。 （这里想要说明的就是 ：其实设计规律依然 有效 ，错误在于不合理的遵循设计规律 ，堆砌导致了空间布局问 题 ） （为了解决空间有限的问题 ）一定要避免在触摸交互界面中堆砌控件 ，尤其是底部区域。 不幸的是 ，这意味着安卓A pp不得不将控件放到屏幕的上方来避 免拥挤问题。但也不理想 ：1.处于拇指热区 之外。2.操作容易挡住视线。但总比原来的那种布局好 ，原来那种布局 ，对于手指肥胖的人来说 ， 真是一场噩梦。 对于安卓来说 ，A pp导航栏和控件应该放在顶部。这和iPho ne的惯例相反 ，因为iPho ne只有一 个Ho me按键 ，不会像A ndro id ，本身 就有3个左右的物理按键 ，再加上屏幕底部界面中的控件 ，会 很难以操作。iPho ne上的Fo rsq are （右图 ），而A ndro id上的 Fo rsq are （左图 ）之所以这么 设计 ，可不是偶然。 从某种角度上讲 ，这种反堆砌元素 （为防止操作失误 ，提倡避免底部堆砌元素 ）似乎是“内容在上 ， 控制在下”元素的对立。A ndro id虽然有效的避免了元素的