基于响应式Web设计中用户界面的分析与探究

发布时间：2017-04-08 01:03

  本文关键词：基于响应式Web设计中用户界面的分析与探究，由笔耕文化传播整理发布。

【摘要】：如今,互联网的蓬勃发展带动了各种设备的兴起。大屏幕设备的普及与小屏幕移动设备的快速发展,导致多种设备屏幕尺寸和分辨率的差异性。为大屏幕设备设计固定模式的传统网页无法适应现代小型移动设备屏幕的变换与更新。用户的浏览方式逐渐由传统的桌面电脑向便携的移动设备转变。面对这种转变形式,网页设计者需要共同解决一个重要难题:网页设计亟需一种新技术来顺应互联网终端的变革,用以解决单个网站的页面布局能兼容多种设备的功能。伊桑·马科特为此提出了“响应式网页设计”,这已成为跨终端适配的最佳解决方案,这是一个新的设计理念,即将已有的流式布局、弹性图片和媒体查询等方法结合起来,运用HTML5和CSS3等技术整合为一种新型的网页设计模式。响应式网页设计根据用户使用设备的环境和行为,动态调整页面布局结构,提升网站浏览速度,并呈现出更加美观的页面布局效果,同时解决了跨设备、跨浏览器的问题,使网页内容自动响应不同的浏览设备,呈现出不同的布局效果,进而提升了用户体验的满意度。本文首先从响应式网页设计的发展现状出发,分析其存在的缘由与特性;其次,结合优秀的响应式网页设计实例,分析和探究响应式网页设计的三个组成要素即媒体查询、流式布局和弹性图片的使用,通过理论与实践相结合的方式,探讨响应式网页设计在用户界面中CSS3和HTML5的技术实践,从而有效解决了传统固定宽度模式中网页设计的弊端,做出关于响应式网页的毕业设计作品,最后对响应式网页设计未来发展的优势与缺陷进行分析,提出响应式网页设计的后续研究建议。响应式设计作为网页设计的新趋势,促进了网页的发展。通过分析响应式网页可以得出:网页设计以友好的用户体验为中心,在满足用户视觉体验与功能需求的同时,将网页界面设计与技术相融合,深入理解响应式网页界面设计的深层内涵。
【关键词】：网页设计 响应式 媒体查询 CSS3 HTML5
【学位授予单位】：中南民族大学
【学位级别】：硕士
【学位授予年份】：2015
【分类号】：TP393.092
【目录】：

• 摘要8-9
• Abstract9-11
• 第一章 绪论11-18
• 一、课题研究背景11-14
• (一) 网页设计的发展及现状11-13
• 1. 响应式网页设计的定义11-12
• 2. 响应式建筑与响应式网页的关系12-13
• (二) 国内外研究的现状13-14
• 1. 国内的研究现状水平13-14
• 2. 国外的研究现状及创新之处14
• 二、研究目的与方法14-18
• (一) 研究目的14-15
• (二) 研究思路与方法15-16
• 1.研究思路15-16
• 2.研究方法16
• (三) 研究内容结构16-17
• (四) 研究意义17-18
• 第二章 实现响应式网页设计的要素分析18-26
• 一、响应式网页存在的必要性18-26
• (一) 用户体验的需求18-20
• (二) 支持小屏幕移动设备的重要性20-21
• (三) 桌面版浏览器不同视口的需求21-26
• 1.背景图平铺自适应21-22
• 2.中心定位两侧自适应22
• 3.单侧定位中心延展22-23
• 4.瀑布流式设计23-26
• 第三章 如何实现响应式网页设计26-41
• 一、媒体查询：支持不同视口26-32
• (一) 什么是媒体查询26-27
• (二) 为什么响应式设计需要媒体查询27-28
• (三) CSS3媒体查询特性28-30
• (四) 如何在iOS和Android设备上使用媒体查询30
• (五) 为特定视口设定CSS样式30-32
• 二、流式布局（百分比布局）32-35
• (一) 为什么响应式设计需要流式布局33-34
• (二) 将固定布局修改成百分比布局34-35
• (三) 为媒体查询增加灵活性：em替换px35
• 三、用弹性图片解决视口缩放35-41
• (一) 怎样使图片进行工作37
• (二) 图片伴随视口缩放37-38
• (三) 为不同的屏幕尺寸提供不同的图片38-39
• (四) 为特定图片指定特定规则39-41
• 第四章 响应式网页设计用户界面的实践41-53
• 一、响应式网页设计中CSS3的实践41-47
• (一) 增加动态导航的视觉体验41-44
• (二) 网页字体的设计与分析44-46
• (三) CSS3的颜色模式及透明通道的使用46-47
• (四) 为背景增加灵活性47
• 二、响应式设计中的HTML5的实践47-50
• (一) HTML5的语义化47-48
• (二) 可响应的HTML5视频48-50
• 三、让设计超越媒介：响应不同屏幕和视口50-53
• (一) 跨浏览器支持响应式设计50-51
• (二) 让旧版本浏览器支持响应式设计51
• (三) 导航链接转换为下拉菜单51-52
• (四) 响应高分辨率的设备52-53
• 第五章 关于响应式网页的毕业设计53-59
• 一、毕业设计中响应式网页设计的实践53-57
• (一) 网页整体结构设计53-57
• 1.导航区域53-54
• 2.首页部分54
• 3.品牌风格54-55
• 4.设计团队55
• 5.特别推荐55-56
• 6.品牌故事56
• 7.产品类型56-57
• 8.联系我们57
• 9.页脚部分57
• 二、毕业设计作品中存在的不足之处57-59
• 总结59-62
• 一、响应式网页设计未来发展的优势59
• 二、响应式网页设计存在的缺陷59-60
• 三、响应式网页设计的后续研究建议60-62
• 注释62-65
• 参考文献65-68
• 致谢68-69
• 附录A 在读期间所发表的学术论文69

  本文关键词：基于响应式Web设计中用户界面的分析与探究，由笔耕文化传播整理发布。

，

本文编号：291708