当前位置:
文档之家› 人机交互技术第九章 移动界面设计
人机交互技术第九章 移动界面设计
设选计题方中向注:意作品的科学性(不出现逻辑错误)、 教1.设育计性某(企有业利网于页界理面解,)包、括艺首术页和性相(关画二面级美页观面,等体) 和现技企业术风性格。。
必2.设须计独一立个完手成机,界面雷,同包者括同手时机记常见0分各。项基本功能。 设3.设计计过一程个中界可面以美观借、鉴易其于他操资作料的W ,i但nd需ow将s程所序参界考的
目前移动设备的多媒体支持进步很大,已经可以播放 音频和视频文件,还可以使用内置或外接的摄像头来 抓取图像。
移动界面的设计方法
以 iPhone 手机为例,熟悉移动界面设计要素。
移动界面实现
开发移动应用是一项复杂的任务。
考虑各种复杂的网络连接方式。 考虑各种不同的硬件设备甚至不同型号的设备之
基线于M的可o无d设移e线备m动网可、性络以D(;S按mL第o采需(b二用i建lD代it无网iyg是)线,it数的a的并l字考方具语虑内式有音,,让提动通目人供态们前传在移统地动有球互的线联任何设备
移存动,以无域S网势线u智线网互没等是。b拓动牙标s能局(有可联有信移C实的c扑性技准r手域W线以D网完i系动现高bM的。术。i机网方在re统通语速的全eA特如)r与 (式 较le和信音传;统数Ls点:、掌W的大is数系、输n第一据M,红Ii上高的erE字统数—三e)eE局的线以外电接。速地lte通据G—Er代,s域灵局适线脑8o理I入主Ssn信以3p0是以ML网活域应数为Gt区o2要方系及eol采太。、.i的性网网据主cr域t1统多ana形式用5网美所。标络协nl内e。.,媒A1数式目tA以国有使准节会无接r标r如体e字及一 信 海 公 网 太 洋的包e前功用,点的a须入准a全信。 事 用 连 东个 平技光N窄能又I的I括也N布,E(r球息卫电通区角洋e术D纤eE带,称t移优是:t蓝落、星话实和wEAw具W 8o都印电网现西o多r0r有话和,区可度ki2k-)种F)通海能。以洋.极1i、。过事够进、1标、大无国卫覆行大无无准通西际星盖线线并城
汉字标签则一般需要注意字数的控制。 “寻找航班”是根据特定的应用需要设定的按钮。
移动界面的设计方法
多选列表
在移动应用中使用多选列表,可以最大限度地减少文 本输入。
文字显示
主要用于显示较多数量的文字信息。 每一屏幕显示内容不宜过多,如果信息较多,应定义
一个More链接。 一般情况下文字信息应当使用换行方式进行显示。
移动界面设计的新问题
资源相对匮乏 移动设备种类繁多 连接方式复杂 移动界面设计的中的最大问题就是界面的定制。
总结
移动界面的设计方法
可用性设计原则
移动界面导航
1.了解用户
让用户不在复杂的系统中23..迷了 易失于解非检目常标索重平要台,由于移动设备的选
择键少,可以使用层次的4.文采字用来一显致示的当界前面用风户格所在位置。
人机交互技术
本节课内容
第九章 移动界面设计
9.1 移动界面基本概念 9.2 移动界面的设计方法 9.3 移动界面实现
移动界面设计
随着计算机网络技术与移动通信技术的迅速 发展,互联网与移动通信已经逐渐形成了信 息产业中潜力巨大、前景可观的两大领域。
移动界面的设计成为人机交互技术研究的一个重 要方向。
移动界面的设计方法
移动界面设计要素:
菜单:主要目的用于提供项目选择。
供选择的项目应根据逻辑顺序或被选择频率高低进行 排序。
每一屏中不宜设计过多的选项,如果一个菜单上的选 择项目太多,将菜单扩展到多个屏幕。
菜单上的每一选项一般应当简明扼要,不宜超过一 行。
移动界面的设计方法
按钮:
在按钮属性的设置上,根据所显示的应用类型和信息 类型,使用风格和标注一致的标签。如一些通用按 钮:Ok、Done、Back。
目前主要的移动终端设备种类铱包星括系手统:机是、使用掌6上6颗电 脑脑以P无D及线A无操城各(它上线作域种P是发个环网e在展特r域境技s无起o殊网中术n线来a用工,的l语的作特途D目音:i于点标的g通第i超是是t移信一a短需提l系代动A距要供统是s设s离相类i的模s成 统 在备的互似t基拟a, 卫链个通如于n础的使星状t人信有车)联地的接球轨载、的道的电笔表覆卫面盖星脑记全范系。本部围电
移动设备的种类繁多
在开发移动应用时需要专门针对某一型号的一种设备 开发,大大增加了应用开发的复杂度。
在移动界面的设计中,各设备的差异是移动应用开发 过程中最需要关移注动的界一面个设环计节中。的最
连接方式复杂 大问题就是要根据需
移移动动互设联备网的的位数置要据具定接有制入很用合处强界适于的面的多移。移种动动标性应,准并同存一的设备状态可,能而在 不同的时间段处于不同的网络连接条件下,移动的同 时往往需要保持应用执行的连续性。
移动界面设计要素
5.避免不必要的文本输入 6.根据用户的要求使服务个性化
根据移动设备特点,注意7.主最要大界限面度元地素避的免设用计户。出错 8.文本信息应当本地化
移动界面实现中注意移9动.进设行用备户操测试作系统的选择。
作业
运用人机界面设计知识,根据自己的兴趣, 确定设计内容,完成设计作品,同时提交一 份表达设计意图的设计文档。基本要求:
个域网(Wireless Personal Area Networks)、高速无 线数据通讯系统以及卫星通讯等。
移动界面基本概念
目前主要的移动设备由于尺寸较小、接口较 为简单,需要设计专门的输入输出方式,以 便适应移动界面的特点。
输入方式:
键盘输入
效率高
手机键盘:每一个按键都是复用的,T9输入法
软键盘:在移动设备屏幕上显示QWERTY键盘,用户在屏 幕上选择软键盘上的键完成输入。
移动界面基本概念
笔输入 语音识别
掌上设备作为语音门户网站(Voice Portal)的访问终端,可以 和语音门户网站进行对话。
还可以用于人机界面的语音命令导航,直接用语音发出各种 操作指令。
输出方式:
移动界面的设计方法
移动界面导航
在应用设计完成后,建立导航流程图表,规划移 动应用的导航流程。
导航设计的基础是按传统的树结构编排的层次状态结 构。
如果内容相关的几页信息无法在单屏或单个列表内显 示时,通过标签可以将其合并为一个单一状态。使用 标签进行导航控制,使原节点成为符合节点。
这使得层次状态结构变成了一种图结构。
应将网络连接状况视为一种资源,在设计时制订相应 的策略。
移动界面的设计方法
可用性设计原则
了解用户——潜在用户包括哪些人群、他们使用 该产品解决什么问题、如何高效地解决这些问题
了解目标平台
重要的软硬件厂商往往会提供详细的规范文档,从中 可以获得必要的目标平台信息。
根据目标平台信息,开发个性化的版本,通过充分利 用每种设备的优势特性提高移动应用的可用性。
易于检索
避免嵌套过深的多级菜单,缩减不必要的功能。以满 足用户的目标需要为准,尽量减少用户进行信息访问 时所要采取的步骤。
同时尽可能创建多种信息访问途径。
移动界面的设计方法
采用一致的界面风格
不必要的差异常常会让用户感到不习惯,从而降低可 用性。
避免不必要的文本输入 根据用户的要求使服务个性化 最大限度地避免用户出错 文本信息应当本地化 进行用户测试
在很多情况下,无线与移动是两个重叠的概念, 但在另外一些情况下,这两者又有明显的区别。
移动互联网强调互联网接入与信息获取的移动性,移 动设备可以在移动过程中采用有线或无线的连接方 式。
无线互联网强调无线的数据通信方式,固定设备同样 可以采用无线方式接入互联网。
移动界面基本概念
移动设备与连接方式
显示屏幕
关键因素:分辨率、色彩、尺寸、功耗及显示响应速度。
声音输出
声音合成技术,使得移动设备可以播放较为动听的MIDI (Musical Instrument Digital Interface)电子音乐。
移动界面基本概念
移动界面设计的新问题
资源相对匮乏
高档手机的显示分辨率也不过320×240,而且尺寸很 小,同时无法展示网站丰富的多媒体内容。
移动界面并非简单的缩小版的桌面系统的用户界面。
桌面系统用户界面中采用的一般是并行展示其中各种选择可 以在一个大小可调的屏幕中同时显示出来。
移动界面中,这些选择只能采用顺序展示的方式。
移动界面设计的难题就是如何在有限的资源条件下有 效地为用户提供信息服务,提供的选择须根据重要性 排列 。
移动界面基本概念
一方面,移动应用的界面设计符合人机交互设计的一 般规律,可以利用人机交互界面的一般设计方法;
另一方面,由于移动设备的便携性、位置不固定性和 计算能力有限性以及无线网络的低带宽高延迟等诸多 的限制,移动界面设计又具有自己的特点。
移动界面基本概念
移动互联网(Mobile Internet)与无线互联 网(Wireless Internet)的概念容易混淆。
数据输入
使用各种方法指导用户输入合法的可用信息。
移动界面的设计方法
图像、图标
图像、图标可题。
警报提示
警报提示,可以将用户所关心的最新信息通知给用 户,或向用户提供有关当前状况的信息。
一般使用文字信息,可能加入一定的图标。
移动多媒体技术
主面要。 资料和网站明确记录在设计文档中。 作4.设品计以一文个件语夹言形界面式。提交,其中要保存相关所有原
始5.设文计件一、个素超材媒和体界源面文。件等。
6.PC游戏中的图形用户界面(GUI)设计。
间的差异。 选择适当的开发平台,与现有的应用体系尽可能
的集成。
移动设备操作系统
Palm OS 微软的系列移动操作系统 嵌入式LINUX
Symbian OS/EPOC OS
总结
移动界面的设计成为人机交互技术研究的一 个重要方向。