如果你曾仔細(xì)觀察過當(dāng)今的網(wǎng)頁設(shè)計(jì)，你會(huì)發(fā)現(xiàn)有一部分網(wǎng)站的畫質(zhì)已經(jīng)相當(dāng)驚艷了。從圖片、背景到界面元素，無一不是高清畫質(zhì)，它們幾乎是為高分辨率甚至視網(wǎng)膜屏幕的筆記本精心定制的網(wǎng)站，當(dāng)然，這些網(wǎng)站對(duì)于網(wǎng)速的要求自然也更高一些，而與此同時(shí)，這樣的網(wǎng)站在任何設(shè)備上瀏覽自然也就基本不存在模糊這回事了。

到底什么是高清設(shè)計(jì)？

聊及高清或者HD的時(shí)候，我們提到最多的還是Retina屏幕。蘋果通過自家產(chǎn)品制造出來的流行詞匯目前已經(jīng)成為了高清屏幕的代名詞，要理解它，還需要了解一些和設(shè)備相關(guān)的特定技術(shù)詞匯。

對(duì)于這個(gè)概念，我們來進(jìn)行相應(yīng)解釋：

·像素（Pixel）是最小的顯示用的物理單元。
        ·像素密度指的是在單位面積內(nèi)所能容納的像素?cái)?shù)量。
        ·分辨率，指的是屏幕整個(gè)視野內(nèi)橫向或者縱向上像素的數(shù)量。
        ·ppi，也就是每英寸內(nèi)像素?cái)?shù)（Pixels per inch），指的是每英寸內(nèi)所擁有的像素?cái)?shù)量，也是像素密度的單位。而計(jì)算屏幕ppi的時(shí)候，常常使用屏幕的對(duì)角線長度用來計(jì)算。
        ·DPI 指的是顯示分辨率，只有當(dāng)每英寸像素?cái)?shù)量超過200才能稱得上是高DPI。

今天你所能買到的手機(jī)、平板和相當(dāng)一部分電腦大都是高清分辨率的屏幕，它們能夠很好地顯示真正高清的網(wǎng)頁設(shè)計(jì)作品。不過話又說回來，即使你所使用的屏幕并不是高清屏幕，顯示高清的網(wǎng)頁設(shè)計(jì)也是沒有影響的。

圖片

說道高解析度，你可能會(huì)最先想到高素質(zhì)的圖片。在視網(wǎng)膜屏幕大行其道的今天，寬度600像素，72ppi 的圖片可以說已經(jīng)過時(shí)了。

正如上文所說，高清分辨率門檻是像素密度超過200ppi，這種像素密度之下，相同尺寸的照片所擁有的像素密度近乎之前的三倍。實(shí)際上，現(xiàn)如今旗艦手機(jī)的分辨率規(guī)格早已超過了之前桌面端大屏幕的規(guī)格，也就是說現(xiàn)在許多人手上所拿著的手機(jī)，不論是iPhone還是安卓機(jī)，它們的2K甚至4K屏幕已經(jīng)超過許多人桌面顯示器的1080P屏幕。直到今天，在 W3Schools 的文檔當(dāng)中，1024×768 依然是最廣泛使用的分辨率，但是指的注意的是，超過30%的用戶，已經(jīng)在用高清的顯示器了。

如果說桌面端分辨率的分裂讓你糾結(jié)，那么移動(dòng)端的情況就簡(jiǎn)單多了。iPhone 6 的分辨率是 401ppi，三星 Galaxy S5 是577ppi，其他國產(chǎn)也大都達(dá)到了這樣的水準(zhǔn)，高清屏幾乎已經(jīng)占據(jù)了巨大多數(shù)的市場(chǎng)。

所以，要做好高清設(shè)計(jì)，圖片必須清晰銳利。當(dāng)我們按照之前的標(biāo)準(zhǔn)來保存圖片，在今天的高清屏幕上難免會(huì)出現(xiàn)模糊。不過這樣的圖片在加載速度上比起高清的圖片更有優(yōu)勢(shì)，高素質(zhì)的圖片更加占用帶寬，也需要更長的時(shí)間來下載顯示。所以，盡量上傳和所需顯示規(guī)格相近的圖片。

不過如果你擔(dān)心加載時(shí)間過長，不妨使用模糊的背景圖，這樣一來，數(shù)據(jù)量更少，讀取速度更快，同時(shí)還能兼顧到其他元素的高清顯示效果。

視頻

2016年的設(shè)計(jì)趨勢(shì)當(dāng)中，視頻就占有一席之地。如果你曾留意過，會(huì)發(fā)現(xiàn)如今的優(yōu)秀網(wǎng)頁設(shè)計(jì)當(dāng)中，以視頻為代表的動(dòng)態(tài)元素仿佛無處不在。和圖片一樣，高清設(shè)計(jì)對(duì)于視頻的素質(zhì)要求同樣很高。

對(duì)于絕大多數(shù)的設(shè)計(jì)師和網(wǎng)中而言，一個(gè)短小精悍可循環(huán)播放的高清視頻是個(gè)合理的選擇，這樣可以避免出現(xiàn)空檔。當(dāng)然，還有人會(huì)選擇更長一些的視頻，并使用加載動(dòng)畫來“縮短時(shí)間”。不過一般而言，高品質(zhì)的視頻需要高素質(zhì)的錄音、壓縮和保存技術(shù)。

所以，如果你要在網(wǎng)站中用好視頻，那么一定要精打細(xì)算。以首頁展示的全屏視頻為例，所用的視頻最好是水平方向，為了適配目前常見的屏幕比例，使用16:9 的視頻來兼容寬屏，或者4:3的來填充寬屏。

當(dāng)然，視頻的使用還有一些特別的技巧，“靜止視頻”就是其中之一。在拍攝視頻的時(shí)候，讓場(chǎng)景中絕大多數(shù)的元素保持靜止，僅有少量甚至只有某一個(gè)元素緩慢地運(yùn)動(dòng)，這樣出來的視頻效果，極富戲劇性，帶來的用戶體驗(yàn)也相當(dāng)不錯(cuò)。

插畫和背景

插畫和背景同樣是高清設(shè)計(jì)中的一部分。請(qǐng)務(wù)必記住，在高清的圖片素材中，每一個(gè)細(xì)節(jié)、每一個(gè)元素都清晰可見，所以需要確保其中的每一個(gè)元素都有助于整體美感的提升。

所以，當(dāng)我們談及插畫和背景的時(shí)候，細(xì)節(jié)就顯得相當(dāng)重要了。好不夸張地說，在高清設(shè)計(jì)中，插畫和背景的使用需要精心打磨到每個(gè)像素都盡量完美，同整體的設(shè)計(jì)相得益彰，不論放大還是縮小都能同整體融為一體。

在技術(shù)上，你還需要使用可拓展的圖片格式，讓你的圖片素材上能夠隨意縮放，從而可以作為高清設(shè)計(jì)的一部分。

在設(shè)計(jì)高清的循環(huán)視頻背景的時(shí)候，可以適當(dāng)?shù)靥砑右恍┨嵝?。?duì)于那些快速瀏覽頁面的用戶可能會(huì)忽略這些細(xì)節(jié)，但是有趣的細(xì)節(jié)會(huì)讓用戶會(huì)心一笑，讓他們成為網(wǎng)站的回頭客。

圖標(biāo)和元素

當(dāng)你開始設(shè)計(jì)界面圖標(biāo)和其他元素的時(shí)候，你只需要知道六個(gè)字母就可以做好高清設(shè)計(jì)：SVG和CSS。幾乎所有的圖標(biāo)和元素都可以被歸類為這兩種類型。

SVG 或者其他可縮放的矢量圖像，是高清設(shè)計(jì)中不可獲取的一部分。你可以使用SVG來保存圖形、圖標(biāo)和其他的界面元素，幾乎所有現(xiàn)代瀏覽器都會(huì)支持SVG，少數(shù)古老的瀏覽器對(duì)此不大支持，它在瀏覽器中的渲染方式和HTML差別不大。

CSS 元素幾乎是純代碼形式存在的，編輯起來輕松，縮放更是方便。你幾乎不需要使用Photoshop來設(shè)計(jì)再貼到網(wǎng)頁中去，W3Schools 的網(wǎng)站中有詳細(xì)的教程供你學(xué)習(xí)。

SVG和CSS 有一個(gè)共通的地方：它們可以隨著你的網(wǎng)站變化而進(jìn)行適配，也就是說基于它們來制作的樣式、圖標(biāo)和元素是響應(yīng)式的。只要沒有像素化的按鈕，沒有什么顯示器能夠讓你基于CSS和SVG露出馬賽克。

當(dāng)然，你也不需要非得專門去找SVG和CSS元素。

真正的高清設(shè)計(jì)下的網(wǎng)站是能夠從蕓蕓眾站中脫穎而出的。用戶會(huì)開始期待每一個(gè)頁面給他帶來的高清體驗(yàn)，從一塊屏幕到另一塊屏幕，而一個(gè)真正的高清設(shè)計(jì)下的網(wǎng)站，才能滿足他們的需求。

好在高清設(shè)計(jì)并不需要你全部推倒重來，從圖片、視頻到UI元素一點(diǎn)一點(diǎn)無痛的逐步改變是完全可以過渡過去的。注意品質(zhì)，打磨細(xì)節(jié)，就是你要做的全部事情。