關于高清網頁設計你必須知道的幾件事

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

　　到底什么是高清設計 ?

　　Phive

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

　　對于這個概念，Designmodo 的 Paula Borowska 在撰文時的提法就比較易于理解，他將相關的概念都進行了解釋：

　　·像素(Pixel)是最小的顯示用的物理單元。

　　·像素密度指的是在單位面積內所能容納的像素數量。

　　·分辨率，指的是屏幕整個視野內橫向或者縱向上像素的數量。

　　·ppi，也就是每英寸內像素數(Pixels per inch)，指的是每英寸內所擁有的像素數量，也是像素密度的單位。而計算屏幕ppi的時候，常常使用屏幕的對角線長度用來計算。

　　·DPI 指的是顯示分辨率，只有當每英寸像素數量超過200才能稱得上是高DPI。

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

　　圖片

　　Roswell

　　說道高解析度，你可能會最先想到高素質的圖片。在視網膜屏幕大行其道的今天，寬度600像素，72ppi 的圖片可以說已經過時了。

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

　　如果說桌面端分辨率的分裂讓你糾結，那么移動端的情況就簡單多了。iPhone 6 的分辨率是 401ppi，三星 Galaxy S5 是577ppi，其他國產也大都達到了這樣的水準，高清屏幾乎已經占據了巨大多數的市場。

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

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

　　視頻

　　Bellroy-outside

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

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

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

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

　　插畫和背景

　　Farkas

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

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

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

　　在設計高清的循環(huán)視頻背景 的時候，可以適當地添加一些提醒。對于那些快速瀏覽頁面的用戶可能會忽略這些細節(jié)，但是有趣的細節(jié)會讓用戶會心一笑，讓他們成為網站的回頭客。

　　圖標和元素

　　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元素一點一點無痛的逐步改變是完全可以過渡過去的。注意品質，打磨細節(jié)，就是你要做的全部事情。