手机浏览器设计文档格式.docx
《手机浏览器设计文档格式.docx》由会员分享，可在线阅读，更多相关《手机浏览器设计文档格式.docx（19页珍藏版）》请在冰豆网上搜索。
1.1.1第一阶段——WAP阶段
WAP协议在移动互联网的发展中起着重要的作用，但是一方面由于WAP表达能力有限且与互联网的HTM不兼容，另一方面受用户终端和带宽的限制。
虽然WAP业务推出的时问比较早，但用户寥寥。
当然经过多年的发展和积累，当前WAP业务已经比较丰富。
这个阶段的代表浏览器有WlNWAP以及WAPSILON等。
1.1.2第二阶段——Transcoding阶段
在此阶段中提出了两种方案，一种是完全依赖于服务器对WWW资源的解析和处理，而对终端不做要求。
提供这种方案的包括Cisco的CTE（ContentTransformationEngine）／IBM的TranscodingPublisher以及Google提出的移动搜索服务。
另一种方案是服务器+客户端的形式，
这种方案的代表商有著．名Opera的OperaMini，以及我国国内的UCWEB。
1.1.3第三阶段——桌面级浏览器
桌面浏览器技术的不断增强和互联网愈来愈丰富的应用相互促进。
使得越来越多的网络渗透应用到各个角落。
为了能在手机端上提供更好的用户体验和更强的扩展功能。
真正的桌面级浏览器应运而生。
其中最著名的还是苹果的基于Webkit内核的Safari，基于Presto的Opera以及Firefox等。
但是Transcoding也有一定的局限性，一是由于浏览器的原因导致。
二是现在大量的这类网页在转化的时候难度变大。
由于手机浏览器的出现和发展只有十年左右的时间，相关文献研究还比较少，大部分学者的研究都集中在语言和协议的转换方面。
其中较具代表性的有：
刘杰和束博提出的基于信息提取和排除的方法。
来解决互联网上WEB应用的HTML代码非常的不规范问题；
BUET的Ashikkan和LiakotAli提出了一种API模型来解决HTML
的内容解析上的兼容性问题皿1；
VuHongKhiem。
KibongKangandKeungHaeLee提出TMiniWap的浏览器技术来转化基于JavaScript脚本和动态应用的网页‘31；
将HTML转化成WML的转换器LazyWAP。
总而言之。
虽然手机浏览器发展至今有了很大的突破，但是还存在如下一些问题：
首先是用户交互性差。
不具备提供良好用户体验的功能。
主要原因是支持的协议和浏览信息的能力有限，大部分的浏览器只能浏览常规的HTML／WML网页，不能很好地呈现流媒体视频、三维等3G时代富媒体的数字内容；
换言之，目前的手机浏览器都可以被称为“瘦”浏览器。
主要适应文字、图片形式的数字内容。
却无法为用户提供好的交互体验，这是3G时代富媒体应用对浏览器技术提出的新挑战。
其次，移动终端平台种类繁多。
而手机浏览器都要依赖于某一平台使用，同时还有速度与资源紧张等问题。
另外。
企业的数据源是复杂多样的。
包括Web／WAP网站和OA。
ERP，BI等企业内部系统。
如何有效地进行数据的采集、整合和发布，为手机用户提供服务也是目前亟待解决的关键问题。
再次．目前对手机浏览器技术的研究主要集中在文本和协议的转换方面，对手机浏览器架构以及多媒体元素的呈现方式上研究较少。
基于对浏览器的架构研究，本文提出了下一代面向3G的富浏览器设计。
它不但能够提供更多的富媒体内容，给用户带来更好的交互性体验，还有效地解决了由于终端差异带来的问题。
1.2相关概念
掌上互联网手机浏览器，把互联网装入口袋，助您畅游网络世界!
浏览器具有的功能及特点：
（1）、手机高速访问互联网，新浪、Gmail、天涯社区等网页一网打尽；
（2）、最新的数据压缩优化技术，高达80%的压缩率，使页面载入速度得到大幅提升，大幅提升浏览速度；
（3）、页面缓存技术，保留浏览页面，实现快速翻页、前进和后退；
（4）、丰富网址导航，点击即可访问；
（5）、手机终端自动适配，支持绝大多数主流机型；
（6）、自动适应屏幕和缩放两种浏览模式，呈现最佳网络视觉效果，带给您原汁原味的互联网浏览感受！
浏览器功能界面,掌上互联网手机浏览器简洁的页面设计：
丰富网址导航（包含手机WAP网站和WEB互联网站），点击即可访问。
访问新浪和Gmail页面效果：
1.3设计意义
智能手机需要怎样的浏览器
最近一段时间，UC和QQ这两家在浏览器领域呼风唤雨的互联网企业展开了口水战，甚至已开始对簿公堂。
UC与QQ正面交锋，到底谁是第一竟然成了问题。
谁是第一的确会左右合作伙伴的态度，进而影响市场份额。
但在这个行业中更致命的问题在于——移动互联网领域是“创新者为王”的领域。
有一个可以拿来比较的案例。
去年起，美国硅谷的媒体和风投都被一家行事低调的移动浏览器弄得狂热不已。
因为这个浏览器超级酷，比其它浏览器都更适合智能手机和平板电脑。
虽然在硅谷，人们大爱Firefox和Chrome，但这家本来名不经传的移动浏览器的市场份额猛增，并且其影响力在全球扩散。
到其iPad版本发布时，它已经能在一周内获得全球64个国家Appstore第一的惊人成绩。
这个低调的移动浏览器叫做海豚浏览器。
硅谷的Geek们觉得它“超级酷”，媒体觉得它“有魔力”，投资者觉得它“充满创新”。
评奖者们用手投票让海豚成为了多个Androidapps奖项中的获奖者；
而用户则用脚投票，舍弃原生或预装的浏览器转而用海豚。
它为什么能脱颖而出？
它在最初的一年甚至没有做市场，硅谷追捧它的人们一度以为它是家硅谷本土创业公司。
这只是历史的重演。
回想当年的Firefox和Chrome，它们曾经就是这样打破IE的垄断。
当年Firefox显然比IE更理解互联网，也更具创新；
而现在，海豚浏览器更理解移动互联网，也更具有创新。
它的手势功能、Webzine阅读模式的确让我觉得充满创新力。
理解趋势，而后创新。
这就是秘密所在。
移动互联网的理念和互联网完全不同。
否则诺基亚王国不会轰然衰落，苹果小王国也不会成为整个业界的引领者。
苹果事实上用产品告诉了所有人移动互联网是什么样的——要有新的交互方式，无论是icon还是网页都要有适合小屏幕的呈现方式，不要被PC时代的习惯给束缚；
屏幕虽小，但却要让人们随身使用更为便捷。
所以PCMag在评测海豚浏览器时说，其手势模式应该成为“业界的标配”一个手势就能跳转到要去的网站，这比烦琐输入显然更适合小屏幕和触屏。
所以现在哪个浏览器再要人们用粗大的手指去精确点击小小的链接，或者是把图全都略去只剩下文字，我就会知道它的创新力和想象力是多么的贫乏。
另外一个让我无法忍受的观点是，还有人在高喊手机浏览器应该节省流量。
在移动互联网上节省流量是王道吗？
想想我们多快从拨号时代进入到了包月时代，就知道3G上网包月的时代会更快的到来。
除此之外，IPHONE4S其实也点明，未来人机交互会用一种和现在完全不同的方式进行。
而要比竞争对手更早一步获得用户的青睐，唯有创新、创新、再创新。
所以UC和QQ的这种争论可以休矣，恶性的竞争也可以休矣。
这个行业中的公司都应该将更多精力投入到对未来趋势的把握和创新之中。
这会对用户更好，也对公司本身更好。
网络界是指人与计算机之间网络为平台的信息界面，其人机交互是指人与计算机之间只用某种对话语言，以一定的交互方式，完成确定任务的信息交换过程。
当网络成为我们主要阅读方式时候，网络浏览器成为我们收获信息的重要窗口
智能手机的网页浏览器，随着3G网络的到来，其高速数据传输的蜂窝移动通信技术使人们利用手机去获取复杂的网络信息成为可能，而越来越多的年轻人和商务人士都乐意去使用这一便捷的信息获取方式。
网页浏览器成为他们获取信息的主要媒介，而一般的浏览器UI界面都是以PC为背景设计的，所以3G手机的网页浏览器界面设计显得尤为重要和迫切。
1.4报告内容安排
本次的课程设计报告主要完成时间是两周，具体安排和内容简要记录如下，
在第一周完成确定选题，理解任务书要求，与指导教师沟通，确定课程设计要求，根据任务要求，查找相关资料，规划课程设计任务内容与实施步骤，根据任务要求，确定总体设计目标，确定系统组成与架构，按总体任务架构分项分步骤完成子系统设计，与指导老师沟通与交流，完成周工作报告。
第二周，完成子系统详细设计，确定设计报告写作提纲，资料整理与设计报告写作，设计报告出版，完成周工作报告，参加教师组织的答辩。
然后在课程设计上，第一章是引言，主要进行一些引导性的话题，做一些总体的部署；
第二章是原理性说明，从原理上实现整个智能手机浏览器的全面部署，细化结构，美观等；
第三章是自己所做工作的总体说明，第四章是自己所做工作的详细说明，这两张包含了在设计过程中遇到的问题、步骤、解决方案等内容；
第五章是总结期望，然后是致谢和参考文献。
第二章原理性说明
智能手机浏览器的工作原理和流程
相对普通浏览器而言，富浏览器能提供更丰富的用户体验。
支持文字、图片、动画、音频、视频、地图导航、3D全景等富媒体内容浏览。
同时提供更灵活方便的互动方式。
富媒体与多媒体技术最大的不同在于，多媒体应用一般没有交互性。
而富媒体却增加了交互性概念。
除了支持富媒体以外，富浏览器使用MPEG。
WAP2．0，XML，WebService，J2ME等系列国际标准：
在协议方面。
支持自定义手机端与手机代理数据交互协议。
同时支持TCP和UDP等底层传输协议。
整个浏览器具有极强的灵活性。
与此同时，由于现在不同手机的硬件条件差距很大，为了在各类手机中都达到最佳的富媒体显示，应用了手机自适应技术。
使移动终端都显示出与自身硬件最匹配的富媒体内容。
也为用户提供了更好的体验。
2．1富浏览器工作原理
富浏览器的设计核心部分为架构的核心层，核心层通过与显示层、系统层的交互，实现富媒体数据的下载、播放、显示等。
核心层中富媒体数据传输引擎负责根据用户的请求构建网络连接，从服务器获取数据。
各种解析器对获取到的网络数据进行解析，根据富媒体的布局排版、绘制原则。
将富媒体数据交与显示层进行呈现。
在此架构中，富媒体数据引擎是富媒体数据定义、获取、显示的核心，手机自适应引擎是保证富媒体浏览器在不同手机终端上运行的核心，下文将对就此设计做详细介绍。
整个富媒体浏览器的架构如图1所示：
在富浏览器架构中，核心层中的重要部分为各种引擎，其包含了所支持的W3C技术规范的解析器。
这样架构的富浏览器与平台无关，与显示无关．可以方便地移植到不同的平台上，其引擎层负责解析生成带有显示信息和控制信息的中间结果同。
2．2富浏览器工作流程
富媒体手机浏览器基本处理流程包括以下几个步骤：
（1）数据传输模块根据UI传递的请求地址提取协议类型字段。
选择相应的协议请求模块。
对于远程Web服务器上的网页，数据传输模块通过HTTP／WAP协议获取网页数据。
模块将获取的数据保存在缓存中供其它模块使用。
（2）解析模块通过词法分析和语法分析，从缓存的文档数据流中提取出HTMU，ML标签和内部属性等数据，并对分离出的各个元素进行分析、处理，建立DOM树。
（3）遇到图片标记时，传输模块将图片对象获取后。
由解码模块对图片数据进行解压、还原。
（4）JavaScript弓l擎负责解释、执行网页文档中的JavaScript脚本。
它对脚本进行词法、语法、语义分析生成中间代码，并根据中间代码对DOM树进行操作、与浏览器进行交互。
图1富媒体浏览器工作原理架构
（5）CSS模块
接收由HTML／WML引擎传递过来的样式。
经解析提取出规则，保存到样式库中。
（6）样式解析
完成后，样式应用部分为DOM树中每个节点匹配、应用样式，构造样式树。
（7）排版布局
模块为样式树中的每个Box计算大小、确定它们在网页显示区的位置。
（8）绘制部分
调用浏览器显示层的绘制接口将网页的各个元素在相应位置绘制出来。
至此。
整个打开网页的流程结束。
图2富媒体浏览器基本处理流程
2.3开发环境
关于智能手机的操作系统，目前使用Linux操作系统的人越来越多，摩托罗拉是一大支持该系统的手机厂商。
BLACKBERRY是美股市场占有率第一的手机，但在中国影响力小。
PALM系统操作稳定性好，但近年来被更加智能化的WINDOWSMOBILE超过。
SYMBIAN系统是诺基亚主打的系统。
Android是Google开发的基于Linux平台的开源手机操作系统。
而iPhoneOS是由苹果公司为iPhone开发的操作系统，主要供iPhone使用。
2.4通信协议
SIP协议，实现3G无线数据通道的PUSHTOTALK的高效协议，实现的协议服务端能够运行在linux系统，客户端运行在Android和WindowsMobile系统
第三章智能手机浏览器设计的总体说明
在这次的课程设计中，我主要从智能手机发展，需求，构成，应用，软件管理，界面设计，操作系统，以及智能手机浏览器等错了简要的概述，根据实际情况进行了相关的设计和构想，收获比较大，虽然在整个资料整理，实际设计，问题解决中都存在着或大或小的问题，但是通过老师和同学的帮助，是问题得以解决，主要的是我在这次课程设计中学到了独立思考和团队帮助的结合，使我的专业理论知识有了进一步的提高，使我的思维方式得到了很大的提高。
3.1智能手机网页浏览器界面设计
智能手机交与PC便携性是显而易见的，但是其屏幕小，所以对浏览器的界面设计主要要求非常高，总的来说，其界面设计特点如下：
简洁的原则
将内容丰富，信息繁杂的网络世界浓缩到如此小的手机屏幕里，界面设计必须以强有力的视觉冲击效果来吸引浏览者的注意，进而是特定的信息得到准确迅速地传播。
这就要求网络界面设计的形式应该力求删繁就简，一切分散浏览者注意力的图形，线条，可有可无的装饰，都应该摒弃，是参与形式构成的诸元素均与欲传播的内容直接相关，
辅助功能按钮突出
网页是由文字，图片，动画等复杂信息构成的，我们需要准确找到信息变化按钮去获取更多的相关信息，这时候我们可以通过象征简洁的符号去定义功能。
切换自由
再设计浏览器界面时，我们要能方便切换到3G手机通话模式，同事预留手机的其他信息如电池电量，手机信号，时间等。
这时由智能手机主要功能决定的。
智能手机是一个通过单个小巧装置满足所有手持式计算和通讯需要的设备。
这并不是多么独特的产品，只是手机功能的标准不同。
本文介绍了智能手机的原理、产生智能手机想法的原因以及智能手机的功能。
与传统的手机不同，个人用户可以在智能手机上安装、配置和运行自己选择的应用程序。
使用智能手机可以让设备按照您处理事情的方式工作。
大多数标准的手机软件只提供有限的重新配置选项，因此您必须适应其设置的方式。
对于标准手机，无论您是否喜欢内置的日历应用程序，除了一些小设置之外，您只能使用这个程序。
如果它是一部智能手机，您就可以安装所有您喜欢的兼容日历应用程序。
现在，手机和个人数字助理（PDA）都是最常见的手持设备，智能手机通常是具有掌上型电脑功能的手机，或者是具有手机功能的掌上型电脑。
以下列出了智能手机的部分功能：
拨打和接听电话
个人信息管理（PIM），包括备忘录、日历和任务列表与便携式计算机或台式计算机通讯与应用程序（如MicrosoftOutlook和Apple的ICal）同步数据电子邮件即时消息用户可以自行设置应用程序和配置播放一些标准格式的音频和视频文件
3.2智能手机操作系统
塞班操作系统自称是“智能手机的全球行业标准操作系统。
”诺基亚和索尼爱立信这两大手机制造商的所有智能手机均使用塞班操作系统。
60系列是最受欢迎的塞班平台，全世界有几百万台手机使用它。
本文将重点介绍基于塞班操作系统的手机工作原理，同时也会介绍其他受欢迎的智能手机操作系统，包括：
WindowsMobile/WindowsCE运行Windows系统的手机包括摩托罗拉Nexteli930、欧迪福斯SMT5600和摩托罗拉MPX-220。
奔迈操作系统
这些手机包括恒基伟业Treo设备和三星SGH-i500。
Linux
摩托罗拉A760和E680使用嵌入式Linux系统。
也有智能手机使用专用的一次性操作系统。
这些手机包括RIM黑霉和危险Hiptop（伙伴）设备。
第四章智能手机浏览器设计的详细说明
4.1智能手机浏览器的核心引擎设计
富媒体数据引擎，富媒体服务是聚合多种媒体数据（如音视频、图片、文字）动态、交互的体现。
富媒体数据的播放引擎将利用J2ME的多媒体处理框架——移动多媒体。
首先用户通过富浏览器发出数字内容请求，同时将包含手机配置以及所使用平台的配置文件发送到手机代理。
由手机代理与白适应引擎交互，选择最适合终端配置的数字内容。
由手机代理按照这种传输策略将数据传送给手机终端。
终端接收到数据后，由Datasource处理媒体数据的传输协议，生成统一格式的数据流，再由Player进行解析和解码，将准备好的数据存储到缓冲池。
至此，即完成了数字内容数据的处理。
当用户进行观看数据的选择时。
调用相应的模块播放已就绪的内容。
这里存在着几个技术难点，即数据显示粒度、数据获取及解析线程和数据显示的同步。
4.2视觉表现与开发实现的平衡点
提起移动设备的设计，难免想起目前火热的iPhone，微软的windowsmobile系统，以及很多时不时让你大饱眼球的新颖、时尚的产品，其整体的印象感觉是前卫、酷炫和充满科技感的。
多说无宜，相信大家随处都可以看到类似的惊艳设计，这里要强调的一点就是，手机软件需要兼顾到多个手机操作系统，而目前主流的智能手机操作系统有很多如诺基亚的Symbian、微软的WindowsMobile，PALM、Linux，还有BlackberryOS、iPhoneOS，以及Java和MTK等等，况且每个系统会不断更新升级出多个版本，比如Symbian系统又根据不同的硬件特性分为S40、S60、S80、S90等不同版本，这些系统和版本都具有不同的特性，所支持的界面表现也都不尽相同。
同时，手机软件亦会受到硬件设备的限制。
而且，要关注到产品开发的成本。
4.3围绕核心价值进行设计
浏览器的核心功能是页面浏览和内容呈现，用户在使用浏览器上网的时候，浏览器的任务便是对用户查看网页进行解析并快速正确的呈现网页内容，而网页的样式及风格则是网站建设者需要考虑的事情。
这里要提到在preview版本里曾设定的手机QQ风格的主题皮肤，其中对网页浏览窗口的背景色也进行了定义，即与起始页一致的深蓝色，在实现和测试的过程中，我们发现这个深色的背景影响到了部分网页的浏览。
比如，CCTV的wap网站使用样式表将网页文字定义为深色，在明暗度很接近的背景色值下，基本无法看清文字。
因此preview版本我们暂停了该主题的实现，在beta2版本中我们将该主题的浏览窗口背景色调整为浅色。
控件设计也遇到了类似的问题，开始控件样式是跟当前应用的主题风格统一的，默认蓝色主题的控件是蓝色的，粉色主题的控件就是粉色的，但这在通用性上就比较差，比如在一个蓝色风格的网页中，想区分出蓝色的输入框就有点困难。
因此，我们最终定义了一套通用的手机浏览器的标准控件，可以应用在各个主题里面。
公司已经有一些比较成熟的无线产品，如手机QQ项目就积累了丰富的移动设备设计的经验，在手机浏览器项目的前期我们与手机QQ项目的设计师进行了多次的交流和学习，在后期的设计过程中也非常感谢他们的经验分享和热心支持。
其它还有手机QQ音乐、手机QQ影院等产品也有值得我们学习的地方，后续我们会增强各项目间的交流和技术分享，共同提高。
多渠道的学习移动设备相关的设计知识是很有必要的，特别推荐下诺基亚论坛，其中的Designan
升级会员 