论文题目：响应式技术在网页设计中的应用 ——以天津美术馆为例
摘要：随着互联网技术的成熟发展,多样化的智能设备层出不穷,导致在设备的屏幕尺寸和分辨率上没有一个清晰的标准。5G网络的普及,大众使用移动设备来访问网页成为常态化。传统网页的固定布局设计在移动设备上存在显示页面不完整,用户浏览信息时需要放大缩小画面,导致信息传达出现问题。传统网页的设计模式已经不适合现在多样化的终端设备。在这之前,网页设计师和开发师通过为每一个不同屏幕尺寸,不同分辨率的设备分别设计适应不同终端设备的设计方案,这种办法不仅工作量大,而且随着各式各样设备的出现,网页设计师与开发师已经无法应对这个难题。响应式网页技术的出现,为网页设计提供了新的设计理念,打开了新的设计大门,打破原有的设计思维模式,顺应了互联网的发展。响应式技术的出现,解决了用户跨终端浏览网页的问题,同时为网页设计师和开发师简化了设计流程,提高了工作效率。本课题以响应式网页设计的相关技术要素为研究的出发点,以天津美术馆网站作为设计实施对象,通过对相关文献的搜集与整理,以及对国内外响应式美术馆网站案例的分析,作为毕业设计实践与论文的理论基础。课题主要通过对响应式网页设计的研究,分析响应式网页设计的重要性以及存在的必要性,了解响应式网页常用的布局特点。根据当前实现响应式网页的常用技术要素,比如CSS3媒体查询,HTML5和当下被广泛使用的Bootstrap框架等技术要素来阐述实现响应式网页的技术原理。将响应式网页设计与最新的响应式技术要素结合在一起,总结出适合美术馆这类型网站的响应式网页界面设计原则。将设计原则应用到自身毕业设计实践中,验证本课题的实践价值,通过对天津美术馆网站实现响应式网站设计,一方面做到提升网站视觉形象,另一方面使天津美术馆响应式网页更具灵活性。
关键词：响应式;网页设计;美术馆
学科专业：艺术设计
中文摘要
Abstract
第1章 绪论
1.1 研究背景
1.2 国内外研究现状
1.2.1 国外研究现状
1.2.2 国内研究现状
1.3 研究目的和意义
1.3.1 研究目的
1.3.2 研究意义
1.4 研究思路和方法
1.4.1 研究思路
1.4.2 研究方法
1.5 研究内容与论文框架
1.6 研究的创新点
第2章 响应式网页设计概述
2.1 响应式网页设计概念
2.2 响应式网页设计的必要性
2.3 响应式网页设计的布局特点
2.3.1 单页单栏布局
2.3.2 背景大图,多列布局
2.3.3 栅格布局
2.3.4 瀑布流式布局
2.3.5 经典F式布局
2.4 响应式网页设计的优势与劣势
2.4.1 响应式网页设计的优势
2.4.2 响应式网页设计的劣势
第3章 实现响应式网页设计的技术要素
3.1 基本原理
3.1.1 媒体查询
3.1.2 弹性布局
3.1.3 弹性图片
3.2 Bootstrap框架
3.2.1 Bootstrap简介
3.2.2 浏览器的兼容性
3.2.3 响应式导航条
3.2.4 栅格系统
第4章 美术馆类响应式网页界面设计原则
4.1 网页内容设计原则
4.1.1 内容优先
4.1.2 结构简洁
4.2 网页视觉设计原则
4.2.1 页面尺寸
4.2.2 文字原则
4.2.3 配色原则
4.2.4 图形图像
4.2.5 留白设计
4.3 布局设计原则
4.3.1 布局整体设计原则
4.3.2 删繁就简原则
4.3.3 灵活布局原则
4.4 网页主页设计原则
4.5 用户体验设计原则
4.6 网页交互设计原则
第5章 天津美术馆网站再设计实践
5.1 天津美术馆官网现状分析
5.2 用户调研
5.3 网站信息架构
5.3.1 再设计框架
5.4 原型图绘制
5.5 页面尺寸
5.6 网站视觉设计
5.6.1 设计风格
5.6.2 字体应用
5.6.3 色彩应用
5.6.4 图标设计
5.6.5 布局设计
5.7 网站具体内容设计
5.7.1 导航栏设计
5.7.2 首页设计
5.7.3 二级页面banner设计
5.7.4 新闻资讯
5.7.5 展览陈列
5.7.6 学术研究
5.7.7 公共教育
5.7.8 政务公开
5.7.9 交流服务、注册登录
5.8 三级页面设计
5.9 网站交互设计
第六章 总结
6.1 主要工作
6.2 不足与展望
参考文献
致谢
附录一 美术馆网页需求分析调查问卷
附录二 天津美术馆其余部分页面展示