面向多终端的土家音乐文化内容展示适应性布局研究

摘要

随着计算技术、无线通信技术以及软硬件技术的迅速发展，互联网终端设备不断更新。网站的设计从固定宽度演变为适应不同设备的方向。由于设备屏幕分辨率和浏览器兼容性的差异，造成相同网页内容在不同设备上显示不一致，加载速度较慢等问题，不利于网站的长期发展和信息的传播。为了加大土家民族传统音乐文化遗产的数字化保护，改变以往土家音乐“口传心记”的传承方式，让更多人在不同的设备上便捷地了解和学习土家音乐文化，将土家音乐文化内容展示网站设计成为适应于多终端的布局是非常必要且具有现实性的意义。
　　本文采用文献研究法、资料分析与归纳法总结土家音乐文化内容的内涵、特点和网站的适应性布局方式。利用网站的软件工程研究法、实验法、问卷调查法、访谈法等实现了适应多终端的土家音乐文化网站。论文主要包括以下四个方面:
　　(1)网站布局设计方法的概述与总结
　　对网站的设计方法归纳和整理，重点介绍响应式网页设计及断点的内容。
　　(2)断点设计新方法
　　本文提出并验证了断点设置的新方法，即:从设备屏幕分辨率和设计的角度考虑，以用户体验优劣为标准设置断点。实验得出断点数值分别为:1200、992、770、480。按照此断点设计的网站后，采用SUS系统可用性问卷得出用户对网站的满意度为74.27。结果大于60，证明断点设计新方法的有效性。
　　(3)土家音乐文化内容展示网站的多终端适应性布局研究与设计
　　本段主要阐述土家音乐文化内容的特点、独有的风格内涵，网站的需求，网站内容的多终端适应性问题，从而设计具有土家族音乐文化特色的网站。
　　(4)土家音乐文化内容展示网站的实现及测试
　　本部分主要是阐述网站的实现流程、测试布局效果、浏览器兼容性和加载速度。测试结果表明，网站的功能正常使用，测试设备的加载时间平均值为1.083秒。通过访谈法调查用户对网站的满意度为8.52分，10分为最高分值。
　　网站主要采用的技术手段是Bootstrap框架、瀑布流式布局、断点设计。用户可在多款智能手机、平板电脑、台式电脑上欣赏土家音乐文化内容展示网站。在浏览网站的同时，用户可以深刻感受到我国土家族音乐文化的无穷魅力。

目录

声明

摘要

1．1 研究背景及意义

1．2 国内外研究现状

1．2．1 土家音乐文化保护现状分析

1．2．2 网站设计方法研究现状

1．2．3 断点设计研究现状

1．3 研究内容

1．3．1 网站布局设计方法的概述与总结

1．3．2 断点设计新方法的可行性研究

1．3．3 土家音乐文化内容展示网站的多终端适应性布局研究与设计

1．3．4 土家音乐文化内容展示网站的实现及测试

1．4 研究方法

1．5 本文的组织结构

2 网站布局设计方法概述

2．1 网页布局方式

2．1．1 相关概念

2．1．2 布局方式

2．2 网站布局结构

2．2．1 静态布局

2．2．2 流式布局

2．2．3 自适应布局

2．2．4 响应式布局

2．3 本章小结

3 土家音乐文化内容展示网站的断点设计

3．1 土家音乐文化内容展示网站的断点数值设计实验

3．1．1 实验流程介绍

3．1．2 按照常见设备分辨率设置断点

3．1．3 确定断点数值

3．1．4 实验结果’

3．2 土家音乐文化内容展示网站断点满意度调查

3．2．1 网站断点可用性问卷

3．2．2 SUS可用性问卷的信度、效度分析

3．2．3 SUS可用性分析

3．2．4 断点图的绘制

3．3 本章小结

4 土家音乐文化内容展示网站分析及设计

4．1 土家族音乐文化

4．1．2 土家族音乐特点

4．2 土家音乐文化内容展示网站项目需求

4．2．1 用户分析

4．2．2 需求分析

4．2．3 移动优先原则

4．2．4 网页设计原则

4．3 土家音乐文化内容展示网站设计

4．3．1 版式设计

4．3．2 网站内容设计

4．3．3 网站中土家族元素的利用与设计

4．4 网站的多终端元素适配大小设计

4．5 图片排版采用瀑布流式设计方式

4．6 本章小结

5 土家音乐文化内容展示网站实现及测试

5．1 土家音乐文化内容展示网站的设计实现

5．1．1 开发技术

5．1．2 网站设计工具

5．1．3 网站实现效果

5．2 测试土家音乐文化内容展示网站

5．2．1 测试方式

5．2．2 测试工具介绍

5．2．3 测试结果

5．2．3 与自适应方案设计的网站进行效果对比

5．2．4 浏览器兼容性、加载速度优化方案

5．3 用户体验访谈

5．3．1 访谈目的

5．3．2 访谈提纲

5．3．3 访谈结果

5．4 本章小结

6 总结与展望

6．1 论文总结

6．2 不足与展望

参考文献

在校期间发表的论文、科研成果等

致谢