欢迎来到设计师实训基地-南通科迅教育
咨询电话:0513-81107102
电影网站设计对网页UI设计的影响
2016/10/12
科迅教育
322
南通零基础美工设计培训如何选择
一、视频运用与无缝画面跳转

在《侏罗纪世界》和《王牌特工》的网站初始背景中,设计者分别运用电影内片段和场景景深变换,使用户在登入网站时能很快地融入到电影主题中,这种新颖的设计方式已得到多数设计师的青睐。随着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下方的选项栏。关于扁平化设计,iPhone发布ios7以来就在设计界刮起了追崇之风。扁平化设计是不使用任何额外效果的设计,去掉3D化效果,无多重阴影、斜角、立体浮雕等创建出的凸起或凹陷的效果。扁平化网页元素并不是拒绝一切修饰效果。首先,扁平化元素关注颜色,通常使用色彩明亮鲜艳的色彩。与此同时,扁平化也注重文字,很多扁平化处理只会涵盖很少的文字,为了达到让用户易辨识的使用感受,设计中需要注意每一处文字的长度和字体的应用。

三、SVG的使用和液态布局

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

四、结语

综上所述,本文通过国外电影网站洞悉了一些网页UI设计趋势。值得一提的是,趋势这样简单的概括难以在设计领域长青,前端设计往往要做的就是打破设计的框架,让使用者眼前一亮却恰到好处。了解趋势是重要的,把握这个背景的网页用户的动向也不容忽视,在没有了解用户需求本质的情况下,如果只是为了追求网站的设计,效果未必能够达到预期。优秀的电影网站设计,在大商业环境下不断涌现,跟随这样的设计趋势,不是普通网页UI设计师的必选项,但可以说是一个非常不错的选择。
77
关闭
先学习,后交费申请表
每期5位名额
在线咨询
免费电话
QQ联系
先学习,后交费
TOP
您好,您想咨询哪门课程呢?
关于我们
机构简介
官方资讯
地理位置
联系我们
我要学习
先学后付
申请试听
在线咨询
网站XML地图
0513-81107102
周一至周六     8:30-21:00
微信扫我送教程
手机端访问
南通科迅教育信息咨询有限公司     苏ICP备15009282号     联系地址:江苏省南通市人民中路23-6号新亚大厦二楼、三楼         法律顾问:江苏瑞慈律师事务所     Copyright 2008-