戴传庆 – 第57页 – 一名设计师，Pixfun.ai创始人

触摸点击区域

屏幕增大，可以显示更多的内容，但是使用触摸屏控件的密度不宜过大，否则不便点击。各个手机和PC操作系统都对可点击的区域都有推荐值：

iPhone：最小29×44px。

Windows Phone：推荐9mm/34px，最小7mm/26px，元素之间的距离最小7mm/26px，元素的可视区域是点击区域的60-100%。对于经常使用、会导致危险性操作（比如删除数据）的界面元素、在屏幕角落并且手指难以点击的元素和子任务中元素（比如拨号），推荐点击区域大于9mm。

Nokia：推荐不小于1cm(0.4″)的点击区域。最小值为：

食指点击7×7mm/1mm间距
拇指点击8×8mm/2mm间距
列表选项之间有5mm间距

Ubuntu：按钮和其他控件的大小取决于成人的手指（16mm-20mm）、手指肚（10mm-14mm）和指尖（8mm-10mm），推荐不小于1cm(0.4″)的点击区域。

（以上译自lukew＇s blog）

点击的区域是按照物理尺寸计算的，如果按照iPhone去类推其他触摸屏幕的可点区域w×t，假设该触摸屏的精度为d，计算公式是：w/d=29/164，t/d=44/164。（164是iPhone的屏幕精度）

Windows Phone对于危险性的控件建议是增大可点区域，我倒认为应该减小可点区域，对于没有危险性的控件可适当增大，保证元素之间的距离即可。比如手机界面中的“□记住密码”，一般是只有多选框“□”是可点区域，不妨将“记住密码”也包含在内，增加多选框的可点区域。

Swype是很好的触摸屏输入的解决方案，每分钟输入可以提高到50个字母。

输入时，手指不用抬起和按下，在屏幕上滑行即可，省掉一部分时间。
省去空格输入，每次滑行一次之后，字母后面默认有空格。
英文的猜词、纠正、匹配和修改。

Swype的算法是否利用折线的滑行输入会提高点击的准确率，可以更精准地选中的较小的点击区域呢？

iPhone VS Android 应用程序界面

iPhone和Android应用程序界面形式不同，而iPhone选择应用程序要易于Android。

如当前界面都为手机系统主界面，iPhone选择应用程序的操作为：

左右平移手势切换页面
查找到应用程序并点击

Android选择应用程序的操作为：

点击APPlication menu
上下平移手势滚动页面
查找到应用程序并点击

首先Android必须在触摸屏精准点击这个约40×40像素的显示区域，而iPhone可以直接开始查找功能。

Android的应用程序排列不分页，程序一多就记不住每个程序所在的确切位置，查找起来比较费力。而iPhone有分页，每页的功能的4×4的排列方式，现在手机上已经装了5页的应用程序，我能基本记住每个功能所在的确切位置，如第二页右上角是“植物大战僵尸”。

这些也影响到切换功能的操作。如已运行某个程序，iPhone切换应用程序的操作为：

按Home键，关闭程序返回进入应用程序的界面
左右平移手势切换页面（如果查找的应用程序已在当前界面，此步操作可省略）
查找到应用程序并点击

Android切换应用程序的操作为：

按Home键，关闭程序返回主界面
触摸屏精准点击APPlication menu，由物理按键切换到触摸屏
上下平移手势滚动页面
查找到应用程序并点击

iPhone最快可以2步运行新的应用程序，而Android却必须执行以上4步操作，操作的效率低于iPhone。

在应用程序中，iPhone有表视图、标签栏、工具栏和控件列表等标准组件，有利于组织信息、信息扁平化和操作流畅度，而Android的标准组件效果较差。

部分内容来源于lukew’s blog

避免输入

常有用户常抱怨iPhone的输入按键太小，难以点击，手机的输入速度一直是个难点。因此手机交互设计如要出现输入框，要重点考虑如何减少输入，提升用户操作的流畅度。另外，手机的显示能力有限，不能像网页那样提供大量的选项供用户选择，每个界面都必须提供最有价值的信息。

提供选项。对于用户经常输入的字符可以提炼为热门选项，便于用户选择。

比如使用手机购买数字点卡，对于购买量大的的热门点卡（魔兽和Q币等），QVGA（240*320像素）的手机可以提供10个选项。如用户已购买过某类商品时，可替换热门点卡的数据，采用购买记录和热门点卡相结合的方法。数字点卡属于用户重复消费的商品，而机票、电影票和图书不是重复消费的商品，如将此类购买记录放置在首页够用户选择就没有意义。

热门选项的必须够“热门”，如10个选项的点击率为30%，那就可以减少30%的用户输入，那就达到热门选项的目的。但是如热门选项的点击率不到10%，那对于手机有限的显示空间来说，这就是一种浪费。

选项过多则不便查找，还不如直接输入。

控件记忆性。将用户输入的字符记录在输入框中，iPhone的输入框可以加入“书签”功能，可以记住用户输入的所有字符。点击“书签”，进入table view或者自定义弹出框，显示的顺序按输入的时间顺序依次排列。

输入的数据要有个过滤的过程，对于无价值的输入字符不予保存。如手机充值功能中用户填写10位的手机号码，点击“充值”按钮，手机客户端提醒用户输入手机号码格式错误，此时这10位手机号码不应记录。

利用手机系统信息。手机的通讯录包含姓名、手机号码和地址等信息，在填写表格时可以调用这些信息。如当为朋友手机充值时，需通讯录中找到手机号码，然后背下来，打开程序找到手机充值功能再输入手机号码。如能调用手机的通讯录，点击手机号码输入框右边的图标，进入通讯录后选择好友的手机号码即可。

快速查找。iPhone的通讯录有按姓名首字母查找姓名的功能，便于从大量数据中搜索。如购买飞机票要搜索城市，可提供城市便宜首字母搜索的功能，输入“N”，过滤出“南京”和“南宁”等城市。

数据的重复利用。对于同类的字符可以重复利用，如填写机票的乘客信息时，需要输入的手机号码，可以调用手机充值功能中已经输入过的有效手机号码。

如输入无法避免，可引导用户输入，如告知用户输入数据有什么作用。在输入之后提供用户有效的信息，让用户感觉耽搁一些时间去输入是有价值的。

iPad用户体验准则

本文译自《iPad User Experience Guidelines》，供个人学习之用，水平有限，难免有欠妥之处。

iPad用户体验最主要体现在内容和交互：

淡化程序UI，以便用户关注所需的内容。
美观的内容形式，富有真实感。
充分利用设备的性能来增强内容的交互性。

支持所有方位

优秀iPad程序的其中一个重要因素是可以在所有方位上运行。竖向的大屏幕可以满足用户浏览内容的需求（当竖屏幕较小时，用户就会将屏幕旋转为横屏幕，这样一行就可以显示较多的文字）。用户不太会注意最小设备结构（minimaldevice frame；使用iPhone时，用户单手握住手机时，屏幕多为竖向显示；而双手使用iPad，屏幕的显示方位并不能确定）或者home按键的位置，他们不认为设备有默认方位。这就导致用户期望程序可以在当前方位上运行。所以程序尽量满足iPad各方位的运行要求。

保证以首要内容为重点。当旋转iPad的方位时，如重点显示的内容发生变化，用户会感觉对程序失去控制。

旋转时如何显示辅助信息或者功能。尽管能保证上一条，还要考虑如何显示较为次要的信息。例如邮箱功能中，首要内容时发邮件，次要内容是联系人和收件箱的列表。

横屏的次要内容显示在左边的分视图中

竖屏的次要内容显示在气泡框中。

再如，横屏时，一款游戏以长方形显示，当旋转到竖屏时，需要调整屏幕上的显示区域，游戏显示边框的上面或者下面增加显示空间，用于显示辅助信息，而不是垂直拉伸显示区域来撑满整个屏幕。

避免布局变化过大或者无缘由地改变。所有方位中都显示相似的UI布局旋转时尽可能保留信息和文本的原有格式。尤其阅读文本时，重要的是避免旋转之后用户找不到读到哪儿了。如果非要对页面重新布局，可以使用动画帮助用户理解当前页面的变化。例如，当旋转时要必须增加或者移除文本框时，可以选择隐藏动作并在新布局中简单地淡出。为了有助于合理地设计旋转动作，可考虑在真实的生活中是如何和它们交互的。

避免使用UI元素或者定义一个旋转的手势来完成旋转动作。应该是内容随着iPad的旋转而旋转。

为每个显示方位各提供一个启动图片。比如提供1004×768和748×1024的图片来满足两个方位的显示要求。

仔细考虑程序是否可以在所有方位上运行。有些程序只能在横屏或者竖屏下显示，此时：

显示程序为正常显示方式，无论当前iPad是什么方位。避免使用UI元素来告知用户旋转设备。支持180度旋转。
可以特殊处理输入式旋转动作。有些游戏把旋转设备当成操作方式，这时候横竖屏切换时，可不改变游戏的显示方位。

继续阅读iPad用户体验准则

Android vs iPhone icon设计指南

Android

在研究Android的icon设计之前，有必要先了解Android的界面是如何适配多样化屏幕的。

适配性

上一篇博文中提到，由于同一个UI元素（如100 x100像素的图片）在高精度的屏幕上要比低精度的屏幕上看起来要小，为了让这两个屏幕上的图片看起来效果差不多，可以采用以下两种方法：

程序将图片进行缩放，但是效果较差。
为这两个精度屏幕的手机各提供一个图片。

但是屏幕的参数多样化，为每一个精度的屏幕都设计一套icon，工作量大并且不能满足程序的兼容性要求，势必要对屏幕的分级，如在160dpi和180dpi的手机屏幕上采用同一套icon，当这套icon在240dpi效果满足不了设计要求，就需要另做一套稍大些的icon。

在Android 1.5以及更早的版本中，只支持3.2″ 屏幕上的HVGA (320×480)分辨率，开发人员也不需要考虑界面的适配性问题。从Android 1.6之后，平台支持多种尺寸和分辨率的设备，这也就意味着开发人员在设计时要考虑到屏幕的多样性。

为了简化设计并且兼容更多的手机屏幕，平台依照尺寸和分辨率对屏幕进行了区分：

三种尺寸：大，中，小。
三种精度：高（hdpi），中（mdpi）和低（ldpi）。

程序可以为这三种尺寸的屏幕提供默认资源，如有需要，还可以为各种精度的屏幕提供资源。在运行时，系统会根据屏幕布局加载正确尺寸或者精度的图片。

Android的icon尺寸

在运行时，程序为最佳显示效果提供了三种方法：

1.图片缩放

基于当前屏幕的精度，平台自动加载任何未经缩放的限定尺寸和精度的图片。如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。例如，当前为高精度屏幕，平台会加载高精度资源（如图片），如果没有，平台会将中精度资源缩放至高精度。

2.自动定义像素尺寸和位置

如果程序不支持多种精度屏幕，平台会自动定义像素绝对位置和尺寸值等，这样就能保证元素能和精度160的屏幕上一样能显示出同样尺寸的效果。例如，要让WVGA高精度屏幕和传统的HVGA 屏幕一样显示同样尺寸的图片，当程序不支持时，系统会对程序慌称屏幕分辨率为320×533，在（10，10）到（100，100）的区域内绘制图形完成之后，系统会将图形放大到（15，15）到（150，150）的屏幕显示区域。

3．兼容更大尺寸的屏幕

当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样超出显示的基准线时，平台在此显示黑色的背景图。例如，WVGA 中精度屏幕上，如程序不支持这样的大屏幕，系统会谎称是一个320×480的，多余的显示区域会被填充成黑色。

但为了达到最佳的显示效果，最好的方法还是设计多套图片。那就有必要对于所有的屏幕依据精度值进行分级（高中低），之后再设计三套icon：

先为主流的中精度屏幕（HVGA）设计一套icon，确定图片的像素尺寸。
为高精度屏幕将图片放大到150%，为低精度屏幕将图片缩小至75%。
将这三套资源放置到程序的三个文件夹下：res/drawable-mdpi/ 、res/drawable-hdpi/、 res/drawable-ldpi/。程序在运行时，平台会根据屏幕的精度调取合适的icon。