响应式婚庆公司网站UI设计-论文.doc

嘉 兴 南 洋 职 业 技 术 学 院毕 业 论 文（设 计） 论文题目 响应式婚庆公司网站UI设计 分 院 商务贸易分院 学生姓名 戴晶 专业名称 计算机应用技术 班级/学号 13计算机3班/ 130701305 指导教师 滕吉鹏 嘉兴南洋职业技术学院教务处印制响应式婚庆公司网站UI设计【摘要】婚庆网站平台能够为婚嫁行业中的企业提供一个展示、品牌推广的舞台；为即将踏上婚礼殿堂的准新人提供一个婚礼经验交流、服务的平台。婚庆作为一个新兴行业，在全国已到了火爆的程度。随着互联网千禧一代的成长，他们解决问题的首要途径就是通过网络，婚嫁平台就给新人提供了一个全面的答案，新人只需用指尖点击美好，就能节约决策的时间成本同时也节约了金钱。无论婚庆行业前仆后继者有多少，网站都保持一颗平常心实践服务宗旨：做好商家和用户对接的中介，帮助新人轻松愉快地结婚，带给商户实际利益。本论文主要阐述婚庆公司网站UI的整体设计与制作过程，重点分析了样式表排版技术与响应式开发技术。【关键词】婚庆；UI；响应式；CSSI目录一、前言1二、UI设计概述2(一)UI设计原则2(二)UI设计基本环节3三、开发技术介绍5(一)HTML+CSS技术5(二)页面交互技术6(三)响应式布局6四、主要效果实现8(一)页面整体框架搭建8(二)弹出式菜单8(三)轮播广告效果9(四)响应式菜单10五、结束语13参考文献14致谢15II嘉兴南洋职业技术学院毕业论文（设计）I*一、 前言婚庆市场最近涌现了许多新创业的互联网公司同时这个行业也得到了资本青睐，被业内外人士共称为甜蜜行业。毕竟婚庆市场在任何国家都是刚需，在中国尤其如此，人口多观念传统，到了试婚年龄的男女都逃不过结婚这件事。数据显示，目前婚庆行业产值超过六千亿。婚庆网站平台能够为婚嫁行业中的企业提供一个展示、品牌推广的舞台；为即将踏上婚礼殿堂的准新人提供一个婚礼经验交流、服务的平台。婚庆作为一个新兴行业，在全国已到了火爆的程度。北京、上海、广洲、深圳，婚庆公司如雨后春笋般涌现。尤其是上海婚庆协会的成立，正式标榜婚庆行业正朝专业化、正规化的方向发展。随着互联网千禧一代的成长，他们解决问题的首要途径就是通过网络，婚嫁平台就给新人提供了一个全面的答案，新人只需用指尖点击美好，就能节约决策的时间成本同时也节约了金钱。无论婚庆行业前仆后继者有多少，网站都保持一颗平常心实践服务宗旨：做好商家和用户对接的中介，帮助新人轻松愉快地结婚，带给商户实际利益。二、 UI设计概述对于应用软件来说，一个基本现实就是：用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用，用户界面走到今天真是千锤百炼，要做到易用就更是难上加难。现今世界上成功的软件公司都非常重视软件界面的美化设计工作，因为他们深刻地知道，在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。随着中国IT产业的迅猛发展，虽然国内的某些大型软件已经逐渐形成比较专业完善的界面设计机构，而大部分的中小型软件则还是停留在注重软件功能，而忽视人机交互界面设计的层次。设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用，同时界面如同人的面孔，具有吸引用户的直接优势。(一) UI设计原则1. 一致性原则要求软件的概念模式、显示方式等的一致性，在类似的情况下具有一致的操作序列：如在提示、菜单和帮助中产生相同的术语；具体是指在不同的应用系统中都具有相似的界面外观、布局、相似的交互方式以及相似的信息显示等。界面设计保持高度一致性，用户不必进行过多的学习就可以掌握其共性；还可以把局部的知识和经验推广使用到其他场合。人机界面设计的一致性要求对构成易学易用是极为重要的。无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。 2. 合理利用空间，保持界面的简洁简单易用就是好。不要将界面设计的过于复杂，那样会影响程序的快捷使用，人为降低了程序的运行效率。界面设计最重要的就是遵循美学上的原则简洁与明了。一个软件，特别是应用软件，其界面不需要很华丽。太过华丽花哨的界面容易让人的眼睛疲惫，让人心浮气躁，把注意力过多的集中到花哨的图案和颜色上，从而影响软件的可信度以及实用性。因此，界面设计需在空间使用上，合理的布局和设计，在简洁的同时让人的眼球得到艺术欣赏，并且能感觉放松，突出软件的性能，使界面设计成为软件性能一个出色的辅助项目但是却不喧宾夺主，始终作为一个衬托，让软件界面更友好，更能为用户所喜爱和接受。3. 从用户的观点考虑。一个软件界面是用来方便用户与软件的交互的，因此，要从用户的角度去考虑和设计软件界面，想他们所想，做他们所做，并且界面中要使用能反应用户本身的语言，而不是设计者的语言以及使用习惯。4. 记忆负担最小化。人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。一个画面的信息量不可过于复杂和庞大。5. 保证界面的协调性。控件摆放位置要合理、均衡，让人便于浏览和使用。不要给人们带来“前重后轻、左宽右窄”的不良感觉，要将重要的控件摆放在明显位置，这样才能突出重点。此外，一定要符合人们的日常使用习惯。同时，背景图案和颜色的设计要帮助排列，甚至有时候作为分隔符，让界面看上去和谐美丽。(二) UI设计基本环节1. 确定软件的主题。不管要设计什么东西，设计前就应该先确立好设计的主题。而软件的主题的确立则与软件的功能与目的有关。比如一个图书管理系统的软件，其主题就是“图书管理”，远程教育系统的主题就是“远程教育”。于是软件界面的设计就要围绕着主题来进行，让用户一看软件的界面就知道这个软件是做什么的，不能软件的界面与软件的主题相差十万八千里，假如一个电脑硬件管理系统软件的界面上尽是和电脑无关的东西，比如花草，山水，这样，就不能反应该软件的主题与功能，让人丈二和尚摸不着头脑，这样，这个软件的界面就是失败的。2. 团队协商美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。 程序开发过程中，提供标准风格的资源文件（icon,cur,bmp等），并总结出统一风格的资源的设计过程，形成规范文档。 3. 确定界面根据用户的自身特性以及系统任务、环境、成本效益，确定量为适合的界面类型。这时，在着手进行软件界面设计前，须在心里大致有个谱，对要设计的软件的功能有了解，同时对该软件的界面设计有成形的构想。三、 开发技术介绍(一) HTML+CSS技术HTML是实际创建Web页面的语言，如今现有的每个Web浏览器都能理解这种语言。自从20世纪90年代初以来，它就成为了World Wide Web的驱动力量，是Internet处理Web页面的部分。HTML文档是含有标记、文本组合和影响文本显示的附加数据的简单文本文件。HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如网站导航块和）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的和，总结而言，有如下几大特点：1. 取消了一些HTML4里过时的元素和属性标记2. 内容与展示分离3. 新增加一些全新的表单输入对象4. 全新的、更合理的标签5. 本地存储6. Canvas对象7. 新的API扩展CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。(二) 页面交互技术交互技术主要是指研究人和页面之间的信息交换，它主要包括人到计算机和计算机到人的信息交换两部分。是与认知心理学、人机工程学、多媒体技术、虚拟现实技术等密切相关的综合学科。Jquery是目前最为流行的交互设计技术，它是一种新的JavaScript脚本库。也就是说，jQuery并不是什么新的编程语言，它的核心是JavaScript。那么，所有使用jQuery能实现的效果和技术，使用JavaScript也能实现。如：操作HTML文档、事件捕捉、动画效果以及Ajax交互。Query的语法非常简单。简单的语法构造减少了我们花在输入代码以及检查代码语法上的时间，提高编写代码效率，说实话，这就是我选择jQuery的初衷。 jQuery 提供了强大的功能函数。使用这些函数，能够使我们快速实现各种给力的功能。它也解决了浏览器兼容性问题。虽然，我们并没有亲眼目睹过什么浏览器大战，但是，我知道微软赢了，我还了解W3C是公认的国际标准。它支持丰富的UI， yahoo的登录框，淘宝的弹出效果，使用jQuery的插件是很容易实现的。(三) 响应式布局响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备（台式电脑，笔记本电脑，平板，手机）相关的设计问题，如图。既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。图 三1 多种分辨率设备其主要实现方式为通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的media和import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。四、 主要效果实现(一) 页面整体框架搭建页面整体采用DIV框架进行组织，利用CSS设置DIV的外观特征，并坐待样式与代码分离。以下例举首页的DIV结构，如图。图 四1 首页DIV设置代码页面整体分为3个主要模块，即header、content、footer-section。其中继续放置子DIV、文本及其他网页元素。(二) 弹出式菜单菜单效果如图所示，此技术主要使用CSS中的伪类选择权设计，伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。图 四2 首页弹出式菜单相关CSS代码如下：图 四3 弹出式菜单伪类代码(三) 轮播广告效果随着页面的缩短，以及广告位的大幅度减少，而商家需求却不断增加。大量的特效广告，多媒体广告，使用户发生视频疲劳，审美疲劳，所以2007年上半年有一项调查表明，60%的互联网用户对广告表示反感。诸多因素，迫使商家不得不做出互联网以来的最重要的变革，轮播广告出现，复合型广告的出现。追求广告审美效果，以及用户对广告的评价，而不仅仅是为了强迫用户去被动点击或观看。本站点轮播广告主要采用背景不变，只轮播重点文字的效果，如图。目的就是为了减少用户的阅读压力，并尽可能减少带宽成本，提高轮播效率。图 四4 首页轮播广告其主要实现技术为jquery，通过调用jquery.flexslider.js插件文件，并在页面中进行参数设置来完成，由于插件文件代码较多，此处不便子粘贴，其调用与设置核心代码如下所示：图 四5 轮播插件调用代码(四) 响应式菜单本网站的UI采用响应式技术，即页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整，如图与图所示。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。图 四6 768px以上首页效果图 四7 768px以下首页效果通过效果可以看到，当页面分辨率小于768像素后，许多元素的排版将出现变化，有的甚至隐藏。如导航菜单，在大分辨率情况下，以横向平铺每个子菜单，而在小分辨率情况下则折叠成弹出式菜单，其主要实现技术为调用bootstrap.css样式文件及bootstrap.js文件后才有媒体查询方式设置两套CSS代码，如图。图 四8 响应式菜单css代码五、 结束语通过这个婚庆公司网站的前端开发，对这个行业有了更多感触。这是一个新的职业，入门相对后台的开发人员较低，会一些基本的技术就可以了，如：html、css、js等。但是，随着开发时间的增长就会发现自己很快的就会进入一个瓶颈，可能会错误的认为，做前端开发不过如此。要学好前端开发必须看书加上实际操作来学习，因为从书上学习东西比较系统，学到的东西是系统的而不是一片一片或者一点一点的。最重要的是要去验证书上写的跟实战的结果进行对比。每个web前台开发工程师都应该具有很