高清晰度網(wǎng)頁設(shè)計如何生存

當然，高清技術(shù)普及還有一段時間，但從統(tǒng)計數(shù)據(jù)來看，它的發(fā)展速度確實很快。隨著蘋果視網(wǎng)膜顯示屏(retina display)的性能達到舊ppi的兩倍，HD不再是一個特別的驚喜，而是成為一種普遍期待，這只是時間問題。

但是，當你的用戶僅僅需要去買一個高清設(shè)備來欣賞它的時候，設(shè)計師就必須在他們的終端上投入更多的工作。

在這篇文章中，我們將解釋一些快速的技術(shù)，以適應(yīng)你的設(shè)計過程，為將來的HD。

簡單地說，高清晰度設(shè)備顯示圖像與更高密度的像素每英寸(ppi或dpi，互換)。從技術(shù)上講，任何大于200 ppi的都被認為是高清晰度。相比之下，典型的標準清晰度顯示器——互聯(lián)網(wǎng)的基礎(chǔ)——只有72 ppi。

目前，這些設(shè)備的現(xiàn)狀是:

與此同時，新推出的Retina iMac、MacBook Pro和MacBook Air的ppi都在220 ppi左右。

我們看到的是，隨著技術(shù)戰(zhàn)爭的繼續(xù)，所有數(shù)字產(chǎn)品的分辨率都在穩(wěn)步上升。因此，越來越多的設(shè)計師加入進來，我們看到了網(wǎng)站高清背景(以及其他圖片)的興起。更清晰的圖像為設(shè)計師們打開了很多創(chuàng)意之門，但同時也帶來了一系列我們?nèi)栽谂鉀Q的新問題。

當然，更高的分辨率意味著更多的數(shù)據(jù)，這意味著更長的加載時間?，F(xiàn)在，HD的設(shè)計師們正在努力減少文件的重量，無論是在其他地方騰出空間，還是采用其他的設(shè)計方法(我們將在下面討論)。

另一個主要因素是標準72 ppi在HD設(shè)備上的視覺效果。最好的情況是，它們沒有什么效果，尤其是與其他已經(jīng)適應(yīng)了高清的網(wǎng)站相比。隨著越來越多的網(wǎng)站改用高清，標準網(wǎng)站顯得越來越缺乏，這個問題只會隨著時間的推移而惡化。

另一個需要考慮的問題是，你是否應(yīng)該疏遠一群人來迎合另一群人。據(jù)報道，在2012年，至少有一半的美國家庭擁有至少一臺蘋果設(shè)備，所以如果你選擇HD，它肯定不會被忽略。

此外，高清視覺效果，無論是視頻還是圖像，價格都更高。這意味著你要為加載時間更長的內(nèi)容支付更多的費用。即使你提供自己的內(nèi)容，創(chuàng)建高清圖像所必需的工具仍然是昂貴的。

問題是，高清設(shè)計的好處值得嗎?我們在UXPin的設(shè)計師回答是肯定的——即使你現(xiàn)在仍然可以通過標準定義，HD的流行只會繼續(xù)增長。你越早適應(yīng)，就越能為未來做好準備。

幸運的是，你不是唯一一個對HD頭疼的設(shè)計師。到目前為止，設(shè)計師已經(jīng)發(fā)現(xiàn)了一些解決高清設(shè)計問題的變通方法和新方法。

正如在《免費電子書網(wǎng)頁設(shè)計趨勢2015》中描述的那樣。2016年，我們列出的方法將幫助你量身定制你的設(shè)計過程到高清，而不必犧牲太多。

在討論縮放矢量圖形(SVG)的興起之前，我們應(yīng)該先解釋一下光柵圖形。

光柵(或位圖)圖形主要由jpg、png和gif組成。這些圖像的特征是像素到像素的轉(zhuǎn)換，這意味著一個位圖像素被讀取為一個設(shè)備像素。這在很大程度上是正常的，但現(xiàn)在高清正在打破這種平衡。在HD設(shè)備上，一個位圖像素被四個設(shè)備像素讀取。這會使標準清晰度的圖像看起來模糊。

光柵圖形的另一個問題是移動設(shè)備上縮放的增加。任何經(jīng)常使用移動設(shè)備上網(wǎng)的人以前都遇到過這種情況——為了在更小的屏幕上更好地看到圖像，你試著放大，卻發(fā)現(xiàn)你把圖像變得更模糊，而不是更清晰。

有幾種方法可以解決這個問題，其中一種就是SVG。

svg使用連接點和線而不是像素來創(chuàng)建圖像。這意味著文件可以考慮像素分辨率的差異以及放大和縮小。簡單地說，svg可以區(qū)分屏幕類型并進行必要的調(diào)整，而光柵圖形總是相同的。要想看到矢量的最佳狀態(tài)，去上面的Les Jardins de la Poudriere和發(fā)揮窗口大小。

SVGs是完美的“修復”，不僅為高清顯示，但始終響應(yīng)設(shè)計。唯一的問題——也是一個大問題——是照片和其他已經(jīng)存在的圖像。照片總是光柵圖形，因為圖像本身是在有限的像素上創(chuàng)建的。為了正確地顯示照片，必須使用另一種方法。

傳統(tǒng)上，圖像是在瀏覽器中呈現(xiàn)的，這正是出現(xiàn)這些問題的地方。如果你渲染你的圖像在HTML(寬度&但是，您可以更多地控制它們的查看方式，并且有時可以避免難看的模糊。

最簡單的解決方案是將圖像的大小設(shè)置為它實際大小的一半，這樣當轉(zhuǎn)換為高清時，它就能正常顯示。對于編碼的技巧和技巧——包括媒體詢問如何根據(jù)設(shè)備改變尺寸——Paula Borowska在DesignModo的這篇文章中解釋了細節(jié)。

隨著高清視頻背景的日益流行，設(shè)計師們正在尋找創(chuàng)造性的解決方案來緩解加載壓力。其中最具創(chuàng)意的不是簡化視頻的質(zhì)量，而是簡化內(nèi)容。

這樣的高清視頻只有很少的運動和/或大部分由靜態(tài)元素組成。輕微的動作仍然會對用戶體驗產(chǎn)生積極的影響，但不會導致視頻加載過度。

錢包套的制造商貝爾羅伊就是一個很好的例子。為了強調(diào)他們產(chǎn)品的耐用性和質(zhì)量，他們用一個簡單的高清視頻來展示它在嚴酷的環(huán)境中毫發(fā)無損。只有飄落的雪在視頻中移動，使得墻和前景中的飄落的雪比視頻更接近靜止的圖像。飄落的雪花給人一種迷人的氛圍，又不加重服務(wù)員的負擔。

從技術(shù)角度來看，我們可以看到一些明智的決策在起作用。首先，整個背景使用了相當有限的調(diào)色板，這自然會提高加載時間。其次，因為視頻在.mp4中渲染，移動的雪花大多有軟邊，而只有靜止的錢包圖像有硬邊(同樣，提高了加載時間)。

最終的結(jié)果是視覺上的妥協(xié)，效果和它看起來一樣好。

就像簡化內(nèi)容而不是質(zhì)量一樣，越來越多的設(shè)計師開始欣賞“無焦點”視頻設(shè)計的靈活性。像“靜止”高清視頻，這增加了一些高清視頻的視覺樂趣，沒有那么多的缺點。用戶仍然能夠辨別運動，這是活躍和活躍的氣氛，而藝術(shù)風格掩蓋了更實際的好處，減少負荷緊張。

Fernando Maclen的網(wǎng)站充分利用了非聚焦視頻中隱含的“超級簡單”。

這個策略還有一些其他的好處。簡潔的元素，如鏈接、按鈕或文本，會吸引更多的注意力，因此背后的力度也更大。這是一個很好的方式來強調(diào)某些元素。

無焦點的視頻也可以作為誘餌，有條件地保證清晰的版本。雖然Maclen的網(wǎng)站沒有這樣做，你當然可以在用戶點擊一個號召行動，完成一個注冊，購買一個特定的產(chǎn)品，等等之后顯示真實的視頻。

在這種情況下，無聚焦的視頻只有640像素寬，但由于模糊效果，它在大屏幕上看起來很好。清晰的前景文字也抓住了用戶的注意力，使背景效果更加無縫。

這是一個最后的解決方案，但它將在緊急情況下工作。只需減少屏幕上的圖像、動畫和視頻的數(shù)量。你可以從高清的視覺效果中得到好處，而不用擔心下載時間的問題，也不用買太多高清內(nèi)容。

隨著極簡設(shè)計技術(shù)的興起(也許正是因為這個原因)，這種策略的好處不僅僅是加載時間。你的站點會感覺更復雜，你會強調(diào)更多現(xiàn)有的內(nèi)容(如果執(zhí)行得當，會提供更流暢的體驗)。

不管你對蘋果的感覺如何，你必須承認他們已經(jīng)改變了我們對互聯(lián)網(wǎng)的看法——在這種情況下，確實是這樣。

高清顯示屏顯然是未來的趨勢，所以沒有必要假裝這只是一時的風尚，遲早會過去。你越早學會用高清來設(shè)計，你就會在未來有更多的立足點。從好的方面來看，可以安慰的是，在未來，網(wǎng)速可能也會提高，以緩解一些加載壓力。