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

嘉兴南洋职业技术学院毕业论文设计

论文题目 响应式婚庆公司网站UI设计

分 院 商务贸易分院

学生姓名 戴晶专业名称 计算机应用技术班级/学号 13计算机3班/ 130701305指导教师 滕吉鹏

嘉兴南洋职业技术学院教务处印制

响应式婚庆公司网站UI设计

【摘要】婚庆网站平台能够为婚嫁行业中的企业提供一个展示、品牌推广的舞台为即将踏上婚礼殿堂的准新人提供一个婚礼经验交流、服务的平台。婚庆作为一个新兴行业在全国已到了火爆的程度。随着互联网千禧一代的成长他们解决问题的首要途径就是通过网络婚嫁平台就给新人提供了一个全面的答案新人只需用指尖点击美好就能节约决策的时间成本同时也节约了金钱。无论婚庆行业前仆后继者有多少 网站都保持一颗平常心实践服务宗旨做好商家和用户对接的中介帮助新人轻松愉快地结婚带给商户实际利益。本论文主要阐述婚庆公司网站UI的整体设计与制作过程重点分析了样式表排版技术与响应式开发技术。

【关键词】婚庆 UI 响应式 CSS

I

目录

一、 前言. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

二、 UI设计概述. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

(一) UI设计原则. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

(二) UI设计基本环节. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

三、 开发技术介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

(一) HTML+CSS技术. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

(二) 页面交互技术. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

(三) 响应式布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

四、 主要效果实现. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

(一) 页面整体框架搭建. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

(二) 弹出式菜单. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

(三) 轮播广告效果. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

(四) 响应式菜单. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

五、 结束语. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

致谢. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

II

嘉兴南洋职业技术学院毕业论文设计

一、 前言

婚庆市场最近涌现了许多新创业的互联网公司同时这个行业也得到了资本青睐被业内外人士共称为甜蜜行业。毕竟婚庆市场在任何国家都是刚需在中国尤其如此人口多观念传统到了试婚年龄的男女都逃不过结婚这件事。数据显示 目前婚庆行业产值超过六千亿。

婚庆网站平台能够为婚嫁行业中的企业提供一个展示、品牌推广的舞台为即将踏上婚礼殿堂的准新人提供一个婚礼经验交流、服务的平台。婚庆作为一个新兴行业在全国已到了火爆的程度。北京、上海、广洲、深圳婚庆公司如雨后春笋般涌现。尤其是上海婚庆协会的成立正式标榜婚庆行业正朝专业化、正规化的方向发展。

随着互联网千禧一代的成长他们解决问题的首要途径就是通过网络婚嫁平台就给新人提供了一个全面的答案新人只需用指尖点击美好就能节约决策的时间成本同时也节约了金钱。无论婚庆行业前仆后继者有多少网站都保持一颗平常心实践服务宗旨做好商家和用户对接的中介帮助新人轻松愉快地结婚带给商户实际利益。

嘉兴南洋职业技术学院毕业论文设计

二、 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页面的部分。H TM L文档是含有标记、文本组合和影响文本显示的附加数据的简单文本文件。

HTML5是继HTML4以后的下一代HTML标准规范它提供了一些新的元素和属性例如<nav>网站导航块和<footer>。新型的标签有利于搜索引擎和语义分析 同时更好地帮助小屏幕装置和视障人士使用除此之外也提供了一些新的功能 比如视频音频用的<video>和<audio>总结而言有如下几大特点

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的初衷。 jQ uery提供了强大的功能函数。使用这些函数能够使我们快速实现各种给力的功能。它也解决了浏览器兼容性问题。虽然我们并没有亲眼目睹过什么浏览器大战但是我知道微软赢了我还了解W3C是公认的国际标准。它支持丰富的UI yahoo的登录框淘宝的弹出效果使用jQuery的插件是很容易实现的。

(三)响应式布局

响应式网页设计不仅仅是一种趋势还更是一个新的设计解决方案它有助于解决不同的分辨率和设备台式电脑笔记本电脑平板手机相关的设计问题如图。既然是设计的问题这里就会涉及到很多层面的角色包括交互设计师视觉设计师前端工程师后台开发工程师。

图三-1多种分辨率设备

其主要实现方式为通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都