上期回顾 http://www.zcool.com.cn/article/ZMTQ3NTI4.html 1.Big UI / low Density / Long Page的潮流 2.一栏布局 3.中对齐 4.固定的顶部和顶部的超薄化 5.固定的左边导航 6.液态布局
7. 回归立体表现 Microsoft的Windows8和Apple的iOS7中所提倡扁平化设计,对以前占有支配地位,装饰过多的拟物化有很强的冲击。扁平化在APP UI的世界瞬间被普及了,这股潮流也波及到PC网站,在2013年之后更新网站中有很多使用了扁平化设计。 另一方面,扁平化设计的问题也表现了出来。扁平化认为设计侧面会带来是很大的累赘。特别是页面元素很多的网站,不用表现立体,因此导致了点击元素与非点击元素之间很难区别,重要的信息和关联性之间也很难区分。扁平化设计表面上更简洁和亲切,与之相反却是一种难度较高的设计。 对扁平化的反思,最近立体的表现形式开始再次被拿出使用。Google所提倡的material设计可以说就是一个典型。material设计是指用图层和影子等来表现现实世界中的三次元,所说的UI会再次回归立体的消息是可以理解的。 因为UI是没有流行的这一说法,说是符合流行的扁平化设计或是拟物化设计这种判断都是错误的。所以,重新考虑制作网页UI的目的时,扁平设计的制约性很大,并且很难考虑全面,再度回归立体表现的潮流应该是很妥当的。 8. 滚动和联动的机关 网页变长在滚动的行为中,可以多在滚动时的反响上下功夫。 使用多年前就流行的视觉滚动差效果来表现,这也算一个流行。不过现在的视觉差花费的制作成本正在减少,有时是菜单跟随滚动、有时是某个位置弹出窗口的展开、有时是淡入的文字,像这样少量的机关可以让网站特别显眼。 这里是Javas cript库的普及,因为Canvsa和css动画的广泛使用,让UI动起来变得相对简单,追求动态UI的心情也应该被考虑进去。 但是动态UI是人类眼睛对运动物体本能反应的需求。因此,没有计划且过剩的动态,会让眼睛得不到休息,让人感觉到不稳定,原本的信息也没有被记住。不能不计后果的使用动画,在个别的地方使用动画可以得到不错的效果,最小限度的使用才是上策吧! 9. 无缝的画面跳转和过渡 网站和app在页面跳转上是否有接缝这一点上略有不同。随着Flash的没落,HTML的网站再次成为主流。页面的跳转就是页面刷新,变成常识。 然而,通过Pjax实现了像APP那样的页面跳转,就像插入JQuery一样,即使是PC网站也可以作到无缝的页面跳转。 Pjax维持了网站的结构,在页面跳转时只是替换了特定的代码。总之,想让页面整洁的存在,而去使用Flash和曾经的Ajax的网站都会有避免不了“不利于SEO”的缺点。 最近随着技术的进一步发展,页面跳转时的过渡和多样性会变得更加丰富。 现在这样的技术作为设计情感的一个侧面得以强化。网站构建时也有效果展现不合适的情况,关于使用的效果有必要充分的考虑一下。 10. 网页字体的活用 要是使用网页字体的话,在OS上可能会显示没有字体。必须要把文字制作成图片格式。 在国外Google等公司免费提供了高品质的英文网页字体。英文因为只有26X2种(大写、小写)+符号,所以字体比较丰富,可选项多,被迅速普及。 日本国内受此影响,也能在网站上看到一些日文的网页字体。 但是,网页字体确实是当今PC网站的趋势。日语网页字体没有像英文那样很容易被普及。 日文与英文的不同,必须要上万的文字字符。为此,必须要构建适合文字伸缩的服务器,根据这个,即能看到一瞬间的显示延时,也能看到怪异的情况(译者注:本人没开发过字库对相关知识不太了解,这句没太看懂,只能直译,还请见谅!)。 另外,图像失真的也很多,特别是Windows环境下文字轮廓很难看也是一个大问题。与英文有所不同,有文字多,字间距规范化难,文字末尾处理等等问题,所以必须得放弃使用。也就是说,因为使用了外观受限的网页字体而使美观度降低所引起的矛盾,就是现在日文网页字体的现状。 尽管认为网页字体是今后的潮流,日文受到的制约和缺点也有很多,可以说普及是一个很大的课题。 11. SVG的使用 在网页上的主流图片格式很长一段时间都是JPEG、GIF和PNG。未来将增加SVG格式的图片。 SVG最大的特征是矢量图。与其他格式相比,不会依存于尺寸和分辨率。无论什么样的使用环境,无论如何的扩大,都能正常显示。体积也小,有做成动画的可能,图片格式适合在移动端和多种设备下阅览。 在使用SVG格式之后支持的浏览器会变少。Internet Explore8以下的浏览器,不能支持。因此针对IE8以下的网站需要准备替代手段。另一方面,除了IE8以下的浏览器,当前主流浏览器可以多使用SVG格式。 作为图片的特点,SVG适合色彩少且简洁的图形。另一方面,像照片那样写实的表现,SVG是不适合的。因此,不可以全部都SVG化,根据图片的特点JPEG和PNG要一起并用。 12. 视频的活用 Flash进入了成熟期,是积极尝试UI与影像融合的时候了。伴随着Flash的衰退,PC网站变得普遍没有动态,在UI中加入视频的网站逐渐增多。 为了在HTML中插入视频,必须使用<video>标签。这个标签是HTML5之后才提供的,对于不支持HTML5的浏览器是不能用的。但是,近些年由于一些提前支持HTML5的主流浏览器,使得利用视频的环境更加容易,这也是加速视频活用的一个原因。 另外和以前相比,视频的制作更加容易也不能忘记。曾经的影像制作必须花费高额的费用,出现了承包影像制作的公司。如果不是对品质有要求的话,即使是个人也可以用手机等拍摄简单的视频,这也是一个加速视频活用的原因吧。 与智能手机不同,PC网站的网络速度基本不会有神经质的状况。要是使用视频会得到更好的诉求效果。 总结 综上所述,介绍了一些设计趋势。值得注意的是,“趋势如此”这样的简单理由在设计时是不会被采纳的。是否是体现了UI的趋势,并且在网站上去遵循这些趋势也没有必要的。 了解趋势是最重要的事,把握这个背景的外部要因和用户动向的变化。在没有理解本质的情况下,如果只是为了追求网站的设计趋势,效果也全然没有。 趋势虽然能了解,却也不是必使用,对于设计师来说是一个可选择项。 |
|