如果你目前還沒有注意到，我可以小聲的告訴你，網站設計正逐步走向高清。從圖像到背景圖再到用戶界面的任何一種元素，高分辨率是新的硬性指標。

它因為一些類視網膜的高清晰度屏幕而興起以及發展，但連接速度促使訪問更快也強調這一現象，高清的網頁設計可以從任何設備提供更高的訪問以及用戶體驗。你現在可能會思考什么程度的清晰度在網站設計上算是高清晰呢？這里有幾個點你需要考慮一下。

1.什么是真正的高清

該網頁設計圖片為一個運動裝的男人在橙色的背景圖上

HD最常見的專業術語是視網膜顯示技術。蘋果設備的普及是這個技術為人所知，這個術語已經成為高分辨率屏幕的代名詞。這涉及到一些比較特殊的設備技術。

Paula Borowska for Designmodo有一個最容易理解的描述：

· 設備像素是顯示的最小物理單位；

· 像素密度是給定空間中顯示的像素數；

· 分辨率是可視空間的整個寬度或高度上的像素數；

· 每英寸像素，稱為ppi或dpi，是指將顯示器的物理寬度除以顯示的水平像素數時獲得的像素數；

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

今天你從手機到平板電腦再到筆記本電腦等大部分的數碼設備都可能具有高清晰度的顯示（事實是，即使你的設備沒有高清顯示，擁有高清晰度的網站也不會因此而受到任何影響）。

2.圖片

該網站設計圖片為四個外星人裝扮的人偶在商店的櫥窗里

當提到高清晰度的時候，你可能首先想到的是圖片。600像素72ppi的圖像時代已經過去了。

高清的基本標準現在是200 ppi。這可能是你以前保存的圖像的兩倍多。事實上，目前我們普遍使用的在1920至1080之間的分辨率，屏幕也越來越大。根據W3Schools.com的統計數據，最常見的屏幕是1024×768像素或更高，超過30％的用戶在高分辨率屏幕上工作。

小屏幕也是如此。iPhone 6（401 ppi）和三星Galaxy S5（577 ppi）等受歡迎的設備也擁有高清的屏幕顯示功能。

所以當涉及到圖像時，它們必須足夠的清晰。你不會想使用模糊或過于像素化的圖像。不過，使用高清圖像的缺點就是速度，更高的質量需要更長的加載時間，這就意味著你可能需要更多的在質量和速度之間選擇。

教你一個有趣的竅門：如果你擔心加載時間過長，那么你可以在那些大的圖片上使用模糊處理的流行趨勢，這樣可以使大圖的數據讀取更快，以此來節約一些加載的時間。雖然犧牲了大圖的清晰度，但是你可以通過網頁設計中的其他較小的高分辨率元素中獲得所需的清晰度。

3.視頻

該設計圖片為一個時尚的包袋放置于沙漠中

視頻是2016年網頁設計中必備的視覺趨勢。它幾乎無處不在。不過，就像圖像一樣，它需要高品質。

對于大多數設計師和網站設計來說，這意味著你需要堅持一個相當短的循環視頻，以防止加載過慢。其他人選擇使用更長的視頻，但他們會通過使用加載動畫來分散用戶等待過程的注意力。高質量的視頻需要高質量的錄制，壓縮和保存。

當涉及視頻播放和查看網站設計時，還需要進行大量的規劃。例如，全屏主視覺視頻需要水平拍攝，以便使它更適合屏幕的寬高比。為了方便使用，簡單的視頻編輯器將幫助你根據縱橫比調整幀。選擇16：9的寬屏幕感覺或4：3更方形的外觀。

教你一個有趣的竅門：使用“靜止視頻”來實現高戲劇效果。這是一個想法：畫面中的大多元素是靜態的，只是在其中一小部分添加一點點的運動，將得到一個很酷的用戶體驗。

4.矢量插圖和背景

該網頁設計表現為幾張不同的矢量插圖組成另一個高清的背景

當涉及到矢量插圖或背景時，細節就顯得很重要了。專注于制作幾何像素的完美網頁設計，并且在放大或縮小時都不至于分崩離析。最簡單的方法就是關注簡單性。

請記住，每個細節（或缺乏）在高清晰度空間都是可見的，所以你需要確保設計的每個部分都有助于整體的審美。

雖然很容易被陷入創作一個復雜的插圖或紋理的背景，但其實簡單可能是最好的選擇。如果你想添加更多的興趣點，可以考慮將小型動畫元素作為設計的一部分，或者使用比通常使用的更大的顏色選項來調整它。

教你一個有趣的竅門：在一個循環的背景上添加一些動畫。快速瀏覽的用戶可能會錯過它，但是對于那些有意的客戶來說，肯定會讓它們感到驚喜。

5.圖標和元素

該網站設計表現為幾個卡通形象在灰色的背景上

當涉及到你網站設計中的所有圖標和用戶界面元素時，你需要知道六個字母：SVG和CSS。所有這些元素都可能被歸類為這兩種類型之一。

SVG，或稱之為可擴展矢量圖形是網絡的基本。你可以使用SVG來保存形狀，圖標和大量其他用戶界面元素。圖像由瀏覽器讀取（不過在那些低版本的瀏覽器中可能不工作），作為文本和HTML以非常相似的方式呈現。

CSS元素是純代碼元素，并且能夠自由縮放，完全按照設計稿上面的要求和樣式（你可能不需要在Photoshop中繪制按鈕并將它們粘貼到你的網站中）。

這是關于SVG和CSS的共同的特性：元素與你的網站一起變化。這是你在響應框架中需要的。沒有什么比一堆像素化的按鈕更能毀滅你的高清網頁設計了。

總結

高分辨率會將你的網頁設計與所有不是高分辨率的設計分開。用戶開始期望從電視、電腦或手機的每個屏幕上都有高清體驗。你的網站設計需要符合這些期望。

好消息是，你可以在實現這個目標的道路上做一些小小的改動。注意你的圖像，視頻和其他用戶界面元素，以確保你網站設計的視覺都是無縫和高品質的。