电影网站设计对网页UI设计的影响范文

本站小编为你精心准备了电影网站设计对网页UI设计的影响参考范文，愿这些范文能点燃您思维的火花，激发您的写作灵感。欢迎深入阅读并收藏。

【摘要】

现代智能手机和平板电脑的使用率日益普及，桌面版网站浏览的关注度正处于下降趋势，但由于B2C领域的发展，桌面版网站在今后的时间里也将成为网络发展的重要战略方向。在许多电影的官方网站上，由于B2C商业化模式的激励，电影官方网站的设计在内容呈现、浏览互通的方式上下足了功夫，促使网站设计师制作出了许多设计优秀且让人为之惊艳的网页ui设计，起到了有效的营销推广作用，正是如此，我们可以从电影网站的设计中看出些许未来网页UI设计的风向标。本文将从电影网站的设计中浅析未来网页UI设计的部分趋势及改变。

【关键词】

网页UI；设计趋势；电影网站

一、视频运用与无缝画面跳转

在《侏罗纪世界》和《王牌特工》的网站初始背景中，设计者分别运用电影内片段和场景景深变换，使用户在登入网站时能很快地融入到电影主题中，这种新颖的设计方式已得到多数设计师的青睐。随着Flash应用的衰退，大多数PC网站普遍不加入动态变化，而在UI中加入视频的网站却逐渐增多。在HTML中插入视频，需要插入“video”标签，此标签于HTML5中供给使用，HTML5对多媒体网站支撑主要通过包含元素项来兑现，主要包括Video、Canvas、Audio等元素。其中，Canvas元素拥有十分重要的效用，它好似一张画板，通过该元素自带的API联合JavaScript代码，可以在这个画板上绘制各种图案图像以及动画；而“Video”和“Audio”作为视频、音频特征标记，使视频、音频从此不必绑定在Object或Embed标记中,既提高了网页应用的安全性和稳定性，也在一定程度上提高了用户体验，随着近些年主流浏览器支持HTML5，使得利用视频的环境更加容易。Web网站和APP程序在页面跳转上是否有接缝这点上略有不同，随着Flash的没落，HTML的网站成为主流，页面跳转使用页面刷新，变得乏味陈旧。然而，通过Pjax让web网页实现了像APP那样的无缝跳转，如同插入JQuery一样，PC版网站也可以做到页面间的无缝画面跳转。Pjax的使用，大大提升了用户体验，是很多主流网站，如facebook等都支持的一种浏览方式。在电影《饥饿游戏》（TheHungerGames）的官网上，点击左侧栏链接时，页面不做跳转，而只是站内页面刷新，这样的用户体验比起整个页面刷新来说，视觉好上很多，也给用户一种未来科技的代入感。Pjax维护了web原本的构造，在页面跳转时便替换了原定的代码，让页面保持整洁，有利于SEO（搜索引擎优化），Pjax成功取代了Flash和曾经的Ajax。

二、大型化、低密度、长页面及扁平化表现

PC网页常常在有限的空间内加入大量单一button元素的设计，但如今的潮流趋势将UI部件推向了大型化（BigUI）、低密度（LowDensity）和长页面（LongPage），加之Microsoft推出的Window10和Apple的ios9中倡导的扁平化设计，扁平化设计已经在现行的APPUI中逐渐普及。《侏罗纪世界》的网页上，我们看到设计师很明显地将上述元素运用到位，右侧栏的button大型化，模仿window8和window10中的“开始”界面栏。点击网页下方六边形的button可以推出长页面，增加了用户互动元素，整体网页布局采用低密度形式，从使用者角度更容易浏览、理解，减少了网页内容的指向性错误，也让网页可以更好地利用触摸屏幕进行浏览，使部分移动设备得以全方位体验网页。这些年来，许多新型笔记本电脑上安装了触屏,而触摸屏的使用出自手指点击，时常不能进行精准操作，因此用户界面增大，元素和button之间要留出充分的空间，页面中表现元素变得清晰，方便页面滚动浏览。作为大型化、低密度、长页面这三大项要素的合适布局，趋势为一栏布局。一栏布局对于使用者，不会再有不需要的杂项入眼，使重要的内容汇集在一起，页面上的文字更容易被阅读，图片被展示得更大。在今年日本热门电影《百元之恋》的网页上，就采用了典型的一栏设计，在banner部分贴出大幅的电影海报，信息栏则简要地展示电影近期动态和文字新闻，去掉了侧边栏导航条，让网页的层级得到降低，减少了选项菜单，只留下banner下方的选项栏。关于扁平化设计，iPhoneios7以来就在设计界刮起了追崇之风。扁平化设计是不使用任何额外效果的设计，去掉3D化效果，无多重阴影、斜角、立体浮雕等创建出的凸起或凹陷的效果。扁平化网页元素并不是拒绝一切修饰效果。首先，扁平化元素关注颜色，通常使用色彩明亮鲜艳的色彩。与此同时，扁平化也注重文字，很多扁平化处理只会涵盖很少的文字，为了达到让用户易辨识的使用感受，设计中需要注意每一处文字的长度和字体的应用。

三、SVG的使用和液态布局

SVG(可缩放矢量图形)格式可以算上目前最为热捧的图像文件格式，与其他格式相比，SVG不会像JPEG、GIF和PNG依存于尺寸和分辨率，无论环境变化，无论扩大减小，都能够正常输出显示。图片尺寸格式相对更小，技术上可以制作成动画，设计出高分辨率的Web图形网页，图片格式适合在移动端和多种设备下阅览。当今设备的多样化，画面的分辨率出现了彻底的改变。以前，宽度符合960px~980px就可以解决问题，如今对于分辨率多用化，最符合页面宽度的布局当属液态布局。设计元素和图片不是用像素来定义，而是使用百分比，就好比将液体倒入容器中，当容器的形态发生变化时，液态的形态也将跟着发生相应的改变，因此无论什么分辨率的网页，都能够被布局成拥有一定平衡感的页面，这样也解决了适应小型或大型屏幕设备时的缺点了。《模仿游戏》的图片浏览页面就很好地做到了两者结合，看似排列不同的矩形SVG图片方阵，通过跟随浏览器大小的变更，排列从全屏时的四行排列，缩小浏览器视窗后变为两行排列，这样也无需左右调节滑动条进行浏览，而电影剧照的图片清晰度也未发生改变，仍然保持着很好的用户体验。

四、结语

综上所述，本文通过国外电影网站洞悉了一些网页UI设计趋势。值得一提的是，趋势这样简单的概括难以在设计领域长青，前端设计往往要做的就是打破设计的框架，让使用者眼前一亮却恰到好处。了解趋势是重要的，把握这个背景的网页用户的动向也不容忽视，在没有了解用户需求本质的情况下，如果只是为了追求网站的设计，效果未必能够达到预期。优秀的电影网站设计，在大商业环境下不断涌现，跟随这样的设计趋势，不是普通网页UI设计师的必选项，但可以说是一个非常不错的选择。

参考文献：

[1]徐镇辉.基于HTML5的视频网站设计与Web前端EPG系统实现[J].漳州职业技术学院学报,2013（2）.

[2]Sogilogwebsite.“PCサイトのUIデザインにおける12のトレンド”[EB/OL].[2015-02-17]baigie.me/sogitani/2015/02/pc-site-trend-2015/

[3]赵大羽.品味移动设计：iOS、Android、WindowsPhone用户体验设计最佳实践[J].中国科技信息，2014（1）：195-196.[

作者：李智 单位：上海理工大学公共实验中心