为触控而设计-Design for touch

在西雅图举行的2013 An Event Apart活动里，Josh Clark发表了名为“为触控而设计”的演讲，分享了在当前日益扩大的设备种类环境下，如何思考为触控而做的设计是否符合人体工程学等观点。这里是我做的一部分笔记： 1. 回顾网页设计的历史，我们已经意识到在某些方面，我们正在做的事情是错误的：表格的布局、Web标准等等。触控操作也正预示着类似的转变。 2. 没人真正的在往Web中输入内容。我们不得不与手指、鼠标、键盘等“设备”抗争。 3. 触控操作已经不仅限于智能手机和平板电脑，每一个桌面主题的设计现在都必须支持触屏移动。 4. 网页设计一直被认为是一种视觉媒体，但如今，它不仅仅需要关心你的设计在屏幕上的每一个像素看起来如何，而是它看起来给人的感觉怎样。我们不再只是视觉设计师，同样也是工业设计师（译者注：此处可以理解为交互设计师）。 5. 在触摸屏上，有真正对于人体工程学的设计。触控是一种物理层面的交互：事物在你手中是怎样的感觉？所做的设计在你手里使用时是否行得通？

手机指南

• 1. 你有三种握手机的方法：1、单手握住手机，用一个拇指操作；2、双手握住手机，用一个拇指或其他手指操作；3、双手握住手机，用两个拇指操作。据调查，49%的人在户外使用手机时，用单手，一个拇指操作；当你算上使用两个拇指操作的人，这个比例到达了75%。
• 2. 拇指触控区域：即用单手，一个拇指操作时最舒服的操作区域。当使用Web端时，标准的导航操作在页面顶部，而现在，手机的底部成了放置重要操作更好的位置。
• 3. 内容在上，操作在下，这是当下设计软件时的交互设计惯例。我们不希望我们的手指在操作的时候挡住内容。
• 4. 不要太担心“左还是右？”的问题，重要的决定都是围绕着上和下来决定的。
• 5. 内容在上，操作在下已经是一个古老的交互模型了，你可以确保用户在进行任何操作时都不会遮挡内容。
• 6. 但是在Android上，系统的控制按钮在设备的底部，为了不和这些按钮冲突，Android会建议你将APP内的操作放在界面顶部，这意味着我们的手指会频繁遮挡住内容。
• 7. Web端所拥有的固定位置和高度限制，在手机浏览器的底部会更难定位。有的浏览器还在底部使用了自己的工具栏，再次压缩了空间。因此，在页面顶部添加锚链接，可以提供更快速的导航功能，取代页脚导航模式。
• 8. iOS apps：控制键在屏幕底部。Android apps：控制键在屏幕顶部。Web（手机浏览器）：控制键在页面底部。

平板指南

• 1. 同手机一样，握平板的姿势也是千奇百怪，但通常你握住的是它的两侧。
• 2. 在平板电脑上，同样存在着关于拇指操作的人体工程学。考虑使用屏幕顶部区域放置导航控制键，多多利用屏幕两侧和角落，将中心部分空出来。
• 3. 相对与顶部与底部来说，够到屏幕的两侧是成本最小的。
• 4. 如果你想通过底部放置的Scrubber控件平移来预览内容，也是可以有例外的。
• 5. 为大尺寸平板而设计：多多利用屏幕两侧和角落，将上中部空出来，用底部来查看画布中的效果。

触控本指南

• 1. 运行Windows8系统的可触控式笔记本，也开始进入市场了，这类设备要求能够在传统笔记本电脑上进行触控操作。
• 2. 在此类设备上，当同时支持触控与鼠标键盘操作的时候，触控是首选交互方式。
• 3. 为了避免“大猩猩手臂”问题（译者注：提起大猩猩手臂这个词，主要针对传统的台式电脑和笔记本终端，这些附带触屏功能的终端设备让我们使用者长时间抬着手臂在屏幕上划来划去，真的很累人。），人们通常会将屏幕拉到面前，然后在设备的边缘使用拇指进行操作。
• 4. 为了使拇指操作体验最优化，你也许会考虑将主要功能放置在屏幕的左侧。这里说的主要功能不是指主导航选项，而是使用频繁的操作。
• 5. 拇指在左侧控制关键内容的操作，比如分享。
• 6. 这种舒适的点击区域与传统的桌面系统相比有很大差异。
• 7. 通过屏幕大小来检测触摸屏是一个糟糕的方法，没有靠谱的方式来检测所有的设备。
• 8. CSS4 Media Queries提供了一个属性为coarse的指针，它允许人们基于触控交互而改变页面风格（译者注：eg：http://stuffandnonsense.co.uk/)
• 9. 由于我们不能可靠地知道所有设备上触屏的情况，因此所有的桌面主题设计不得不支持触屏移动。
• 10. 在你的界面里将悬停状态看做一个优化，而非决定性的元素（唯一可以将事情做好的方法）。

点击目标尺寸

• 1. 基于人类普遍的手指指尖点击面积，最理想的点击目标尺寸为7*7mm，CSS2.1定义了一个像素的大小为1/96英寸，因此7mm差不多就是30px。但是，由于动态的视图变换，事情远不止这么简单。
• 2. 像素点在动态的视图变换中也是变化的。算上这种变化，我们需要将30这个数值扩大至44，差不多是2.75em。
• 3. 苹果公司基本上运用44px规则来设计iOS设备上的原生应用。只要你在某一处用到44px的尺寸大小，那么在其他地方你可以用29px。这样就从生理上，呈现出一种视觉的和谐感。
• 4. 是的，你得考虑生理维度。不仅要为了手部去设计界面，还得使他们融合起来。
• 5. 当你遵循点击目标尺寸相关的指南时，你需要权衡它在设计中的比重。也就是说，你越少用到屏幕上的空间完成操作越好。在所有的设备上，特别是手机，逻辑清晰胜过一切。
• 6. 简单是好的，但别太过分，不要失去重要的复杂性。复杂性给了我们生命，给了我们界面的结构。人们不想要愚蠢的界面，他们只要简单的体验。
• 7. 在更大的屏幕上，人们都认为需要将空白部分填满，因此导致了界面出现不必要的混乱。
• 8. 在小屏幕上，次要的信息可以隐藏，使用渐进公开的原则揭示信息，因为它是必要的。渐进公开：通过逐步地显示来管理复杂的信息。
• 9. 当你能控制性能问题的时候，多余的点击并没有什么坏处。在手机上，我们应该更多的考虑多余的操作步骤所带来的厌恶感。只要一次点击是高质量的，能够保证信息传递的完整，那就不是多余的。
• 10. 需要留意的是，冗长的内容可能会在屏幕中晦涩地来回滚动，画布外的元素，能帮你解决这个问题。

触控之外

• 1. 最好的触控界面有时根本不需要你来“触控”，利用传感器和语音控制进行操作，是交互设计的发展趋势，这已经不再是技术上的问题，而是如何实现的问题了。
• 2. 未来几年针对设计的挑战，将是如何从单一输入方式扩展至多种输入并用的方式。
• 3. 数码已经越来越接近自然，而自然也变得越来越数字化。我们要如何让我们的界面更好的融入真实世界呢？

原文：

Design For Touch

by Luke Wroblewski