海淘科技：準(zhǔn)備好了，這里來了高清網(wǎng)頁設(shè)計(jì)。蘋果是推動(dòng)高新技術(shù)產(chǎn)業(yè)發(fā)展增加iPhone和iPad屏幕上的像素密度。從用戶的角度來看這是偉大的,但作為一個(gè)網(wǎng)頁設(shè)計(jì)師或開發(fā)者它實(shí)際上可能完全改變你建立網(wǎng)站的方式。
你準(zhǔn)備好高清網(wǎng)頁設(shè)計(jì)嗎?你知道你的網(wǎng)站將會(huì)在新一代的高分辨率屏幕上嗎?你可以采取什么步驟來準(zhǔn)備自己,你將需要什么技能在未來幾年?繼續(xù)讀下去你會(huì)發(fā)現(xiàn)。
當(dāng)蘋果說,我們聽
我一直在使用mac OS 9天以來忠實(shí),不只要一些舊定時(shí)器但長(zhǎng)時(shí)間喝的飲料,完全沉迷于一切蘋果。我記得看到一個(gè)蘋果標(biāo)志意味著產(chǎn)品是一個(gè)利基,局外人,只有社會(huì)的頑固的個(gè)人使用在一個(gè)公開的試圖違背主流,Windows-loving文化。“如果你隨機(jī)選擇一所房子,你就會(huì)發(fā)現(xiàn)至少有一個(gè)iPod,iPhone和iPad里面。”通過一個(gè)令人印象深刻的變換建立在致力于創(chuàng)造創(chuàng)新的下一代產(chǎn)品,小失敗者公司現(xiàn)在已經(jīng)成為世界上最有價(jià)值的公司。可能沒有Mac在每個(gè)桌面在美國,但如果你隨機(jī)選擇一棟房子,你會(huì)發(fā)現(xiàn)至少有一個(gè)iPod,iPhone和iPad里面。
我不打算雄辯，讓你對(duì)我有所崇拜,我只是想證明在科技行業(yè)里，蘋果公司是一個(gè)有權(quán)勢(shì)的。沒有人再關(guān)心新特性的牛頓出來,但是當(dāng)蘋果發(fā)布一個(gè)新的iOS設(shè)備,世界停止和耐心地聽在無限循環(huán)的向?qū)Ц嬖V我們未來會(huì)是什么樣子。
蘋果公司押注高分辨率
直到最近,蘋果已經(jīng)與我們對(duì)更好的屏幕分辨率。更大更好的高清電視的關(guān)注消費(fèi)者和電子公司十年了。聰明的營銷與令人印象深刻的技術(shù)來創(chuàng)建一個(gè)永不滿足的渴望高清屏幕,有線電視節(jié)目和電影。在大多數(shù)情況下,這一趨勢(shì)已經(jīng)遠(yuǎn)離計(jì)算。當(dāng)然,有巨大的,華麗的電影顯示但像素密度從未這樣需要一個(gè)主要的范式轉(zhuǎn)變。也就是說,直到最近。當(dāng)iPhone 4在2010年中期下降了一個(gè)驚喜:“視網(wǎng)膜”顯示屏,它吹我們了翻舊的分辨率與驚人的每英寸326像素(相比之下,109 ppi)27“iMac。這是一個(gè)改變游戲規(guī)則。有很多猜測(cè),擴(kuò)展這種技術(shù)在一個(gè)負(fù)擔(dān)得起的利率幾乎不可能,但蘋果所做的事也加倍決議第三代iPad,而在264 ppi略低,但仍華麗。
為什么這完全改變了你如何做你的工作
誰會(huì)在乎iPad的像素密度?作為一個(gè)網(wǎng)頁設(shè)計(jì)師,你做什么,你是否知道它。問題是明顯的在這個(gè)網(wǎng)站上,以及任何其他你今天將訪問。去吧,抓住一個(gè)圖像從網(wǎng)絡(luò)和在Photoshop中打開它。現(xiàn)在打開圖像大小對(duì)話框。看到什么有趣的東西嗎?網(wǎng)頁設(shè)計(jì)師總是有一個(gè)很好的小優(yōu)勢(shì)印刷設(shè)計(jì)師:我們可以用低分辨率的藝術(shù)品。為什么它是一種優(yōu)勢(shì)而不是劣勢(shì)?因?yàn)榉直媛史謱覲SDs可以使您的機(jī)器變得很慢,圖片分辨率花費(fèi)更多的錢,高分辨率的圖像花永遠(yuǎn)負(fù)載在網(wǎng)絡(luò)上,這樣的例子不勝枚舉。不過,問題是明確上圖僅72 ppi在新的iPad 264 ppi !(這個(gè)觀點(diǎn)有點(diǎn)過于簡(jiǎn)單化了,讀這篇文章獲取更多信息你是否查看圖片72 ppi。)
想想這意味著什么。蘋果已經(jīng)在完整的iOS行視網(wǎng)膜顯示:觸控式iPod,iPhone和iPad。這意味著數(shù)以百萬計(jì)的人每天都瀏覽網(wǎng)頁高分辨率的屏幕上,不會(huì)正確顯示您的圖片。毫無疑問,這一趨勢(shì)只會(huì)變得更糟,因?yàn)槠渌O(shè)備制造商玩趕上和蘋果探索方法帶來更多的像素密度下一個(gè)明顯的地方:筆記本電腦市場(chǎng)。
你能做什么?
像素密度問題是一個(gè)有趣的問題。網(wǎng)絡(luò)代表了這么多不同的技術(shù)，在和諧相處，它可以是混亂的，如果其中一個(gè)技術(shù)領(lǐng)先，擾亂了平衡。我們見證了更高分辨率的屏幕的出現(xiàn)，但我們的內(nèi)容只是為舊屏幕進(jìn)行了優(yōu)化。進(jìn)一步，考慮如何瘋狂的web開發(fā)者對(duì)網(wǎng)頁加載時(shí)間和低分辨率的圖像，現(xiàn)在想象一下慢下來你會(huì)得到一個(gè)像Pinterest的圖像重網(wǎng)站如果突然充滿了326ppi圖像!
純HTML和CSS的網(wǎng)頁元素
好消息是,在某些方面我們已經(jīng)準(zhǔn)備多年,我們甚至不知道它。CSS3和HTML5的崛起真的推動(dòng)減少圖像的數(shù)量的概念,我們使用的標(biāo)記。
這些天大多數(shù)UI元素都呈現(xiàn)在瀏覽器中,這意味著他們很好地?cái)U(kuò)大你扔在任何屏幕上。
為了說明這一點(diǎn),這是它是什么樣子當(dāng)我放大基于映像下載buttonon iPhone 4。
現(xiàn)在,如果我看那個(gè)按鈕在相同的像素尺寸相同,但是使用CSS呈現(xiàn),我可以放大到零圖像退化。
那是一個(gè)美麗的東西不是嗎?道德是“無形象的長(zhǎng)期趨勢(shì)已經(jīng)得到了回報(bào),為我們提供了更少的擔(dān)心比我們已經(jīng)視網(wǎng)膜屏幕反擊,當(dāng)我們使用梯度圖像,陰影,圓角和幾乎其他任何先進(jìn)的樣式。重要的是要注意,呈現(xiàn)與HTML5畫布和JavaScript對(duì)象可以實(shí)現(xiàn)類似的可伸縮性。
SVG
SVG或可縮放矢量圖形,是另一個(gè)重要的步驟在路上解決獨(dú)立。這種技術(shù)已經(jīng)存在多年,但最近才看到IE9終于跟風(fēng)的跨瀏覽器支持。當(dāng)我想到SVG Adobe Illustrator的我認(rèn)為。這個(gè)程序主要是用來創(chuàng)建基于矢量的圖形與無限的可伸縮性。反過來,SVG web圖形帶來同樣的功能。幾乎任何你可以構(gòu)建在插畫家和其他矢量編輯應(yīng)用程序可以很容易地導(dǎo)出為一個(gè)SVG文件在網(wǎng)絡(luò)上和實(shí)現(xiàn)為一個(gè)可伸縮的對(duì)象。這里的優(yōu)勢(shì)在CSS起初看起來模糊,但當(dāng)你處理復(fù)雜圖像變得清晰。很容易創(chuàng)建簡(jiǎn)單的按鈕用CSS但是當(dāng)涉及到建筑說,星巴克的標(biāo)志,事情就開始變得混亂和復(fù)雜。
替代小時(shí)和小時(shí)的CSS篡改甚至數(shù)百行代碼為單個(gè)對(duì)象(假設(shè)它甚至可能與CSS),您可以導(dǎo)出一個(gè)向量版本的星巴克標(biāo)志作為一個(gè)SVG和嵌入到web頁面中只有一兩分鐘!點(diǎn)擊這里查看現(xiàn)場(chǎng)的例子。一定要放大命令+和觀察圖像的尺度。想要了解更多關(guān)于如何實(shí)現(xiàn)站點(diǎn)中的SVG,看看這些偉大的資源:
分辨率獨(dú)立使用SVG
使用SVG靈活、可伸縮的和有趣的背景,我一部分玩SVG設(shè)計(jì)但是照片呢?這是不錯(cuò),但考慮到我們已經(jīng)解決無形象的網(wǎng)頁設(shè)計(jì)與UI這么長(zhǎng)時(shí)間,沒有那么多的曲線球和SVG進(jìn)行更深層次的東西。真正的問題在于在網(wǎng)絡(luò)上照片。照片是光柵圖像,因此他們只是粉碎的夢(mèng)想決議真正獨(dú)立的網(wǎng)頁設(shè)計(jì)。無論如何我們退出袋網(wǎng)頁設(shè)計(jì)技巧,我們不能繞過這個(gè)限制。就目前而言,這意味著不同的設(shè)備提供不同的圖像。這很糟糕,但你不想讓non-retina屏幕負(fù)載在這些巨大的圖片和你不想提供讓人郁悶的視網(wǎng)膜屏幕圖像,這是你唯一的解決方案。
這可以通過媒體查詢和device-pixel-ratio特性。作為一個(gè)例子,哈爾Gatewood主持向我們展示了我們?nèi)绾文繕?biāo)第三代iPad:
HTML嵌入式圖像呢?
上面的方法都很好,但它只適用于CSS背景圖像。如果你想使用HTML嵌入圖像?進(jìn)一步,這對(duì)視頻有劇烈的影響,所以你怎么能提供自定義視頻高ppi顯示器?不幸的是,使用純HTML沒有真正的答案。也許需要將變得如此巨大,以至于將來我們會(huì)看到這樣的東西,但是現(xiàn)在,你運(yùn)氣不好。唯一的解決辦法是把一些更強(qiáng)大的JavaScript。Bdoran.co。英國有一個(gè)快速的例子如何檢測(cè)與JavaScript和PHP iPhone 4,你應(yīng)該看看。這顯然給網(wǎng)頁設(shè)計(jì)師帶來了巨大的問題盡管那些試圖堅(jiān)持HTML和CSS和其他不熟悉JavaScript和先進(jìn)的網(wǎng)絡(luò)技術(shù)。突然,這組甚至不能呈現(xiàn)簡(jiǎn)單的內(nèi)容,優(yōu)化大多數(shù)設(shè)備上查看。
結(jié)論
沒關(guān)系如果你喜歡蘋果或絕對(duì)討厭他們代表的一切,事實(shí)是,如果你是一個(gè)網(wǎng)頁設(shè)計(jì)師,視網(wǎng)膜顯示屏的崛起將啟動(dòng)這一趨勢(shì)將從根本上改變你建立網(wǎng)站的方式。在這個(gè)時(shí)間點(diǎn)上我們有一些課程的行動(dòng)去探索:HTML5畫布,JavaScript,CSS3、SVG和媒體查詢組成你的武器來攻擊你的內(nèi)容的問題被認(rèn)為在264 ppi的向上。
希望在不久的將來,我們會(huì)看到更健壯的選項(xiàng)彈出不同的html的圖片和視頻服務(wù)正確的設(shè)備。
