1 / 99

第 8 章 移动界面设计

第 8 章 移动界面设计. 山东大学计算机学院. 主要内容提要. 移动设备及交互方式 移动界面的设计原则 移动界面要素设计 移动界面设计技术与工具 移动界面的设计实例. 8.1.1 移动设备. 介于 PDA 和笔记本电脑之间的移动互联网设备 MID （ Mobile Internet Device ） 超移动个人电脑 UMPC （ Ultra-Mobile PC ）

olive
Download Presentation

第 8 章 移动界面设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第8章 移动界面设计 山东大学计算机学院

  2. 主要内容提要 • 移动设备及交互方式 • 移动界面的设计原则 • 移动界面要素设计 • 移动界面设计技术与工具 • 移动界面的设计实例 山东大学计算机学院

  3. 8.1.1移动设备 • 介于PDA和笔记本电脑之间的移动互联网设备MID（Mobile Internet Device） • 超移动个人电脑UMPC（Ultra-Mobile PC） • 如OQO（图a）、FlipStart MiniPC（图b），诺基亚公司推出的采用Linux操作系统的N810移动终端（图c）与苹果公司所推出的高端智能手机iPhone（图d）等。 山东大学计算机学院

  4. 移动平台应用现状 • 尼尔森预测：在美国市场，智能手机将在 2011年 超越普通手机

  5. 世界

  6. 中国

  7. Google CEO 施密特：未来的移动生态系统将由3股强大的趋势汇合：运算能力、连接、云计算，手机将是这一大趋势的终极设备 • “Google的工程师正优先为移动考虑，移动应用是更好的应用，也是顶级工程师最乐意做的，它更加具体、人性化，拥有更强的地理感知能力，这种挑战让工程师很兴奋。” • “互联网的影响极大，关于出版和微博客的革命影响我们生活的方方面面，今天的年轻一代不再把手里拿着的叫移动电话，而叫手机，这对我们每个人都是个好消息。“ • 新浪微博35%内容来自手机

  8. Android飞跃发展 • Android 一天新增20万用户（5月时一天10万，6月时一天16万) • 施密特说：“Android不只是惊人，是难以置信的惊人。” • Android侵吞Nokia、RIM智能市场份额

  9. 比较下美国和中国的智能手机市场份额，美国的今天会是中国的未来？比较下美国和中国的智能手机市场份额，美国的今天会是中国的未来？ • 美国：RIM、Apple、HTC • 中国：Nokia、Motorola、Samsung

  10. 相比于PC，Mobile带来的想象空间更大 Micro  strategy

  11. 新型移动设备的感知设计 • 1.多点触控 iOS及Android系统2.0以上版本可多点触控 • 2.地理定位GPS：定位到10m精度，耗时2-10分钟，户外使用，耗电大Wifi：定位到50m精度，耗时、耗电忽略不计基站：定位到100-2500m精度，耗时耗电忽略不计 • 3.运动方向通过手机内置的加速器侦测 • 4.手持定向通过手机内置的数字罗盘实现，智能手机可识别用户是横向，还是竖向握机，从而自动调整页面

  12. 5.语音输入 • 输入到手机，输出到用户，Google Voice可识别用户发出的声音，进行搜索，解决了手机输入不便的难题 • 6.视频/图片 • 利用照相机捕捉或输入图片，新浪微博的手机客户端已经实现拍照上传功能 • 7.实时通知 • 应用程序可实时通知到用户，如手机报发送过到手机时的提醒 • 8.设备连接 • 通过蓝牙连接两个设备

  13. 9.靠近识别 • 手机靠近其他物体，比如可实现刷卡购物 • 10.环境识别 • 感知周围环境光线的强弱 • 11.电子标签 （Apple专利） • 通过射频信号自动识别目标对象并获取相关数据，图书馆借书、超市购物、物流管理时都可以见到 • 12.触觉反馈 （Apple专利） • 手机屏幕各个部分提供不同的触觉，可以用来为盲人做设计，比如为音乐播放器设计时，可以把“播放”按钮做出凸出的触觉

  14. 13.生理识别 （Apple专利） • 视网膜、指纹识别，可以通过指纹实现锁定手机 • 14.陀螺仪（ iPhone4） • 360度运动感知，iPhone 4已经实现，对游戏爱好者是个好消息 • 15.双面摄像（ iPhone4） • 感知用户持手机的正面还是反面，自动启用背面或前置摄像头

  15. 8.1.2 连接方式 • 移动互联网的数据接入方式 • 无线局域网（WLAN） • IEEE制订的IEEE 802.11无线局域网标准(称为“Wi－Fi”)  • 欧洲电信标准协会制订的HiperLAN • 无线城域网（WMAN） • 较大的地理区域内无须布线 • IEEE 制订的IEEE 802.16和IEEE 802.16a（又称为WiMAX） 山东大学计算机学院

  16. 无线个域网（WPAN） • 工作于超短距离的个人操作环境中，特点是需要相互通讯的设备可以按需建网，并具有动态拓扑的特点，以适应网络节点的移动性。 • “蓝牙”（Bluetooth）技术 • 高速无线广域网（WWAN） • 第三代移动通信系统，即3G（3rd Generation）系统的目标是采用数字技术实现语音、数据以及多媒体信息的高速传输 • 目前主要的3G标准包括欧洲的WCDMA、美国的CDMA 2000、中国开发的时分同步的码分多址技术。 • 卫星通讯 • 用于多信道广播、远程数据传送以及地面多媒体通信系统的接入手段

  17. 8.1.3 交互方式 • 输入方式 • 键盘输入 • 手机键盘的设计主要还是从手机的主要功能即语音通信考虑的。由于每一个按键都是复用的，如数字键“7”和字母“P”、“Q”、“R”、“S”共用一个按键。 • T9输入法就是目前最为著名的一种解决方案。使用T9输入法的优越之处在于输入一个字以后，会提示一些可以合法组合的常见字，用户只需要简单地选择即可输入，大大降低了手机文字输入的疲劳程度，提高了批量文字信息的输入效率。 • T9比软键盘输入法的效率高

  18. 输入方式 • 笔输入 • 手写文字识别是一种文本的输入方式，作为键盘输入的一种替代方式。 • 随着笔输入技术的日益成熟，目前笔输入技术的在包括平板电脑（Tablet PC）、智能手机、掌上电脑等多种移动设备中的得到了广泛应用。 • 近年来微软公司力推Tablet PC，也在一定程度上对于笔输入的普及起了推波助澜的作用。 • 笔输入是目前掌上电脑最主要的一种输入方式。特别在中国，由于汉字书写的复杂性，手写笔输入成为最自然、符合中国人书写习惯的输入方式。 山东大学计算机学院

  19. 输入方式 • 多点触控 • “Mulit-Tuch”实际基于红外捕捉技术，利用特殊红外灯在桌体内部形成均匀红光照射，再利用多个高效红外捕捉摄像机，搭建其一个抗干扰的红外捕捉系统，当用户通过手或激光笔触控桌面时，红外捕捉系统能迅速捕捉，交由定制的红外捕捉处理程序处理。从而完成不同手势的响应。

  20. 从2008年到2010年，诺基亚手机采用的普通键盘的份额逐年递减，全键盘和触摸屏则逐年增加，到2010年，触摸屏已占据主流从2008年到2010年，诺基亚手机采用的普通键盘的份额逐年递减，全键盘和触摸屏则逐年增加，到2010年，触摸屏已占据主流

  21. 基本手势 拖拽：在屏幕上移动指尖一段距离，期间保持接触 单击：手指轻击屏幕后离开 双击：手指快速单击屏幕两下 捏：两个手指放在屏幕上，中间隔开小段距离，之后靠拢到一起，像捏东西一样 展开：两个手指放在屏幕上，先靠在一起，然后划开 轻弹：指尖快速划过屏幕

  22. 按压并拖拽：一个手指按压，另一个手指同时拖拽按压并拖拽：一个手指按压，另一个手指同时拖拽 按压：手指按住屏幕，持续较长的一段时间 按压并单击：一个手指按压，另一个手指同时单击 旋转：两个手指接触屏幕，之后顺时针或逆时针旋转

  23. 触摸手势—用户操作 • 基础操作 • 切换模式：按压，例：手机解锁 • 打开：双击，例：打开UC浏览器、手机QQ等 • 选择：单击，例：比如接电话时单击绿色小电话图标即可

  24. 触摸手势—用户操作 • 目标导向的操作 • 调整：按压并拖拽 • 删除：拖拽，将目标拖向垃圾箱或屏幕外 • 复制：单击要复制的目标，然后单击你想复制到的其他地方，将该目标复制 • 移动：拖拽目标，移动到某处后松手，可使用单手指或多手指 • 轻弹某目标，让其划动到某区域 • 按压并单击：一个手指放在目标上，另一个手指单击屏幕其他地方，将目标移动到该处 • 旋转：两个手指按住屏幕，然后顺时针或逆时针旋转

  25. 触摸手势—用户操作 • 目标导向的操作 • 缩放：捏，两个手指捏到一起可实现缩放功能，也可同时使用5根手指捏到一起 • 放大：展开，两个手指先捏在一起，之后反方向弹开，实现放大功能，也可以同时使用5根手指展开 • 调整视角：旋转 • 调整视野（缩小）：捏，或者双击目标 • 调整视野（放大）：展开，或者双击目标，一般视野最大化后再次双击，可缩小视野； • 显示（隐藏的）功能：单击，比如手机QQ好友分组，单击即打开

  26. 触摸手势—用户操作 • 目标导向的操作 • 按压并单击 • 双击 • 单击屏幕特殊角落 • 列表间移动：比如歌曲列表里移动，想听下一首歌时 • 两个手指拖拽，或者旋转

  27. 触摸手势—用户操作 • 导航 • 摇动：用整个手掌拖拽 • 滚动：拖拽滚动条，可显示更多条目 • 两个手指拖拽 • 按压：你有按压实现滚动的例子么？ • 快速滚动：轻弹，这个用的比较多，比如翻看手机中的照片时 • 单击，滚动正在进行中时单击屏幕，可实现快速滚动 • 拖拽：拖拽滚动条实现快速滚动

  28. 触摸手势—用户操作 • 画图操作 • 接受：用手指画一个对号 • 剪切：用手指画一个斜杠 • 寻找帮助：用手指画一个问号 • 拒绝：用手指画一个“X” • 取消：用手指划掉某区域

  29. 输入方式 • 语音识别 • 语音识别技术的研究工作始于20世纪50年代 • 目前这个领域最具代表性的产品是IBM公司的Viavoice和DRAGON公司的Naturally Speaking。 • 可以通过将掌上设备作为语音门户网站(Voice Portal)的访问终端。在这种环境中，用户可以在办公室、家里或旅行途中随时随地通过手机等具有语音通信功能的移动设备与具备语音识别与合成技术的语音门户网站进行对话 • 语音识别技术还可以用于人机界面的语音命令导航，使得用户可以直接用语音发出各种操作指令 山东大学计算机学院

  30. 输出方式 • 显示技术 • 显示屏的关键因素：分辨率、色彩、尺寸、功耗及显示响应速度。 • 多种显示器：超扭曲阵列(Super-Twisted Nematic STN）、DSTN(Dual STN)、CSTN（Color STN）、薄膜式晶体管（Thin Film Transistor，TFT）以及薄膜二极管（Thin Film Diode，TFD）等。 • 单色STN液晶屏：用简单的无源矩阵寻址方案，具有性能可靠、成本低、功耗也极低的特点 • 一些新的显示技术：有机发光二极管和硅基液晶。 山东大学计算机学院

  31. 输出方式 • 声音输出 • 手机与PDA等掌上设备的声音输出功能一般较弱。近年来，逐渐通过引入声音合成技术，使得其可以播放较为动听的MIDI（Musical Instrument Digital Interface）电子音乐。 • 移动设备的音乐合成技术主要包括两种：调频（Frequency Modulation，FM）合成与波表（Wave Table）合成。 • 复音就是俗称的“和弦”，指的是音乐合成系统中能够同时发出的声音的数目，而并非音乐理论中的和弦。 山东大学计算机学院

  32. 移动界面设计的新问题 • 资源相对匮乏 • 高档手机的显示分辨率也不过320×240，而且尺寸很小，无法展示网站丰富的多媒体内容。 • 移动界面并非简单的缩小版的桌面系统的用户界面。 • 桌面系统用户界面中采用的一般是并行展示其中各种选择可以在一个大小可调的屏幕中同时显示出来， • 移动界面中，这些选择只能采用顺序展示的方式 • 移动界面设计的难题就是如何在有限的资源条件下有效地为用户提供信息服务，提供的选择须根据重要性排列 山东大学计算机学院

  33. 移动界面设计的新问题 • 移动设备的种类繁多 • 在开发移动应用时需要专门针对某一型号的一种设备开发，大大增加了应用开发的复杂度； • 在移动界面的设计中，各设备的差异是移动应用开发过程中最需要关注的一个环节； • 移动界面具有一定的自适应性是解决问题的一种思路 山东大学计算机学院

  34. 移动界面设计的新问题 • 连接方式复杂 • 移动互联网的数据接入方式形式繁杂，多种标准并存，并在较长的一段时间内也很难完全统一。 • 而移动设备的位置具有很强的移动性，同一设备可能在不同的时间段处于不同的网络连接条件下，网络的性能变化范围可能很大， • 移动的同时往往需要保持应用执行的连续性。 • 应将网络连接状况视为一种资源，在设计时制订相应的策略。 山东大学计算机学院

  35. 移动界面设计的新问题 • 移动界面设计中的最大问题就是界面的定制 • 无论是移动设备各种资源的匮乏、种类与连接方式的繁复，最终均可以归结为根据需要定制合适的移动应用界面。 山东大学计算机学院

  36. 8.2 移动界面的设计原则 • 简单直观 • 个性化设计 • 易于检索 • 界面风格一致 • 避免不必要的文本输入 • 根据用户的要求使服务个性化 • 最大限度地避免用户出错 • 文本信息应当本地化 山东大学计算机学院

  37. 限制往往能带来创新 • 确定核心需求 • 当你在320*480（iPhone、Palm pre、第1代Android）的分辨率下，意味着你要抛弃原有web页面80%的内容、导航、交互等。 • 这样做减法很过瘾，你必须保证屏幕上的信息对用户是最重要的。老板想来加点东西？那你可以理直气壮地说，对不起，没空间了，我想我们得做更重要的事。

  38. 美国西南航空公司的web站和对应的iPhone app比较 • iPhone app简洁专注于客户需求：机票预订、登机手续、查询航班状态、查询里程等，再没有其他的多余内容。

  39. 浏览器也一样

  40. iPhone和Android简洁比较 • Apple的iPhone系统只有一个进入App的界面，每个图标占据57*57像素的空间，通过单击启动。App启动之后，界面充满整个屏幕空间，用户可以和程序交互。 • 想关闭某个正在运行的程序，你只需要按下home键，程序就自动退出，所有应用程序都是如此。

  41. 每个从苹果商店新添加到iPhone的程序，将被排列到所有程序界面的最后，并显示为loading，提示用户程序安装的状态。每个从苹果商店新添加到iPhone的程序，将被排列到所有程序界面的最后，并显示为loading，提示用户程序安装的状态。

  42. Google的Android系统则为应用程序提供了几个界面入口，App图标可以被放置到几个不同的桌面屏幕上，一些应用程序也可以用widget的形式展示，见下图的天气和时间。Google的Android系统则为应用程序提供了几个界面入口，App图标可以被放置到几个不同的桌面屏幕上，一些应用程序也可以用widget的形式展示，见下图的天气和时间。 • 你也可以点击“开始”菜单，进入所有应用程序的界面（举例来自HTC Sense for Android

  43. 当你从Android Market下载一个新应用，它被悄悄地放置在“开始”菜单的所有程序里，没有任何安装成功的提示。 • 接下来你还要决定是否要把它从“开始”菜单里放到桌面，以方便日常使用，同时你还可以决定应用程序是显示为图标，还是widget，当然并非所有App都有widget。 • 拥有widget的程序，占用的屏幕空间也不一样，只有你把它添加到桌面，设置成widget模式之后，才能看出它占多大空间，见左图的Facebook widget和右图的Music widget。

  44. 一些应用程序的widget拥有不同的尺寸供用户选择，一些则只有一个尺寸，或者没有widget，只有一个图标，Twitter就有下图这样两种尺寸。一些应用程序的widget拥有不同的尺寸供用户选择，一些则只有一个尺寸，或者没有widget，只有一个图标，Twitter就有下图这样两种尺寸。

  45. Android平台 • 应用程序可以用图标、或者不同尺寸的widget显示在桌面和“开始”菜单里，不管是哪种形式，它们都能在后台运行，不需要占据整个屏幕，这满足了用户的个性化定制需求。 • iPhone平台 • 每个程序都以同样的方式启动、运行、关闭，很好地保持了设计的一致性，给予用户清晰可控的感觉。不过这是以牺牲桌面个性化和多任务等性能为代价（iPhone4添加了有限的多任务）。

  46. 2010年5月下载应用程序数量统计表

  47. 8.3移动界面设计要素 • 移动界面也包含很多种类的设计要素，主要界面设计元素有： • 菜单 • 按钮 • 多选列表 • 文字显示 • 数据输入 • 图标与图像 • 报警提示 • 移动多媒体 山东大学计算机学院

More Related