移动界面学习.pptx

《移动界面学习.pptx》由会员分享，可在线阅读，更多相关《移动界面学习.pptx（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、移动设备及交互方式移动界面设计原则移动界面要素设计移动界面设计技术与工具移动界面设计实例第1页/共32页移动设备目前主要的移动终端设备种类包括手机、PDA（PersonalDigitalAssistant）以及各种特殊用途的移动设备如车载电脑等。其中，基于可移动性（Mobility）的考虑，手机与PDA是目前最常见的主流移动设备。不过随着技术的进步，各种设备之间的界限正在逐渐淡化，也出现了一些新的移动设备形态，特别是介于PDA和笔记本电脑之间的移动互联网设备MID（MobileInternetDevice）以及超移动个人电脑UMPC（Ultra-MobilePC）第2页/共32页（a）OQO(

2、b)FlipStart MiniPC(c)N810(d)iPhone第3页/共32页连接方式移动互联网的数据接入方式是影响移动界面设计的另一重要因素，目前也是多种标准并存，主要形式包括无线局域网（WirelessLocalAreaNetwork，WLAN）、无线城域网（WirelessMetropolitanAreaNetwork，WMAN）、无线个域网（WirelessPersonalAreaNetworks，WPAN）、高速无线广域网（WirelessWideAreaNetworks，WWAN）以及卫星通讯等。第4页/共32页交互方式移动设备种类繁多，其相应的输入方式也相当复杂。特别是对于

3、目前主要的移动设备形式智能手机与掌上电脑而言，由于尺寸较小、接口较为简单，全尺寸键盘、鼠标等诸多的传统的输入输出设备较难在移动界面中使用，因此需要设计专门的输入输出方式，以适应移动界面的特点。第5页/共32页交互方式输入方式：1.键盘输入2.笔输入3.语音识别输出方式：移动设备的输出方式较为简单。主要是显示屏幕和声音输出。第6页/共32页通过前面的介绍，可以注意到，移动设备特别是掌上设备的自身特点使其在作为移动应用的开发目标平台，存在诸多限制：资源相对匮乏移动设备种类繁多连接方式复杂 第7页/共32页创建移动应用时应当遵守的一些重要的设计原则简单直观个性化设计易于检索界面风格一致避免不必要的文

4、本输入根据用户要求使服务个性化最大限度的避免用户出错文本信息应当本地化第8页/共32页移动界面与一般的图形用户界面一样，包含很多种类的设计要素，在设计时需要遵循一定的原则才能更好地适应移动用户的需要。下面主要围绕手机应用，特别是WML应用和J2ME应用（有关WML和J2ME的介绍请参见第节）的要素设计进行介绍。第9页/共32页菜单为了设计适用于移动界面的可用性好的菜单，建议遵守以下规则：1.供选择的项目应该根据需要进行逻辑分类，如按日期、字母顺序等。如果没有逻辑顺序，可以按优先级分类，即将被选择频率最高的项目放在列表的最顶端。2.供选择的项目应该根据需要进行逻辑分类，如按日期、字母顺序等。如果

5、没有逻辑顺序，可以按优先级分类，即将被选择频率最高的项目放在列表的最顶端。3。菜单上的每一选项一般应当简明扼要，不宜超过一行。占据多行甚至多个显示窗口的大量文本则应当换行，并可以通过设计“跳过”连接直接能够进入下一个选项。第10页/共32页菜单第11页/共32页按钮移动设备中常见的通用按钮包括：1）OK（确定）：可用于菜单项的选择或表示对某一操作的认可，如确认删除。2）Done（完成）：可用于结束当前操作，并返回到上一层任务。3）Back（返回）：使用户回到前一个操作屏幕。一般在手机等设备上有专用的Back键，因此仅用于除了返回功能外还有其他任务的情况。第12页/共32页按钮第13页/共32页

6、多选列表：在移动应用中使用多选列表，可以最大限度地减少文本输入。例如使用一个电子邮件地址簿，可以使用户不必过多使用移动设备的输入功能输入电子邮件地址，而可以简单地通过多选列表将需要的电子邮件地址插入到一封电子邮件的收件人或抄送入地址中。第14页/共32页文字显示根据显示的需要，可能使用以下几种形式的链接：1）View（查看）：如果一个数据列表中每个项目包含额外的详细信息，可以使用该链接来显示这些数据。2）More（更多）：一般作为数据页末尾的一个链接，使用户进入下一页的相关数据。3）Skip（跳过）：跳过当前选项，链接到下一个类似的数据，如下一封电子邮件信息。第15页/共32页关于文字显示的一

7、般可用性建议包括：1）每一屏幕显示内容不宜过多，如果信息较多，应定义一个More链接。2）一般情况下文字信息应当使用换行方式进行显示。下图中是一个设置了两个链接的文字显示的例子，左右分别是“More”链接和“Skip”链接处于活动状态下的模拟画面第16页/共32页数据输入针对数据输入可用性原则包括：1）对于数据输入一般应该进行长度、数据类型以及取值范围等形式的格式化，以指导用户输入合法的可用信息。例如，如果用户的必须输入中有身份证号时，这个输入字段可被格式化为接受15个或18个字符，还可以进一步被限制为只接受数字或个别字母。2）建立数据输入标题，并根据需要在标题中加入所要求的输入格式。3）如果

8、已经可以确定数据的某些输入部分，可以预先填好，且不允许用户修改。第17页/共32页4）应当具有检错机制，如某些信息必须填写，应当可以设置成禁止提交空数据。5）应当具有检错机制，如某些信息必须填写，应当可以设置成禁止提交空数据。在图8-8中，日期的输入格式仅允许输入数字，因此当输入字幕时，系统显示“Pleaseenteranumber.”提示用户出错。第18页/共32页图标与图像在手机等设备上使用图像往往有很多限制，需要注意的问题包括：1）了解目标设备所支持的图象格式，如果希望应用跨平台使用，应当尽量使用受到较多支持的图像格式，如手机上的wbmp格式和png格式。2）由于受到设备的限制，即使支持

9、彩色的移动设备也往往无法支持真彩色，需要使用调色板，注意调色板的设置使其达到最佳显示效果。3）对于不支持图像的设备，应当提供替换的信息展示方式。第19页/共32页4）进行图像浏览时，图像缺省地应当充满整个可用区域，并在允许的条件下通过缩放使用户看到完整的图像。如必须滚屏时，尽量使用垂直滚屏。5）尽量使用户在上下文中直接浏览嵌入的图像，而不必使用独立的显示工具。图8-9就是在手机上显示一幅二值位图图像的画面，其中图像的格式为wbmp（WirelessBMP）第20页/共32页报警提示 常用的提示类型有：1）确认提示 2）信息提示 3）警告提示 4）出错提示 5）持久性提示 6）等待提示第21页/

10、共32页多媒体展示为了制作能够在移动设备进行播放的多媒体音频或视频文件，应当注意以下一些问题：1）尽量使用标准的文件格式2）根据平台的计算能力特点，选择合适的格式3）有的应用场合下静态图像也可以达到很好的展示效果4）要根据平台的多媒体能力制作相应质量的多媒体数据5）视频内容应该精练6）音频的使用与否应当不改变程序的运行结果7）录制音频时应当尽可能的提高音量，以保证回放时的效果第22页/共32页导航设计采用了标签进行导航的视图一般应当遵循以下原则：1）从一个标签视图转到另一个并不影响这些视图中的返回键功能；它们中的任何一个返回功能指向同一个地方，即该应用的上一层。2）当某个状态拥有标签视图时，如

11、果用户从上一层进入到该状态，打开的将是默认视图。3）如果用户从某个标签视图进入到其下面一层，这时的返回功能将导致返回到原先的视图（不一定是上面提到的默认视图）。第23页/共32页移动应用开发技术开发移动应用是一项复杂的任务，不仅需要考虑各种复杂的网络连接方式，还要考虑各种不同的硬件设备甚至不同型号的设备之间的差异，还要与现有的应用体系尽可能的集成，因此选择适当的开发平台也很重要。下面介绍目前常用的几种移动应用开发的体系结构1）.Net 精简框架2）J2ME架构3）BREW第24页/共32页移动浏览标准协议 采用J2ME等技术开发的应用软件需要运行程序的用户终端上进行安装和配置，同时也对终端的性

12、能具有一定的要求。移动应用的开发还有一种模式，就是类似于Web应用的开发，用户端仅需支持一定的移动浏览标准协议，通过移动浏览器，就可以通过网络访问移动应用服务器，获取信息或完成某些操作。第25页/共32页移动浏览标准协议1）WAP2）WML与WMLScript3）XHTMLBasic与XHTMLMP第26页/共32页移动设备操作系统1.PalmOS2.WindowsMobile系列移动操作系统3.嵌入式LINUX4.SymbianOS/EPOCOS5.其他第27页/共32页移动界面开发工具 由于移动设备的硬件形式繁多，而且需要在本机上提供良好的开发环境，所以模拟器软件就成为移动应用开发必不可少

13、的一种工具。所谓模拟器就是在一种平台上采用软件模拟另外的软硬件环境。移动设备的模拟器主要由相应的开发商推出，例如PalmOS、Openwave公司、微软公司以及硬件厂商诺基亚、爱立信等均有相应的PC模拟器。第28页/共32页模拟器第29页/共32页WAP 应用 WAP应用开发与传统的Web应用程序开发类似，同样采用Browser/Server模型。其中Browser是指支持WAP设备上的用户代理，即WAP浏览器。服务器则使用IIS、Apache等一般的WEB服务器，页面语言采用WML/WMLScript或XHTMLMP语言J2ME应用 前面已经介绍过，MIDP/CLDC组合为移动信息设备提供了一个完整的J2ME应用运行环境，MIDP中定义的应用程序称为MIDlet。以下的介绍主要针对MIDP应用开发第30页/共32页8.1用XHTMLMP改写第节的实例程序，并进一步分析WML与XHTMLMP进行移动界面设计的优劣。8.2测试同一WAP应用在不同模拟器环境中的运行结果，并进一步测试在实际的手机上的运行效果。8.3将图8-13中的流程图补充完善，并基于这个流程，参考本章的设计方法，使用J2ME实现一个手机游戏，并总结游戏设计中可能涉及到的可用性问题。第31页/共32页感谢您的观看！第32页/共32页