移动应用平台交互设计方案

避免不必要的交互
另外，我们也要注意用户也不是想像中那么傻的，不要一味提醒他们 如何操作（帮助越多说明产品越难用），在设计时应该关注如何更有 效地引导用户集中精力快速完成任务。
移动视觉展示基本原则
移动视觉展示基本原则
信息扁平化
较少的信息层级关系，用户通过操作跳转较少的页面即能找到想要的 信息。如果产品展示部分设计得当可以避免用户寻找信息时跳转的次 数过多，减少用户的流失和界面的复杂度。
移动应用平台交互设计
2012年5月
目 录
移动交互基本原则
移动视觉展示基本原则
移动交互的变化和趋势 移动视觉展示的变化和趋势 交互评估
移动信息时代应用类型特征为三种：
一是效率型应用
例如，iPhone、HTC等智能手机应用。
二是实用型应用
例如，Pad、iPad等平板电脑应用。
三是沉浸型应用
例如，笔记本、台式机等应用。
移动视觉展示基本原则
避免使用UI元素或者定义一个旋转手势来完成旋转动作
应该是信息内容随着移动设备的旋转而旋转。
为每个显示方位各提供一个启动图片或动画
例如，提供1004×768和748×1024的图片来满足两个方位的显示要 求。
工具栏中显示分段控件
分段控件可以显示并列的信息，使用户在第一时间显示更多的信息， 以便于用户在初始阶段就能得到用户所要的关键信息。
移动交互基本原则
立即启动和随时准备停止
产品程序启动时用户无须等待即可开始操作。 启动图片中显示品牌信息是容许的，如果非要使用启动画面，明确显 示时候不应过长并且无需用户进行任何交互。 移动设备一般都有“Home”键，产品在用户按“Home”键之后， 则需要做到以下两点：
尽快和合理地保存数据； 退出时保存界面的每一个细节。

当用户在屏幕上操作对象时，那些对象仍是可见的； 用户操作的结果要立即可见，即所见即所得。
移动交互基本原则
支持全方位操作
竖向的大屏幕可以满足大部分用户常用浏览内容的需求，但当竖屏较 小时，用户就会将屏幕旋转为横屏，因为这样可以使用户浏览较多的 信息。 考虑到有些产品只能在横屏或竖屏下显示，所以显示产品为正常显示 方式，无论当前移动设备是什么方位。 避免使用UI元素来告知用户旋转设备（支持180°旋转。）。
摄像头交互技术

虚拟现实 表情识别 空间动作交互 智能的各种表面技术
移动视觉展示的变化和趋势
移动视觉展示的变化和趋势
响应式界面设计（有虚拟化桌面的倾向，并且逐渐达到一个产品均适应不同
设备平台，即多平台、多设备浏览的统一）
采用流体布局，而不是固定宽度， 这样更多的样式表被查询设备选 择——网页能够随着不同设备屏幕 的变化而自适应变化，从而使得不 同屏幕尺寸的设备都能够拥有完美 的显示。通过对不同的浏览器宽度 用不同的CSS来进行渲染，能够控 制在不同宽度下个元素的表现效果。 增强适配性，平面化的图形便于横 向拉伸，分辨率增大的同时，顶部 可以由两栏合并为一栏，手机和平 板可以使用同一个程序，所以应用 程序将更多的考虑高分辨率的显示 效果，而不是简单的栏目自适应拉 伸，去刻意填满屏幕，故今后的相 关设计中，则应充分考虑到栏目的 合并或平行化。
提供指尖大小的点击区域
如果按键布局过于拥挤，用户就要小心翼翼地花更多时间去操作，那 么错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局 和交互元素，让用户更快更容易点击。
移动交互基本原则
弱化界面控件
通过设计产品中的UI来组织信息框架，减少控件的数量和淡化显示效 果，创建和产品风格相符的控件，这样即不突出，但又易于发现。这 样就能够让用户注意力能够集中其所要做的工作中，而当用户需要改 变工作状态时，也能够立即找到相应控件进行改变工作状态。
现实增强技术
前年推出的一些Wikitude Travel Guide 软件除了象现在这样在一个俯瞰图上叠 一个路线图，并且在用户即时实拍的影 象上显示地理导航信息，并设备合成与 真实环境相关的实时信息（现实增强技 术的潜在功能之一）。 现实增强技术的应用当然不限于导航， 例如iPhone手机上的Yelp软件能滚动显 示你针对当前正在拍摄的酒店的顾客评 价；诺基亚手机上的Point and Find 能 让用户马上检索相关信息，用户仅需要 把手机的摄相头对准检索对象即可来。 在其它领域，增强现实也可以得到较多 的应用，例如：
工具栏中显示分段控件
分段控件可以显示并列的信息，使用户在第一时间显示更多的信息， 以便于用户在初始阶段就能得到用户所要的关键信息。
移动视觉展示基本原则
不要到处粘贴公司或产品的名称及Logo
虽然在启动屏、登录屏或产品介绍栏目中出现公司或产品名称及 Logo是完全可以接受的，但是在其他窗口中的可用空间应该出现其 产品内容。如果没有其他内容，则应尽量使窗口小一些。
旋转屏幕时保证首要内容为重点
当用户旋转移动设备的方位时，如果重点显示的内容发生变化，就会 使用户感觉对产品失去控制，所以我们在设计时得保证首要内容。
避免布局变化过大或者无缘无故的改变
所有方位中都显示相似的界面布局，旋转时尽可能保留信息内容或文 本的原有样式，尤其在用户阅读、浏览信息内容时，重要的是避免旋 转后用户找不到浏览到哪里了。 如果非要对信息内容重新布局，最好可以使用动画、提示等帮助用户 理解当前信息内容的变化。
隐喻效果
用熟悉的隐喻为用户的任务提供直接而直观的界面; 但是我们在设计过程中，也不需要将基于产品的实现局限于真实世界 的对应物上范围内;
隐喻支持用户认知而不是记忆。
移动交互的变化和趋势
移动交互的变化和趋势
基于动作的交互技术
基于动作的交互技术使得电脑可 以识别人类的行为与动作。比如 现在基于动作的系统能解读人类 面部表情，或者手部动作所隐含 的意思。 动作可以充当人机交流时更无缝 的一种方式，例如iPhone bump 这个软件，能让两个人通过“碰” 一下来交换联系信息。这个动作 和碰见某人、交换名片类似，这 种交互方式对于最终用户来说感 觉很自然。其实这些是应用了移 动设备本身的LBS和重力感应，实 现“碰撞”设备交互数据，其它 还可以应用到如通讯录、照片和 应用程序等等范围。

教育：网络课堂上建立学生与教师 在显示器前的直接互动； 医疗：医生们可以用增强现实来远 程指导病人解决问题。

移动交互的变化和趋势
智能化与个性化的交互
要尽量充分地利用相关服务的技术能力，对用户在上下操作环境中的各 方面特征进行更加细微准确的了解与分析。考虑对用户的地理位置信息、 工作计划、任务安排、会议行程、行事历、微博feed、Gmail账户等中 的订阅、提醒服务、通讯录等进行合理合法的利用，使产品应用能够为 用户提供更加智能、更加个性化的内容及功能。 目前的一些些智能化只是局限于表象，也仅仅是初级阶段，而产品的真 正智能化则在于产品自身的特性，例如下一代智能分析将从传统的离线 分析转向在线嵌入式分析。 用户可以从分析历史数据来解释发生了什么，到对历史和来自多种系统 的实时数据进行即时分析以模拟和预测未来。下一代智能分析会在第三 维度上成熟，从由个别进行的结构和简单的数据分析移向来自众多系统 对多种类型的复杂信息的分析。这就需要有云计算、大数据、内存计算 甚至是物联网等技术去支撑。
wk.baidu.com
增强反馈和交流
在长时操作中，当用户操作时，他们需要及时的反馈和状态报告。产 品应该提供一些可见的变化，这些变化根据每个用户的动作而变化。
移动交互基本原则
除非特别必要时，不要提供声音反馈
在有严重的问题或者重大操作发生时，可以使用声音来提示用户，但 是通常应该允许用户取消声音。
减少全屏切换
相似的视觉元素，而只在某一区域变更内容。 普遍的规则是宁愿转换单独的视图或者组件，也不要进行全屏切换， 以保证用户的视觉稳定性，帮助用户理解自己所处的位置。
非模态：点击浮动窗口周围的界面也可以取消浮动窗口。
如果在移动设备中使用了模态视图，可以考虑可以浮动窗口替代它。 以下情况下可以帮助我们决定浮动窗口的使用是否合理：

是否需要不同类型的输入？
是否需要用户穿过多级视图？
可能在主视图操作才可以完成任务吗？ 任务需要用户深度投入并且是程序的一个主要功能？
移动交互的变化和趋势
基于语音的交互
语音是较早就进行的一种自然交 互技术，语音拨号、语音命令控 制、简单的数据输入等工具已经 开始在一些移动设备中使用。利 用语音识别技术，用户通过语音 输入来拓宽移动设备输入的窄道， 而语音的信息反馈则使用户可以 使用除视觉之外的第二感觉通道 来接收信息。
移动交互的变化和趋势
多点触控
移动设备的屏幕一般支持自定义的多点触摸，但也要不用响应不标准 的触摸手势，如果有也只有一种方式来执行操作命令。
减少输入
在合理的情况下，应尽可能地减少输入，直接为用户提供选项； 或者通过语音输入、声纹识别等新技术，为用户提供更便捷的输入模 式。
移动交互基本原则
使用浮动窗口（Popovers）
移动交互的变化和趋势
智能化与个性化的交互
例如Zite的内容阅读类应用， 它会读取用户在Google Reader、Twitter和 Delicious账户中的内容信 息，分析用户的个人喜好， 并在此基础上向用户推荐其 他内容源当中的相关文章。 例如让用户试着在这款应用 中授权其Delicious账户， 五秒钟之内，它就完成了对 用户曾经收藏过的文章的分 析，并基于用户的兴趣方向 生成了一本完全个性化的杂 志，让用户可以阅读到更多 感兴趣的新文章。
移动交互的变化和趋势
其它一些新兴的交互技术
裸眼3D技术

裸眼3D技术是利用前置摄像头探测用户和设备的相对位置，在屏幕上显示 立体化的图形，不需要戴眼镜可以看到3D的效果。 摄像头的潜力同样越来越让人开始关注，除了拍照和拍视频还有很多料想 不到的功能，比如类似于kinect的操作，在屏幕上方移动手掌可以操作移 动设备、Galaxy Nexus的脸部识别功能等。
移动交互基本原则
移动交互基本原则
增强交互
在用户执行明确的任务时，我们应该提供新颖、简洁、明了的交互方 式，不要为了填满整个屏幕而增加一些与主要任务没有直接关联的功 能，不要为了功能而功能，或者是为了大而全地展示产品功能，而是 应该提升产品的用户体验和性能。
简单、直接的操作
直接操作的好处是当用户可以直接操作对象时，他们能更好的明白自 己操作的结果； 让用户（而不是产品）来触发和控制动作，要使动作简单、直接，使 用户可以容易的理解和记住；不论任何时候，只要有可能，就使用用 户已经熟悉的标准控制和行为； 为了在产品里加强直接操作的感觉，我们要确保：
浮动窗口可以显示控件或者工具，不必切换屏幕即可完成操作。但是 由于移动设备产品各自屏幕大小均不一样，所以在设计过程根据实际 情况进行调整，原则上则是使用浮动窗口显示控件或工具。 浮动窗口和模态视图有些相似，当浮动窗口显示时，不能操作主视图。 但模态视图是模态的，然而浮动窗口可以用在两种途径：

模态：浮动窗口出现时，周围的界面淡化，需要一个明确的操作取消；
移动交互的变化和趋势
手势交互
触屏移动设备通过对手指划动屏 幕的手势进行识别，来完成与移 动设备的交互。但是由于识别技 术的限制，可用的手势种类不多， 随着其他计算视觉等技术在手机 上的成熟运用，则手势识别会有 更大的发展。 类似的例如Palm Pre有一个手势 感应板能识别手指的滑动方式， 从右到左意味着后退，把一应用 从屏幕丢出去意味着退出、缓缓 向上拖动意味着唤醒全局导航。
移动交互的变化和趋势
与物联网结合的交互
随着传感器和智能被添加到像连 接到因特网上的移动设备这样的 物理器件中，互联网的扩展要素 包括嵌入式传感器、图像识别、 信息短距离相互传输和近距离无 信通信（NFC）支付等，使得移 动设备中数据可以像物品一样被 随时随地的交换，包括用户的身 份信息。近距离无信通信（NFC） 让用户在一个兼容的读卡器前挥 一下他们的手机就可以完成付款。 一般移动设备自带的NFC功能， 包含用户各种卡类信息，从而可 以取代用户的银行卡、饭卡、公 交卡和门卡等等。
使用标签栏
标签栏显示不同种类信息或者是不同的产品模块，是提供一个界面来 导航不同视图。
移动视觉展示基本原则
整体视觉效果
移动设备的屏幕一般都支持丰富、美观和动人的UI设计，因此我们可 以尝试增加产品中产品UI的深度和细节。
重新思考列表
列表（也就是表视图）在移动设备中常用于显示大量的数据信息，但 可以使用一个更丰富的方式来显示同样的信息。例如：一般手机中的 联系方式是一个列表，而在iPad中的联系方式看起来是一个美观的通 讯录，iPad的列表可以显示更多的信息。