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

Slides:



Advertisements
Similar presentations
JAVA 概述 主讲:张雷. J2ME API 地址: 广东科贸信息工程 张雷学习要求 了解各种程序设计语言及其特点 了解各种程序设计语言及其特点 了解 JAVA 的发展史和其特点 了解 JAVA 的发展史和其特点.
Advertisements

1 网站设计理念 大连理工大学创新实验学院 优秀网站展示 - LAMP 类网站
嵌入式系統 資工系 魏 凱 城. 什麼是嵌入系統 提到 CPU 我們很直覺的會聯想到 PC ,但事實上 CPU 的應用領域、範圍及採用的數量都遠遠超過 PC 的範疇。 提到 CPU 我們很直覺的會聯想到 PC ,但事實上 CPU 的應用領域、範圍及採用的數量都遠遠超過 PC 的範疇。 以數量來看 x86.
微信营销宝典. 什么是微信? 微信是腾讯公司于 2011 年初推出的一款通过网络 快速发送语音短信、视频、图片和文字,支持多 人群聊的手机聊天软件。
玩转安卓智能手机 工程师 王东亮 图书馆 手机的发展 手机已经不仅仅是一个通讯设备,在智能系统的潮流之下, 手机已经成了一个多媒体的智能移动终端 有人喜欢用手机上 QQ ,玩微博,看网页;有人喜欢听歌, 拍照,玩游戏;有人利用手机进行日程的安排和办公 ······
中国电信桐梓分公司. 阅读方式 曾经的 2G 时代 沟通方式 曾经的 2G 时代 影视方式 曾经的 2G 时代.
1 智能手机 —— 智能手机基础知识讲解 客户支持部 V1.0. Page  2 前言 ■ 智能手机时代已经全面开启,手机 已经不仅仅是打电话发短信的工具, 同时也是生活中不可或缺的移动伴 侣。 ■ 3G 手机大多以智能手机为主,想 要良好的销售智能手机产品,基础 的智能手机知识是不可或缺的。
社交游戏在移动平台的飞跃 社交游戏的前世今生 社交游戏的天然平台 iPhone/iPad 如何打造专属于 iOS 的社交游戏 社交游戏在 iOS 平台的多种赢利途径.
热烈欢迎四川理工学院各位领导莅临自贡移动
資訊軟體人才培育先導計畫102年度課程發展專案計畫 資訊軟體人才培育雲端計算與服務課程發展專案計畫- 雲端運算與行動計算課程
CH02 電腦軟體 介紹電腦軟體之概念 認識系統軟體、程式語言與軟體開發 認識作業系統的主要功能 認識作業系統的演進歷史 認識常用之應用軟體
交通部資安教育訓練 趨勢科技 資安顧問 邱豊翔.
課程地圖 (104年入學-日間部) 校通識核心 專業課程 必修與選修 與管理模組 網路技術 App設計與應用模組 學院通識核心 學院專業核心
網站「開外掛」 優化營業人員的戰鬥力 介紹 Web365行動展售網站系統的10大特色
第七章 電信、網際網路與無線技術.
新时代、新技术与信息化教学 兰州市第四十六中学 李保国 2013年7月 Google项目培训 平凉地区中小学信息技术教师 新课程培训讲稿
資訊科技管理 王淑卿.
Course 0.
Web Services 期中報告 主題:WiMAX 教授:黃登揚 學生:王義昌.
第四章 電腦軟體 課前指引 實體的電腦裝置,我們稱之為「硬體」(Hardware),至於軟體則是個抽象的概念,軟體是經由人類以各種不同的程式語言撰寫而成,以達到控制硬體、進行各種工作的抽象化(例如文書處理)等動作。有些讀者經常迫不及買了一台新電腦,就以為可以開始使用!事實不然,一部配備齊全的電腦,如果沒有合適的軟體來控制與搭配,絕對也是英雄無用武之地。一般來說,我們將軟體分「系統軟體」(System.
AR互动平台产品 2014/05.
第四讲 中文平台与中文操作系统 计算机科学与技术学院.
行動終端應用軟體創作專題競賽 題目:商品後端管理APP
未来协同项目计划书.
皖新数字书屋.
科学小课题:手机的发展史 姓名及班级:四三班艾迪娜 指导老师:青吐尔老师.
財金三乙 卓采筠 財金三甲 蔡瑜婷 財金三乙 郭孟京
Android作業系統 Android手持裝置應用 報 告 人:楊茂青 教師 日  期:2014/03/12 研習地點:楠梓特殊學校.
第八讲 信号分析案例:安卓 2017年3月20日星期一.
8.1 系統軟件、應用軟件和驅動程序 電腦軟件 是使電腦處理指定工作的一連串指令 大致可分大為三類: 驅動程序 系統軟件 應用軟件.
行動通訊與手機發展的趨勢 科技始終來自於人性.
計算機概論 1001課後輔導教材 單元 4:電腦網路 主講老師:徐培倫.
荷福威士顿机器人科技有限公司 上海荷福集团
第1章 java简介及环境搭建 第1章 Java简介及开发环境搭建.
《现代通信概览》 学习情境5 通信网中的传送介质和传输网.
《IOS应用开发教程》 QQ学习群:
App 晶片一甲 4A 林渼茵.
因特网的应用 Internet应用层协议.
智慧型手機以台 灣地區大學生使 用現況為例 企業管理系 陳言欣 熊苡珊 何舒茵
基隆社區大學 智慧型手機、平板及電腦之生活應用
手機作業系統及功能之比較 朝陽科技大學資訊管理系 王淑卿.
蘋果、三星聯手囊括5成智慧型手機市場 2012年他廠空間持續受擠壓
高科技產業策略與競爭 第六章 IA資訊家電產業-以PDA為例.
3-1 電腦作業系統的功能與類型 3-2 Windows XP的基本操作 3-3 Windows XP的檔案管理
PDA的紹介及比較 (個人數位助理) 1. 什麼是PDA? 2. PDA的發展 3. PDA的功能 4. PDA的架構
ICS著重細節與操作的一致性體驗 將顯著推升Android行動裝置市佔
Android程式開發準備 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2
Introduction on Smartphone Platform
APPLE, iPhone 智慧型手機- 指導老師:葛維鈞老師 (企3B) 組長:童楹鈞
手機作業系統介紹.
主題九 認識作業系統.
教務行政資訊系統 簡介 資訊科技中心 資訊系統組 徐振琦
2013十大科技趨勢介紹 一切資料僅供學術交流之用.
移动知网 同方知网(北京)技术有限公司.
《网上报告厅》使用说明 北京爱迪科森教育科技股份有限公司.
嵌入式系統 資工系 魏 凱 城.
行動商務 mobile-commerce (M-commerce)
Overview of J2ME Framework of Java Solution.
01.Java语言概述 讲师:复凡.
中国移动互联网行业发展解析 曹军波 Bob 艾瑞咨询产业研究院院长 北京•上海•广州•东京
人機介面 Android 平台應用程式開發 簡介
电 子 商 务 实 务 王宁宁 主讲.
I博导《网店运营》课程教学包 08-网店运营:如何打造爆款.
嵌入式系統 資工系 魏 凱 城.
98專題報告 行動裝置應用實例 -個人名片管理助手程式
金中移动抄表系统培训手册 广西金中软件有限公司 2015年8月7日.
李青樺 陳筱綺 郭沛翎 黃斐琪 蔡佳娟 指導老師 : 葉佳益老師
《2009年中国手机游戏用户行为调查报告》发布 Michael 阮京文
法律常識宣導 訓育組長 顏培榆.
课程计划和要求 嵌入式系统概述 嵌入式系统发展趋势
Presentation transcript:

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

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

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

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

目前用户用手机做什么? 世界

中国

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

智能手机占比

典型的手机软件平台

移动软件的产业生态系统

软件平台获得多少产业支持

手机操作系统的重要性?

Android的春天 在中国智能手机操作系统市场上,Android发展迅速,其市场份额由2008年的0.3%飙升至2010年的14.3%。在未来,Android在中国市场将迎来发展的黄金时期。

软件开发社区有多重要?

全球手机应用开发者 Android开发者出现爆炸性增长!

中国手机应用开发者 在中国,增长状况更惊讶!

操作系统平台提供的服务比较 http://blog.sina.com.cn/s/blog_539308bd010126fp.html

Android系统软件开发师资培训班:8月8日-10日,厦门大学 [To: Android人才培养示范基地、Android认证课程本科院校] [Cc: 本期师资培训班承办校厦门大学信息科学与技术学院郑灵翔老师] [Cc: 本期培训特邀讲师,中国电子科技集团第三十研究所厦门雅迅分部郭国勇] 过往几年在Android上层应用开发做了不少的课程建设工作,现在是时候往底层系统软件开发拓展了。为此,我们拟定8月8日-10日和厦门大学合办“Android系统软件开发师资培训班”(7日报到、11日返程)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

美国西南航空公司的web站和对应的iPhone app比较

浏览器也一样

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

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

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

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

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

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

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

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

移动界面设计要素 菜单 主要目的用于提供项目选择 设计移动界面可用性好的菜单应遵守的规则 供选择的项目应根据需要进行逻辑分类,如果没有逻辑顺序,可以按优先级分类,将被选择频率最高的项目放在列表的最顶端。 每一屏中不宜设计过多的选项,如果一个菜单上的选择项目太多,应该建立一个“更多”链接,将菜单扩展到多个屏幕。 菜单上的每一选项一般应当简明扼要,不宜超过一行 山东大学计算机学院

菜单模拟显示画面 山东大学计算机学院

移动界面设计要素 按钮 一般移动界面中的按钮不经常使用图标 在按钮属性的设置上根据所显示的应用类型和信息类型,使用风格和标注一致的标签。 汉字标签则一般需要注意字数的控制 。 常见的通用按钮: OK(确定):可用于菜单项的选择或表示对某一操作的认可,如确认删除。 Done(完成):可用于结束当前操作,并返回到上一层任务。 Back(返回):使用户回到前一个操作屏幕。 山东大学计算机学院

移动界面设计要素 “寻找航班”是根据特定的应用需要设定的按钮 按钮模拟显示画面 山东大学计算机学院

移动界面设计要素 多选列表 在移动应用中使用多选列表,可以最大限度地减少文本输入 多选列表模拟显示画面 山东大学计算机学院

移动界面设计要素 文字显示 文字显示控件主要用于显示较多数量的文字信息 根据显示的需要,可能使用以下几种形式的链接: View(查看):如果一个数据列表中每个项目包含额外的详细信息,可以使用该链接来显示这些数据。 More(更多):一般作为数据页末尾的一个链接,使用户进入下一页的相关数据。 Skip(跳过):跳过当前选项,链接到下一个类似的数据,如下一封电子邮件信息。 山东大学计算机学院

移动界面设计要素 文字显示的一般可用性建议: 每一屏幕显示内容不宜过多,如果信息较多,应定义一个More链接。 一般情况下文字信息应当使用换行方式进行显示。 山东大学计算机学院

移动界面设计要素 文字显示模拟显示画面 山东大学计算机学院

移动界面设计要素 数据输入:针对数据输入的可用性原则包括: 对于数据输入一般应该进行长度、数据类型以及取值范围等形式的格式化,以指导用户输入合法的可用信息。 建立数据输入标题,并根据需要在标题中加入所要求的输入格式。 如果已经可以确定数据的某些输入部分,可以预先填好,且不允许用户修改。 应当具有检错机制,如某些信息必须填写,应当可以设置成禁止提交空数据。 在格式设置中适当地添加分隔符以提示用户输入合法的信息。 山东大学计算机学院

移动界面设计要素 格式化模拟显示画面 山东大学计算机学院

移动界面设计要素 图标与图像 图像、图标可以增强显示信息的效果 在移动设备上使用图像,需要注意的问题包括: 了解目标设备所支持的图象格式 注意调色板的设置使其达到最佳显示效果 对于不支持图像的设备,应当提供替换的信息展示方式 进行图像浏览时,图像缺省地应当充满整个可用区域,如必须滚屏时,尽量使用垂直滚屏。 尽量使用户在上下文中直接浏览嵌入的图像,而不必使用独立的显示工具。 山东大学计算机学院

移动界面设计要素 图像模拟显示画面 山东大学计算机学院

移动界面设计要素 报警提示 警报提示,可以将用户所关心的最新信息通知给用户,或向用户提供有关当前状况的信息。 一般使用文字信息,可能加入一定的图标。 常用的提示类型有: 确认提示 信息提示 警告提示 出错提示 持久性提示 等待提示 山东大学计算机学院

移动界面设计要素 移动多媒体技术 目前移动设备的多媒体支持进步很大,已经可以播放几种类型的音频和视频文件,还可以使用内置或外接的摄像头来抓取图像。 移动应用开发平台开始提供支持多媒体数据的编程接口。 山东大学计算机学院

移动界面设计要素 制作能够在移动设备进行播放的多媒体音频或视频文件,应注意以下问题: 尽量使用标准的文件格式 根据平台的计算能力特点,选择合适的格式 不必一味追求动态视频,有的应用场合下静态图像也可以达到很好的展示效果; 根据平台的多媒体回放能力制作相应质量的多媒体数据。 视频内容应该精练,没有必要包含太多的特技效果。 如果在应用中使用音频增强效果,音频的使用与否应当不改变程序的运行结果; 录制音频时应当尽可能的提高音量,以保证回放时的效果 山东大学计算机学院

移动界面设计要素 移动界面导航 确定移动界面导航一般应该在应用设计完成后,建立导航流程图表,规划移动应用的导航流程。导航设计的基础是按传统的树结构编排的层次状态结构。 1 1-1 1-2 1-3 1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3

在这种层次状态结构中,每一节点代表一个状态,具体体现在移动界面开发中,往往是一个新的显示画面。在层次状态结构中,用户点击按键打开一个可选项,或从菜单中选中一项,就实现了状态转换的过程,而返回功能(手机应用中常用右功能键实现返回功能)一般返回到层次树的上一级。而在应用的初始状态下(如图8-6中的状态1),返回功能的实现就变成了退出功能,将会关闭该应用。

移动界面设计要素 移动界面导航 加入标签导航的层次状态结构 如果内容相关的几页信息无法在单屏或单个列表显示时,通过标签可以将其合并称为一个单一状态。用户可以通过左右移动键来切换这些标签。 1 1-1 1-2 1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3 1-3a 1-3b

采用了标签进行导航的视图一般应当遵循以下原则: 从一个标签视图转到另一个并不影响这些视图中的返回键功能;它们中的任何一个返回功能指向同一个地方,即该应用的上一层。如在上例中,这两个标签视图之间并没有返回功能; 如果从这两个中的任何一个返回都将退回到状态1。 当某个状态拥有标签视图时,如果用户从上一层进入到该状态,打开的将是默认视图。 如果用户从某个标签视图进入到其下面一层,这时的返回功能将导致返回到原先的视图(不一定是上面提到的默认视图)。

移动界面设计要素 移动界面导航 有同层次之间相互访问的导航 种关系使得这种层次状态结构不再是严格的树形结构,而变成了一种图结构。 1 1-1 1-2 1-3 1-1-1 1-1-2 1-2-1 1-3-1 1-3-2 1-3-3

一个手机游戏的导航流程图表 图 9-9 示例导航流程图表 欢迎界面 主菜单 退出 继续 新游戏 选项 积分榜 帮助 游戏 确认 Game Over 图 9-9 示例导航流程图表 山东大学计算机学院

8.4移动界面实现 开发移动应用 考虑各种复杂的网络连接方式, 考虑各种不同的硬件设备甚至不同型号的设备之间的差异, 与现有的应用体系尽可能的集成,因此选择适当的开发平台也很重要。 对各种不同的移动应用开发体系结构、移动设备操作系统和移动应用标准等等,需要在综合考虑多种因素。 山东大学计算机学院

8.4.1移动应用开发技术架构 .Net 精简框架 属于微软的.net架构中的一部分,是专用于移动设备的开发工作的精简版的.Net 开发框架; 包括部分.NET 架构类库和部分独有的类库; .net精简框架同样包含一个受控的运行时环境,能使用多种自己熟悉的语言如C++、Basic、C#等语言; 目前仅能运行于微软的Windows系列操作系统。 山东大学计算机学院

移动应用开发技术架构 J2ME架构 Sun的J2ME(Java 2 Micro Edition)是专门针对移动设备和其他资源受限的设备专门设计的Java版本,专门针对屏幕、电能和内存等受限资源进行了优化。 采用J2ME技术开发的移动应用,可以通过无线下载或数据线传输等方式在移动设备中进行安装。 J2ME技术的细分主要由配置(Configuration)、概要(Profile)两个概念来控制。 山东大学计算机学院

移动应用开发技术架构 J2ME架构 配置就是不同的规范,规定了相应的设备至少需要达到的运算能力、供电能力以及存储容量的大小等要求,同时也定义与设备无关的Java虚拟机和核心类库,提供了基本的语言特性 概要在一种配置的基础上进一步对设备类型进行细分,提供针对设备特定功能的API和扩展类库,能够更好地适应特定类别的设备,使其充分发挥设备的功能。 J2ME的最大优势是优良的跨平台特性,同一个应用程序采用J2ME架构可以在多种软硬件平台上使用。 山东大学计算机学院

移动应用开发技术架构 CDC 虚拟机 JVM CLDC KVM虚拟机 Foundation MIDP Personal /Basis 配置 概要 图 9-16 J2ME架构 山东大学计算机学院

移动应用开发技术架构 BREW BREW(Binary Runtime Environment for Wireless)是美国高通公司(QUALCOMM)为无线应用开发和执行提供的一种平台; 能够与可能驻留在设备中的其它应用和软件协调使用,适用于多种类型和层次的手机等无线设备; 可以支持包括Java在内的各种编程语言; 可以支持J2ME架构的CLDC/MIDP组合; 开发人员还可以直接在BREW平台上开发应用程序,与J2ME程序相比,具有一定的速度优势。 山东大学计算机学院

8.4.2 移动设备操作系统 Palm OS 微软的系列移动操作系统 嵌入式LINUX Symbian OS/EPOC OS iPhone Android 其他 山东大学计算机学院

移动设备操作系统 Palm OS Palm OS是一套专门为掌上电脑编写的操作系统,充分考虑到了掌上电脑的资源受限等特点,本身所占的内存很小,其上所编写的应用程序的内存占用也很小,可以运行众多的应用程序。 目前专门为Palm OS编写的应用程序非常丰富,也使得Palm 系统一直受到较多的关注; 第一部Palm系列的掌上电脑是1996推出的Palm Pilot 1000,使用Palm OS 1.0操作系统,显示屏幕为单色STN,160×160象素,2级灰度,处理器采用MOTOROLA Dragonball 16MHz,通过串口通讯,内存128KB。 山东大学计算机学院

移动设备操作系统 微软的系列移动操作系统 Windows公司最早推出的掌上设备的操作系统是Widnows CE; 微软公司在Windows Mobile的概念下,发展了Pocket PC和SmartPhone两大平台体系,分别针对手持电脑和智能手机两个领域。 最大优势是图形用户界面功能强大,开发工具比较完善,使用者也容易入门,操作起来较为熟悉;同时提供了较强的多媒体功能,如视频、音频回放等; 缺点是本身对内存等资源的消耗较大,需要配置很高的移动设备加以支持,成本较高,较适合一些高端的企业应用场合。 山东大学计算机学院

移动设备操作系统 嵌入式LINUX 嵌入式Linux在开放源码的LINUX系统之上发展而来,具备了Linux的诸多优点,如支持多任务等,也可以对应用软件提供良好的支持; 由于开放源码,也比较容易移植, 可扩展性和可移植性是该类系统的最大优势; 目前支持嵌入式Linux的移动设备正在逐渐增多,但还远未达到成熟的地步,仍然有很大的发展空间。 山东大学计算机学院

移动设备操作系统 Symbian OS/EPOC OS EPOC OS是一种专门为掌上设备而设计的开放式操作系统,特别是针对智能手机应用。 山东大学计算机学院

Symbian平台发布路径图

移动设备操作系统 iPhone操作系统(苹果): iPhone操作系统是基于苹果源自Unix的Mac OSX操作系统 核心操作系统内整合了多点触摸、定位/地图以及无线购物(无需电脑)功能。 主要不足包括多任务处理能力有限,应用软件开发环境缺乏开放性,虽然尚未有迹象证明这阻碍了第三方基于该操作系统进行软件开发。 目前的iPhone操作系统是iPhone OS 5.1(2012.3)

移动设备操作系统 Android Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统、中间件、用户界面和应用软件组成,号称是首个为移动终端打造的真正开放和完整的移动软件。目前,最新版本为Android 2.4 Gingerbread和Android 3.0 Honeycomb。 Android以Java为编程语言,从接口到功能,都有层出不穷的变化,其中Activity等同于J2ME的MIDlet,一个 Activity 类(class)负责创建视窗(window),一个活动中的Activity就是在 foreground(前景)模式,背景运行的程序叫做Service。

操作系统间的差别 新功能: 操作系统之间的主要区别在于用户界面、触摸功能、是否能在许多手机上运行、以及支持的软件开发/运行环境。 在我们看来,苹果iPhone操作系统和Palm webOS的用户界面突出,而symbian/Android的最大优势是它们能适用于很多手机(不同规格的屏幕、内存、键盘类型等)。

手机操作系统比较

8.4.3 移动浏览标准 采用J2ME等技术开发的应用软件需要运行程序的用户终端上进行安装和配置,同时也对终端的性能具有一定的要求---一般应用程序。 移动应用的开发还有一种模式,就是采用类似于Web应用的开发,用户端仅需支持一定的移动浏览标准协议,一般通过移动浏览器的方式,就可以通过网络访问移动应用服务器,获取信息或完成某些操作---web应用程序 山东大学计算机学院

移动浏览标准 WAP WAP( Wireless Application Protocol)是专门为移动系统设计的一种通信协议和应用环境,由一个称为“WAP论坛”的组织负责制订,目前已推出了2.0标准,不过全面支持WAP2.0的设备还需要一定的时间才能得到普及。 在WAP 2.0版本中增加了对IP、TCP和HTTP等标准协议的支持,而且在支持用户向服务器端发出请求的PULL模式之外,还增加了PUSH模式,可以支持服务器端的应用程序通过一个PUSH代理(Push Proxy)向客户端发送信息,特别适合向用户发送定制的新闻等。 山东大学计算机学院

移动浏览标准 WML WML专为移动设备设计,因而其开发也具有相应的特点,开发WML应用需要重新设计其内容,特别是其用户界面,需要考虑移动设备的屏幕大小以及计算能力进行特别的设计,因此需要专门的网站加以支持,如中国移动的移动梦网Wap网站。 目前的问题是这种专门的网站相当少,因为需要重新制作网站内容,特别是大型网站的成本很高,通过采用中间件和服务器端生成技术对现有的HTML页面内容进行动态的转换是一种有效的解决手段。 山东大学计算机学院

移动浏览标准 XHTML Basic 与XHTML MP 2000 年12月,W3C发布了XHTML Basic 规范作为面向移动应用的浏览页面语言的推荐规范。 在其上通过增加部分功能模块设计的XHTML MP(XHTML Mobile Profile)目前得到了广泛的支持。 XHTML Basic和XHTML MP是在XHTML的基础上发展起来的,而XHTML也将是目前的主流页面语言HTML的换代技术,因此基于XHTML MP开发的移动应用具有良好的兼容性,前景广阔。 山东大学计算机学院

8.4.4开发工具 很多开发工具特别是设备厂商提供的开发包和硬件密切相关,使得互相之间的兼容性较差。 要有针对性地对各种可能运行的平台进行测试,以便充分保证移动应用的运行效果。 山东大学计算机学院

模拟器软件 模拟器就是在一种平台上采用软件模拟另外的软硬件环境: 移动设备的模拟器主要由相应的开发商推出。模拟器有几种不同的形式: 单纯的模拟界面,不同的设备的差别就在于采用了不同的贴图,J2ME环境中的模拟器很多属于此列。 硬件与软件环境分别模拟,即使用模拟器引擎模拟硬件环境,然后再针对特定的设备使用专门的ROM实现软件环境的模拟。Palm、Windows Mobile等模拟器属于这一类。 简单的软硬一体式的模拟工具,一般为每一款移动产品设计一种模拟器,应用分为较窄,国内文曲星的模拟器就是这种形式。 山东大学计算机学院

几种不同形式的模拟器 Openwave WAP SDK提供的模拟器 PALM模拟器 诺基亚的WAP模拟器 山东大学计算机学院

几种不同形式的模拟器 J2ME模拟器 山东大学计算机学院

几种不同形式的模拟器 android模拟器

8.4.5应用实例分析 是一个航空旅行服务程序,采用WML编写; 提供查询功能帮助用户安排旅行计划,特别是机票的购买或预订; 其设计使用了Openwave公司的WAP SDK中的移动浏览器(Mobile Browser)所提供的多种用户界面设计要素 应用中用到的times.wmls是WML Script脚本语言编写的辅助程序,其作用是随机地产生航班号和起飞时间等模拟数据,需要自己根据程序中使用的情况编写。 山东大学计算机学院

应用实例分析 该应用界面的设计过程包括以下步骤: 明确用户群 经常旅行的用户,一般旅行的目的是商务事宜,此类用户对飞行时刻表、机场代号以及航班非常熟悉。 不常旅行的用户,一般旅行的目的是处于个人原因,可能几周甚至几个月可能会安排一次旅行,这些用户可能就不太熟悉具体的航线或航班代号等信息。 山东大学计算机学院

应用实例分析 明确用户需求 确定用户的主要操作是设计用户界面导航流程并进行优化的基础。 经常旅行的用户的主要操作包括了解航班情况(准时或延误)、查找航班时刻以及预定机票等; 不常旅行的用户的主要操作包括查看某一特定航线的票价或查找特价机票信息等; 第一次使用的用户可能需要适当的帮助提示。 山东大学计算机学院

应用实例分析 确定界面的设计目标 经常旅行的用户有一个常飞人员号码,可以用于实现用户使用界面的个性化,包括航班预订情况的保存和修改等。 对于不常旅行的用户来说,重点是提供快速的目标航班、票价以及可能的特价机票信息,在设计中需要简化这些内容的访问。 山东大学计算机学院

应用实例分析 建立导航流程 界面设计的实现需要导航流程的建立。 应当允许经常旅行的用户用户登录后立刻能够查看快速访问航班的预订和自己的旅行计划信息,这一选项需要安排在菜单项的突出位置。 对于不常旅行的用户来说,需要使其可以迅速查看和其个人喜好相关的机票优惠等信息。 从导航流程的设计来说,就是安排这些状态的访问路径应当尽可能的短,使用户可以在最短的时间内获得其最重要的信息。 山东大学计算机学院

应用实例分析 可用性设计要点 界面中各种元素如菜单、标签、文字输入等的风格样式和操作方式在整个应用中保持一致; 使文字录入的工作降到最低程度 ; 预防用户可能出现的各种错误操作,一旦用户出错,应当尽可能地给用户修正错误的余地。 山东大学计算机学院

应用实例分析 应用开发

移动设备用户体验 多点触摸 多任务 一贯性 提供多点触摸界面能大大提升手机的用户体验,特别是改善地图导航以及网页浏览等功能的使用。 人们对手机是否有必要具有多任务功能有很大分歧,但我们相信如果能良好地实施多任务,仍是有帮助的。假设用户可无需关闭当前正在玩的游戏、直接进行短消息恢复,同时这不会大量占用手机资源或损伤电池寿命,自然是件好事。 一贯性 和其他软件一样,一贯的用户界面对终端用户是件好事,这提供了一定的可预见性,用户只需学会如何使用应用软件,无需再重新学习使用的每一个软件。

移动设备用户体验 响应性 易用性 虽然响应性基本上属于硬件问题,但这也和操作系统能否很好地使用可利用资源有关。 一个操作系统的易用性在一定程度上取决于上述因素,但在这里我们还要提到的是一个新用户将对手机作出怎样的反应以及手机使用上手有多快。

操作系统用户体验