互动点播系统设计与实现——UI界面的设计与开发【毕业论文设计】.docx

1、 第 1 页 (共 38 页)本科毕业论文（20 届）互动点播系统设计与实现 UI 界面的设计与开发所在学院专业班级 信息与计算科学学生姓名指导教师第 2 页 (共 38 页)完成日期第 3 页 (共 38 页)互动点播系统设计与实现 UI 界面的设计与开发摘 要：近两年来，各式各样的网络电视盒子丰富了电视观众的选择，而各类中间件简化了电视盒子的程序开发，使得普通的程序员也可以在此平台方便的设计开发软件，以满足多样的需求。极大的市场潜力意味着有着大量的相应软件需求，通过设计开发互动点播系统，可以提前接触到这个流行的技术领域，对于我们了解有关电视盒子应用开发有极大的帮助。关键词：电视盒子；定制芯

2、片；互动；中间件；服务器Abstract:In the past two years, all kinds of network TV box enriched TV audiences choice, and all kinds of the middleware simplifies the application development of TV box, make ordinary programmers can also in the platform software design and development, to meet the diverse needs.Great

3、market potential means that there are a large number of corresponding software requirements, through the design and development on demand system, can come into contact with the popular technology in advance, for us to understand about TV box application development is of great help.Key words:Custom

4、chip box; interactive television; middleware; server第 4 页 (共 38 页)1 UI 界面的设计与开发1.1 编写目的UI 是 User Interface，即用户界面的简称。而 UI 设计指的是对软件的人机交互、操作逻辑以及界面的美观程度的整体设计。一个好的 UI 设计，不仅可以让软件变得更加有个性和品位，还有让软件的操作变得更加人性化，简单舒服的任务。UI 设计大体包括：一，图形设计，即传统意义上的美工。二，交互设计，也就是软件的操作逻辑，操作流程之类的。三，用户测试，用来测试交互设计的合理性以及图形设计的美观性。所以这里，就从这三个

5、方面来阐述 UI 界面的设计与开发。1.2 图形设计UI 界面设计的第一步，就是就是图形设计。我们的项目前端主要使用HTMl+CSS 来实现效果呈现，所以在图形设计时候，主要使用 PhotoShop 来对图片进行切片和处理，用文本编辑器对图片进行排版设计。因为涉及到大量重复的的图片处理步奏，我还特别为此用 applescript 编写了简易的图片批处理脚本，方便在 PhotoShop 上的处理，提高图片设计效率。使用 PhotoShop，给我们进行图形处理提供了极大的帮助，PhotoShop 的特点有一下这些：第 5 页 (共 38 页)图 1-1 在 PS 中进行图形设计图 1-2 使用 a

6、pplescript 编写的 PS 脚本1、像素层级的编辑像素是组成图片的最基本元素。Photoshop 可以做到像素层级的编辑，功能强大。另外，除了编辑现有图片外，用户还可以用 Photoshop 制作图像，例如加入字体、向量图案等等。2、图层功能第 6 页 (共 38 页)图层功能让图片既可以分层编辑，也可以合并图层进行统一修改。在同一个图层内，用户可使用 Layer Mask 功能选取套用编辑的部分。3、动作功能动作功能可记录一连串的编辑动作，然后应用在不同图片中。当然 PhotoShop 的缺点也很明显：批量处理不方便。Photoshop 单张图片的编辑处理功能比较强大，其本身也是为处

7、理单张图片而设计。虽然可以使用camera RAW plug in 来处理 RAW 文件，但 Photoshop 本身的批量处理功能并不算强大。所以针对这个缺点，我们根据实际需求，为其开发了简易的批处理工具，与 PhotoShop 相结合，就能很好的实现我们对于图形设计的需求了。第二步，为了在项目中使用设计好的图形，必须借助 HTML+CSS 来呈现效果。HTML 指的是超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“ 头” 部分（英语： Head） 、和“主体 ”部分（英语：Body） ，其中“头

8、”部提供关于网页的信息， “主体”部分提供网页的具体内容。 CSS 指的是层叠样式表，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。我们将图形放在 HTMl 的 body 里，用 CSS 来控制要呈现的效果，就能实现我们所需要的图形设计效果：-正在请求数据，请稍等！第 7 页 (共 38 页)-节选片段选自项目首页的 HTML 代码块，是节目列表的图形设计与展示。第一行的“”表示以下模块代码行是属于节目列表功能的函数块。标签是层叠样式表中的定位技术,用来为 HTML 文档内的内容提供结构和背景的元素。中的 id 是 HTMl 的选择器,id 选择器允许以一种独立于文档元素的方式

9、来指定样式,在这块代码中,我指定 class 为“ poster0_img “的 存放设计好的第一张图片，并在“里赋予它 CSS 的属性，使图片对于页面相对定位，并规定内部包含的标签，确定图片的相对路径和相对位置。大量的图片都是通过这种方式定位在项目上，错综复杂的图片就构成了这个项目的图形设计。1.3 交互设计第 8 页 (共 38 页)想要做好 UI 的交互设计，必须要求熟悉网站，能独立完成项目开发,网页设计和相关操作从事 UI 设计网站界面必须知道的知识。现场生产过程,例如,网站整体页面布局和网站知识的本质,能够满足现场整体统一。设计一个网站并不仅仅是把信息,如图片和文本信息,音频和视频的

10、页面如此简单,但是应该开始从用户的实用性,清楚的设计网站的性质,性质不同的设计风格,如政府机构是一个社会人们互相交流,信息公告,发布提供类网站,主要用于政府的公共可以学到一些重要的措施,重要的发布文档,和促进社会道德、伦理等等。1.3.1 交互设计技术介绍在该项目里面，我们主要使用 JavaScript 作为主要的交互设计语言，通过JavaScript 来控制用户的的操作与实际函数的映射和逻辑的设计。JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在

11、HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。JavaScript 是一种属于网络的脚本语言,已经被广泛用于 Web 应用开发,常用来为网页添加各式各样的动态动能,为用户提供更流畅美观的浏览效果。通常 JavaScript 脚本是通过嵌入在HTML 中来实现自身的功能的。1.3.2 交互设计功能思路由于本项目的运行平台是电视盒子，所以在用户实际运用时候，是通过遥控器而不是鼠标或者键盘对其进行操控。所以说，该项目的实际交互设计需要考虑的第一个因素就是如何模拟用户通过遥控器进行自然的操作，而不会感到不正常。第二个因素是要贴合考虑到操作的方便性和合理性，让用

12、户通过尽可能少的步奏操作，完成想要的动作。第 9 页 (共 38 页)想要解决第一个问题，可以参考曾经智能 DVD 机的操作方式，观察他们的界面安排和操作方式，通过对比和学习，就可以摸索出一套比较通用的操作规范，不同于电脑端或者移动端的操作方式，只要将这套操作规范转换成实际的代码，就能顺利的实现模拟遥控器的操作方式。同时，我还将可能会用到的遥控器功能键以及与其对应的实际键值进行了搜集和整理。表 1.1 遥控器按键与对应实际键值按键描述 实际键值数字 1 49数字 2 50数字 3 51数字 4 52数字 5 53数字 6 54数字 7 55数字 8 56数字 9 57数字 0 48*（信息）

13、848#（状态/输入法） 572红 832第 10 页 (共 38 页)黄 834蓝 835绿 833第二个问题，我们小组进过探讨和研究，决定使用当前社会上比较流行的栅格化原则来进行交互设计。我们的项目，规定了像素分辨率为 1280*720。所以我们参照 960 栅格化系统的系统指定，设计出了 1280 栅格系统。通过这个 1280 栅格系统，就可以设计出同时具备方便性和合理性的交互逻辑，达到我们的目标预期。1.3.3 交互设计代码分析-function grdEvent(event)var keycode = event.which;Utility.println(“listMovie grdEvent keycode=“+keycode);switch(keycode)case 1: / upcase 38:if(tipShowFlag | moreInfoShowFlag) return 0;if(area = 1)lastArea = area;