戴传庆

适配性指的是客户端应用程序能可以在多种参数的手机屏幕上运行，手机屏幕的相关参数有尺寸、分辨率和精度。

• 屏幕尺寸指的是实际的物理尺寸，以屏幕的对角线长度为准。如iPhone的尺寸为3.5英寸。
• 屏幕分辨率是物理像素总数。如iPhone的屏幕像素为320×480px（宽×高）。
• 屏幕精度取决于屏幕分辨率和像素在物理宽高上分布情况。如iPhone的精度为164dpi。简单地说精度是分辨率与尺寸的比值。同样的分辨率，尺寸越大，精度越小。

引起适配问题的原因有：

1.手机分辨率（简称为R）多样化。从128×128px到800 ×480px约30种分辨率，根据QVGA（240x320px）、HVGA（320×480px）和VGA（480×640px）可分为四种：

• R＜QVGA：128×128，130×130，132×176，176×208……，此种分辨率市场占有率不到5%，将逐渐被市场淘汰，加之此类手机的用户消费能力较低，因而很多应用程序都放弃此类手机。
• QVGA≤R＜HVGA：240×320，240×400,240×432……，此种市场占有率达到70%。
• HVGA≤R＜VGA:320×480，360×480，480×360……
• VGA≤R：480×640，480×800……VGA和HVGA是未来手机屏幕的发展趋势，市场占有率将持续增大。

2.精度多样化。低精度的屏幕有较少的可用像素，而有时在同样的区域内显示更多的像素，同一个UI元素（如按钮）在高精度的屏幕上要比低精度的屏幕上看起来要小。

在PC上的web设计通常宽度为960px，显示在宽屏幕上时，页面居中对齐，左右可用纯色或者图片填充。对于手机而言，每页显示的能力有限，不是像web设计那样讨论显示1屏还是8屏，手机客户端大多显示1屏，如不是多数据页面要尽量避免使用滚动条，否则在按键手机要按多次向下键或者在触摸屏上向上平移界面才能找到想要的内容，所以设计手机客户端讨论更多的是如何精简信息和减少操作步骤。

QVGA的1屏界面移植到VGA上，只能占据半屏的屏幕，图标看起来不宜识别。所以先为QVGA手机设计界面之后，再根据大屏幕手机的分辨率调整界面中图标等元素的尺寸，保证显示效果并充分利用好每一个像素点。

适配有两种做法：1.根据分辨率适配。2.根据精度适配。

分辨率适配

这种做法适用于Java&Windows Mobile版的客户端。

如示意图，顶部为导航，内容为下拉框和“确定”按钮。程序开启时获取手机分辨率为w×h，从上到下依次绘制界面（数据均为假设）：

当240≤w＜320时，icon的大小为40×40px，菜单栏的高度=d（d=24px），上间距=左间距=右间距=10px，换行间距br=6px，下拉框的高度=字的高度+2a（手机默认的字体高度大小不一，a=4px），下拉框的宽度=w-左右间距，按钮的高度=字的高度+2a，按钮的宽度=字的宽度+2b（b=6px）

当320≤w＜480时，icon的大小为60×60px，菜单栏的高度=d（d=32px），上间距=左间距=右间距=14px，换行间距br=8px，下拉框的高度=字的高度+2a（手机默认的字体高度大小不一，a=6px），下拉框的宽度=w-左右间距，按钮的高度=字的高度+2a，按钮的宽度=字的宽度+2b（b=8px）

……

依次类推，区分出多个版本。其中数值可以是明确数字，也可以使用公式，比如，菜单栏的高度=d，br=d/4。这些数值和公式写入XML，加上适当的图片资源，更换不同的版本时，只是XML和图片不同，主要程序还是同样的。

精度适配

Android是按精度适配，平台不仅可以使用在手机上，还能使用在导航仪等设备上，屏幕的参数同样的多样化。Android自带三种功能：1.图片缩放；2.自动定义像素尺寸和位置；3.兼容更大尺寸的屏幕，在Android的icon设计指南中有介绍，程序开启时根据获取到的精度值调用合适的图片资源。

按精度区分版本需要平台的支持，由于中精度大屏幕的手机较少，按照分辨率适配能满足大部分的手机显示要求，由于Android的客户端还在设计过程中，最终效果不便下结论。

准确地说应该是手机客户端交互设计原则，1个月前尝试写过交互设计原则，谈的比较浅。在手机交互设计方面，国内外可供参考的资料很少，只能靠借鉴网页和软件交互设计的也有经验，再结合自己的手机应用程序的设计经验去研究。

原则的概念

谈及原则，需明白什么才能称的上是原则？对于设计的评价分两种：

• 什么是好的设计？参照工业设计，在学习《设计心理学》时，书中列举了16种好的设计，美观的、个性化的、符合人机工程学……这些属于描述性文字，不分条件地罗列好的设计，多而全，但不精练。
• 好的设计是什么？这是个难题，等于给好的设计下定义，是个人日常设计的准则，就像布劳恩的优良设计十项原则。

“什么是好的设计”是总结所有好的设计的全集，“好的设计是什么”是研究所有好的设计的交集，好的设计有什么共同点，追究设计的本质，而不是仅满足于形式。一项好的设计可以编造出各种理由，但要深究其中最重要最本质的那一条。

目的

之所以那么费力地总结设计原则，其目的在于：

• 评价设计的优劣。
• 设计有理有据，避免设计的随意性，用户的每一步操作都在预料之中。
• 便于团队之间的达成共识。开发人员习惯从技术上评估开发难度，设计师从用户体验的角度考虑，这些原则也是说服他们的方法。
• 加之贯穿在所有产品之后可加强品牌形象的统一性。

五项原则

那么，手机客户端交互设计原则有哪些呢？Google、Apple&Microsoft都有设计原则，原则一大堆，而哪些是适用手机客户端交互设计?照搬不行，手机有自己的缺点和优点。个人将原则重新归结为：

这些原则对于手机客户端设计尤为重要，个人也会围绕这五点继续研究。而对于其他交互设计原则，比如一致性、容错性、提供反馈和易于理解等等具有普遍性，这些都是设计师必备的设计技能。不是这些原则不重要，它们是基础。最实用的方法必定简单，因为易于理解和执行。

在上次写的交互设计原则中，屏幕显示、任务、操作方式和使用情境应该归结为设计方法，特别是手机界面的适配性问题，以后会再加以论述；视觉重点的论述有偏差，在iPhone界面中，标签栏在最底部，重要性的等级却不是最低，关于视觉流程参见眼动仪在手机可用性测试中的应用：

此界面中，“关闭”比“帮助”和“应用管理器”重要，而右边的箭头分散了用户注意力。

后记

有了这些原则，保证设计质量，也能得到设计权力。当领导要以个人意愿修改某项设计时，原则也就派上用场，这一点个人屡试不爽，入行工作8个月即负责客户端的交互设计。得到充分的设计权力之后，个人才有发挥的余地。

淘宝随身购java版1.0已发布近6个月，适配的机型还只是240×320px和320×240px的手机，解压了SuiShenGou_for_NokiaE71_Alpha1.0.jar，发现xml中未定义图片的高宽及间距，不知为何没有完成最后20%的工作，而通过修改图片的大小和xml即可完成界面适配。

随身购的模式是客户端和浏览器，男装和MP3等功能是放置读取数据并显示在客户端，而点击彩票功能之后跳出客户端进入wap淘宝彩票频道。

jar文件共596k，图片占了345k，有个dat文件91k，估计是字体集。各种手机默认的字体大小不一，加载字体集之后界面显示统一，可以避免因手机默认字体过大而导致的显示不完全等问题。视觉设计挺好，但交互设计部分个人有不同看法，尝试重新设计。

1.去掉左软键的“确定”，一直显示“菜单”。理由：

• 在主界面使用方向键选择功能，按确定键选中功能，这是选中“菜单”选项最常用最方便的方法。
• 弹出“菜单”选项有“1.进入”，有了上面的方法之后，这个选项的使用率很低，可以去掉。
• 按左软键，弹出“菜单”选项之后，按向上或者向下键选择选项，再按左软键才会使用到“确定”，手指放置在方向键就能完成的操作就不必移到左右软键上。
• 去掉“确定”之后，按左软键可以弹出或者关闭“菜单”选项。

2.弹出的“菜单”选项加上数字快捷键。

3.去掉非主界面最顶部的功能导航。理由：

• 随身购的内容是选择商品和查看详情，是最主要的内容，导航是辅助内容，占据了高度为42px的位置，手机屏幕那么小，特别是在横屏幕320×240px手机上，辅助内容能越少越好。
• 顶部的功能导航操作并不方便。如在选择商品时切换功能时，要多次按向上键，焦点移到“人气”，再按向上键，选择功能；或者按一次左右键把焦点移到“人气”tab栏，再按向上键。如在“宝贝详情”界面上，那只能按多次向上键了，这种操作还不如返回到“主界面”重新选择功能，或者在“菜单”选项中加入导航的功能。

4.去掉导航之后，增加tab，去掉灰色线控制滚动条的功能。

• 在进入“宝贝详情”界面中，必须按方向键控制灰色线。因为按照控件实现滚动的话，有可能部分内容显示不全。如果灰色线在最底部，此界面不支持焦点的上下循环滚动，要按十多次向上键之后才能切换tab。
• 去掉导航之后，每个界面中可以多显示2-3行的文字，每个tab中可显示内容增多。“宝贝详情”界面中tab增加至5个，每个tab中显示的内容减少。
• “立即购买”和“加入收藏”按钮由左右排列改为上下排列，利用按钮实现界面滚动。（效果有待考证）
• 左右键可以选择tab，上下键选择商品或者“立即购买”和“加入收藏”按钮。

总体而言，现有客户端的交互设计逻辑挺清晰，用户使用习惯的话也没用大问题，但是重新设计之后可以减少很多不必要的操作。