行业动态从电影网页设计浅谈网页UI设计趋向

现代智能手机板电脑的运用率日趋提高, 桌面版网站阅读的存眷度正处于降落趋向, 但因为b2c领域的发展, 桌面版网站在今后的时间里也将成为网络发展的首要策略标的目的。在许多电影的官方网站上, 因为b2c商业化形式的激励, 电影官方网站的设计在内容显现、阅读互通的体式格局高低足了功夫, 促使网页设计师制作出了许多设计优良且让人为之冷艳的网页ui设计, 起到了有用的营销推广作用, 恰是云云, 咱们可以从电影网站的设计中看出些许将来网页ui设计的风向标。
视频运用与无缝画面跳转。
在 《侏罗纪世界》 和 《王牌奸细》 的网站初始背景中, 设计者别离运用电影内片断和场景景深变换, 运用户在登入网站时能很快地融入到电影主题中, 这种别致的设计体式格局已获得大都设计师的喜爱。随着flash应用的阑珊, 大大都pc网站广泛不插手动态变革, 而在ui中插手视频的网站却逐渐增多。在html中插入视频, 需求插入“video”标签, 此标签于html5 中供应运用, html5 对多媒体网站撑持主要经由过程包罗元素项来兑现, 主要包括video、canvas、audio等元素。此中, canvas元素领有非常首要的效用, 它恰似一张画板, 经由过程该元素自带的api联结java script代码, 可以在这个画板上绘制各类图案图象以及动画; 而“video”和“audio”作为视频、音频特色标识表记标帜, 使视频、音频今后没必要绑定在object或embed标识表记标帜中, 既提高了网页应用的安全性和不变性, 也在必然水平上提高了用户体验, 随着近些年主流阅读器支持ht⁃ml5, 使得行使视频的环境愈加容易。
web网站和app程序在页面跳转上是否有接缝这点上略有差别, 随着flash的衰败, html的网站成为主流, 页面跳转运用页面刷新, 变得有趣陈腐。然而, 经由过程pjax让web网页实现了像app那样的无缝跳转, 好像插入jquery同样, pc版网站也能够做到页面间的无缝画面跳转。pjax的运用, 大大晋升了用户体验, 是不少主流网站, 如facebook等都支持的一种阅读体式格局。在电影《饥饿游戏》 (the hunger games) 的官网上, 点击左边栏链接时, 页面不做跳转, 而只是站内页面刷新, 如许的用户体验比起整个页面刷新来讲, 视觉好上不少, 也给用户一种将来科技的代入感。pjax维护了web原有的机关, 在页面跳转时便替换了原定的代码, 让页面连结整洁, 有利于seo (搜索优化) , pjax胜利庖代了flash和已经的ajax。
大型化、低密度、长页面及扁平化浮现
pc网页经常在有限的空间内插手大量单一button元素的设计, 但如今的潮水趋向将ui部件推向了大型化 (big ui) 、低密度 (low density) 和长页面 (long page) , 加上microsoft推出的window10 和apple的ios9 中提倡的扁平化设计, 扁平化设计已经在现行的app ui中逐渐提高。《侏罗纪世界》的网页上, 咱们看到设计师很明明地将上述元素运用到位, 右边栏的button大型化, 仿照window8 和window10 中的“起头”界面栏。点击网页下方六边形的button可以推出长页面, 添加了用户互动元素, 总体网页规划采用低密度形式, 从运用者角度更易阅读、了解, 削减了网页内容的指向性毛病, 也让网页可以更晴天时用触摸屏幕进行阅读, 使部分移动设备得以全方位体验网页。这些年来, 许多新型笔记本电脑上装置了触屏, 而触摸屏的运用出自手指点击, 时常不克不及进行精准操纵, 因而用户界面增大, 元素和button之间要留出充实的空间, 页面中浮现元素变得明晰, 便当页面滚动阅读。
作为大型化、低密度、长页面这三大项要素的适宜规划, 趋向为一栏规划。一栏规划对付运用者, 不会再有不需求的杂项入眼, 使首要的内容聚集在一块儿, 页面上的文字更易被阅读, 图片被展现得更大。在本年日本热点电影《百元之恋》的网页上, 就采用了典型的一栏设计, 在banner部分贴出大幅的电影海报, 信息栏则扼腹地展现电影近期动态和文字新闻, 去掉了侧边栏导航条, 让网页的层级获得低落, 削减了选项菜单, 只留下banner下方的选项栏。
关于扁平化设计, i phone发布ios7以来就在设计界刮起了追崇之风。扁平化设计是不运用任何分外成效的设计, 去掉3d化成效, 无多重暗影、斜角、立体浮雕等创立出的凸起或凹陷的成效。扁平化网页元素其实不是回绝所有修饰成效。起首, 扁平化元素存眷颜色, 常规运用色采豁亮娇艳的色采。与此同时, 扁平化也注重文字, 不少扁平化处置只会涵盖很少的文字, 为了到达让用户易辨识的运用感触感染, 设计中需求注重每回处文字的长度和字体的应用。
svg的运用和液态规划
svg (可缩放矢量图形) 格局可以算上今朝最为热捧的图象文件格局, 与其余格局比拟, svg不会像jpeg、gif和png依存于尺寸和辨别率, 无论环境变革, 无论扩充减小, 都可能正常输出显示。图片尺寸格局相对于更小, 手艺上可以制作成动画, 设计出高辨别率的web图形网页, 图片格局适合在移动端和多种设备下阅览。现今设备的多样化, 画面的辨别率泛起了完全的改动。之前, 宽度契合960px~980px就能够解决问题, 如今对付辨别率多用化, 最契合页面宽度的规划当属液态规划。设计元素和图片不是用像夙来界说, 而是运用百分比, 就比如将液体倒入容器中, 当容器的形态产生变革时, 液态的形态也将随着产生响应的改动, 因而无论甚么辨别率的网页, 都可能被规划成领有必然均衡感的页面, 如许也解决了顺应小型或大型屏幕设备时的缺陷了。《仿照游戏》 的图片阅读页面就很好地做到了二者连系, 看似分列差别的矩形svg图片方阵, 经由过程追随阅读器大小的变动, 分列从全屏时的四行分列, 缩小阅读器视窗后变为两行分列, 如许也无需左右调治滑动条进行阅读, 而电影剧照的图片明晰度也未产生改动, 依然连结着很好的用户体验。