移动界面设计If

第8章移动界面设计山东大学计算机学院主要内容提要移动设备及交互方式移动界面的设计原则移动界面要素设计移动界面设计技术与工具移动界面的设计实例山东大学计算机学院28.1.1移动设备介于PDA和笔记本电脑之间的移动互联网设备MID（MobileInternetDevice）超移动个人电脑UMPC（Ultra-MobilePC）如OQO（图a）、FlipStartMiniPC（图b），诺基亚公司推出的采用Linux操作系统的N810移动终端（图c）与苹果公司所推出的高端智能手机iPhone（图d）等。山东大学计算机学院3移动平台应用现状尼尔森预测：在美国市场，智能手机将在2011年超越普通手机世界中国GoogleCEO施密特：未来的移动生态系统将由3股强大的趋势汇合：运算能力、连接、云计算，手机将是这一大趋势的终极设备“Google的工程师正优先为移动考虑，移动应用是更好的应用，也是顶级工程师最乐意做的，它更加具体、人性化，拥有更强的地理感知能力，这种挑战让工程师很兴奋。”“互联网的影响极大，关于出版和微博客的革命影响我们生活的方方面面，今天的年轻一代不再把手里拿着的叫移动电话，而叫手机，这对我们每个人都是个好消息。“新浪微博35%内容来自手机Android飞跃发展Android一天新增20万用户（5月时一天10万，6月时一天16万)施密特说：“Android不只是惊人，是难以置信的惊人。”Android侵吞Nokia、RIM智能市场份额比较下美国和中国的智能手机市场份额，美国的今天会是中国的未来？美国：RIM、Apple、HTC中国：Nokia、Motorola、Samsung相比于PC，Mobile带来的想象空间更大Microstrategy新型移动设备的感知设计1.多点触控iOS及Android系统2.0以上版本可多点触控2.地理定位GPS：定位到10m精度，耗时2-10分钟，户外使用，耗电大Wifi：定位到50m精度，耗时、耗电忽略不计基站：定位到100-2500m精度，耗时耗电忽略不计3.运动方向通过手机内置的加速器侦测4.手持定向通过手机内置的数字罗盘实现，智能手机可识别用户是横向，还是竖向握机，从而自动调整页面5.语音输入输入到手机，输出到用户，GoogleVoice可识别用户发出的声音，进行搜索，解决了手机输入不便的难题6.视频/图片利用照相机捕捉或输入图片，新浪微博的手机客户端已经实现拍照上传功能7.实时通知应用程序可实时通知到用户，如手机报发送过到手机时的提醒8.设备连接通过蓝牙连接两个设备9.靠近识别手机靠近其他物体，比如可实现刷卡购物10.环境识别感知周围环境光线的强弱11.电子标签（Apple专利）通过射频信号自动识别目标对象并获取相关数据，图书馆借书、超市购物、物流管理时都可以见到12.触觉反馈（Apple专利）手机屏幕各个部分提供不同的触觉，可以用来为盲人做设计，比如为音乐播放器设计时，可以把“播放”按钮做出凸出的触觉13.生理识别（Apple专利）视网膜、指纹识别，可以通过指纹实现锁定手机14.陀螺仪（iPhone4）360度运动感知，iPhone4已经实现，对游戏爱好者是个好消息15.双面摄像（iPhone4）感知用户持手机的正面还是反面，自动启用背面或前置摄像头8.1.2连接方式移动互联网的数据接入方式无线局域网（WLAN）IEEE制订的IEEE802.11无线局域网标准(称为“Wi－Fi”)欧洲电信标准协会制订的HiperLAN无线城域网（WMAN）较大的地理区域内无须布线IEEE制订的IEEE802.16和IEEE802.16a（又称为WiMAX）山东大学计算机学院17无线个域网（WPAN）工作于超短距离的个人操作环境中，特点是需要相互通讯的设备可以按需建网，并具有动态拓扑的特点，以适应网络节点的移动性。“蓝牙”（Bluetooth）技术高速无线广域网（WWAN）第三代移动通信系统，即3G（3rdGeneration）系统的目标是采用数字技术实现语音、数据以及多媒体信息的高速传输目前主要的3G标准包括欧洲的WCDMA、美国的CDMA2000、中国开发的时分同步的码分多址技术。卫星通讯用于多信道广播、远程数据传送以及地面多媒体通信系统的接入手段8.1.3交互方式输入方式键盘输入手机键盘的设计主要还是从手机的主要功能即语音通信考虑的。由于每一个按键都是复用的，如数字键“7”和字母“P”、“Q”、“R”、“S”共用一个按键。T9输入法就是目前最为著名的一种解决方案。使用T9输入法的优越之处在于输入一个字以后，会提示一些可以合法组合的常见字，用户只需要简单地选择即可输入，大大降低了手机文字输入的疲劳程度，提高了批量文字信息的输入效率。T9比软键盘输入法的效率高输入方式笔输入手写文字识别是一种文本的输入方式，作为键盘输入的一种替代方式。随着笔输入技术的日益成熟，目前笔输入技术的在包括平板电脑（TabletPC）、智能手机、掌上电脑等多种移动设备中的得到了广泛应用。近年来微软公司力推TabletPC，也在一定程度上对于笔输入的普及起了推波助澜的作用。笔输入是目前掌上电脑最主要的一种输入方式。特别在中国，由于汉字书写的复杂性，手写笔输入成为最自然、符合中国人书写习惯的输入方式。山东大学计算机学院20输入方式多点触控“Mulit-Tuch”实际基于红外捕捉技术，利用特殊红外灯在桌体内部形成均匀红光照射，再利用多个高效红外捕捉摄像机，搭建其一个抗干扰的红外捕捉系统，当用户通过手或激光笔触控桌面时，红外捕捉系统能迅速捕捉，交由定制的红外捕捉处理程序处理。从而完成不同手势的响应。从2008年到2010年，诺基亚手机采用的普通键盘的份额逐年递减，全键盘和触摸屏则逐年增加，到2010年，触摸屏已占据主流基本手势单击：手指轻击屏幕后离开双击：手指快速单击屏幕两下拖拽：在屏幕上移动指尖一段距离，期间保持接触轻弹：指尖快速划过屏幕捏：两个手指放在屏幕上，中间隔开小段距离，之后靠拢到一起，像捏东西一样展开：两个手指放在屏幕上，先靠在一起，然后划开按压：手指按住屏幕，持续较长的一段时间按压并单击：一个手指按压，另一个手指同时单击按压并拖拽：一个手指按压，另一个手指同时拖拽旋转：两个手指接触屏幕，之后顺时针或逆时针旋转触摸手势—用户操作基础操作切换模式：按压，例：手机解锁打开：双击，例：打开UC浏览器、手机QQ等选择：单击，例：比如接电话时单击绿色小电话图标即可触摸手势—用户操作目标导向的操作调整：按压并拖拽删除：拖拽，将目标拖向垃圾箱或屏幕外复制：单击要复制的目标，然后单击你想复制到的其他地方，将该目标复制移动：拖拽目标，移动到某处后松手，可使用单手指或多手指轻弹某目标，让其划动到某区域按压并单击：一个手指放在目标上，另一个手指单击屏幕其他地方，将目标移动到该处旋转：两个手指按住屏幕，然后顺时针或逆时针旋转触摸手势—用户操作目标导向的操作缩放：捏，两个手指捏到一起可实现缩放功能，也可同时使用5根手指捏到一起放大：展开，两个手指先捏在一起，之后反方向弹开，实现放大功能，也可以同时使用5根手指展开调整视角：旋转调整视野（缩小）：捏，或者双击目标调整视野（放大）：展开，或者双击目标，一般视野最大化后再次双击，可缩小视野；显示（隐藏的）功能：单击，比如手机QQ好友分组，单击即打开触摸手势—用户操作目标导向的操作按压并单击双击单击屏幕特殊角落列表间移动：比如歌曲列表里移动，想听下一首歌时两个手指拖拽，或者旋转触摸手势—用户操作导航摇动：用整个手掌拖拽滚动：拖拽滚动条，可显示更多条目两个手指拖拽按压：你有按压实现滚动的例子么？快速滚动：轻弹，这个用的比较多，比如翻看手机中的照片时单击，滚动正在进行中时单击屏幕，可实现快速滚动拖拽：拖拽滚动条实现快速滚动触摸手势—用户操作画图操作接受：用手指画一个对号剪切：用手指画一个斜杠寻找帮助：用手指画一个问号拒绝：用手指画一个“X”取消：用手指划掉某区域输入方式语音识别语音识别技术的研究工作始于20世纪50年代目前这个领域最具代表性的产品是IBM公司的Viavoice和DRAGON公司的NaturallySpeaking。可以通过将掌上设备作为语音门户网站(VoicePortal)的访问终端。在这种环境中，用户可以在办公室、家里或旅行途中随时随地通过手机等具有语音通信功能的移动设备与具备语音识别与合成技术的语音门户网站进行对话语音识别技术还可以用于人机界面的语音命令导航，使得用户可以直接用语音发出各种操作指令山东大学计算机学院31输出方式显示技术显示屏的关键因素：分辨率、色彩、尺寸、功耗及显示响应速度。多种显示器：超扭曲阵列(Super-TwistedNematicSTN）、DSTN(DualSTN)、CSTN（ColorSTN）、薄膜式晶体管（ThinFilmTransistor，TFT）以及薄膜二极管（ThinFilmDiode，TFD）等。单色STN液晶屏：用简单的无源矩阵寻址方案，具有性能可靠、成本低、功耗也极低的特点一些新的显示技术：有机发光二极管和硅基液晶。山东大学计算机学院32输出方式声音输出手机与PDA等掌上设备的声音输出功能一般较弱。近年来，逐渐通过引入声音合成技术，使得其可以播放较为动听的MIDI（MusicalInstrumentDigitalInterface）电子音乐。移动设备的音乐合成技术主要包括两种：调频（FrequencyModulation，FM）合成与波表（WaveTable）合成。复音就是俗称的“和弦”，指的是音乐合成系统中能够同时发出的声音的数目，而并非音乐理论中的和弦。山东大学计算机学院33移动界面设计的新问题资源相对匮乏高档手机的显示分辨率也不过320×240，而且尺寸很小，无法展示网站丰富的多媒体内容。移动界面并非简单的缩小版的桌面系统的用户界面。桌面系统用户界面中采用的一般是并行展示其中各种选择可以在一个大小可调的屏幕中同时显示出来，移动界面中，这些选择只能采用顺序展示的方式移动界面设计的难题就是如何在有限的资源条件下有效地为用户提供信息服务，提供的选择须根据重要性排列山东大学计算机学院34移动界面设计的新问题移动设备的种类繁多在开发移动应用时需要专门针对某一型号的一种设备开发，大大增加了应用开发的复杂度；在移动界面的设计中，各设备的差异是移动应用开发过程中最需要关注的一个环节；移动界面具有一定的自适应性是解决问题的一种思路山东大学计算机学院35移动界面设计的新问题连接方式复杂移动互联网的数据接入方式形式繁杂，多种标准并存，并在较长的一段时间内也很难完全统一。而移动设备的位置具有很强的移动性，同一设备可能在不同的时间段处于不同的网络连接条件下，网络的性能变化范围可能很大，移动的同时往往需要保持应用执行的连续性。应将网络连接状况视为一种资源，在设计时制订相应的策略。山东大学计算机学院36移动界面设计的新问题移动界面设计中的最大问题就是界面的定制无论是移动设备各种资源的匮乏、种类与连接方式的繁复，最终均可以归结为根据需要定制合适的移动应用界面。山东大学计算机学院378.2移动界面的设计原则简单直观个性化设计易于检索界面风格一致避免不必要的文本输入根据用户的要求使服务个性化最大限度地避免用户出错文本信息应当本地化山东大学计算机学院38限制往往能带来创新确定核心需求当你在320*480（iPhone、Palmpre、第1代Android）的分辨率下，意味着你要抛弃原有web页面80%的内容、导航、交互等。这样做减法很过瘾，你必须保证屏幕上的信息对用户是最重要的。老板想来加点东西？那你可以理直气壮地说，对不起，没空间了，我想我们得做