移动应用平台交互设计方案专题培训课件

目录移动交互基本原则移动视觉展示基本原则移动交互的变化和趋势移动视觉展示的变化和趋势交互评估移动信息时代应用类型特征为三种：一是效率型应用

例如，iPhone、HTC等智能手机应用。二是实用型应用

例如，Pad、iPad等平板电脑应用。三是沉浸型应用

例如，笔记本、台式机等应用。移动交互基本原则移动交互基本原则在用户执行明确的任务时，我们应该提供新颖、简洁、明了的交互方式，不要为了填满整个屏幕而增加一些与主要任务没有直接关联的功能，不要为了功能而功能，或者是为了大而全地展示产品功能，而是应该提升产品的用户体验和性能。增强交互直接操作的好处是当用户可以直接操作对象时，他们能更好的明白自己操作的结果；让用户（而不是产品）来触发和控制动作，要使动作简单、直接，使用户可以容易的理解和记住；不论任何时候，只要有可能，就使用用户已经熟悉的标准控制和行为；为了在产品里加强直接操作的感觉，我们要确保：当用户在屏幕上操作对象时，那些对象仍是可见的；用户操作的结果要立即可见，即所见即所得。简单、直接的操作移动交互基本原则竖向的大屏幕可以满足大部分用户常用浏览内容的需求，但当竖屏较小时，用户就会将屏幕旋转为横屏，因为这样可以使用户浏览较多的信息。考虑到有些产品只能在横屏或竖屏下显示，所以显示产品为正常显示方式，无论当前移动设备是什么方位。避免使用UI元素来告知用户旋转设备（支持180°旋转。）。支持全方位操作在长时操作中，当用户操作时，他们需要及时的反馈和状态报告。产品应该提供一些可见的变化，这些变化根据每个用户的动作而变化。增强反馈和交流移动交互基本原则在有严重的问题或者重大操作发生时，可以使用声音来提示用户，但是通常应该允许用户取消声音。除非特别必要时，不要提供声音反馈如果按键布局过于拥挤，用户就要小心翼翼地花更多时间去操作，那么错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素，让用户更快更容易点击。提供指尖大小的点击区域相似的视觉元素，而只在某一区域变更内容。普遍的规则是宁愿转换单独的视图或者组件，也不要进行全屏切换，以保证用户的视觉稳定性，帮助用户理解自己所处的位置。减少全屏切换移动交互基本原则通过设计产品中的UI来组织信息框架，减少控件的数量和淡化显示效果，创建和产品风格相符的控件，这样即不突出，但又易于发现。这样就能够让用户注意力能够集中其所要做的工作中，而当用户需要改变工作状态时，也能够立即找到相应控件进行改变工作状态。弱化界面控件移动设备的屏幕一般支持自定义的多点触摸，但也要不用响应不标准的触摸手势，如果有也只有一种方式来执行操作命令。多点触控在合理的情况下，应尽可能地减少输入，直接为用户提供选项；或者通过语音输入、声纹识别等新技术，为用户提供更便捷的输入模式。减少输入移动交互基本原则浮动窗口可以显示控件或者工具，不必切换屏幕即可完成操作。但是由于移动设备产品各自屏幕大小均不一样，所以在设计过程根据实际情况进行调整，原则上则是使用浮动窗口显示控件或工具。浮动窗口和模态视图有些相似，当浮动窗口显示时，不能操作主视图。但模态视图是模态的，然而浮动窗口可以用在两种途径：模态：浮动窗口出现时，周围的界面淡化，需要一个明确的操作取消；非模态：点击浮动窗口周围的界面也可以取消浮动窗口。如果在移动设备中使用了模态视图，可以考虑可以浮动窗口替代它。以下情况下可以帮助我们决定浮动窗口的使用是否合理：是否需要不同类型的输入？是否需要用户穿过多级视图？可能在主视图操作才可以完成任务吗？任务需要用户深度投入并且是程序的一个主要功能？使用浮动窗口（Popovers）移动交互基本原则产品程序启动时用户无须等待即可开始操作。启动图片中显示品牌信息是容许的，如果非要使用启动画面，明确显示时候不应过长并且无需用户进行任何交互。移动设备一般都有“Home”键，产品在用户按“Home”键之后，则需要做到以下两点：尽快和合理地保存数据；退出时保存界面的每一个细节。立即启动和随时准备停止另外，我们也要注意用户也不是想像中那么傻的，不要一味提醒他们如何操作（帮助越多说明产品越难用），在设计时应该关注如何更有效地引导用户集中精力快速完成任务。避免不必要的交互移动视觉展示基本原则移动视觉展示基本原则较少的信息层级关系，用户通过操作跳转较少的页面即能找到想要的信息。如果产品展示部分设计得当可以避免用户寻找信息时跳转的次数过多，减少用户的流失和界面的复杂度。信息扁平化所有方位中都显示相似的界面布局，旋转时尽可能保留信息内容或文本的原有样式，尤其在用户阅读、浏览信息内容时，重要的是避免旋转后用户找不到浏览到哪里了。如果非要对信息内容重新布局，最好可以使用动画、提示等帮助用户理解当前信息内容的变化。避免布局变化过大或者无缘无故的改变当用户旋转移动设备的方位时，如果重点显示的内容发生变化，就会使用户感觉对产品失去控制，所以我们在设计时得保证首要内容。旋转屏幕时保证首要内容为重点移动视觉展示基本原则应该是信息内容随着移动设备的旋转而旋转。避免使用UI元素或者定义一个旋转手势来完成旋转动作分段控件可以显示并列的信息，使用户在第一时间显示更多的信息，以便于用户在初始阶段就能得到用户所要的关键信息。工具栏中显示分段控件例如，提供1004×768和748×1024的图片来满足两个方位的显示要求。为每个显示方位各提供一个启动图片或动画标签栏显示不同种类信息或者是不同的产品模块，是提供一个界面来导航不同视图。使用标签栏移动视觉展示基本原则移动设备的屏幕一般都支持丰富、美观和动人的UI设计，因此我们可以尝试增加产品中产品UI的深度和细节。整体视觉效果分段控件可以显示并列的信息，使用户在第一时间显示更多的信息，以便于用户在初始阶段就能得到用户所要的关键信息。工具栏中显示分段控件列表（也就是表视图）在移动设备中常用于显示大量的数据信息，但可以使用一个更丰富的方式来显示同样的信息。例如：一般手机中的联系方式是一个列表，而在iPad中的联系方式看起来是一个美观的通讯录，iPad的列表可以显示更多的信息。重新思考列表移动视觉展示基本原则虽然在启动屏、登录屏或产品介绍栏目中出现公司或产品名称及Logo是完全可以接受的，但是在其他窗口中的可用空间应该出现其产品内容。如果没有其他内容，则应尽量使窗口小一些。不要到处粘贴公司或产品的名称及Logo用熟悉的隐喻为用户的任务提供直接而直观的界面;但是我们在设计过程中，也不需要将基于产品的实现局限于真实世界的对应物上范围内;隐喻支持用户认知而不是记忆。隐喻效果移动交互的变化和趋势移动交互的变化和趋势基于动作的交互技术使得电脑可以识别人类的行为与动作。比如现在基于动作的系统能解读人类面部表情，或者手部动作所隐含的意思。动作可以充当人机交流时更无缝的一种方式，例如iPhonebump这个软件，能让两个人通过“碰”一下来交换联系信息。这个动作和碰见某人、交换名片类似，这种交互方式对于最终用户来说感觉很自然。其实这些是应用了移动设备本身的LBS和重力感应，实现“碰撞”设备交互数据，其它还可以应用到如通讯录、照片和应用程序等等范围。基于动作的交互技术移动交互的变化和趋势语音是较早就进行的一种自然交互技术，语音拨号、语音命令控制、简单的数据输入等工具已经开始在一些移动设备中使用。利用语音识别技术，用户通过语音输入来拓宽移动设备输入的窄道，而语音的信息反馈则使用户可以使用除视觉之外的第二感觉通道来接收信息。基于语音的交互移动交互的变化和趋势前年推出的一些WikitudeTravelGuide软件除了象现在这样在一个俯瞰图上叠一个路线图，并且在用户即时实拍的影象上显示地理导航信息，并设备合成与真实环境相关的实时信息（现实增强技术的潜在功能之一）。现实增强技术的应用当然不限于导航，例如iPhone手机上的Yelp软件能滚动显示你针对当前正在拍摄的酒店的顾客评价；诺基亚手机上的PointandFind能让用户马上检索相关信息，用户仅需要把手机的摄相头对准检索对象即可来。在其它领域，增强现实也可以得到较多的应用，例如：教育：网络课堂上建立学生与教师在显示器前的直接互动；医疗：医生们可以用增强现实来远程指导病人解决问题。现实增强技术

移动交互的变化和趋势要尽量充分地利用相关服务的技术能力，对用户在上下操作环境中的各方面特征进行更加细微准确的了解与分析。考虑对用户的地理位置信息、工作计划、任务安排、会议行程、行事历、微博feed、Gmail账户等中的订阅、提醒服务、通讯录等进行合理合法的利用，使产品应用能够为用户提供更加智能、更加个性化的内容及功能。目前的一些些智能化只是局限于表象，也仅仅是初级阶段，而产品的真正智能化则在于产品自身的特性，例如下一代智能分析将从传统的离线分析转向在线嵌入式分析。用户可以从分析历史数据来解释发生了什么，到对历史和来自多种系统的实时数据进行即时分析以模拟和预测未来。下一代智能分析会在第三维度上成熟，从由个别进行的结构和简单的数据分析移向来自众多系统对多种类型的复杂信息的分析。这就需要有云计算、大数据、内存计算甚至是物联网等技术去支撑。智能化与个性化的交互移动交互的变化和趋势例如Zite的内容阅读类应用，它会读取用户在GoogleReader、Twitter和Delicious账户中的内容信息，分析用户的个人喜好，并在此基础上向用户推荐其他内容源当中的相关文章。例如让用户试着在这款应用中授权其Delicious账户，五秒钟之内，它就完成了对用户曾经收藏过的文章的分析，并基于用户的兴趣方向生成了一本完全个性化的杂志，让用户可以阅读到更多感兴趣的新文章。智能化与个性化的交互移动交互的变化和趋势随着传感器和智能被添加到像连接到因特网上的移动设备这样的物理器件中，互联网的扩展要素包括嵌入式传感器、图像识别、信息短距离相互传输和近距离无信通信（NFC）支付等，使得移动设备中数据可以像物品一样被随时随地的交换，包括用户的身份信息。近距离无信通信（NFC）让用户在一个兼容的读卡器前挥一下他们的手机就可以完成付款。一般移动设备自带的NFC功能，包含用户各种卡类信息，从而可以取代用户的银行卡、饭卡、公交卡和门卡等等。与物联网结合的交互移动交互的变化和趋势触屏移动设备通过对手指划动屏幕的手势进行识别，来完成与移动设备的交互。但是由于识别技术的限制，可用的手势种类不多，随着其他计算视觉等技术在手机上的成熟运用，则手势识别会有更大的发展。类似的例如PalmPre有一个手势感应板能识别手指的滑动方式，从右到左意味着后退，把一应用从屏幕丢出去意味着退出、缓缓向上拖动意味着唤醒全局导航。手势交互移动交互的变化和趋势裸眼3D技术裸眼3D技术是利用前置摄像头探测用户和设备的相对位置，在屏幕上显示立体化的图形，不需要戴眼镜可以看到3D的效果。摄像头交互技术摄像头的潜力同样越来越让人开始关注，除了拍照和拍视频还有很多料想不到的功能，比如类似于kinect的操作，在屏幕上方移动手掌可以操作移动设备、GalaxyNexus的脸部识别功能等。虚拟现实表情识别空间动作交互智能的各种表面技术其它一些新兴的交互技术移动视觉展示的变化和趋势移动视觉展示的变化和趋势采用流体布局，而不是固定宽度，这样更多的样式表被查询设备选择——网页能够随着不同设备屏幕的变化而自适应变化，从而使得不同屏幕尺寸的设备都能够拥有完美的显示。通过对不同的浏览器宽度用不同的CSS来进行渲染，能够控制在不同宽度下个元素的表现效果。增强适配性，平面化的图形便于横向拉伸，分辨率增大的同时，顶部可以由两栏合并为一栏，手机和平板可以使用同一个程序，所以应用程序将更多的考虑高分辨率的显示效果，而不是简单的栏目自适应拉伸，去刻意填满屏幕，故今后的相关设计中，则应充分考虑到栏目的合并或平行化。响应式界面设计（有虚拟化桌面的倾向，并且逐渐达到一个产品均适应不同设备平台，即多平台、多设备浏览的统一）移动视觉展示的变化和趋势自WP7使用Metro风格之后，Windows8为代表的界面会将这种新兴设计风格推向主流，Metro的特点就是简洁与直观，没有过分华丽的炫目背景与精致的功能图标。Android4.0系统的视觉设计，放弃了原有的设计风格，整体正在向平面化、格子风的设计方向进化，虽然没有那么强烈的Metro设计风格，但是这足以可以体现Metro风格的影响力。平面化、格子化视觉风格移动视觉展示的变化和趋势部分移动应用由于发展时间比较长，已经变得有些臃肿，默认的五个标签栏已经满足不了架构需求。类似Pad的侧边栏越来越多出现在手机界面设计，有助于减少界面的层级关系，充分利用显示空间，或者让目录型数据便于在较低分辨率的界面中操作。侧边栏可以保证视觉的稳定性，如果和界面操作不冲突的话，可以依靠左右滑动手势调出侧边栏，提升操作效率。侧边栏也可以放置操作按钮，但可能会导致界面看起来显得拥挤，更多的侧边栏样式及应用场景还需要根据实际产品应用情况不断地进行尝试。侧边栏菜单移动视觉展示的变化和趋势动态效果设计和交互视觉都息息相关，是一种动态交互行为的用户反馈特效。优秀的动态效果设计，能够增加用户交互的亲和力和趣味性，提升产品的用户体验。动态效果会被越来越多的平台软件应用，移动设备硬件的提升，给动态效果体验设计带来了展示的机会，给软件产品的用户体验升级提供了更大的空间。动态效果（媒体化效果之一，现阶段往往是使用在产品功能之间的转换）移动视觉展示的变化和趋势动态效果设计和交互视觉都息息相关，是一种动态交互行为的用户反馈特效。优秀的动态效果设计，能够增加用户交互的亲和力和趣味性，提升产品的用户体验。动态效果会被越来越多的平台软件应用，移动设备硬件的提升，给动态效果体验设计带来了展示的机会，给软件产品的用户体验升级提供了更大的空间。而Foursquare和Gowalla会在合适的时机，提醒你可以执行某个操作。某个按钮挪了位置，快速去添加好友，开始签到并与好友分享图片。通过这样一种Tips告知的形式，让用户关注到系统的状态，引导用户可以继续走向哪里，可以启动很好的帮助用户熟悉应用的作用。合理的用户引导移动视觉展示的变化和趋势产品的定位和核心功能决定了主界面的布局，对于不同信息架构的产品，主界面会有很大的不同，但是要使产品从同类产品的相似界面中脱颖而出只有使用户专注。从主界面点击超过三次才能操作的功能被使用机率则非常低，普通用户不会乐于使用深层界面被掩藏的功能。同样，也有数据表明，在界面上突出某项功能的视觉特征，会提高用户使用该功能的机率；对具有“利用碎片化时间”和“显示区域较小”特征的移动应用来说，让用户在多个功能按钮中进行选择，也会成为影响用户体验的因素。另一个影响视觉设计的因素是：设计的重点与单个功能的使用率。突出主要功能（或者产品定义的核心）移动视觉展示的变化和趋势提到在移动设备的小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。又例如Flickr对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。Flickr的核心是照片，它的用户或许不希望看到又大又笨的导航，用户明确想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和导航（而事实上，很多导航元素已经在照片本身的交互上实现了）。简化界面移动视觉展示的变化和趋势移动设备的屏幕越来越大，但还是要减少不必要视觉元素干扰用户，特别是对于浏览类产品，更注重扩大主体显示区域。目前有一些移动设备上的浏览器将地址栏放置底部，增加显示空间，同时让用户的操作集中在界面底部。又例如百度手机浏览器WP7版单指滑动工具栏可以缩放页面，这也是动效的应用案例之一，目的同样也是为了扩大主体显示区域。全局显示移动视觉展示的变化和趋势一些应用把界面设计成层，利用i