互动点播系统设计与实现UI界面的设计与开发.docx
《互动点播系统设计与实现UI界面的设计与开发.docx》由会员分享,可在线阅读,更多相关《互动点播系统设计与实现UI界面的设计与开发.docx(27页珍藏版)》请在冰豆网上搜索。
互动点播系统设计与实现UI界面的设计与开发
互动点播系统设计与实现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;">正在请求数据,请稍等!