文档介绍：互动点播系统设计与实现
——UI界面的设计与开发
摘要:近两年来,各式各样的网络电视盒子丰富了电视观众的选择,而各类中间件简化了电视盒子的程序开发,使得普通的程序员也可以在此平台方便的设计开发软件,以满足多样的需求。极大的市场潜力意味着有着大量的相应软件需求,通过设计开发互动点播系统,可以提前接触到这个流行的技术领域,对于我们了解有关电视盒子应用开发有极大的帮助。
关键词:电视盒子;定制芯片;互动;中间件;服务器
Abstract:In the past two years, all kinds work TV box enriched TV audience's 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 market potential means that there are a large number of corresponding software requirements, through the design and development on demand system, e into contact with the popular technology in advance, for us to understand about TV box application development is of great help.
Key words:Custom chip box; interactive television; middleware; server
1 UI界面的设计与开发
编写目的
UI是 User Interface,即用户界面的简称。而UI设计指的是对软件的人机交互、操作逻辑以及界面的美观程度的整体设计。一个好的UI设计,不仅可以让软件变得更加有个性和品位,还有让软件的操作变得更加人性化,简单舒服的任务。
UI设计大体包括:一,图形设计,即传统意义上的美工。二,交互设计,也就是软件的操作逻辑,操作流程之类的。三,用户测试,用来测试交互设计的合
理性以及图形设计的美观性。所以这里,就从这三个方面来阐述UI界面的设计与开发。
图形设计
UI界面设计的第一步,就是就是图形设计。我们的项目前端主要使用HTMl+CSS来实现效果呈现,所以在图形设计时候,主要使用PhotoShop来对图片进行切片和处理,用文本编辑器对图片进行排版设计。因为涉及到大量重复的的图片处理步奏,我还特别为此用applescript编写了简易的图片批处理脚本,方便在PhotoShop上的处理,提高图片设计效率。
使用PhotoShop,给我们进行图形处理提供了极大的帮助,PhotoShop的特点有一下这些:
图1-1 在PS中进行图形设计
图1-2 使用applescript编写的PS脚本
1、像素层级的编辑
像素是组成图片的最基本元素。Photoshop可以做到像素层级的编辑,功能强大。另外,除了编辑现有图片外,用户还可以用Photoshop制作图像,例如加入字体、向量图案等等。
2、图层功能
图层功能让图片既可以分层编辑,也可以合并图层进行统一修改。在同一个图层内,用户可使用Layer Mask功能选取套用编辑的部分。
3、动作功能
动作功能可记录一连串的编辑动作,然后应用在不同图片中。
当然PhotoShop的缺点也很明显:批量处理不方便。Photoshop单张图片的编辑处理功能比较强大,其本身也是为处理单张图片而设计。虽然可以使用camera RAW plug in来处理RAW文件,但Photoshop本身的批量处理功能并不算强大。
所以针对这个缺点,我们根据实际需求,为其开发了简易的批处理工具,与PhotoShop相结合,就能很好的实现我们对于图形设计的需求了。
第二步,为了在项目中使用设计好的图形,必须借助HTML+CSS来呈现效果。HTML指的是超文本标记语言,标准通用标记语言下的一个应用。“超文本”
就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。CSS指的是层叠样式表,是一种用来表现HTM