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

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

《互动点播系统设计与实现UI界面的设计与开发毕业设计论文.docx》由会员分享，可在线阅读，更多相关《互动点播系统设计与实现UI界面的设计与开发毕业设计论文.docx（32页珍藏版）》请在冰豆网上搜索。

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

互动点播系统设计与实现

——UI界面的设计与开发

摘要：

近两年来，各式各样的网络电视盒子丰富了电视观众的选择，而各类中间件简化了电视盒子的程序开发，使得普通的程序员也可以在此平台方便的设计开发软件，以满足多样的需求。

极大的市场潜力意味着有着大量的相应软件需求，通过设计开发互动点播系统，可以提前接触到这个流行的技术领域，对于我们了解有关电视盒子应用开发有极大的帮助。

关键词：

电视盒子；定制芯片；互动；中间件；服务器

Abstract:

Inthepasttwoyears,allkindsofnetworkTVboxenrichedTVaudience'schoice,andallkindsofthemiddlewaresimplifiestheapplicationdevelopmentofTVbox,makeordinaryprogrammerscanalsointheplatformsoftwaredesignanddevelopment,tomeetthediverseneeds.

Greatmarketpotentialmeansthattherearealargenumberofcorrespondingsoftwarerequirements,throughthedesignanddevelopmentondemandsystem,cancomeintocontactwiththepopulartechnologyinadvance,forustounderstandaboutTVboxapplicationdevelopmentisofgreathelp.

Keywords:

Customchipbox;interactivetelevision;middleware;server

1UI界面的设计与开发

1.1编写目的

UI是UserInterface，即用户界面的简称。

而UI设计指的是对软件的人机交互、操作逻辑以及界面的美观程度的整体设计。

一个好的UI设计，不仅可以让软件变得更加有个性和品位，还有让软件的操作变得更加人性化，简单舒服的任务。

UI设计大体包括：

一，图形设计，即传统意义上的美工。

二，交互设计，也就是软件的操作逻辑，操作流程之类的。

三，用户测试，用来测试交互设计的合理性以及图形设计的美观性。

所以这里，就从这三个方面来阐述UI界面的设计与开发。

1.2图形设计

UI界面设计的第一步，就是就是图形设计。

我们的项目前端主要使用HTMl+CSS来实现效果呈现，所以在图形设计时候，主要使用PhotoShop来对图片进行切片和处理，用文本编辑器对图片进行排版设计。

因为涉及到大量重复的的图片处理步奏，我还特别为此用applescript编写了简易的图片批处理脚本，方便在PhotoShop上的处理，提高图片设计效率。

使用PhotoShop，给我们进行图形处理提供了极大的帮助，PhotoShop的特点有一下这些：

图1-1在PS中进行图形设计

图1-2使用applescript编写的PS脚本

1、像素层级的编辑

像素是组成图片的最基本元素。

Photoshop可以做到像素层级的编辑，功能强大。

另外，除了编辑现有图片外，用户还可以用Photoshop制作图像，例如加入字体、向量图案等等。

2、图层功能

图层功能让图片既可以分层编辑，也可以合并图层进行统一修改。

在同一个图层内，用户可使用LayerMask功能选取套用编辑的部分。

3、动作功能

动作功能可记录一连串的编辑动作，然后应用在不同图片中。

当然PhotoShop的缺点也很明显：

批量处理不方便。

Photoshop单张图片的编辑处理功能比较强大，其本身也是为处理单张图片而设计。

虽然可以使用cameraRAWplugin来处理RAW文件，但Photoshop本身的批量处理功能并不算强大。

所以针对这个缺点，我们根据实际需求，为其开发了简易的批处理工具，与PhotoShop相结合，就能很好的实现我们对于图形设计的需求了。

第二步，为了在项目中使用设计好的图形，必须借助HTML+CSS来呈现效果。

HTML指的是超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：

Head）、和“主体”部分（英语：

Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

CSS指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

我们将图形放在HTMl的body里，用CSS来控制要呈现的效果，就能实现我们所需要的图形设计效果：

-------------------------------------------------------------------------------------------------------

--节目列表-->

absolute;left:

386px;top:

258px;width:

772px;height:

76px;font-size:

20px;color:

#ffffff;visibility:

hidden;">正在请求数据，请稍等！