关于高清设计你必须知道的几件事

如果你仔细观察今天的网页设计，你会发现一些网站的图像质量相当惊人。从图片、背景到界面元素，都是高清图像质量，它们几乎是高分辨率甚至视网膜屏幕笔记本精心定制的网站，当然，这些网站对网络速度的要求自然更高，同时，这样的网站在任何设备浏览自然基本上没有模糊。

什么是高清设计？

Phive

说到高清或HD，我们最常提到的是Retina屏幕。苹果通过自己的产品创造的流行词汇已经成为高清屏幕的同义词。为了理解它，我们还需要了解一些与设备相关的特定技术词汇。

对于这个概念，Designmodo 的 Paula Borowska写作时的提法更容易理解，他解释了所有相关的概念：

·像素（Pixel）它是最小的显示物理单元。·像素密度是指单位面积内可容纳的像素数量。·分辨率是指屏幕整个视野中水平或垂直像素的数量。·ppi，也就是说，每英寸内的像素数（Pixels per inch），它是指每英寸内的像素数，也是像素密度的单位。在计算屏幕PPI时，屏幕的对角线长度通常用于计算。·DPI 指的是显示分辨率，只有当每英寸像素数超过200时，才能称之为高DPI。

你今天能买到的大部分手机、平板电脑和电脑都是高清分辨率的屏幕，它们可以很好地显示真正的高清网页设计作品。但话说回来，即使你使用的屏幕不是高清屏幕，显示高清网页设计也没有影响。

图片

Roswell

说到高分析，你可能会首先想到高质量的图片。如今，当视网膜屏幕流行时，宽度为600像素，72pi 图片可以说已经过时了。

正如上面提到的，高清分辨率的门槛是像素密度超过200pi，在这种像素密度下，相同尺寸的照片的像素密度几乎是以前的三倍。事实上，旗舰手机的分辨率规格已经超过了桌面上大屏幕的规格，也就是说，许多人手中的手机，无论是iPhone还是Android，都超过了许多人桌面显示器的1080p屏幕。直到今天，在 W3Schools 在10244年的文档中，×768 它仍然是使用最广泛的分辨率，但需要注意的是，超过30%的用户已经在使用高清显示器。

如果桌面端分辨率的分裂让你纠结，那么移动端的情况就简单多了。iPhone 6 的分辨率是 三星401ppi Galaxy S5 是577pi，其他国产大部分都达到了这样的水平，高清屏几乎占据了大部分市场。

Sundays

当你开始设计界面图标和其他元素时，你只需要知道六个字母：SVG和CSS。几乎所有的图标和元素都可以分为这两种类型。

SVG或其他可缩放矢量图像是高清设计中不可获得的一部分。您可以使用SVG来保存图形、图标和其他界面元素。几乎所有现代浏览器都支持SVG。少数古代浏览器不支持这一点。浏览器中的渲染方法与HTML没有太大区别。如果您想对SVG有更深入的了解，请访问Scott 作为这一领域的先驱，Murray的博客值得一读。

CSS 元素几乎以纯代码的形式存在，编辑方便，缩放更方便。您几乎不需要使用Photoshop进行设计，然后将其发布到网页中，W3Schools 网站上有详细的教程供您学习。

SVG和CSS 有一个共同点：它们可以随着网站的变化而适应，也就是说，基于它们的样式、图标和元素是响应性的。只要没有像素按钮，就没有显示器可以在CSS和SVG的基础上显示马赛克。

当然，你也不需要去SVG和CSS元素，Tympanus SVG 按钮和CSS Button Generator可以满足你的需求。

结语

真正的高清设计网站可以从所有的网站中脱颖而出。用户将开始期待每个页面带来的高清体验，从一个屏幕到另一个屏幕，以及一个真正的高清设计网站，以满足他们的需求。

幸运的是，高清设计并不需要你把一切都推倒，从图片、视频到UI元素的逐渐无痛变化可以完全过渡。注意质量，抛光细节，是你必须做的一切。