《移动应用平台交互设计方案资料》由会员分享，可在线阅读，更多相关《移动应用平台交互设计方案资料（38页珍藏版）》请在金锄头文库上搜索。
1、移动应用平台交互设计,2012年5月,目 录,移动交互基本原则 移动视觉展示基本原则 移动交互的变化和趋势 移动视觉展示的变化和趋势 交互评估,移动信息时代应用类型特征为三种：,一是效率型应用 例如，iPhone、HTC等智能手机应用。 二是实用型应用 例如，Pad、iPad等平板电脑应用。 三是沉浸型应用 例如，笔记本、台式机等应用。,移动交互基本原则,移动交互基本原则,在用户执行明确的任务时，我们应该提供新颖、简洁、明了的交互方式，不要为了填满整个屏幕而增加一些与主要任务没有直接关联的功能，不要为了功能而功能，或者是为了大而全地展示产品功能，而是应该提升产品的用户体验和性能。,增强交互,直
2、接操作的好处是当用户可以直接操作对象时，他们能更好的明白自己操作的结果； 让用户（而不是产品）来触发和控制动作，要使动作简单、直接，使用户可以容易的理解和记住；不论任何时候，只要有可能，就使用用户已经熟悉的标准控制和行为； 为了在产品里加强直接操作的感觉，我们要确保： 当用户在屏幕上操作对象时，那些对象仍是可见的； 用户操作的结果要立即可见，即所见即所得。,简单、直接的操作,移动交互基本原则,竖向的大屏幕可以满足大部分用户常用浏览内容的需求，但当竖屏较小时，用户就会将屏幕旋转为横屏，因为这样可以使用户浏览较多的信息。 考虑到有些产品只能在横屏或竖屏下显示，所以显示产品为正常显示方式，无论当前移
3、动设备是什么方位。 避免使用UI元素来告知用户旋转设备（支持180旋转。）。,支持全方位操作,在长时操作中，当用户操作时，他们需要及时的反馈和状态报告。产品应该提供一些可见的变化，这些变化根据每个用户的动作而变化。,增强反馈和交流,移动交互基本原则,在有严重的问题或者重大操作发生时，可以使用声音来提示用户，但是通常应该允许用户取消声音。,除非特别必要时，不要提供声音反馈,如果按键布局过于拥挤，用户就要小心翼翼地花更多时间去操作，那么错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素，让用户更快更容易点击。,提供指尖大小的点击区域,相似的视觉元素，而只在某一区域变更内容。 普遍
4、的规则是宁愿转换单独的视图或者组件，也不要进行全屏切换，以保证用户的视觉稳定性，帮助用户理解自己所处的位置。,减少全屏切换,移动交互基本原则,通过设计产品中的UI来组织信息框架，减少控件的数量和淡化显示效果，创建和产品风格相符的控件，这样即不突出，但又易于发现。这样就能够让用户注意力能够集中其所要做的工作中，而当用户需要改变工作状态时，也能够立即找到相应控件进行改变工作状态。,弱化界面控件,移动设备的屏幕一般支持自定义的多点触摸，但也要不用响应不标准的触摸手势，如果有也只有一种方式来执行操作命令。,多点触控,在合理的情况下，应尽可能地减少输入，直接为用户提供选项； 或者通过语音输入、声纹识别等
5、新技术，为用户提供更便捷的输入模式。,减少输入,移动交互基本原则,浮动窗口可以显示控件或者工具，不必切换屏幕即可完成操作。但是由于移动设备产品各自屏幕大小均不一样，所以在设计过程根据实际情况进行调整，原则上则是使用浮动窗口显示控件或工具。 浮动窗口和模态视图有些相似，当浮动窗口显示时，不能操作主视图。但模态视图是模态的，然而浮动窗口可以用在两种途径： 模态：浮动窗口出现时，周围的界面淡化，需要一个明确的操作取消； 非模态：点击浮动窗口周围的界面也可以取消浮动窗口。 如果在移动设备中使用了模态视图，可以考虑可以浮动窗口替代它。以下情况下可以帮助我们决定浮动窗口的使用是否合理： 是否需要不同类型的
6、输入？ 是否需要用户穿过多级视图？ 可能在主视图操作才可以完成任务吗？ 任务需要用户深度投入并且是程序的一个主要功能？,使用浮动窗口（Popovers）,移动交互基本原则,产品程序启动时用户无须等待即可开始操作。 启动图片中显示品牌信息是容许的，如果非要使用启动画面，明确显示时候不应过长并且无需用户进行任何交互。 移动设备一般都有“Home”键，产品在用户按“Home”键之后，则需要做到以下两点： 尽快和合理地保存数据； 退出时保存界面的每一个细节。,立即启动和随时准备停止,另外，我们也要注意用户也不是想像中那么傻的，不要一味提醒他们如何操作（帮助越多说明产品越难用），在设计时应该关注如何更有
7、效地引导用户集中精力快速完成任务。,避免不必要的交互,移动视觉展示基本原则,移动视觉展示基本原则,较少的信息层级关系，用户通过操作跳转较少的页面即能找到想要的信息。如果产品展示部分设计得当可以避免用户寻找信息时跳转的次数过多，减少用户的流失和界面的复杂度。,信息扁平化,所有方位中都显示相似的界面布局，旋转时尽可能保留信息内容或文本的原有样式，尤其在用户阅读、浏览信息内容时，重要的是避免旋转后用户找不到浏览到哪里了。 如果非要对信息内容重新布局，最好可以使用动画、提示等帮助用户理解当前信息内容的变化。,避免布局变化过大或者无缘无故的改变,当用户旋转移动设备的方位时，如果重点显示的内容发生变化，就
8、会使用户感觉对产品失去控制，所以我们在设计时得保证首要内容。,旋转屏幕时保证首要内容为重点,移动视觉展示基本原则,应该是信息内容随着移动设备的旋转而旋转。,避免使用UI元素或者定义一个旋转手势来完成旋转动作,分段控件可以显示并列的信息，使用户在第一时间显示更多的信息，以便于用户在初始阶段就能得到用户所要的关键信息。,工具栏中显示分段控件,例如，提供1004768和7481024的图片来满足两个方位的显示要求。,为每个显示方位各提供一个启动图片或动画,标签栏显示不同种类信息或者是不同的产品模块，是提供一个界面来导航不同视图。,使用标签栏,移动视觉展示基本原则,移动设备的屏幕一般都支持丰富、美观和
9、动人的UI设计，因此我们可以尝试增加产品中产品UI的深度和细节。,整体视觉效果,分段控件可以显示并列的信息，使用户在第一时间显示更多的信息，以便于用户在初始阶段就能得到用户所要的关键信息。,工具栏中显示分段控件,列表（也就是表视图）在移动设备中常用于显示大量的数据信息，但可以使用一个更丰富的方式来显示同样的信息。例如：一般手机中的联系方式是一个列表，而在iPad中的联系方式看起来是一个美观的通讯录，iPad的列表可以显示更多的信息。,重新思考列表,移动视觉展示基本原则,虽然在启动屏、登录屏或产品介绍栏目中出现公司或产品名称及Logo是完全可以接受的，但是在其他窗口中的可用空间应该出现其产品内容
10、。如果没有其他内容，则应尽量使窗口小一些。,不要到处粘贴公司或产品的名称及Logo,用熟悉的隐喻为用户的任务提供直接而直观的界面; 但是我们在设计过程中，也不需要将基于产品的实现局限于真实世界的对应物上范围内; 隐喻支持用户认知而不是记忆。,隐喻效果,移动交互的变化和趋势,移动交互的变化和趋势,基于动作的交互技术使得电脑可以识别人类的行为与动作。比如现在基于动作的系统能解读人类面部表情，或者手部动作所隐含的意思。 动作可以充当人机交流时更无缝的一种方式，例如iPhone bump这个软件，能让两个人通过“碰”一下来交换联系信息。这个动作和碰见某人、交换名片类似，这种交互方式对于最终用户来说感觉
11、很自然。其实这些是应用了移动设备本身的LBS和重力感应，实现“碰撞”设备交互数据，其它还可以应用到如通讯录、照片和应用程序等等范围。,基于动作的交互技术,移动交互的变化和趋势,语音是较早就进行的一种自然交互技术，语音拨号、语音命令控制、简单的数据输入等工具已经开始在一些移动设备中使用。利用语音识别技术，用户通过语音输入来拓宽移动设备输入的窄道，而语音的信息反馈则使用户可以使用除视觉之外的第二感觉通道来接收信息。,基于语音的交互,移动交互的变化和趋势,前年推出的一些Wikitude Travel Guide软件除了象现在这样在一个俯瞰图上叠一个路线图，并且在用户即时实拍的影象上显示地理导航信息，
12、并设备合成与真实环境相关的实时信息（现实增强技术的潜在功能之一）。 现实增强技术的应用当然不限于导航，例如iPhone手机上的Yelp软件能滚动显示你针对当前正在拍摄的酒店的顾客评价；诺基亚手机上的Point and Find 能让用户马上检索相关信息，用户仅需要把手机的摄相头对准检索对象即可来。 在其它领域，增强现实也可以得到较多的应用，例如： 教育：网络课堂上建立学生与教师在显示器前的直接互动； 医疗：医生们可以用增强现实来远程指导病人解决问题。,现实增强技术,移动交互的变化和趋势,要尽量充分地利用相关服务的技术能力，对用户在上下操作环境中的各方面特征进行更加细微准确的了解与分析。考虑对用
13、户的地理位置信息、工作计划、任务安排、会议行程、行事历、微博feed、Gmail账户等中的订阅、提醒服务、通讯录等进行合理合法的利用，使产品应用能够为用户提供更加智能、更加个性化的内容及功能。 目前的一些些智能化只是局限于表象，也仅仅是初级阶段，而产品的真正智能化则在于产品自身的特性，例如下一代智能分析将从传统的离线分析转向在线嵌入式分析。 用户可以从分析历史数据来解释发生了什么，到对历史和来自多种系统的实时数据进行即时分析以模拟和预测未来。下一代智能分析会在第三维度上成熟，从由个别进行的结构和简单的数据分析移向来自众多系统对多种类型的复杂信息的分析。这就需要有云计算、大数据、内存计算甚至是物
14、联网等技术去支撑。,智能化与个性化的交互,移动交互的变化和趋势,例如Zite的内容阅读类应用，它会读取用户在Google Reader、Twitter和Delicious账户中的内容信息，分析用户的个人喜好，并在此基础上向用户推荐其他内容源当中的相关文章。例如让用户试着在这款应用中授权其Delicious账户，五秒钟之内，它就完成了对用户曾经收藏过的文章的分析，并基于用户的兴趣方向生成了一本完全个性化的杂志，让用户可以阅读到更多感兴趣的新文章。,智能化与个性化的交互,移动交互的变化和趋势,随着传感器和智能被添加到像连接到因特网上的移动设备这样的物理器件中，互联网的扩展要素包括嵌入式传感器、图像
15、识别、信息短距离相互传输和近距离无信通信（NFC）支付等，使得移动设备中数据可以像物品一样被随时随地的交换，包括用户的身份信息。近距离无信通信（NFC）让用户在一个兼容的读卡器前挥一下他们的手机就可以完成付款。 一般移动设备自带的NFC功能，包含用户各种卡类信息，从而可以取代用户的银行卡、饭卡、公交卡和门卡等等。,与物联网结合的交互,移动交互的变化和趋势,触屏移动设备通过对手指划动屏幕的手势进行识别，来完成与移动设备的交互。但是由于识别技术的限制，可用的手势种类不多，随着其他计算视觉等技术在手机上的成熟运用，则手势识别会有更大的发展。 类似的例如Palm Pre有一个手势感应板能识别手指的滑动
16、方式，从右到左意味着后退，把一应用从屏幕丢出去意味着退出、缓缓向上拖动意味着唤醒全局导航。,手势交互,移动交互的变化和趋势,裸眼3D技术 裸眼3D技术是利用前置摄像头探测用户和设备的相对位置，在屏幕上显示立体化的图形，不需要戴眼镜可以看到3D的效果。 摄像头交互技术 摄像头的潜力同样越来越让人开始关注，除了拍照和拍视频还有很多料想不到的功能，比如类似于kinect的操作，在屏幕上方移动手掌可以操作移动设备、Galaxy Nexus的脸部识别功能等。 虚拟现实 表情识别 空间动作交互 智能的各种表面技术,其它一些新兴的交互技术,移动视觉展示的变化和趋势,移动视觉展示的变化和趋势,采用流体布局，而不是固定宽度，这样更多的样式表被查询设备选择网页能够随着不同设备屏幕的变化而自适应变化，从而使得不同屏幕尺寸的设备都能够拥有完美的显示。通过对不同的浏览器宽度用不同的CSS来进行渲染，能够控制在不同宽度下个元素的表现效果。 增强适配性，平面化的图形便于横向拉伸，分辨率增大的同时，顶部可以由两栏合并为一栏，手机和平板可以使用同一个程序，所以应用程序将更多的考虑高分辨率的显示效果，而不是
