準(zhǔn)備好了，這里來了高清網(wǎng)頁設(shè)計(jì)

創(chuàng)新互聯(lián)：準(zhǔn)備好了，這里來了高清網(wǎng)頁設(shè)計(jì)。蘋果是推動高新技術(shù)產(chǎn)業(yè)發(fā)展增加iPhone和iPad屏幕上的像素密度。從用戶的角度來看這是偉大的,但作為一個(gè)網(wǎng)頁設(shè)計(jì)師或開發(fā)者它實(shí)際上可能完全改變你建立網(wǎng)站的方式。

你準(zhǔn)備好高清網(wǎng)頁設(shè)計(jì)嗎?你知道你的網(wǎng)站將會在新一代的高分辨率屏幕上嗎?你可以采取什么步驟來準(zhǔn)備自己,你將需要什么技能在未來幾年?繼續(xù)讀下去你會發(fā)現(xiàn)。

當(dāng)蘋果說,我們聽

我一直在使用mac OS 9天以來忠實(shí),不只要一些舊定時(shí)器但長時(shí)間喝的飲料,完全沉迷于一切蘋果。我記得看到一個(gè)蘋果標(biāo)志意味著產(chǎn)品是一個(gè)利基,局外人,只有社會的頑固的個(gè)人使用在一個(gè)公開的試圖違背主流,Windows-loving文化?！叭绻汶S機(jī)選擇一所房子,你就會發(fā)現(xiàn)至少有一個(gè)iPod,iPhone和iPad里面?！蓖ㄟ^一個(gè)令人印象深刻的變換建立在致力于創(chuàng)造創(chuàng)新的下一代產(chǎn)品,小失敗者公司現(xiàn)在已經(jīng)成為世界上最有價(jià)值的公司?？赡軟]有Mac在每個(gè)桌面在美國,但如果你隨機(jī)選擇一棟房子,你會發(fā)現(xiàn)至少有一個(gè)iPod,iPhone和iPad里面。

我不打算雄辯，讓你對我有所崇拜,我只是想證明在科技行業(yè)里，蘋果公司是一個(gè)有權(quán)勢的。沒有人再關(guān)心新特性的牛頓出來,但是當(dāng)蘋果發(fā)布一個(gè)新的iOS設(shè)備,世界停止和耐心地聽在無限循環(huán)的向?qū)Ц嬖V我們未來會是什么樣子。

蘋果公司押注高分辨率

直到最近,蘋果已經(jīng)與我們對更好的屏幕分辨率。更大更好的高清電視的關(guān)注消費(fèi)者和電子公司十年了。聰明的營銷與令人印象深刻的技術(shù)來創(chuàng)建一個(gè)永不滿足的渴望高清屏幕,有線電視節(jié)目和電影。在大多數(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ī)則。有很多猜測,擴(kuò)展這種技術(shù)在一個(gè)負(fù)擔(dān)得起的利率幾乎不可能,但蘋果所做的事也加倍決議第三代iPad,而在264 ppi略低,但仍華麗。

為什么這完全改變了你如何做你的工作

誰會在乎iPad的像素密度?作為一個(gè)網(wǎng)頁設(shè)計(jì)師,你做什么,你是否知道它。問題是明顯的在這個(gè)網(wǎng)站上,以及任何其他你今天將訪問。去吧,抓住一個(gè)圖像從網(wǎng)絡(luò)和在Photoshop中打開它。現(xiàn)在打開圖像大小對話框。看到什么有趣的東西嗎?網(wǎng)頁設(shè)計(jì)師總是有一個(gè)很好的小優(yōu)勢印刷設(shè)計(jì)師:我們可以用低分辨率的藝術(shù)品。為什么它是一種優(yōu)勢而不是劣勢?因?yàn)榉直媛史謱覲SDs可以使您的機(jī)器變得很慢,圖片分辨率花費(fèi)更多的錢,高分辨率的圖像花永遠(yuǎn)負(fù)載在網(wǎng)絡(luò)上,這樣的例子不勝枚舉。不過,問題是明確上圖僅72 ppi在新的iPad 264 ppi !(這個(gè)觀點(diǎn)有點(diǎn)過于簡單化了,讀這篇文章獲取更多信息你是否查看圖片72 ppi。)

想想這意味著什么。蘋果已經(jīng)在完整的iOS行視網(wǎng)膜顯示:觸控式iPod,iPhone和iPad。這意味著數(shù)以百萬計(jì)的人每天都瀏覽網(wǎng)頁高分辨率的屏幕上,不會正確顯示您的圖片。毫無疑問,這一趨勢只會變得更糟,因?yàn)槠渌O(shè)備制造商玩趕上和蘋果探索方法帶來更多的像素密度下一個(gè)明顯的地方:筆記本電腦市場。

你能做什么?

像素密度問題是一個(gè)有趣的問題。網(wǎng)絡(luò)代表了這么多不同的技術(shù)，在和諧相處，它可以是混亂的，如果其中一個(gè)技術(shù)，擾亂了平衡。我們見證了更高分辨率的屏幕的出現(xiàn)，但我們的內(nèi)容只是為舊屏幕進(jìn)行了優(yōu)化。進(jìn)一步，考慮如何瘋狂的web開發(fā)者對網(wǎng)頁加載時(shí)間和低分辨率的圖像，現(xiàn)在想象一下慢下來你會得到一個(gè)像Pinterest的圖像重網(wǎng)站如果突然充滿了326ppi圖像!

純HTML和CSS的網(wǎng)頁元素

好消息是,在某些方面我們已經(jīng)準(zhǔn)備多年,我們甚至不知道它。CSS3和HTML5的崛起真的推動減少圖像的數(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è)美麗的東西不是嗎?道德是“無形象的長期趨勢已經(jīng)得到了回報(bào),為我們提供了更少的擔(dān)心比我們已經(jīng)視網(wǎng)膜屏幕反擊,當(dāng)我們使用梯度圖像,陰影,圓角和幾乎其他任何先進(jìn)的樣式。重要的是要注意,呈現(xiàn)與HTML5畫布和JavaScript對象可以實(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è)可伸縮的對象。這里的優(yōu)勢在CSS起初看起來模糊,但當(dāng)你處理復(fù)雜圖像變得清晰。很容易創(chuàng)建簡單的按鈕用CSS但是當(dāng)涉及到建筑說,星巴克的標(biāo)志,事情就開始變得混亂和復(fù)雜。

替代小時(shí)和小時(shí)的CSS篡改甚至數(shù)百行代碼為單個(gè)對象(假設(shè)它甚至可能與CSS),您可以導(dǎo)出一個(gè)向量版本的星巴克標(biāo)志作為一個(gè)SVG和嵌入到web頁面中只有一兩分鐘!點(diǎn)擊這里查看現(xiàn)場的例子。一定要放大命令+和觀察圖像的尺度。想要了解更多關(guān)于如何實(shí)現(xiàn)站點(diǎn)中的SVG,看看這些偉大的資源:

分辨率獨(dú)立使用SVG

使用SVG靈活、可伸縮的和有趣的背景,我一部分玩SVG設(shè)計(jì)但是照片呢?這是不錯,但考慮到我們已經(jīng)解決無形象的網(wǎng)頁設(shè)計(jì)與UI這么長時(shí)間,沒有那么多的曲線球和SVG進(jìn)行更深層次的東西。真正的問題在于在網(wǎng)絡(luò)上照片。照片是光柵圖像,因此他們只是粉碎的夢想決議真正獨(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)一步,這對視頻有劇烈的影響,所以你怎么能提供自定義視頻高ppi顯示器?不幸的是,使用純HTML沒有真正的答案。也許需要將變得如此巨大,以至于將來我們會看到這樣的東西,但是現(xiàn)在,你運(yùn)氣不好。唯一的解決辦法是把一些更強(qiáng)大的JavaScript。Bdoran.co。英國有一個(gè)快速的例子如何檢測與JavaScript和PHP iPhone 4,你應(yīng)該看看。這顯然給網(wǎng)頁設(shè)計(jì)師帶來了巨大的問題盡管那些試圖堅(jiān)持HTML和CSS和其他不熟悉JavaScript和先進(jìn)的網(wǎng)絡(luò)技術(shù)。突然,這組甚至不能呈現(xiàn)簡單的內(nèi)容,優(yōu)化大多數(shù)設(shè)備上查看。

結(jié)論

沒關(guān)系如果你喜歡蘋果或絕對討厭他們代表的一切,事實(shí)是,如果你是一個(gè)網(wǎng)頁設(shè)計(jì)師,視網(wǎng)膜顯示屏的崛起將啟動這一趨勢將從根本上改變你建立網(wǎng)站的方式。在這個(gè)時(shí)間點(diǎn)上我們有一些課程的行動去探索:HTML5畫布,JavaScript,CSS3、SVG和媒體查詢組成你的武器來攻擊你的內(nèi)容的問題被認(rèn)為在264 ppi的向上。

希望在不久的將來,我們會看到更健壯的選項(xiàng)彈出不同的html的圖片和視頻服務(wù)正確的設(shè)備。

網(wǎng)站欄目：準(zhǔn)備好了，這里來了高清網(wǎng)頁設(shè)計(jì)
文章位置：http://www.muchs.cn/news14/162714.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)