现代智妙手机和平板电脑的应用率日益普及, 桌面版网站阅读的存眷度正处于降低趋向, 但因为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图片方阵, 经由过程追随阅读器年夜小的变革, 分列从全屏时的四行分列, 缩小阅读器视窗后变为两行分列, 如许也无需阁下调节滑动条进行阅读, 而片子剧照的图片清楚度也未产生转变, 仍然坚持着很好的用户体验。