手机客户端软件虽只是手机中一个功能，但它却要比设计单款手机更为复杂。在设计单款、单系列手机时，需要考虑这款手机的软、硬件优势及不足，考虑其特性、其UI Style Guideline ，确定这些内容后，整个平台的UI也找到基础了。说起来，这至多是考虑某个系统、某个屏幕的特性而已，而不同功能的所有设计基础都是一致的。
但是对于客户端，咋一看，好像很简单，就是设计一个应用。实则不然，客户端重在适配，客户端不仅仅会用在一个型号的手机中。这样问题随之而来，如何能适配不同的手机呢，手机千变万化，我总不能只针对一款手机，一个平台吧？当然也有些客户端确实是这样的，只能使用Windows Mobile、Symbian、iOS、Android、Java(非系统)等的某个平台。但是即使对同一个平台，问题还是很多，是要在触摸屏中来用，还是在键盘机中使用？是在大屏幕中，还是小屏幕中等等。 如何处理？？？有待大家讨论，这里只是抛砖引玉。
客户端在不同的平台中，界面展示和特性各不相同
所以，本文中，我想简单的总结一下手机客户端的交互适配方法，希望能更好地来指导当前移动应用的设计需求。
一、 手机客户端的适配分析
对于手机客户端的适配，我想首先需要做的就是如何适配，我要在什么样的手机上使用？在设计上，我会从平台、键盘机与触屏机、屏幕大小三个维度进行分析：
1. 平台：
不同的平台手机的设计风格、操作方式、硬件配置都存在很大的差异。当前的主流平台主要包括 iOS、Android、Symbian、Blackberry、Windows Phone7、Web OS等。
每个平台都有各自的设计指南（UI Style），其对应的手机的硬件也有各自的特点，如iPhone的home键，Android 的back键，blackberry的滚轮等等。特别提一下Palm，Palm的web OS真的值得手机交互设计师研究一下（手机 Palm pre）。因此，在设计上，不仅要了解平台的设计指南，同时需要考虑平台的硬件特征，使自己设计的应用不仅符合平台的交互特性，并能兼容平台上硬件使用习惯，提高应用的可用性。
Windows Phone 7 系统的几个特点
iOS系统的几个特点
Android 系统的几个特点
由上图可知，几个最新的平台也存在较大的不同。对于手机的平台特性，会在未来的博文中再详细赘述。
2. 触屏机和键盘机
键盘机和触屏机在操作方式上很不同
下面简单总结一下键盘机和触屏机的特点。
键盘机：
1）键盘机的操作方式采用Soft Key 与屏幕软键标签一一映射（左右软键、对话框的按钮等都需要与键盘的标签一一对应），对所有的屏幕元素，都需要用五向键（滚轮）导航；需要用光标来操控屏幕上的所有元素。
2）一般左右软键上有一个【返回】键。用户可以通过软键快速的返回。
3）由于用键盘操作时，每次选择项目都需要从上到下依次浏览项目，因此重要性高、使用频率高的元素应放在屏幕的最前面。
4）按键可以根据数字键来设置一些快捷的操作；通过长按来设置快速翻页。
5）除了网页的形式，绝大多数的操作都是在菜单里完成。
6）文字输入的方式，通过键盘来输入，全键盘和数字键又有不同。
触屏机（屏幕尺寸会略大）：
触摸屏手机最主要的特点是直接操作屏幕对象。对用户来说，不需要进行映射的转换，因此易学性更强。但是由于手机的使用场景很特殊，或站着，或在行走，或只能腾出一只手等等，在这些时候要精确指点操作也有一定的难度。
触屏手机也有两种操作形式，用手指直接操作或者用笔操作。但是当前的屏幕发展及推出的机型来看，主要会针对用手指直接来操作。如果用户操作后，有屏幕的力反馈，则效果会更好。
1）操作对象的大小符合手指的操作，按键的大小设置规范：
◆食指点击的间距 约为7*7 mm， 1mm间距，
◆拇指点击8*8 mm，2mm间距。当前推荐的值为9mm 大小，最小应不小于7mm。
◆当然一些重要操作，或者频繁点击的区域可以设置的略微更大一些。
2）由于单手操作时，只能使用拇指操作，因此，使用最频繁的按钮大小必须根据拇指的大小来设置；拇指辐射的范围主要在屏幕的底部，因此需要把这些操作放在稍微靠下面的位置更好。
3）信息显示：大屏幕可以显示更多的内容，但是避免信息显示过于拥挤。
4）手势的定义：当前手机上我们可以看到一些基本的手势操作，如拨动、拖拽、双指放大/缩小、双击等最常用的操作。其实还有很多其他的手势形式，如画圈，打勾，打叉，双指点击，双指滑动等等，这些需要根据手机本身的配置来使用，不建议随便使用特殊的手势来定义常见的操作行为。
5）输入的方式：输入时会起一个虚拟键盘，键盘的显示与隐藏都需要考虑，同时，可以根据当前输入的目的，直接做操作的按钮。
3．屏幕的大小
在考虑手机屏幕大小时，一定要区分物理尺寸与分辨率的关系。物理尺寸的大小和分辨率并非一一对应，例如对于HTC的S1 2.8 英寸，分辨率为320*240；Nokia n81 2.4 英寸，但是分辨率也是320*240。因此，对于相同分辨率大小的图标，在 S1 中看起来就要更大些，但是图标可能就没有那么细腻了。
在视觉设计时，需要首先考虑这个问题，在首次设计时，应该更勤于导入设计视觉图片到目标屏幕中去检验，看看设计是否合适，别到都完成了视觉设计，才发现设计的图标太小或者不够精致。
对于2.8 英寸 及320 * 240 （含）以下的屏幕，在现在来说都是小屏幕界面，在这个档次上，应该是键盘机占主导地位。在键盘机的设计上应该更多地去参考Nokia的规范（对于可用性，Nokia的设计还是无可挑剔的）。
对于3.0 英寸 及 480*320 以上的屏幕，可以认为是大屏幕，并且是以触屏机为主的。【随着屏幕技术的发展，屏幕的密度已经越来越大，这样的值也只是一个参考值。】
1）屏幕信息布局
小屏幕和大屏幕在客户端信息内容的布局上会存在较大的差异。屏幕大时，除了考虑信息架构外，需要考虑在界面上放哪些信息和操作；屏幕小时，更需要考虑信息架构，对信息更好地分屏，信息之间的联系等。
2）不同屏幕设计特点
a) 大屏幕的设计特点：
◆在界面中，展示更多的信息；包括界面内容、导航和操作按钮；
◆大屏幕以触摸屏为主，更多地以手指来直接操作；
◆在屏幕上，显示的信息不宜过多；信息密码过高，不利于信息的搜索。
b) 小屏幕的设计特点：
◆在界面上先展示客户端的功能及结构；
◆以键盘机为主，操作方式；
◆先导航，后显示内容，内容的分屏合理，符合用户的期望。
二、手机客户端的设计原则及适配步骤
1. 客户端的设计原则
1） 手机本身的物理特性受限引起的指南：
a) 客户端的文字输入，必须要降到最低：由于手机在输入上的低效性，在设计的过程中，应尽量减少用户的输入，如果有可能可以设置默认值，或者让用户选择目标值。
b) 客户端的信息结构好，屏与屏之间的逻辑关系清晰：由于手机屏幕都普遍较小，即使有4吋屏，那也只能展示较少的信息量，因此，在手机设计上，更需要有清晰的信息架构，用户知道当前在哪儿，并能返回到哪儿。
c) 客户端的操作、功能不要隐藏太深，重要功能都需要在界面中有适当的提示：由于手机屏幕较小，不能展示所有的信息。因此，对重要的、使用频率高的功能或信息放在最重要的位置，并在首页上展示或指示。
2） 手机的移动特性引起的指南：
a) 客户端的最主要的功能操作，用单手可以完成：手机的使用情景多样性，在很多情景下，用户都只能单手来操作手机，因此，在客户端的设计过程中，需要考虑最重要的核心功能，能否单手操作完成。
b) 客户端的界面必须简洁、操作简单，操作步骤少：由于用户操作情景复杂，在使用客户端的过程可能有额外的认知负荷，因此，在设计客户端的过程中，逻辑必须简单，操作步骤也要减少。
c) 客户端的界面层次不要太深，最好不要超过3级：
d) 客户端的提示包括界面、声音、振动多种形式：用户在操作手机时，往往不会一直盯着手机屏幕看，因此，很多手机状态页面的切换，脱离了用户的视线，这时，必须要提供视觉之外的其他感觉通道的信息（如听觉、触觉等），来对用户做提示。
3）其他原则
a) 客户端UI的适配不必恪守所有的平台都保持一致，只要一些品牌的关键元素能体现即可：
b) 客户端的主要操作方式（框架、导航、按键功能及软键对应方式等）应与所承载的手机操作系统保持一致：客户端都承载在某款具体的手机平台中，而用户会对当前的手机平台很熟悉，因此，在设计的过程中，需要更好地理解当前的手机平台，并使客户端的设计与手机系统的设计逻辑保持一致。
2. 手机客户端设计适配的步骤：
个人认为，客户端的适配要以一个平台为起始，但是要着眼于多个平台。
1) 根据公司的战略，选择一个最先切入的平台；
2) 了解该平台的UI 设计规范，可用的UI 控件及交互原则；
3) 确定切入的屏幕大小，以此来设计第一个客户端，但是要考虑适配其他屏幕的可能性，是自适应来扩展或者缩小；
4) 根据平台及屏幕大小，来选择一款最典型的手机，开始客户端的交互设计。
5) 确定客户端的核心目的。如为娱乐为主的，应在设计方式更娱乐性；功能性完成目的为主的，以更易用性为主；
6) 根据客户端的功能和内容，来设计客户端的信息架构；
7) 根据UCD的原则，来完成客户端的交互原型；
在交互原型的过程中，需要考虑手机适配的三因素（平台、屏幕、触摸/非触摸），以便将来的适配。#p#
移动设备客户端交互适配设计屏幕大小
随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上迁移。然而手机与PC 不一样，PC经过了多年的发展，在设计上形成了很多不成文的规则，如网页的宽度都在960px左右【当然，由于整体的电脑屏幕往大尺寸及高分辨发展，除了背景宽屏自适应外，不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。
在客户端的设计过程中，针对不同的屏幕大小，应该如何来设计？是否每个大小的屏幕尺寸都需要一个新的界面布局，还是所有的屏幕尺寸都使用相同的界面布局？我们将在下面的内容中来探讨这些内容。
一、当前热门手机的屏幕大小
下图中，我抽取了国内某个网络电器城某周的10大畅销手机排名：
虽然只是2010年中的某一周的手机销售量排名，由此可以看出，当前使用中的手机屏幕差异很大，各种屏幕大小和分辨率都有。如果为了适配更多的用户群体，则需要考虑的手机屏幕大小和分辨率更多。【不过，根据当前的手机发展趋势，及手机客户端的使用行为可以看出，最主要需要用户关注的手机屏幕是2.4吋以上，240*320以上的手机屏幕，因为这样的手机使用客户端的频率和用户量都会更多。个人建议更多地是考虑320*480及以上的屏幕。】
二、屏幕大小正确理解
说起屏幕大小的时候，会有两种表达方式，1） “我的屏幕2.4吋，你的屏幕3.5吋。” 2）“这个屏幕分辨率 240*320，那个屏幕分辨率为320*480。”但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。
这里首先有几个概念需要再澄清一下：
◆屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4吋，3.5吋等等
◆屏幕分辨率：屏幕所能显示像素的多少。如，240*320等。
◆屏幕密度（pixel per inch）：以每英寸的像素数。每英寸的分辨率数，如160ppi。
物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。
在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要（人眼是要靠物体成像在视网膜上的视角大小来进行识别感知，视角是与物体实际大小和距离有关）。
在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。
也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。
在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。
也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。
三、设计过程与屏幕适配思路
1．确定目标的屏幕大小
屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容；文字可以在适当的位置折行；标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。
由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等还是存在很大的相关性的。
首先，我们先来定义一下手机的屏幕大小的归类档次：
A. 小屏幕：宽度240 px 以下屏幕或者2.4 以下屏幕
◆一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。
B. 中等屏幕：宽度240~320 px，或者2.4~3.0吋屏幕
◆智能手机以Symbian或S60 v1,2,3，Windows mobile为主流；或者是非智能手机的客户端以Java版本为主。
◆同时包括240*320的宽屏手机。
C. 大屏幕：宽度320 px以上屏幕或者 3.0吋以上的屏幕
◆iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致；
◆Android 系统手机及衍生平台手机
◆Windows Phone 7 系统手机
◆Nokia S60 v5，symbian 3等
D. 平板屏幕：7吋及以上的屏幕
◆由于当前的平板电脑上的应用的开发都是基于手机应用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手机不一致，在设计上有很多的特殊性，可发挥空间也更大，因此个人建议单独的设计。
其次，根据我们的产品战略，来确定待开发产品的用户群体来确定一款目标手机屏幕。由于对于某个业务的手机客户端都不会只推出其中的某一款（除非是战略上的用户群确定为使用某种手机的特殊业务），而是会对不同的手机平台分别进行适配。因此，确定的目标手机屏幕，应该是在该档次中最主流的手机屏幕大小，在以此为基准向上或向下来适配其他的同档手机。
2．适配原则
1） 客户端的logo，在各个手机上都应该清晰地显示
2） 标题或者底部栏必须100%的与手机宽度适配
3） 文字内容如果显示不下的话，可以自动适配宽度进行折行
4） 图片可以根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小
5） 适配过程中，界面的元素的宽高最小值应该符合用户的主观舒适范围值。
6） 不能完全使用分辨率的绝对比例来对界面布局进行缩放；
3. 适配思路分析
根据我们前面的分析，
C类大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手机为主，它们都是触屏手机，在适配上可以划为一个档次。
B类中等屏幕大小智能机主要以Symbian 和Windows mobile为主，因此在适配这两个平台时，主要集中在B类屏幕间的适配。
B类中等屏幕大小还有一块是非智能手机，使用Java客户端，同时，A类小屏幕大小主要使用Java客户端，因此，Java类客户端需要适配的范围更广，至少应包括B类和A类的屏幕大小。
（1）Android 与iPhone手机的适配
iPhone 本身就只有两个分辨率及一个屏幕大小尺寸，可以很好的来适配（最多出两套图片即可，系统会自动读取）。
对于android，由于其开放性，导致了各种屏幕的大小及分辨率都有。但Android系统有一个很好的特性，系统会根据屏幕的分辨率密度来进行自适应。但是，当密度差异较大时，自适应后，图标会由于拉伸变得模糊影响效果。这时，必须要通过重新设计新的图标或者加大间距来保持最佳的视觉效果及更便利于用户操作。
Android 手机屏根据屏幕的分辨率密度和物理尺寸，可以分为以下几类：
注：图中的【】内的值为手机所占的百分比值。Android 开发平台数据，不一定准
Android 提供了如下的机制来对不同大小和密度的屏幕进行适配：
1） 图片资源的缩放
基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片。如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。如果没有多套资源，平台会认为默认的资源是中密度的屏幕资源（160dpi）。例如，当前为高密度屏幕，平台会加载高密度资源（如图片），如果没有，平台会将中密度资源缩放至高密度。
2） 根据分辨率和坐标自动缩放（密度不同的屏幕适配）
如果程序不支持多种密度屏幕，平台会自动缩放绝对像素坐标值和尺寸值等，这样就能保证屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果。平台会根据密度的比例来缩放实际尺寸的大小。
3） 兼容更大的屏幕大小（屏幕不同的适配）
当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样超出显示的基准线时，平台会以屏幕大小的比例来缩放整个屏幕。
由上表格也可知，当前的Android手机主要集中在标准屏的中密度和高密度两个型号上。因此在设计中，主要是设计其中的一种为主，再去适配另一个型号即可。对于在一个档次上的手机，都会根据上述的三个原则，系统自动去适配。个人认为，在进行Android手机设计时，如果只准备一套资源时，应该以高密度的版本为主，这样去适配中密度时，效果更好。
当然，如果屏幕的密度差异较大时，自动适配的效果肯定不会，如果要取得更好的适配效果，必须针对几个不同的屏幕密度进行单独设计屏幕元素，提高视觉满意度。
（2）非Android、iphone的手机适配
对于其他的非Android、iphone手机，则需要更多地考虑其适配规则，这些手机系统不提供自适应的适配。
简单整理规则如下：
1） 向上适配（标准屏向更大【分辨率高，物理尺寸大】的屏幕适配）
在向更大的屏幕适配时，根据设备分辨率的不同，会分为两种状态。
A．如果两者的屏幕分辨率密度（dip）差不多，物理尺寸更大的屏幕。那可以直接在当前尺寸上拉长、拉宽即可，图标、行距都可以保持不变。
B. 如果屏幕密度要大很多，物理尺寸差不多的。则适配点包括：
◆设计多套图标，需要有更大分辨率的图标
◆使用不同的字体，需要更大的字体来适配大设备分辨率的屏幕
◆增加行间距
◆自适应放大内容中的图片
◆Tab页签 需要根据屏幕的大小来确认每屏最多显示的数目。
◆考虑一些复杂界面，增大界面中的一些元素的分辨率，会导致许多东西需要重新设计。这种情况需要重新设计该界面。
2） 向下适配
在向更小的屏幕适配，这种情况较少，那会集中在如下几点：
◆考虑一些极限点的改进，需要适配到小屏幕的手机中，如标题的最大字数等。
◆title、bottom栏与小屏幕宽度适配。
◆考虑到行高（行信息展示）的设计是否适合更小的屏幕高度。
◆在结构上，需要考虑在小屏幕中，显示是否合适。
◆根据屏幕密度的比例来设计屏幕元素，需要更小分辨率的屏幕元素
◆使用小的字体，具体的大小需要根据屏幕的大小来设定。
（3）竖屏横屏适配
横竖屏的适配，在本文中，不过多讨论，这里只是简单的整理一下，我自己的理解。
对于不同功能的应用，都有其特定的页面展现形式，个人并不赞同蛮目对任何应用不加选择的都去适配横屏。
个人观点如下：
1） 不同的应用，在设计的过程中，对于选择不同的屏幕有不同的选择，如普通list多的应用，竖屏更合适；显示图片更多的界面，或者想更好的展示全景的应用，横屏更合适。
2） 不必遵循，对任何的应用都可以自动进行横屏竖屏的切换。如果觉得没有必要横屏或者竖屏的应用，就可以不切换。
3） 由于用户在使用手机的过程中，经常会无意中调整位置，从而导致手机误认为是要进行横竖屏的转化，从而更容易导致操作上的失误，引起用户的反感。
4） 横竖屏的切换时，允许用户对于同一个界面有不同的展示方式。例如不一定在竖屏时时list方式显示，在横屏时也和竖屏保持一致，这时横屏可以有更好的适应横屏的展示方式，使用户更好的操作。
由于手机系统各异，手机的屏幕尺寸五花八门，屏幕的性能也呈现多样性，还有触摸屏和非触屏的区分，这四个变量结合起来，会有无数种不同的情况，如何能使你的应用完美地展现给用户，适配固然很重要。但是，更重要的是你要在适配之前，确定应用的目标群体。如果你的应用主要是针对高端手机用户的，那你何必去考虑低端的手机呢？毕竟为了很少的用户，使你花了很大的力气，可能会有不值得，这一点绝对值得每一个设计师思考。
题外话
一般来说，我们在设计一个产品时，首先需要确定产品的用户群体，然后基于用户群体来设计针对该用户群特点和使用行为的界面。但是对于手机客户端，感觉这个过程不能完全适用：
原因是因为，我的客户端设计主要是针对不同的手机平台（Android、ios，Windows Phone 7，Palm Pre，Symbian）来开发的，因此，开发出来的客户端适用于所有的持有该手机的用户。但是这些手机持有者是否都有相同的特质，是否都喜爱使用该客户端，是个很大的未知数。另一方面，如果我在建立用户群时，完全根据用户的需求、使用行为又或者人种学特征来分类，那每一群人中持有的手机各不相同，那又该如何定义每个不同平台下的客户端的功能呢？
当然，有人也会说那就先了解不同的手机平台的用户群特征，然后再研究这群人对本客户端应用的需求和使用行为，以此再来设计客户端，目前来说这是更好的研究思路。
总之，这样深入的讨论，会发现客户端会越想越复杂，有人说手机客户端的设计是最复杂的，是很有道理的，值得大家更多地探讨。
【编辑推荐】
