客户端交互设计:手机平台客户端UI设计

1. 当前手机平台的争锋

    为了占领移动互联网的制高点，当前的几大IT巨头都以手机平台为基础展开争夺。占领移动平台就是占领了用户的移动桌面，也就为自身的移动服务争取到了最佳位置。

      微软公司推出windows phone 7, 曝光了windows 8；苹果公司也开了iOS 5的发布会；谷歌的Android 3.0的发布，Android 2.4 的若隐若现等等；大家都在努力提升平台体验。另外，惠普的Web OS、黑莓公司也都在研制和发布新平台，也引起了业内人士的极大关注。

      从当前市场占有率和未来的发展趋势看，客户端适配上，主要还是考虑iOS ，Windows，Android三个系统为主，其他的系统在国内还难占据主流，这里不解释。Android手机的增长最快；iOS手机在国内的占有量也增长很快，利好消息也不断，电信、移动都在谈；Windows主要看与Nokia的未来合作，前景不小。

      因此，在本文中，简单的介绍一下这三个主流平台的交互特性，以帮助刚从事客户端交互设计的同行们更快地了解它们的基本特性，为能开发出更好体验的客户端提供便利。

2. 各个平台的特点及优势

 1）平台的硬件特性

a)   平台的按键

      手机按键是系统自带的，平台也会把按键的功能带入到系统的客户端应用中，他也天然地与用户操作相融合。

      手机按键一般分为两类，功能键和导航键。功能键被指派为特定的功能，用户按了后，触发对应的功能，一般与屏幕内容关系不大，如拍照键，只是启动拍照，在其他的客户端中基本无效。

      另一类是导航键，被赋予了特定的逻辑规则，她的操作与屏幕有一个逻辑映射的关系，但操作与操作对象分离，用户按键后，在屏幕中得到对应的反馈。如【Back】映射为返回前一页，点击【Back】后，屏幕的内容返回到上一页。

      功能键能直接启动功能，它本身对交互的影响不是很大。而导航键则是交互设计的重要组成部分。主要应该注意以下几点：

（1）  客户端的交互导航设计应该支持平台的导航按键的操作。不管你是否已经在屏幕中有虚拟按钮代替了按键已有的功能，也应该支持系统按键的导航逻辑。

（2）  客户端用到了平台的功能键对应的功能，应该支持功能键的操作。如，在客户端中需要调节音量，则应该支持系统音量的按键来控制。

（3）  所有客户端对按键的操作都必须保持一致，不要随意互用。

b)   平台的屏幕适配

      由于不同平台的开放程度很不一样，不同的平台产品对于屏幕的大小的设计很不一样，有些只有很少的尺寸分布；有些有很多不同的尺寸，这给适配带来了很多问题和麻烦。屏幕适配设计参见我之前的博文。

c)   平台支持的其他硬件：传感器，屏幕特性等

      iPhone 推出来后，迅速风靡全球，创造了一个革新的时代（也有人说iPhone本身不是革命，但是他创造了一次革命），除了设计本身外，几个传感器的合理使用也立下了汗马功劳。主要包括，重力加速度传感器、陀螺仪、接近传感器、电子罗盘等。这些传感器在不同的情景下，创造了很多独特的体验，极大的增强了手机的可玩性。

      不同的平台或是手机会支持不同的传感器，在界面设计时，也需要考虑它们在不同平台上支持的普及程度，以及不支持的时，能提供的相关代替设计方案。

2）平台的界面特性

a)   应用入口形式

      应用程序的启动入口是指用户启动程序的交互界面及操作形式。不同的平台上，对于启动入口操作和界面也有较大的区别，这是展示平台特性的第一印象。同时，不同平台及手机公司为了使品牌形象更加突出也会在这里多做文章。

从交互特性上看，应用程序的启动入口主要有以下几个特征和注意点：

b)   页面基本结构

      页面的基本结构布局，决定了手机界面的主要风格，在不同的平台上为了表现出设计的差异和风格，在界面布局上都有所不同。但是，总的来说还是没有与iOS有何本质的不同，主要在形式上略微的不同。

iOS：

Android：

Windows Phone7：

      Android 的手机厂商都更改了原生系统的界面，不同Android手机在界面的展示上多有不同。在Android客户端的设计上，本身有不少都是从iOS上直接移植了界面，导致了它的更多不同。但是不管怎么样，界面上操作和导航逻辑要符合平台本身的特征。

      在框架的设计上，我是倾向于把最核心的操作放在底部，方便用户的单手操作。iOS的设计把导航按钮方在左上角，远离大拇指的操作区域，就是容易造成用户脱手“甩机”，也影响操作效率。

c)   主要导航特性：

      导航作为一个平台的主要交互特性之一，不同平台之间也存在较大的差异。iOS在设计上逻辑严密，所有的应用自成一体、浑然天成；相比之下，Android像是由iOS和android设计师杂交的产物，在不同的应用上导航系统混乱，不太成体系；Windows Phone 7 的导航在界面展示上，标题采用全景图的形式，真是另辟蹊径，自成体系。

      在这里主要讲一下不同平台下的导航按键、title和Tab、返回逻辑、退出程序几个小点。

d)   菜单及操作形式

      这几个代表当前最高水平的移动平台，都是以手指触摸为基础的直接操作界面。iOS只提供了直接操作的方式；Android和Win Phone 7 还增加了几个硬键按钮配合操作，但总体也是以直接操作为主。几个平台都有菜单操作，但是展示的形式不同，但也在相互的借鉴。

      由于手机屏幕较小，一屏内容往往显示一个对象或信息单元，toolbar的操作正是对这个单元进行操作的。如果是对单元内的对象操作，更多的设计都是在界面中直接设置操作对象（如屏幕内的操作按钮）。

e)   信息提示

      信息提示方式，各个平台之间也都在相互学习。信息list作为Android系统的最核心的设计优势，现在iOS5也开始应用。同时许多Android手机及锁屏应用在锁屏界面与提示信息间做更多地权衡，使用户能更快地处理信息，提升效率。

      各个平台都提供了对话框的形式，只是在叫法上略有不同，如alert，popup，dialog，raw notification等，其主要的交互操作没有区别，都是对话框的基本操作形式。也有一些变异的反馈提示框，如android系统提供的快速消失的反馈提示，做成轻量级的，对用户干扰也减到更少。

      Android系统提供的状态栏的消息提示机制，是处理多应用push信息的一个十分创新的设计，可以说是android系统的最佳设计。用户可以在任何界面中，快速的向下拨动状态栏呼出信息list，也可以再向上拨动手指收起提示信息。但是，在最近看到的iOS5上也看到了它的更新特性中，这一点就赫然在列。所以，有好的特性，不同的平台也会相互学习。

      iOS上也有它的创新提示，就是在程序图标上来进行新消息数量的提示，这在后面的几个平台上都有应用，只是不同的平台上，表现形式略微不同，就是视觉上微创新。

      Windows Phone 7 提供了tile形式的提示信息显示方式，那只是样式上的不同，在设计的本质上，差异不大。

具体可以参见钟磊的博文，《手机系统消息通知设计的整理和分析》

3. 移动应用在多平台适配的原则

       一个产品的规划，很少会仅局限于某一个平台，都会进行跨平台的适配。那应该如何进行适配呢？

      这里主要有两个观点，以设备为中心来设计还是以应用为中心来设计；以设备为中心的设计师认为，应用界面应该与设备的设计规范保持一致，让用户快速上手，不觉得陌生。以应用为中心的设计师认为，保持所有的平台上的一致性，同时，很多多平台的应用开发工具也是为开发人员提供了多平台界面移植的便利，但是对用户体验是否好，却有待思考。

在多平台适配中遵循如下原则

1）  客户端的设计规范应该以平台规范为基础

2）  在多平台中，应保持统一的品牌标识，包括logo，视觉风格，核心功能点等等。

3）  更多地与平台的特性相融合，运用平台提供的特色功能，来减少用户的输入或者其他体验提升点。如拍照输入，传感器的使用等。

每个平台都需要注意的问题有：

1）  移动的特性决定了手机信号的强弱不均，如何处理在弱信号下的设计？

2）  需要考虑在断网情况下，如何快速恢复中断？

3）  如何设计手机推送的问题？

4）  如何尽量避免手机的固有限制，如屏幕小，输入不方便，电源紧张等？

5）  如何尽量通过手机的特有特性来提升体验，如各类传感器，声音提示等？

4. 后记

        当我从3月份拟好提纲写这几篇文章到现在，不过短短几个月时间，各大公司的移动平台就都推出了新的版本，对平台特性总结的速度有些赶不上平台更新的速度。

      从本质上说，iOS是一个开创性的设计，也引发了客户端的高潮，其他的平台还没有脱离iOS的痕迹，虽然各大公司都在努力创新，形成自己的风格，但是还远没有到开创、革命的程度。

      除了这三大平台外，Blackberry，Palm WebOS也都在发布新品，体验也不逊色与三大平台，在客户端的设计上，非常值得大家更多地研究一二，说不定哪天主流平台就把他们的有点给抄了，你也是在为你的新设计做知识储备。

      从客户端的交互设计上来说，我们要做的是如何发挥平台的特性上的设计优点，把客户端的体验去做好，而不是去改变平台的设计特性。所以，做客户端设计的设计师，需要时刻关注平台特性的更新，这都是你提升客户端体验的契机。