2013向触控设计出发-Design for touch，移动界面设计知识点大全

今天阅读了《为触控而设计-Design for touch》这篇博文，学到了不少的知识点。特此转载过来与25学堂的同学们一起共勉！随着微信5.0 即将发布和移动互联网的快速发展。手机触屏设计越来越重要了。

不久前在西雅图举行的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. 在此类设