互动点播系统设计与实现UI界面的设计与开发.docx
《互动点播系统设计与实现UI界面的设计与开发.docx》由会员分享,可在线阅读,更多相关《互动点播系统设计与实现UI界面的设计与开发.docx(29页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、互动点播系统设计与实现UI界面的设计与开发摘 要:近两年来,各式各样的网络电视盒子丰富了电视观 众的选择,而各类中间件简化了电视盒子的程序开发,使得普通的程序员也可以在此平台方 便的设计开发软件,以满足多样的需求。极大的市场潜力意味着有着大量的相应软件需求, 通过设计开发互动点播系统,可以提前接触到这个流行的技术领域,对于我们了解有关电视 盒子应用开发有极大的帮助。关键词:电视盒子;定制芯片;互动;中间件;服务器Abstract:In the past two years, all kinds of network TV box enriched TV audiences choice, an
2、d 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 th
3、e 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 chip box; interactive television; middleware; server1 UI界面的设计与开发1.1 编写目的UI是 User Interface,即用户界面的简称。而UI
4、设计指的是对软件的人机交 互、操作逻辑以及界面的美观程度的整体设计。一个好的UI设计,不仅可以让 软件变得更加有个性和品位,还有让软件的操作变得更加人性化,简单舒服的任 务。UI设计大体包括:一,图形设计,即传统意义上的美工。二,交互设计,也 就是软件的操作逻辑,操作流程之类的。三,用户测试,用来测试交互设计的合理性以及图形设计的美观性。所以这里,就从这三个方面来阐述UI界面的设计 与开发。1.2 图形设计UI 界面设计的第一步,就是就是图形设计。我们的项目前端主要使用 HTMl+CSS来实现效果呈现,所以在图形设计时候,主要使用PhotoShop来对图 片进行切片和处理,用文本编辑器对图片进
5、行排版设计。因为涉及到大量重复的的图片处理步奏,我还特别为此用applescript编写了简易的图片批处理脚本,方 便在PhotoShop上的处理,提高图片设计效率。使用PhotoShop,给我们进行图形处理提供了极大的帮助,PhotoShop的特点有一下这些:图1-1在 PS中进行图形设计图1-2使用apples编c写r的iPpSt脚本1、像素层级的编辑像素是组成图片的最基本元素。Photoshop 可以做到像素层级的编辑,功能 强大。另外,除了编辑现有图片外,用户还可以用Photoshop制作图像,例如加 入字体、向量图案等等。2、图层功能图层功能让图片既可以分层编辑,也可以合并图层进行统
6、一修改。在同一个 图层内,用户可使用Layer Mask功能选取套用编辑的部分。3、动作功能动作功能可记录一连串的编辑动作,然后应用在不同图片中。当然PhotoShop的缺点也很明显:批量处理不方便。Photoshop单张图片的 编辑处理功能比较强大,其本身也是为处理单张图片而设计。虽然可以使用 camera RAW plug in来处理RAW文件,但Photoshop本身的批量处理功能并不 算强大。所以针对这个缺点,我们根据实际需求,为其开发了简易的批处理工具,与 PhotoShop相结合,就能很好的实现我们对于图形设计的需求了。第二步,为了在项目中使用设计好的图形,必须借助HTML+CSS
7、来呈现效 果。HTML指的是超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记 语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中头” 部提供关于网页的信息,“主体”部分提供网页的具体内容。CSS指的是层叠样式 表,是一种用来表现HTML或XML等文件样式的计算机语言。我们将图形放在 HTMl的body里,用CSS来控制要呈现的效果,就能实现我们所需要的图形设 计效果:正在请求数据,请稍等!节选片段选自项目首页的HTML代码块,是节目列表的图形设计与展示。第 一行的“”表示以下模块代码行
8、是属于节目列表功能的函数块。 标签是层叠样式表中的定位技术,用来为HTML文档内的内容提供结构和背景的元素。div中的id是HTMl的选择器,id选择器允许以一种独立于文档元 素的方式来指定样式,在这块代码中,我指定class为的div存放设计好的第一张图片,并在 里赋予它 CSS 的属性,使图片对于页面相对 定位,并规定内部包含的img标签,确定图片的相对路径和相对位置。大量的图片都是通过这种方式定位在项目上,错综复杂的图片就构成了这个 项目的图形设计。1.3 交互设计想要做好UI的交互设计,必须要求熟悉网站,能独立完成项目开发,网页设 计和相关操作从事UI设计网站界面必须知道的知识。现场生
9、产过程,例如,网站整 体页面布局和网站知识的本质,能够满足现场整体统一。设计一个网站并不仅仅 是把信息,如图片和文本信息,音频和视频的页面如此简单,但是应该开始从用户 的实用性,清楚的设计网站的性质,性质不同的设计风格,如政府机构是一个社会 人们互相交流,信息公告,发布提供类网站,主要用于政府的公共可以学到一些重 要的措施,重要的发布文档,和促进社会道德、伦理等等。1.3.1 交互设计技术介绍在该项目里面,我们主要使用 JavaScript作为主要的交互设计语言,通过 JavaScript来控制用户的的操作与实际函数的映射和逻辑的设计。JavaScript一种直译式脚本语言,是一种动态类型、弱
10、类型、基于原型的语 言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广 泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用) 网页上使用,用来给HTML网页增加动态功能。JavaScript是一种属于网络的脚 本语言,已经被广泛用于 Web 应用开发,常用来为网页添加各式各样的动态动能, 为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中 来实现自身的功能的。1.3.2 交互设计功能思路由于本项目的运行平台是电视盒子,所以在用户实际运用时候,是通过遥控器而不是鼠标或者键盘对其进行操控。所以说,该项目的实际交互设计
11、需要考虑 的第一个因素就是如何模拟用户通过遥控器进行自然的操作,而不会感到不正常。第二个因素是要贴合考虑到操作的方便性和合理性,让用户通过尽可能少的 步奏操作,完成想要的动作。想要解决第一个问题,可以参考曾经智能DVD机的操作方式,观察他们的 界面安排和操作方式,通过对比和学习,就可以摸索出一套比较通用的操作规范, 不同于电脑端或者移动端的操作方式,只要将这套操作规范转换成实际的代码, 就能顺利的实现模拟遥控器的操作方式。同时,我还将可能会用到的遥控器功能 键以及与其对应的实际键值进行了搜集和整理。第二个问题,我们小组进过探讨和研究,决定使用当前社会上比较流行的栅 格化原则来进行交互设计。我们
12、的项目,规定了像素分辨率为1280*720。所以我们参照960栅格化系统 的系统指定,设计出了1280栅格系统。通过这个1280栅格系统,就可以设计出 同时具备方便性和合理性的交互逻辑,达到我们的目标预期。1.3.3 交互设计代码分析function grdEvent(event)var keycode = event.which;Utility.println(+keycode);switch(keycode)case 1:/ upcase 38:if(tipShowFlag | moreInfoShowFlag) return 0;if(area = 1)lastArea = area;c
13、hangeArea(0);if(area = 2 & listPos 3)lastArea = area;changeArea(1);else if(area = 2 & (listPos = 3 | listPos = 4) changeListPos(-3);else if(area = 2 & listPos = 5)第 7 页 (共 30 页)changeListPos(-1);else if(area =2 & IistPos = 6) changeListPos(-4);return 0;break;节选的函数grdEvent代码块主要负责接收用户所按按键的真实键值,并执行 对应的
14、响应函数。通过这个函数,用户每次按键之后想要的反应都会实时响应, 达到用户的需求。下面具体介绍代码的功能实现:“var keycode = event.which底层硬件集成的中间系统会通过接收器接收到 用户通过遥控器按下的键位,并将具体键值传递给event,并通过变量keycode接 U攵。“Utility.println(+keycode);”Utility.println方法可以将后面括号内的内容在串口输出打印。接下来的SWitCh(keycode).是编程语言经典的多分枝选择语句,准确的使 用SWitChCaSe语句能有效的避免冗长的if.elseif.else代码块。圆括号内的 ke
15、ycode就是指前文所指的真实键值,通过一条条匹配对应键值的函数方法即可 实现用户需求。代码块中出现大量类似 if(tipShowFlag | moreInfoShowFlag) return 0;的语句, return 0的作用是跳出当前循环,而放在if()的后面意思就是当括号内成立时候, 就跳出当前语句。作用就是在执行对应键值操作的方法之前先判断,当前状态是 否不能响应这个动作,比如正在加载数据或者有上层panel覆盖的时候,就不能 响应确认按键的动作。如果不加这种判断,就很有可能出现逻辑错误,影响用户 使用体验。这同时也是开发过程中最经常出现的问题之一,需要有清晰的思路已 经多次的检查排
16、漏才能确保不会出现此类问题。function changePos(_num)if(area = 1)menuPos += _num;if(menuPos 6) menuPos = 0;$().style.left = 99 + 158 * menuPos +else if(area = 0)lastPos = menuPos;menuPos += _num;if(menuPos 10) menuPos = 7;$(lastPos).style.visibility =;$(menuPos).style.visibility =;function changeArea(_area)area =
17、_area;if(area = 0)if(lastArea = 1 | menuPos != 6)menuPos = 7;$().style.visibility =;$(menuPos).style.visibility =;else if(_area = 1)area = _area;$().style.visibility =;if(lastArea = 0 & (menuPos = 7 Il menuPos = 8)IastPos = menuPos;menuPos = 5;$().style.left =;$(lastPos).style.visibility =else if(la
18、stArea = 2 & listPos = 2) lastPos = listPos;menuPos = 5;$().style.left =;$(+lastPos).style.visibility =节选代码块包含两个有关交互设计的函数ChangePos和ChangeArea,从名字就可以很容易看出这两个函数是移动焦点位置和切换显示区域的函数。图2-1用 are来a为项目划分区域我们的项目,是将页面分成多个区域,用area来区分。因为每个区域的交互 逻辑都有不同,划分区域就可以清楚的将不同的逻辑代码放在不同的地方,一方面可以提高开发效率,减少开发时间。二是代码分离开,方便排查错误,这样当
19、 测试时候是在哪一区域出现逻辑交互错误,就可以快速定位代码位置,知道错误 的大体位置。同理,在每个区域里的每个相对位置我们用XXXPos来表示,比如区域area0 中有四个区域(搜索、收藏、历史、首页),于是我们就用menuPos0menuPos3 来标示。这样,“if(menuPos 3) menuPos = 0就可 以表示在循环中,如果当前焦点位置从第四个首页再往右移动,即munuPos=3再 加1,就自动切换回最左边的搜索,即menuPos=0。这种切换方式代码量非常少, 而且逻辑清晰,非常适合在我们这种简单的小程序里面使用。在项目中,大量这 种类型的代码的调用,构成了项目最基础的交互移
20、动系统,互相联系又不相互影 响,强化了系统的鲁棒性。$().style.visibility =和$().style.visibility =是通过html控制括号内对象类选择器的CSS。顾名思义可以看得出来,visibility指代的是对象是否 可见。通过对其属性进行赋值hidden和visible,就可以轻松实现控制对象的出现 和隐藏。如果同时让相邻的两个相同元素一个显示,一个消失,则可以出现仿佛 是这个元素从一个位置移动到另一个位置的假象。这是一种编程的技巧,我们可 以在每个焦点可能会移动的位置都事先隐藏一个焦点元素,这样,只要当系统监 测到用户想要移动焦点位置的意图时候,通过hidde
21、n/visible的方法,就可以轻松 实现。与之相对应的是$().style.left = 396 + 150 * listPos +;$().style.top =;这种方法,只生成一个焦点元素,每次监测到用户移动焦点意图的时候,去 计算焦点坐标变化,再让焦点移动到结束位置。这种做法需要在每次焦点移动时 候做全面判断移动规则,然后用对应的变换函数去计算移动后的坐标位置。这两种做法优缺点非常明显。前者优点是没有任何延迟,在我们项目不支持 多线程的硬件基础上,同时多个元素的移动不会出现卡顿或延迟的感觉,缺点就第 11 页 (共 30 页)是前端页面代码比较冗长,每个对位都会嵌入同样的焦点图片标签
22、。后者优点是 前端代码清楚,只有一个个位置,没有大量重复的代码。但是缺点是后台逻辑部 分有大量判断计算函数,而且开发难度较大,容易出现错误和bug。最佳的方法 是两种相结合,移动规则单一且量大的时候用第二种方法,位置少但是移动不规 律时候后第一种方法。这样就可以很好的实现交互设计的需求了。1.4总结网站界面的设计从以前的只重技术不重设计正逐渐改善为两者兼顾,设计的 重要性和技术性是同等重要的。如果只重技术而设计的不好,那么即使技术性再 强也达不到好的用户体验效果,从而不能满足一个网站总的功能的发挥,这样就 影响了网站的价值,只有将技术性和设计效果结合起来才能达到更好的用户体验, 更合理的人机交
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互动 点播 系统 设计 实现 UI 界面 开发
限制150内