行业动态从电影网站设计浅析网页UI设计趋势

发布：2019-03-12 21:12:53 浏览：5132

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

视频运用与无缝画面跳转。

在《侏罗纪世界》和《王牌特工》的网站初始背景中,设计者分别运用电影内片段和场景景深变换,使用户在登入网站时能很快地融入到电影主题中,这种新颖的设计方式已得到多数设计师的青睐。随着Flash应用的衰退,大多数PC网站普遍不加入动态变化,而在UI中加入视频的网站却逐渐增多。在HTML中插入视频,需要插入“video”标签,此标签于HTML5中供给使用,HTML5对多媒体网站支撑主要通过包含元素项来兑现,主要包括Video、Canvas、Audio等元素。其中,Canvas元素拥有十分重要的效用,它好似一张画板,通过该元素自带的API联合JavaScript代码,可以在这个画板上绘制各种图案图像以及动画;而“Video”和“Audio”作为视频、音频特征标记,使视频、音频从此不必绑定在Object或Embed标记中,既提高了网页应用的安全性和稳定性,也在一定程度上提高了用户体验,随着近些年主流浏览器支持HT⁃ML5,使得利用视频的环境更加容易。

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图片方阵,通过跟随浏览器大小的变更,排列从全屏时的四行排列,缩小浏览器视窗后变为两行排列,这样也无需左右调节滑动条进行浏览,而电影剧照的图片清晰度也未发生改变,仍然保持着很好的用户体验。