毕业论文

题 目响应式布局在视频App界面设计中的运用

毕 业 论 文

目　录

1. 绪论 6

　　1.1选题背景及意义 6

1.2响应式设计在国内及国外的发展现状 6

1.2.1国内发展现状 6

1.2.2国外发展现状 6

2. 响应式布局的概念和特征 6

2.1响应式布局方式 6

2.1.1 固定布局 6

2.1.2流线布局 7

2.1.7等比缩放 10

2.1.4拓展布局 11

2.1.5分栏布局 13

2.1.6流动布局 14

2.1.7重复布局 15

2.2响应式布局的优缺点 16

2.2.1优点 16

　　2.2.1.1用户体验友好 16

2.2.1.1减少开发成本 17

2.2.2缺点 17

2.3响应式界面的基本规则 17

3.探讨响应式布局在视频软件中呈现的效果 17

3.1视频APP交互用户体验 17

3.1.1用户认知与行为因素 17

3.1.2用户体验要素 17

3.2响应式布局在视频APP中的作用 18

3.3视频软件在各个终端的界面设计探讨 18

3.3.1 智能手机 18

3.3.2 电脑端 18

3.3.3 TV端 18

4.如何更好地布局界面 18

4.1从学习借鉴到改进创新 18

4.2从交互感知到多通道设计 19

5.总结与展望 19

5.1工作总结 19

5.2展望 19

参考文献 19

致谢 20

响应式布局在视频App界面设计中的运用

田今

南京信息工程大学传媒与艺术学院，江苏 南京 20141379004

摘要：移动互联网的日益普及，在我们的日常生活中，移动设备越来越多，生活中最常见的就有智能手机、智能电视、电脑，它们的显示屏都拥有不同的分辨率，如果软件设计者为各种设备和分辨率，开发适应画面尺寸的页面，这样的设计是非常低效的并且对于软件更新是不方便的。若根据以往的设计方式去设计软件，与越来越多的手机终端和终端下的许多模型对应，每个模型构筑一个界面，然后，等到这些终端被更新，为了适应各种终端，所有的界面都要重新编排，还要创建各种不同的分辨率和大小的版本，不仅耗时，而且非常不符合当前形式，虽然某些特定设备用户会十分认可，但是与此同时，大部分不用这些设备的人就会选择放弃。时代在发展，有困扰我们的地方，就一定有解决的方法，Ethan Marcotte在2010年五月份提出的响应式布局就完美地使上述问题不再成为困扰，它从访问设备的环境中提供数据，然后根据访问设备分辨率适当调整图片的像素以及尺寸大小、位置等，这无疑为用户提供了更舒适的视觉体验，也就是说，不管此时此刻用的是什么型号的智能设备，我们所能看到的界面都是最符合当前设备的最佳适配。总而言之响应式布局是指通过特定技术实现能够兼容多个不同的终端，在移动端中，它能使我们设计的元素在任何大小屏幕中能够灵活适配，保证布局和体验的一致性，毫无疑问的，响应式UI设计对于现今碎片化的屏幕是非常重要的，它能使我们在最小资源的情况下完成设计适配。本文根据响应式布局设计进行认识和研究，区分、探讨各响应式的布局模式及优缺点，并根据各不同终端例如智能手机、pad、电脑、智能电视，融合现今视频软件的优缺点，研究适合现今的视频APP的响应式界面。

关键词：视频APP；界面；响应式

Application of response layout in Video App Interface Design

School of Media and Arts,NUIST,Nanjing 20141379004,TianJin

Abstract:The growing popularity of the mobile Internet, in our daily life, more and more mobile devices, the most common in life are smart phones, smart televisions, computers, their displays have different resolutions, If a software designer develops a page that adapts to screen size for a variety of devices and resolutions, such a design is very inefficient and inconvenient for software updates. If you design the software according to the way you used to design it, it corresponds to more and more mobile phone terminals and many models under them, and each model builds an interface, and then, when these terminals are updated, in order to adapt to a variety of terminals, All interfaces. Rearranging, and creating versions of different resolutions and sizes, is not only time consuming, but also very inconsistent with the current form, although some users of certain devices will be quite approachable, but at the same time, Most people who dont use these devices will choose to give up. The times are evolving, and where we are, there must be a solution. The responsive layout that Ethan Marcotte put forward in May 2010 is the perfect way to make this problem no longer a problem, providing data from the environment in which it accesses the device. Then, according to the resolution of the access device, the pixels of the picture are adjusted appropriately, as well as the size, size, position, etc., This undoubtedly provides a more comfortable visual experience for the users, that is, whatever model smart devices are used at the moment, the interface we can see is the best fit for the current device. In a word, the response layout means that a specific technology can be implemented to be compatible with multiple different terminals, in the mobile end, It enables us to design elements flexibly in any size screen to ensure consistency in layout and experience. There is no doubt that response UI design is very important for todays fragmented screens. It enables us to complete design adaptation in the case of minimal resources. This article is based on response layout. Design to understand and research, distinguish, explore the layout of each response mode and advantages and disadvantages, and according to the different terminals such as smart phones, computers, smart TV, fusion of the advantages and disadvantages of todays video software, The response interface suitable for todays video APP is studied.

Key words:Video app;interface;response

1. 绪论

本章将介绍项目的选题背景、意义和目前响应式设计在国内外的发展状况。

1.1选题的背景和意义

通过对UI设计中响应式布局的研究与探讨，联系响应式布局在视频播放App中的应用效果，结合国内外视频播放界面设计、不同的智能设备终端上界面设计应用、不同系统视频播放器的界面设计效果进行简要的个例分析，讨论响应式布局在视频播放APP的原则性和重要性。

响应式布局2010年被提出的一个概念，响应式布局能够兼容多个终端，灵活性较强，近些年各大App涌现网络市场，几乎每一个App在各个不同终端都有着良好的响应式布局效果，但是依然存在有些软件没有更好的将各个终端界面良好布局。本课题以响应式布局在视频播放器中的设计作为切入点，分析不同的播放器App效果的优缺点，结合视频播放器的多样性，研究出能够体现视频播放器独特性的App响应式布局模板，从而使客户拥有更好的用户体验。

1.2响应式设计在国内外发展现状

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

1.2.1国内发展现状

到目前为止，国内较为有代表性的视频软件App有爱奇艺、腾讯视频、优酷、哔哩哔哩、PP视频、暴风影音等，由于国内对于计算机产业和设计产业起步比国外较晚，部分做了各终端的完整界面，部分没有做全面，没有针对更大屏幕的显示器进行调整，只是在样式表开头定义基本样式，然后使用媒体查询从低分辨率到高分辨率来重写样式以覆盖前面定义的样式。给软件带来维护上困难的同时，用户的体验也无法达到预期效果。

1.2.2国外发展现状

当前，国外视频播放软件有YouTube、Dailymotion、Niconico、vimeo等等，在国外视频App中属领军软件，他们的界面同样优秀，时代更迭的很快，移动终端的更新也很快，国外的视频播放App多数已经设定了特殊设备相关的参数，并且做出了相关设备所需要的适合界面，所以界面在不同的设备上所展现出来的形式有所完善，满足各个年龄段人的浏览需求。甚至YouTube已经做出了不同风格的界面，用户可以选择传统风格或者“Material Design”风格，通过这些风格转变让桌面体验更接近移动设备体验，更加突出显示网站内容。

2.响应式布局的概念和特征

根据维基百科及其参考文献，响应式界面能够适应不同的设备，描述响应式界面最著名的一句话就是“Content is like water”，意为“如果将屏幕看作容器，那么内容就像水一样”。

2.1响应式布局方式

常用的布局模式可分为7种：固定布局，流线布局，等比缩放，拓展布局，分栏布局，流动布局，重复布局

剩余内容已隐藏，支付完成后下载完整资料

---

Application of response layout in Video App Interface Design

School of Media and Arts,NUIST,Nanjing 20141379004,TianJin

Abstract:The growing popularity of the mobile Internet, in our daily life, more and more mobile devices, the most common in life are smart phones, smart televisions, computers, their displays have different resolutions, If a software designer develops a page that adapts to screen size for a variety of devices and resolutions, such a design is very inefficient and inconvenient for software updates. If you design the software according to the way you used to design it, it corresponds to more and more mobile phone terminals and many models under them, and each model builds an interface, and then, when these terminals are updated, in order to adapt to a variety of terminals, All interfaces. Rearranging, and creating versions of different resolutions and sizes, is not only time consuming, but also very inconsistent with the current form, although some users of certain devices will be quite approachable, but at the same time, Most people who dont use these devices will choose to give up. The times are evolving, and where we are, there must be a solution. The responsive layout that Ethan Marcotte put forward in May 2010 is the perfect way to make this problem no longer a problem, providing data from the environment in which it accesses the device. Then, according to the resolution of the access device, the pixels of the picture are adjusted appropriately, as well as the size, size, position, etc., This undoubtedly provides a more comfortable visual experience for the users, that is, whatever model smart devices are used at the moment, the interface we can see is the best fit for the current device. In a word, the response layout means that a specific technology can be implemented to be compatible with multiple different terminals, in the mobile end, It enables us to design elements flexibly in any size screen to ensure consistency in layout and experience. There is no doubt that response UI design is very important for todays fragmented screens. It enables us to complete design adaptation in the case of minimal resources. This article is based on response layout. Design to understand and research, distinguish, explore the layout of each response mode and advantages and disadvantages, and according to the different terminals such as smart phones, computers, smart TV, fusion of the advantages and disadvantages of todays video software, The response interface suitable for todays video APP is studied.

Key words:Video app;interface;response

introduction

This chapter introduces the background , meaning and present response of the project .

1.1 background and significance of selected topics

Based on the research and discussion of responsive layout in UI design, the application effect of responsive layout in video playback App is discussed, and the interface design of different intelligent device terminals is combined with the design of video playback interface at home and abroad. The interface design effect of video player in different systems is analyzed briefly, and the principle and importance of response layout in video player APP are discussed.

In response to the concept of the layout in 2010 , responsive layout can be compatible with multiple terminals , the flexibility is strong , and in recent years , the large number of apps emerge in the network market , almost every App has a good response type layout effect in each different terminal , but there are still some software that does not better distribute the interfaces of the various terminals . This topic is based on the design of the response type layout in the video player as the entry point , analyzes the advantages and disadvantages of different player App effects , and studies the App Response Layout template which can reflect the uniqueness of the video player , thus the customer has more Good user experience.

1.2 current situation of response Design at Home and abroad

Response layout is a concept that Ethan Marcotte put forward in May 2010. In short, a website can be compatible with multiple terminals-rather than making a specific version for each terminal.

1.2 . 1 Status of domestic development

Up to now, App, a representative video software in China, includes iqiyi, Tencent Video, Youku, BMO PP Video, Storm Player, etc. Because the domestic computer industry and design industry started later than abroad, Some do the complete interface of the terminals, some are not comprehensive, do not adjust to the larger screen display, but define the basic style at the beginning of the stylesheet. Media queries are then used to rewrite styles from low-resolution to high-resolution to override the previously defined styles. At the same time, the user experience can not achieve the desired results.

1.2.2 current situation of foreign development

At present, the foreign video playing software includes YouTube video broadcast, Niconicovimeo and so on. They are the leading software in foreign video App. Their interface is also excellent, the times change quickly, and the mobile terminal is updated very quickly. Most of the App in foreign countries have set the parameters related to special equipment, and have made the appropriate interface for the relevant equipment, so the interface has been developed in different devices. Meet the browsing needs of people of all ages. Even YouTube has made a different style of interface, the user Traditional or 'Material Design' styles can be chosen to change the desktop experience closer to the mobile device experience and highlight the sites content.

2. The concept and characteristics of response layout

According to Wikipedia and its references, responsive interfaces can be adapted to different devices. The most

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[22205]，资料为PDF文档或Word文档，PDF文档可免费转换为Word