网页设计未来趋势：高清设计

　　网页设计中最热门的技巧之一，就是高清背景图，这得益于高清显示屏的普及。但面对复杂的商标时，就不好处理了。

　　图片

　　超大图、焦点图、全屏图。

　　以上几个词，最适合用来描述现代网页设计的背景图片。设计师们对高清设计不仅停留在思考层面，他们将其发挥到极致，用背景图占据了整个画面。

　　这种设计技巧很有效，因为用户天生就是视觉动物。

　　使用高清图片的5条建议：

　　1、使主画面成为视觉焦点——虽然图片是作为背景，不代表它就能占据舞台中央。优秀的照片能与用户建立情感连接，学习图片的精妙之处，看它如何影响设计的视觉层次。

　　2、考虑使用多图——使用我们在网页UI模式中提到的幻灯片或卡片风格的结构，来应对内容丰富或相片集类型的设计。

　　3、在图片上添加效果——模糊或色彩叠加，能够增加或是改变一张图片的调性(例如全用红色调会更加积极)。这在高清图片上很管用，因为下层的图片画质够高，细节仍清晰可辨。

　　4、考虑图片在不同屏幕尺寸下的效果——安排各种尺寸下的背景图，使之能适应任何断点，不会露出纯色块(那其实是真正的背景)。

　　5、打破局限——照片背景不一定要遵循标准的1:1.5相机比例，也可以使用从各自背景中裁剪出来的图片。

　　视频

　　高清视频背景可能是今年最盛行的技巧之一——尤其是有着疯狂感的大量快镜头动作。从AirBnB这样的巨人，到几乎所有类型的小网站，视频迅速成为了网页设计中重要的一道风景线。

　　最初一批运用背景视频的网站，正是电影网站。例如《少年派的奇幻漂流》官网，用了一段电影预告作为背景(而且还是可下载的格式)。

　　光有一段视频可不够。所有拍摄优秀电影的技巧——取景、变焦、平移——在网页视频中同样重要，即便是用作背景。

　　同样，在设计中运用高清视频也有5条建议：

　　1、注意视频长度——背景视频应当在几秒钟内呈现一段视觉故事，让用户感受到氛围。最佳循环间隔是10到30秒。

　　2、关闭声音——对于多数用户而言，声音仍是一种很极端的自动播放元素。如果想要使用声音，也要默认设成静音。

　　3、关注加载时间——虽然高清视频很有意思，但不能因此拖慢网站加载速度。如果用户在加载过程中就退出了，视频再精彩都没有用。

　　4、考虑备选方案——有些设备无法渲染高清视频。在Goolge统计中查看访客最常用的设备，根据情况进行设计。通常，你会选取一张静态图片作为备选方案。

　　5、坚持高质量的视频——不论是否自己拍摄，为了清晰出众的画质，最好雇人来做这个事情，或者使用版权视频。不仅仅因为它要用在高清的环境中，也因为需要相当好的画质。就像照片一样，如果超过原片分辨率使用，视频就毁了。

　　网页设计，尤其是使用背景视频的网页，都在营造一种电影般的体验。网站中的高清视频，创造了一种完整的多媒体体验，在运动的背景之上层层传递信息。

　　动画

　　高清背景动画存在于固定图片的设计中，因为这些动画往往同时包含固定与运动元素。

　　它与加载动画同样盛行，数十年来设计原则几乎没有改变。唯一改变的是高清显示屏能呈现的画质水平。

　　成功的高清动画，关键在于时间控制。动画应当有着流畅无痕的效果。所有的循环动画都要首尾相接。

　　《2015与2016的网页设计趋势》中描述过，我们建议牢记以下5条原则：

　　1、坚持简单的动画——太复杂的故事与动作可能会加重认知负担，如果能实现完美的基本动画，就不要制作复杂的效果。

　　2、使用亮色调来关联界面——例如，可以从简单的鼠标悬停效果入手，改变链接颜色。考虑选用配色中最亮的颜色作为鼠标悬停色，让人注意到这个动画效果。悬停时放大文字也是一种视觉线索，能够起到额外的强调作用。这些简单的手段有助于突显特定的用户操作。

　　3、利用高清屏幕的特性——为了最佳的视觉效果，使用可缩放的图片格式，例如矢量图。

　　4、用视频的方法制作动画——同样的精妙之处也适用于动画。应当避免不和谐的运动和物体，例如声音，那会令用户感到厌烦。

　　5、为合适的观众制作动画——虽然许多设计师常把动画和插画合为一体，但这未必适用于每个网站。

　　同样，要注意细节。根据网站与用户的不同，动画可以是卡通式、视频风格，或者仅仅是插画环境中的一系列运动感。动画可以通过用户操作触发——点按、滚动或是鼠标点击——或者就简单地自动播放。

　　层层构筑：融合所有内容

　　高清背景只有作为某一层信息时才有效果。精彩的图片、视频或动画独木难支——你得考虑它与屏幕上其他内容的关系。