关于网页高清设计你不得不知一些事
作者：管理员 来源：本站 发表时间：2016/4/27 编辑：广州网页设计
如果你曾仔细观察过当今的网页设计，你会发现有一部分网站的画质已经相当惊艳了。从图片、背景到界面元素，无一不是高清画质，它们几乎是为高分辨率甚至视网膜屏幕的笔记本精心定制的网站，当然，这些网站对于网速的要求自然也更高一些，而与此同时，这样的网站在任何设备上浏览自然也就基本不存在模糊这回事了。
到底什么是高清设计？
聊及高清或者HD的时候，我们提到最多的还是Retina屏幕。苹果通过自家产品制造出来的流行词汇目前已经成为了高清屏幕的代名词，要理解它，还需要了解一些和设备相关的特定技术词汇。
对于这个概念，Designmodo 的 Paula Borowska 在撰文时的提法就比较易于理解，他将相关的概念都进行了解释：
·像素（Pixel）是最小的显示用的物理单元。
·像素密度指的是在单位面积内所能容纳的像素数量。
·分辨率，指的是屏幕整个视野内横向或者纵向上像素的数量。
·ppi，也就是每英寸内像素数（Pixels per inch），指的是每英寸内所拥有的像素数量，也是像素密度的单位。而计算屏幕ppi的时候，常常使用屏幕的对角线长度用来计算。
·DPI 指的是显示分辨率，只有当每英寸像素数量超过200才能称得上是高DPI。
今天你所能买到的手机、平板和相当一部分电脑大都是高清分辨率的屏幕，它们能够很好地显示真正高清的网页设计作品。不过话又说回来，即使你所使用的屏幕并不是高清屏幕，显示高清的网页设计也是没有影响的。
说道高解析度，你可能会最先想到高素质的图片。在视网膜屏幕大行其道的今天，宽度600像素，72ppi 的图片可以说已经过时了。
所以，要做好高清设计，图片必须清晰锐利。当我们按照之前的标准来保存图片，在今天的高清屏幕上难免会出现模糊。不过这样的图片在加载速度上比起高清的图片更有优势，高素质的图片更加占用带宽，也需要更长的时间来下载显示。所以，尽量上传和所需显示规格相近的图片。
不过如果你担心加载时间过长，不妨使用模糊的背景图，这样一来，数据量更少，读取速度更快，同时还能兼顾到其他元素的高清显示效果。
视频
2016年的设计趋势当中，视频就占有一席之地。如果你曾留意过，会发现如今的优秀网页设计当中，以视频为代表的动态元素仿佛无处不在。和图片一样，高清设计对于视频的素质要求同样很高。
对于绝大多数的设计师和网中而言，一个短小精悍可循环播放的高清视频是个合理的选择，这样可以避免出现空档。当然，还有人会选择更长一些的视频，并使用加载动画来“缩短时间”。不过一般而言，高品质的视频需要高素质的录音、压缩和保存技术。
所以，如果你要在网站中用好视频，那么一定要精打细算。以首页展示的全屏视频为例，所用的视频最好是水平方向，为了适配目前常见的屏幕比例，使用16:9 的视频来兼容宽屏，或者4:3的来填充宽屏。
当然，视频的使用还有一些特别的技巧，“静止视频”就是其中之一。在拍摄视频的时候，让场景中绝大多数的元素保持静止，仅有少量甚至只有某一个元素缓慢地运动，这样出来的视频效果，极富戏剧性，带来的用户体验也相当不错。
插画和背景
插画和背景同样是高清设计中的一部分。请务必记住，在高清的图片素材中，每一个细节、每一个元素都清晰可见，所以需要确保其中的每一个元素都有助于整体美感的提升。
所以，当我们谈及插画和背景的时候，细节就显得相当重要了。好不夸张地说，在高清设计中，插画和背景的使用需要精心打磨到每个像素都尽量完美，同整体的设计相得益彰，不论放大还是缩小都能同整体融为一体。
在技术上，你还需要使用可拓展的图片格式，让你的图片素材上能够随意缩放，从而可以作为高清设计的一部分。
在设计高清的循环视频背景的时候，可以适当地添加一些提醒。对于那些快速浏览页面的用户可能会忽略这些细节，但是有趣的细节会让用户会心一笑，让他们成为网站的回头客。
到底什么是高清设计？
对于这个概念，Designmodo 的 Paula Borowska 在撰文时的提法就比较易于理解，他将相关的概念都进行了解释：
·像素（Pixel）是最小的显示用的物理单元。
·像素密度指的是在单位面积内所能容纳的像素数量。
·分辨率，指的是屏幕整个视野内横向或者纵向上像素的数量。
·ppi，也就是每英寸内像素数（Pixels per inch），指的是每英寸内所拥有的像素数量，也是像素密度的单位。而计算屏幕ppi的时候，常常使用屏幕的对角线长度用来计算。
·DPI 指的是显示分辨率，只有当每英寸像素数量超过200才能称得上是高DPI。
今天你所能买到的手机、平板和相当一部分电脑大都是高清分辨率的屏幕，它们能够很好地显示真正高清的网页设计作品。不过话又说回来，即使你所使用的屏幕并不是高清屏幕，显示高清的网页设计也是没有影响的。
说道高解析度，你可能会最先想到高素质的图片。在视网膜屏幕大行其道的今天，宽度600像素，72ppi 的图片可以说已经过时了。
所以，要做好高清设计，图片必须清晰锐利。当我们按照之前的标准来保存图片，在今天的高清屏幕上难免会出现模糊。不过这样的图片在加载速度上比起高清的图片更有优势，高素质的图片更加占用带宽，也需要更长的时间来下载显示。所以，尽量上传和所需显示规格相近的图片。
不过如果你担心加载时间过长，不妨使用模糊的背景图，这样一来，数据量更少，读取速度更快，同时还能兼顾到其他元素的高清显示效果。
视频
2016年的设计趋势当中，视频就占有一席之地。如果你曾留意过，会发现如今的优秀网页设计当中，以视频为代表的动态元素仿佛无处不在。和图片一样，高清设计对于视频的素质要求同样很高。
对于绝大多数的设计师和网中而言，一个短小精悍可循环播放的高清视频是个合理的选择，这样可以避免出现空档。当然，还有人会选择更长一些的视频，并使用加载动画来“缩短时间”。不过一般而言，高品质的视频需要高素质的录音、压缩和保存技术。
当然，视频的使用还有一些特别的技巧，“静止视频”就是其中之一。在拍摄视频的时候，让场景中绝大多数的元素保持静止，仅有少量甚至只有某一个元素缓慢地运动，这样出来的视频效果，极富戏剧性，带来的用户体验也相当不错。
插画和背景
所以，当我们谈及插画和背景的时候，细节就显得相当重要了。好不夸张地说，在高清设计中，插画和背景的使用需要精心打磨到每个像素都尽量完美，同整体的设计相得益彰，不论放大还是缩小都能同整体融为一体。
在技术上，你还需要使用可拓展的图片格式，让你的图片素材上能够随意缩放，从而可以作为高清设计的一部分。
在设计高清的循环视频背景的时候，可以适当地添加一些提醒。对于那些快速浏览页面的用户可能会忽略这些细节，但是有趣的细节会让用户会心一笑，让他们成为网站的回头客。
