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

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

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

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

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

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

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

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

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

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

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

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

問(wèn)題是，高清設(shè)計(jì)的好處值得嗎?我們?cè)赨XPin的設(shè)計(jì)師回答是肯定的——即使你現(xiàn)在仍然可以通過(guò)標(biāo)準(zhǔn)定義，HD的流行只會(huì)繼續(xù)增長(zhǎng)。你越早適應(yīng)，就越能為未來(lái)做好準(zhǔn)備。

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

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

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

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

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

有幾種方法可以解決這個(gè)問(wèn)題，其中一種就是SVG。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

隨著極簡(jiǎn)設(shè)計(jì)技術(shù)的興起(也許正是因?yàn)檫@個(gè)原因)，這種策略的好處不僅僅是加載時(shí)間。你的站點(diǎn)會(huì)感覺(jué)更復(fù)雜，你會(huì)強(qiáng)調(diào)更多現(xiàn)有的內(nèi)容(如果執(zhí)行得當(dāng)，會(huì)提供更流暢的體驗(yàn))。

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

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