Retina Ekranda Tasarım: Retina MacBook Pro'daki Düşüncelerim

İnç başına 220, 5 piksel: Toplam beş milyonun üzerinde piksel için 2.800 geniş ve 1.800 yükseklik. Şu anda üzerinde çalıştığım ekran, tam zamanlı. Bu tonlarca soruya yol açar: Apple'ın böyle bir ekran yapan herhangi bir işi var mı? Sektöre yardımcı olacak veya engelleyecek mi? Retina olmayan ekranlar için tasarım yapıyorsanız, bu konuda gerçekten tasarım yapabilir misiniz?

Bugün size işinizi yapma şeklinizi değiştirmekle tehdit eden makine ile ilgili deneyimlerimi anlatacağım. Beni sevdiğim ve beni neyin tahrik ettiği konusunda rant yaptığım için hiçbir şey tutmayacağım. Birlikte okuyun ve sonuçlarıma katılıp katılmadığınızı görün.

Envato Elements'i keşfedin

Dang You Elma

Son on yıldır, tasarımcılar, sürekli değişen ekran boyutları biçiminde büyük bir paradigma değişimiyle nasıl başa çıkılacağına odaklandık. Bu zorluk bizi zekâmızın sonuna kadar uzattı, ancak diğer tarafın daha iyi tasarımcıları ortaya çıkardı, her boyutta ekranda harika görünen gerçekten esnek web sitelerinin etkileyici özelliklerini elde edebildi.

Mediaqueri.es her yerde harika görünen duyarlı web tasarımını sergiliyor.

Dikkatimizi bir büyük paradigma değişimine odaklamış olsak da, bir diğeri bize saptı: çözüm. Bu değişimin ardındaki ivme, son zamanlarda iPhone, iPod Touch, iPad ve MacBook Pro'da bulunan “retina” kalitesinde ekranlarla Apple'dan geldi, iMac ve MacBook Air'in gelecek yıl veya iki yıl içinde hiç şüphesiz .

Apple, yüksek çözünürlüklü ekranları iten ilk veya tek elektronik üreticisi olmayabilir veya neredeyse hiçbir şey için ilk değildir. Ancak, beğen ya da beğenme, tarihsel olarak büyük teknoloji değişimlerinin yaygın olarak benimsenmesi için işaret koymuşlardır (bu, söylediğim diğer her şeyi atladığınız kısımdır, böylece yorumlarda ne kadar doğru olmadığını söyleyebilirsiniz).

Ekran boyutu devriminde olduğu gibi, bu da tasarımcılara her şeyi değiştiren büyük bir paradigma değişimi sunuyor. Bu engelin üstesinden gelmek daha zor olabilir ve acil dikkat ve spekülasyonlar gerektirir. Mart ayında, bu konuyla ilgili bir tartışma yayınladım.

O zamandan beri Retina MacBook Pro'yu satın aldım, retina ekranını güzel küçük iOS duvarlı bahçesinden ve her türden insanın iş için kullanacağı bir şey alanına sürükleyen makine. Makinede tam zamanlı çalıştıktan haftalar sonra, deneyimlerimi sizinle paylaşmanın uygun olacağını düşündüm.

Retina Ekranlar Var Olmalı mı?

“Yüksek yoğunluklu ekranların büyüdükçe büyüdüğümüzü sormaya başlıyorum, neden? Sadece yapabileceğimiz için mi? ” - John Carey
Elli Ayak Gölgesi

Son zamanlarda, endüstriyi böylesine zahmetli bir yola ittiği için Apple'a oldukça kızgın olan reklam öğelerinden birkaç makale okudum. Ian Malcom, dinozorları ölümden geri getirme konusundaki aceleci kararı için John Hammond'ı kandırıyor gibi, bu eleştirmenler, Apple'ın böyle bir ekran yapabilmesi nedeniyle, olması gerektiği anlamına gelmediğinde ısrar ediyorlar.

Retina ekranı ile bir gün beni eleştirmenlerin yanlış olduğuna ikna etti. Çok güzel. Artık eski MacBook'uma bakmaya zar zor dayanamıyorum. Gözlerim açıldı ve aniden hiçbir sorun yaşamadığım aynı ekran karanlık ve çamurlu görünüyor.

VCR'de Durdurmalıyız?

Bunun nasıl olduğunu kendiniz deneyimlemeden gerçekten takdir etmenin tek yolu, eski bir CRT televizyonu bulmak ve bir VCR'ye bağlamaktır, böylece bir film izleyebilirsiniz. Cidden, git ve dene. Saniyeler içinde dünyada bu kadar kötü bir görsel deneyime nasıl dayanabildiğinizi merak edeceksiniz. Bundan on dakika sonra her gün yüce Blu-ray için teknoloji tanrılarına teşekkür edeceksiniz.

VHS kasetlerden geçmek acı vericiydi, ama şimdi geriye dönüp bakmaya değdi.

Şu an sahip olduğumuz bakış açısıyla, geriye dönüp baktığımızda, film endüstrisindeki müşteriler ve yapımcılar, video çoğaltma ve dağıtımın birincil yöntemi olarak VHS kasetini geride bıraktıklarından daha iyi durumdalar. Devrim dahil olan herkes için rahatsız edici miydi? Kesinlikle.

İçerik oluşturucuların yeni şeyler yapmanın öğrenmesi, benimsemesi ve hatta geliştirmesi gerekiyordu. Müşteriler eski ekipmanı ve çok sayıda içeriği terk etmek, öncekilerle gereksiz görünen yeni satın alımlar yapmak, yeni jargon öğrenmek zorundaydı; Dağınıktı. Ve bu onları sadece DVD sahnesine getirdi, birçoğu hala Blu-ray'e, hatta iTunes ve Apple TV gibi tamamen dijital bir çözüme atlamanın ortasında.

“Avanslar kimseyi rahatsız edip etmeyeceklerine dayanmıyor. Özellikle Apple sürücü koltuğundayken. ”

Yüksek çözünürlüklü bilgi işlemin gelmesi, hem tüketiciler hem de içerik oluşturucular için aynı sorunları sunar. Ne yazık ki, teknoloji endüstrisi böyle çalışıyor. Onlar için bir pazar olduğunda ve tüketicilerin karşılayabileceği kaliteli bir sonuç elde etmek için teknolojik bilgi mevcut olduğunda ilerlemeler sağlanır. Kimseyi rahatsız edip etmeyeceklerine dayanmazlar. Özellikle Apple sürücü koltuğundayken.

Ve bu iyi bir şey. Tabii ki böyle görünmeyebilir, ancak bir zamanlar bilgisayar monitörlerinin sadece bir avuç renge sahip olduğunu ve endüstride daha fazla gitmemeleri konusunda ısrar eden insanlar olduğunu iddia edebileceğinizi unutmayın. Yaptıkları için memnun olduğunuza eminim, bu yüzden tekme ve ilerlemeye çığlık atan insanlardan biri olmayı bırakın ve bunun yerine zorluklara kafa kafaya saldırmaya ve konuşmaya değerli bir şey katmaya çalışın.

Retina MacBook Pro'da Yaşamak ve Çalışmak

“Bazı sıkıntılar olacağını biliyordum, ve var.”

Retina ekranlarının genel pazarda var olup olmayacağı gerçekten alakasız bir tartışmadır. Yapıyorlar ve iki seçeneğiniz var: uyum veya öl. Bu seçimle karşı karşıya olduğum eski bir baskı tasarımcısı olarak, Flash geliştiricileri şu anda bu seçimle karşı karşıya, kulübe de katılabilirsiniz.

Tamamen adaptasyon hakkındayım, bu yüzden erken benimseyen rotayı izledim ve nereye gittiğine dair bir fikriniz olmadan önce bu trene atladım. 2007 13 ″ MacBook'umu geride bıraktım ve yepyeni bir 15 ″ Retina MacBook Pro aldım.

Bazı sıkıntılar olacağını biliyordum ve var. Endişelendiğim bazılarının çok önemli olmadığı ortaya çıktı, bazıları da güvenmediğim ve beni hayal kırıklığına uğrattı.

Bin Şapka

Herhangi bir günde birkaç metaforik şapka takıyorum. Ben bir tasarımcı, yazar, fotoğrafçı, web tarayıcısı, film izleyicisiyim; Adını koy.

Bu nedenle, retina ekran açısından birçok farklı deneyime dair fikir verebilirim. Kuşkusuz değilim bir şey bir oyuncu. Bir Nintendo denetleyicisine bağlı olarak büyüdüm ve PC oyunlarına hiç ilgi duymadım, bu yüzden başka bir yerde bu alanda fikir edinmek isteyip istemediğinizi sormanız gerekecek.

İşte günlük kullanımın bazı ana kategorilerine ve her biri hakkındaki düşüncelerime bir bakış.

Genel İşletim Sistemi Kullanımı

Şu anda OS X Lion kullanıyorum ve retina grafikleri için% 99 güncellenmiş görünüyor. Arada sırada pikselli görünen bir düğmenin sitesini yakalarım, ancak sadece çok az kullanılan zaten derinlemesine gömülü yardımcı programlarda.

Çoğunlukla, ekran burada parlıyor. Her şey kesinlikle çarpıcı görünüyor. Apple sadece çekirdek sistemi değil, uygulamalarının çoğunu iMovie gibi de güncelledi.

Üçüncü Taraf Uygulamaları

Makineyi satın aldığımda bu alan endişeliydi, ancak olacağını düşündüğüm daha az önemli bir sorun olduğu ortaya çıktı.

Sublime Text 2 gibi en sevdiğim uygulamaların çoğu ilk başta kaba görünüyordu, ancak onları her zamankinden daha iyi hale getiren retina güncellemeleri aldı.

Ancak, çoğu uygulama henüz güncellenmedi, ancak bir uygulama bağımlısı olmasına rağmen, günlük olarak kullandığım pek çok uygulama yok. Daha sonra tartışacağımız CS6'nın hariç tutulmasıyla, her gün beni gerçekten rahatsız eden tek uygulama Mac için Twitter.

Bu uygulama gerçekten retina ekranda retina olmayan grafiklerin önemini sergiliyor. İlginç bir şekilde, “yeni tweet” penceresinde meydana gelen gibi, canlı, düzenlenebilir metin iyi görünüyor, ancak metinden avatarlara kadar tüm akışınız iğrenç.

Web'de Gezinme

“Kötü görünen küçük görüntüler. Web sitesinin en üstündeki küçük JPG logosu, arayüz ekran görüntüsü… ”

Web'de gezinme beni gerçekten korkuttu. Web'in düşük çözünürlüklü bir dünya olduğunu ve 15 ″ retina ekranını işaret etmenin düşük DPI'lı bir fotoğrafa büyüteç çekmek gibi olduğunu çok iyi biliyordum.

Şaşırtıcı bir şekilde, tamamen tesadüfen bile, bu devrime oldukça iyi hazırlandık. Görüntü olmadan web grafikleri oluşturarak bant genişliğinden tasarruf etme takıntımızda, aslında sonsuz ölçeklenebilir bir web oluşturuyorduk.

Günümüzde çoğu kullanıcı arayüzü iyi eski HTML, CSS ve JavaScript ile oluşturulmuştur. Bu grafiklere retina ekranı atmak onları daha iyi gösterir! Kayıt için aynı şey kesinlikle Flash siteleri için söylenemez.

Asıl sorun elbette imgelerde yatıyor. İlginç bir şekilde, web taramamın çoğu tek bir kaşıntı olmadan geçiyor ve ben bir çözüm somunuyum.

Profesyonel fotoğraflar özellikle harika görünüyor. Flickr veya 500 piksele gidin ve deneyimi her zamanki gibi eğlenceli, belki daha da eğlenceli bulacaksınız.

Kötü görünen küçük görüntüler. Web sitesinin üstündeki küçük JPG logosu, arayüz ekran görüntüsü, bunlar piksel ikiye katlamak için çalışmak için çok fazla bilgiye sahip değil ve bu nedenle oldukça acınacak görünüyor.

Filmler ve TV Şovları

Retina MacBook Pro, optik sürücüsünü MacBook Air gibi hurdaya ayırdı, bu yüzden DVD'lerle ilgili herhangi bir deneyimim olmadı, ancak çoğunlukla videolar görüntü gibi. Harika daha iyi görünüyor ve kötü daha kötü görünüyor.

Dijital olarak indirilen HD filmler ekranda parlarken, Netflix / Hulu canlı akışı belirgin bir şekilde pürüzlü görünüyor. Neyse ki, tipik olarak bir şovu izlediğim mesafe, çalıştığım yerden çok daha geri, bu yüzden herhangi bir çözüm sorunu genellikle farkedilmez.

fotoğrafçılık

Canon 5D Mk II ile çekim yaptığım için fotoğraflarım güzel ve geniş çıkıyor. Retina ekranda harika görünüyorlar ve yakınlaştırmak ve ince ayrıntıları düzenlemekle ilgili herhangi bir sorun yaşamadım. Tek gerçek sorun, yazılımın (Photoshop ve Lightroom) CS6'da bile retina güzelleştirilmemiş olmasıdır.

yazı

Saf yazma açısından, retina ekranı şaşırtıcı derecede iyi. İnç başına 220 piksel olan tipografi güzel bir şeydir. Writeroom'u kaldırıyorum, tam ekran moduna geçiyorum ve dünyayı engelliyorum.

Birkaç saat sonra, tipin nasıl göründüğünü unutmak kolaydır. Ancak, düşük çözünürlüklü bir ekranda bir metin belgesi getirildikten sonra saniyeler içinde gördüğüm tek şey pikseldir. Kirli, çirkin pikseller.

Tip sadece kol uzunluğunda iyi görünmüyor. Yüzümü ekrana yakın tutabiliyorum, gözlerim idare edebiliyor ve tip hala keskin görünüyor.

Tipografi retina ekranında güzel bir şekilde keskindir.

Photoshop, Tasarım ve Ekran Görüntüleri

Şimdi gerçekten duymak istediğiniz bölüm geliyor: Photoshop nasıl? Bu konuda tasarım yapabilir misiniz?

iOS Tasarımcıları Yararlı Bulmalı

Bir iOS tasarımcısı olmadığımı söyleyerek başlayacağım. Bu adamlar şimdiye kadar retina olmayan ekranlarda retina grafikleri tasarlamak zorunda kaldılar ve geçiş yapmaya istekli olduklarını hayal ediyorum.

Tersi bir sorunum var: retina ekranında retina olmayan grafikler tasarlamak. Bunun bir acı olmasını beklemiyor olabilirsiniz, ama dürüst olmak gerekirse, gerçekten de öyle.

Bunun nedeni, daha düşük ppi aralığında olduğunuzda tüm çözünürlük kavramını kaybetmenizdir. Tararken küçük tırtıklı görüntüleri görmezden gelebilirim, ancak içerik oluşturucunun sandalyesinde olduğumda beynim her pikseli inceler.

Piksel iki katına sanat berbat

“Resmin eşit olup olmadığını doğru bir şekilde hissetmek için eski ekranımda bir göz atmam gerekiyor.”

Retina ekranında, standart bir web çözünürlüğünde Photoshop'a aktardığım veya içe aktardığım her şey saçmalık gibi görünüyor. Vektörde bir şey oluştursam bile, bir SVG olarak dışa aktarmak istemezsem ve çoğu zaman bu bir seçenek değil (henüz), yine de süper pikselli görünen küçük bir JPG veya PNG'ye çıktı alacak çünkü ekranım çözünürlüğünü iki katına çıkarmaya çalışıyor.

Bu, hem kendi çalışmamla hem de başkalarıyla çalıştığımda birçok zor sorun sunuyor. Kendi sanat eseri için, düşük çözünürlüklü inşa etmeli miyim? Aksi takdirde, netliğini yargılama yeteneğim bozulur. Yoksa yüksek çözünürlüklü yapmalı mıyım? Fark edip etmediğinizden emin değilim, ancak ölçeklendirme sırasında Photoshop gerçekten raster resimlerini çöp kutusuna atabilir.

Başka birinden sanat eseri kullanırken de bir sorun var. Bir tasarımcıysanız, muhtemelen genellikle bok ve pikselli üçüncü taraf sanat eserleri alırsınız. Sonuç olarak, ya daha iyi sanat yapıtını kullanmayı tamamen kullanmayı tercih edersiniz.

Benim için bu çok daha zor, çünkü ilk bakışta, büyük olmadıkça retina ekranında her zaman kötü görünecek. Resmin eşit olup olmadığını doğru bir şekilde hissetmek için eski ekranımda bir göz atmam gerekiyor.

Ekran görüntüleri

"Birden çektiğim ekran görüntüleri istediğim boyutun iki katı!"

Yaşamak için blog yaptığım göz önüne alındığında, ortalama bir insandan daha fazla ekran görüntüsü aldığımı söylemenin güvenli olduğunu düşünüyorum. Her zaman bir uygulama arayüzünden veya web sitesinden ekran görüntüleri ile çalışıyorum ve bunları yayınlara dahil ediyorum.

Retina ekranı beni kötü bir eğri topuyla vurdu. Aniden, aldığım ekran görüntüleri istediğim boyutun iki katı! Yeniden boyutlandırıldığında, raster grafikleri ve küçük metinleriyle UI ekran görüntüleri herhangi bir ekranda gerçekten kötü görünüyor, bu yüzden bunları mümkün olduğunca her zaman% 100'de kullanmaya çalışıyorum.

Retina ekranla, 510 piksel genişliğindeki ekran görüntüsü (standart Design Shack görüntü boyutu) artık 1.020 piksel genişliğindeydi. Retina kullanıcılarını tamamen görmezden gelir ve varmış gibi davranırsam, mantık 510 piksel genişliğindeki görüntüleri sunmam gerektiğini söyler, bu da onları Photoshop'ta manuel olarak yeniden boyutlandırmam ve oldukları gibi görünmeleri gerektiği anlamına gelir. sadece rasterleştirilmiş metin söz konusu olduğunda bir kamyon tarafından çalıştırılır.

Dikkat edin, elbette bana çoğu kullanıcıdan daha kötü görünüyorlar, çünkü tahmin ettiniz, retina ekranındayım.

Çözümünüzü Değiştirin Aptal

Ekran görüntüsü ikilemi birkaç farklı kişiye sundum ve hepsi aynı şeyi söylüyor: sadece kararınızı değiştirin! Bu mükemmel bir çözüm gibi görünüyor, ama o kadar basit değil.

Retina MacBook Pro, beş farklı çözünürlük ayarı ile birlikte gelir. İki farklı çözünürlük seçersem, aynı pencerenin ekran görüntüsünü alırsam ve bunları Photoshop'ta yan yana yapıştırırsam ne olur?

Gördüğünüz gibi, aynı boyutta çıkıyorlar. Sistem Tercihleri'ndeki çözünürlüğün değiştirilmesi, toplam ekran görüntüsünün toplam boyutunu etkiler, ancak çoğu zaman ekran görüntüsündeki öğeler değişmeden çıkar.

Kayıt için, bu pencerenin ne kadarını tam boyutta 510 piksel genişliğinde bir belgeye sığdırabilirim:

Eğer sadece lanet ettiysen, o zaman tepkime benimkiyle açıktı.

Parlak, Keskin Bir Ekranda Çalışma

“Günün yarısını bir retina ve retina olmayan ekran arasında atlamak tam anlamıyla beni hasta hissettirdi!”

Eski MacBook'umda genellikle tam parlaklıkta çalıştım. Pil ömrü, göz yorgunluğu ve ne hakkında tonlarca şey okudum ama parlaklık kranklanmadıkça görünüşünü hiç sevmedim.

Bu yeni ekranda, tam parlaklık çoğu aydınlatma senaryosu için kesinlikle çok parlak. Retina ekranı? Daha çok retina yanan ekran gibi. Bu harika olsa da, çok parlak ve kapatılması gereken bir ekran olmasını tercih ederim.

İlginçtir, geçişten bu yana ara sıra baş ağrıları fark ettim. Ekran çok parlak ve keskin, gözlerde daha kolay olduğunu düşünürsünüz, ancak çok ileri gittiği ve kaydettiğinden daha fazla göz yorgunluğuna neden olan bir nokta olabilir. Parlaklığı kontrol altında tuttuğum sürece, bunun uzun vadede önemli bir sorun olacağını düşünmüyorum.

Ekranın keskinliği gerçekten sadece birinci günde, her şeyi eski makineden yenisine aktarırken bir sorundu. Günün yarısını bir retina ve retina olmayan ekran arasında atlamak tam anlamıyla beni hasta hissettirdi!

Büyüyen ağrıları

“Yeni teknoloji ile yeni zorluklar geliyor ve benim gibi erken benimseyenler fiyatı ödeyenler”

İşte orada, yeni Retina MacBook Pro'mla ilgili övgü ve şikayetlerin tam listesi. Kasıtlı olarak, bu makale bir retina ekranında çalışmanın avantajlarından daha fazla zorluklara odaklanmıştır. Tamamen dürüst olursam, faydalar beni uçuruyor ve satın alma işlemimden biraz pişman değilim. Bu bilgisayarı kesinlikle seviyorum ve şimdiye kadar kullandığım en iyi olduğunu söylemekten çekinmeyin.

Yukarıda listelediğim tüm mücadeleler sadece büyüyen acılardır. Yeni teknoloji ile yeni zorluklar geliyor ve benim gibi erken benimseyenler, kimsenin sahip olmadığı parlak yeni oyuncaklara sahip olmak karşılığında fiyatı (mecazi ve tam anlamıyla) ödeyenler.

Yıllar geçtikçe, tüm yeni bilgisayarlar 220ppi'ye çarptığında ve standart bileşenler olarak katı hal sürücülerine sahip olduğunda, bu teknoloji için fiyat etiketi çok daha uygun olacak ve neredeyse kullanılmayacak cezalar olacak.

The Verge'den bilgisayar ekran çözünürlüğü karşılaştırması

Yukarıda listelediğim hemen hemen her şikayet, benim için tasarladığım insanlardan daha yüksek çözünürlüklü bir ekrana sahip olduğum gerçeğine dayanıyor. Hepimiz aynı sayfaya geldiğimizde, her şey önemli ölçüde basitleştirilecek.

Bununla birlikte, retina kalitesinde bir ekrana sahip bir cihaza sahip olmanın, şimdi web'de karşılaştığımız görüntü sorunu için aciliyet duygusunuzu artırabileceğini söyleyeceğim. Retina kullanıcılarının güzel görüntülere sahip olmasını istiyorsunuz, ancak retina olmayan kullanıcılar için yükleme süresine değer mi? Neyse ki, Retina.js gibi bazı gerçekten harika çözümler ortaya çıkmaya başlıyor, bu da bu sorunu kolaylaştıracak.

Yine de, eskiden kullandığımız görüntüleri iki katına çıkarmamız ve yüklememiz gereken yakın bir gelecek, heyecanlanacak bir şey değil mi?

Ne düşünüyorsun?

İnşallah, bu büyük rant tam bir driv yığını değildi. Niyetim, bir retina Mac satın alıp almamalarını merak eden tasarımcılara bilinçli bir karar vermelerine yardımcı olmaktı. Çok fazla kaynak şu anda ya sadece iyi ya da kötü olanları listeliyor ve tüm düşüncelerimi paylaşmak ve retina Mac'in sizin için doğru olup olmadığına kendiniz karar vermenize izin vermek istedim.

Bu notta ne düşünüyorsun? Henüz retina kalitesinde bir ekrana sahip bir bilgisayar satın almadıysanız, yakında istediğiniz zaman olacağını düşünüyor musunuz? Neden ya da neden olmasın? Eğer varsa, ne düşünüyorsun? Başkalarına tavsiye eder misiniz?