作者： 晓生

前几天曾将信息扁平化列为五条手机交互设计原则其中之一，未查找到相关内容，个人尝试从概念、缘由和实现方法等方面分析。

概念

较少的信息层级关系，用户通过操作跳转较少的页面即能找到想要的信息。

缘由

1.信息结构以深度为主。从淘宝UED的文章中看出web注重深广度平衡：

在整个树形结构中，链接的层数被称为网页链接的深度（depth）。而在树形结构里，最底层页面包含的页面总数被称为网页链接的广度（breadth）。

但此条对于淘宝的网页和手机客户端并不适用，这两者实现的功能是：选择商品种类→找到商品→购买→付款，信息框架中最底层的界面大多扭转到付款界面，并不是正常的树型结构。此概念对于豆瓣到挺适用，网页结构是树型，首页是树根，小组中的话题、电影评论和书评是树枝；而淘宝网页是倒树型结构，热门商品、搜索入口和商品目录是树枝，付款是树根。

由于手机屏幕的限制，淘宝随身购的主界面只有选择商品和搜索商品，较弱的广度入口，信息深度更为明显。

2.每跳转一次界面，都会损失用户流量。随身购的目的在于引导用户查找到想要的商品并且支付，如完成操作要跳转5个界面比跳转7个界面的订单量会更多。

3.界面跳转比网页复杂。手机客户端中没有像面包屑那样显示路径的功能，必须一层层返回。

↑如在iPhone中查看照片，从照片返回到照片目录需要点击两次导航栏上的返回。

↑从上图的手机客户端的信息结构示意图中可以看出，从“界面C”跳转到“界面I”的路径为：C→B→A→HOME→H→I。

另外，手机客户端没有像web那样操作方便的导航方式，如目录、树状导航和面包屑等。如iPhone的照片目录与照片显示在两个界面中，在web的照片目录和照片可以显示在同一个界面中。如树状导航显示在手机界面中，会导致页面过长。

↑如在iPhone程序中使用上图的面包屑，会导致如下几个问题：

• 占据标题的显示空间。
• 无法显示单个内容的状态。
• 面包屑越多，显示区域越少，也就难以点击。
• 难以表示用户所处信息的深度。

以上的问题与web面包屑的作用相违背的，如果担心用户容易在程序中迷失，不用“back”按钮而才采用面包屑路径，这可能就意味着用户进入深层次的信息才能找到他们想要的，这时更应该做的是减少信息的深度。

方法

↑增加tab。将并列的信息显示在同一个界面中，减少页面的跳转。

↑从“界面C”跳转到“界面I”的路径为：C→B→A→H→I。此时A是真正意义上的HOME界面，C的层次由原先的第4级变为第3级。

↑流程的快捷通道。在界面A中增加达到C的快捷方式，虽然在逻辑上C还是第4级，但是对于用户而言，C是第3级。如购买电影票的流程是：选择电影（A）→选择电影院（B）→选择场次（C），如果在A界面中显示，XX电影院正在热映《诸神之战》，点击之后直接跳转到选择场次（C）。

↑区分流程的主次。假设数据显示8成以上的用户都选择使用快捷方式，那么B就不是流程中的必要环节，而是次要的流程，那么原先第4级的C界面变为第3级。

↑提取重要信息。第3级有3个界面BFE，用户要查看这3个界面才能决定哪个界面是需要的，在逻辑上BFE是并列的，如能提取BEF的重要信息，用户在A界面就能决定选择第3级的哪个界面。假设A为选择电影界面，BEF是各个电影的放映场次及电影票价，如在A界面中即能得知BEF电影的最低票价，就能帮助用户省去对比票价的过程。这种做法并不能使得信息扁平化，BEF属于广度的信息，如能从用户的角度区分BEF的重要性，同样能压扁广度，减少点击的次数。如果用户选择了B流程，B流程也是最简单的，跳转2次界面就能完成任务，而E和F跳转4次才能完成同样的任务，那么也能实现信息扁平化的目的。

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

• 屏幕尺寸指的是实际的物理尺寸，以屏幕的对角线长度为准。如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，上下键选择商品或者“立即购买”和“加入收藏”按钮。

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