关于高清设计你需要了解的一切

它从一些视网膜和高分辨率的屏幕开始，但是访问更快的连接也强调了这一现象，提供了更多的访问高清网站的任何设备。你在高定义中思考和设计吗?这里有一些事情告诉你高清。

你真的了解高清吗？

HD最常见的提示是视网膜显示屏。在苹果设备的普及下，这个词已经成为高清屏幕的代名词。这涉及到一些非常具体的设备技术。

Paula Borowska为Designmodo设计了一个最容易理解的描述:

设备像素是显示的最小的物理单元。

像素密度是在给定空间中显示的像素数。

分辨率是指在可视空间的整个宽度或高度上的像素个数。

像素每英寸，称为ppi或dpi，指的是当你将显示器的物理宽度除以显示的水平像素时，你得到的像素数。

高DPI是每英寸或更大的200像素的显示密度。

从手机到平板电脑到笔记本电脑，今天你买的大部分设备都有高清晰度显示屏。（事实上，即使你有一个没有高清显示器的设备，拥有高清晰度的网站也不会有什么损失。）

图像

当涉及到图像时，你可能首先想到的是高清晰度的地方。将每一张图像保存在600像素宽的72个像素点的日子已经结束了。这不会在今天的屏幕上显示。

HD的基本标准是200 ppi。这比你以前节省的两倍还多。再加上1920年的屏幕越来越大，1080年的增长速度很快。根据W3Schools.com的数据，最常见的屏幕是1024 * 768像素或更高，超过30%的用户在高清晰度屏幕上工作。

小屏幕也是如此。像iPhone 6(401 ppi)和三星Galaxy S5(577 ppi)这样的流行设备也拥有高清功能。

所以说到图像，它们必须是锋利的。你不会用模糊的或像素化的图像离开。保存在旧的“标准分辨率”将使你的设计看起来平淡，而高分辨率的图像会显得更加优雅。使用这种类型图像的缺点是速度;更高的质量等于更长的装载时间。保存尽可能接近规范，不要过度上传图像文件。

有趣的技巧:如果你担心加载时间，可以考虑在这里使用模糊的图像趋势。有更少的数据可以阅读，你可以节省一些更小的，仍然可以从其他较小的高分辨率元素获得所需的锐度。

磁带录像

视频是2016年的必备视觉趋势。似乎到处都是你在网站主页上移动的动作。就像图片一样，它需要高质量。

对于大多数设计师和网站来说，这意味着坚持一个相当短的循环视频，以防止加载打嗝。其他人则选择更长的视频，并通过加载动画来分散用户的注意力。高质量的视频需要高质量的录音，压缩和保存。

当涉及到视频将如何播放和查看网站设计时，它也需要大量的计划。例如，一个完整的屏幕英雄视频需要被水平地拍摄，以使它适合屏幕。为了便于使用，简单的视频编辑器可以帮助你调整画面的纵横比;选择16:9的宽屏幕感觉或4:3的更方形的外观。

有趣的技巧:使用“静止视频”来达到高潮效果。这是一个想法:电影是静态的，在背景中只有少量的运动。你将获得一个很酷的用户体验，而不需要考虑你的设计。

插图和背景

当涉及到插图和背景时，HD也很重要。请记住，在高清晰度空间中，每个细节(或缺乏细节)都是可见的，所以你要确保设计的每一部分都有助于整体的美感。

当涉及到插图或背景时，细节很重要。专注于制作一个几乎是像素完美的设计，适合设计，在伸缩或向下伸缩时不会脱落。最简单的方法就是专注于简单。

虽然可以很容易地将其拉入创建复杂的插图或纹理背景，但simple可能是更好的选择。如果你想增加更多的兴趣，可以考虑制作一个小动画元素的设计，或者用比你通常使用的更大胆的颜色选择来增添趣味。

然后还有技术组件:你需要使用一个可伸缩的图像格式，这样所有的东西都可以按预期的大小进行缩放，并充分发挥其HD的潜力。

有趣的技巧:在一个长循环的背景上添加一个动画的提示。快速浏览访问者可能会错过,但小奖励肯定会高兴重复用户和那些留守在较长时期。

图标和元素

当涉及到你网站上所有的图标和用户界面元素时，你需要知道六个字母:SVG和CSS。所有这些元素都可能被归类为这两种类型中的一种。

SVG，或可伸缩的矢量图形，是web的基本矢量。您可以使用SVG来保存形状、图标和其他许多用户界面元素。图像由现代浏览器读取——有一些较旧的浏览器不起作用(我们正在和在Internet Explorer上工作的少数人交谈)——作为文本，以与HTML非常类似的方式呈现。如果你想了解SVG的本质，Scott Murray在他的博客上有一个很好的入门读物。

CSS元素是纯粹的代码，将会扩展和样式与设计。(你可能不需要在Photoshop中绘制按钮，然后把它们粘贴到你的网站上。)W3Schools.com有一个关于如何创建和使用CSS元素的基本教程。

这里是关于SVG和CSS的内容:元素与站点一起移动。这是在一个响应式框架中需要的。没有什么比一堆像素化按钮更能扼杀你的高清晰度网站设计了。

有趣的技巧:您不必重新发明轮子来找到一些漂亮的SVG或CSS元素。从Tympanus或CSS按钮生成器中查看这些SVG按钮。

结论

高清晰度会让你的网站与众不同，而不是所有不这么做的人。用户开始期待从电视到电脑到手机的每一个屏幕上都有高清体验。你的网站需要满足这些期望。

好消息是，你可以在通往目的地的道路上做出小小的改变。注意你的图像、视频和其他用户界面元素，以确保你显示的是像素，每一种视觉都是无缝的和高质量的。