010-51265006

PC网页的UI设计趋势(下)

时间:2016-07-01

7. 回归立体表现

MicrosoftWindows8AppleiOS7中所提倡扁平化设计,对以前占有支配地位,装饰过多的拟物化有很强的冲击。扁平化在APP UI的世界瞬间被普及了,这股潮流也波及到PC网站。

另一方面,扁平化设计的问题也表现了出来。扁平化认为设计侧面会带来是很大的累赘。特别是页面元素很多的网站,不用表现立体,因此导致了点击元素与非点击元素之间很难区别,重要的信息和关联性之间也很难区分。扁平化设计表面上更简洁和亲切,与之相反却是一种难度较高的设计。

因为UI是没有流行的这一说法,说是符合流行的扁平化设计或是拟物化设计这种判断都是错误的。所以,重新考虑制作网页UI的目的时,扁平设计的制约性很大,并且很难考虑全面,再度回归立体表现的潮流应该是很妥当的。

8. 滚动和联动的机关

网页变长在滚动的行为中,可以多在滚动时的反响上下功夫。

使用多年前就流行的视觉滚动差效果来表现,这也算一个流行。不过现在的视觉差花费的制作成本正在减少,有时是菜单跟随滚动、有时是某个位置弹出窗口的展开、有时是淡入的文字,像这样少量的机关可以让网站特别显眼。

但是动态UI是人类眼睛对运动物体本能反应的需求。因此,没有计划且过剩的动态,会让眼睛得不到休息,让人感觉到不稳定,原本的信息也没有被记住。不能不计后果的使用动画,在个别的地方使用动画可以得到不错的效果,最小限度的使用才是上策吧!

9. 无缝的画面跳转和过渡

网站和app在页面跳转上是否有接缝这一点上略有不同。随着Flash的没落,HTML的网站再次成为主流。页面的跳转就是页面刷新,变成常识。

然而,通过Pjax实现了像APP那样的页面跳转,就像插入JQuery一样,即使是PC网站也可以作到无缝的页面跳转。

Pjax维持了网站的结构,在页面跳转时只是替换了特定的代码。总之,想让页面整洁的存在,而去使用Flash和曾经的Ajax的网站都会有避免不了“不利于SEO”的缺点。

最近随着技术的进一步发展,页面跳转时的过渡和多样性会变得更加丰富。

现在这样的技术作为设计情感的一个侧面得以强化。网站构建时也有效果展现不合适的情况,关于使用的效果有必要充分的考虑一下。

10.  网页字体的活用

要是使用网页字体的话,在OS上可能会显示没有字体。必须要把文字制作成图片格式。

在国外Google等公司免费提供了高品质的英文网页字体。英文因为只有26X2种(大写、小写)+符号,所以字体比较丰富,可选项多,被迅速普及。

但是,网页字体确实是当今PC网站的趋势。

另外,图像失真的也很多,特别是Windows环境下文字轮廓很难看也是一个大问题。与英文有所不同,有文字多,字间距规范化难,文字末尾处理等等问题,所以必须得放弃使用。也就是说,因为使用了外观受限的网页字体而使美观度降低所引起的矛盾,就是现在日文网页字体的现状。

11. SVG的使用

在网页上的主流图片格式很长一段时间都是JPEGGIFPNG。未来将增加SVG格式的图片。

SVG最大的特征是矢量图。与其他格式相比,不会依存于尺寸和分辨率。无论什么样的使用环境,无论如何的扩大,都能正常显示。体积也小,有做成动画的可能,图片格式适合在移动端和多种设备下阅览。

在使用SVG格式之后支持的浏览器会变少。Internet Explore8以下的浏览器,不能支持。因此针对IE8以下的网站需要准备替代手段。另一方面,除了IE8以下的浏览器,当前主流浏览器可以多使用SVG格式。

作为图片的特点,SVG适合色彩少且简洁的图形。另一方面,像照片那样写实的表现,SVG是不适合的。因此,不可以全部都SVG化,根据图片的特点JPEGPNG要一起并用。

12. 视频的活用

Flash进入了成熟期,是积极尝试UI与影像融合的时候了。伴随着Flash的衰退,PC网站变得普遍没有动态,在UI中加入视频的网站逐渐增多。

为了在HTML中插入视频,必须使用<video>标签。这个标签是HTML5之后才提供的,对于不支持HTML5的浏览器是不能用的。但是,近些年由于一些提前支持HTML5的主流浏览器,使得利用视频的环境更加容易,这也是加速视频活用的一个原因。

另外和以前相比,视频的制作更加容易也不能忘记。曾经的影像制作必须花费高额的费用,出现了承包影像制作的公司。如果不是对品质有要求的话,即使是个人也可以用手机等拍摄简单的视频,这也是一个加速视频活用的原因吧。

与智能手机不同,PC网站的网络速度基本不会有神经质的状况。要是使用视频会得到更好的诉求效果。 

总结

综上所述,介绍了一些设计趋势。值得注意的是,“趋势如此”这样的简单理由在设计时是不会被采纳的。是否是体现了UI的趋势,并且在网站上去遵循这些趋势也没有必要的。

了解趋势是最重要的事,把握这个背景的外部要因和用户动向的变化。在没有理解本质的情况下,如果只是为了追求网站的设计趋势,效果也全然没有。趋势虽然能了解,却也不是必使用,对于设计师来说是一个可选择项。

Copyright©2007 - 2017 webthink.cc 版权所有 网博思创网络技术(北京)有限公司 京ICP备07017583号 百度统计