Projektowanie grafiki dla iOS i Retina

W tym artykule chciałbym zebrać kilka najważniejszych z mojego punktu widzenia wytycznych projektowych związanych z tworzeniem aplikacji na nowe platformy iOS. Materiał jest częścią e-booka, który stworzyłem na potrzeby obszernego Kompendium Projektowania Aplikacji iOS, które dostępne jest w serwisie eduweb.pl.

Zebrane tutaj elementy oczywiście nie wyczerpują obszernego tematu projektowania dla iOS i są z pewnego punktu widzenia zbiorem moich subiektywnych spostrzeżeń, które zebrałem podczas pracy z projektowaniem i wdrażaniem aplikacji iOS. Zapraszam Was do dyskusji i komentowania tego artykułu.

Projektowanie w skali dla iOS

O co chodzi z @1, @2, @3? Co to są skale 2x i Retina HD? Jeśli te terminy jeszcze nie są Ci znane – sprawdź najpierw koniecznie jedną z lekcji kursu Projektowania dla iOS, którą udostępniam za darmo:

Skoro już wiesz, skąd wzięło się skalowanie i jak działa na urządzeniach iOS – oto kilka prostych, praktycznych wskazówek dla osób, które zastanawiają się od jakiej skali zacząć projektowanie a nie mają pojęcia w jakiej skali pracować.

Po pierwsze, jest to sprawa indywidualna. Osobiście nie mam tak, że pracuję w jednej skali i koniec. Są zalety pracy w każdej skali i trzeba je po prostu znać aby dokonać dobrego wyboru. Osobiście, zauważyłem że dla mnie najczęściej determinuje to jeden powód: W Photoshop wolę pracować tak, żeby podgląd 100% z grubsza odpowiadał fizycznym rozmiarom urządzenia, zatem projektuję w skali 1x lub 2x na MBP z Retiną. W Sketch jest mi wszystko jedno i dlatego najczęściej projektuję w takiej skali, do jakiej mam dobre zasoby np. UI Kit. A wchodząc bardziej w szczegóły:

Skala 1x – Na większości monitorów rozmiar 100% będzie odpowiadał mniej więcej rozmiarom urządzenia. Wielu projektantów lubi skalę 1x z innego powodu – nie ma tam konieczności trzymania się wielkości i pozycji o współrzędnych podzielnych przez 2. Jaka jest wada? Pracujemy na rozdzielczości, która fizycznie nie jest dostępna na najbardziej popularnych urządzeniach.

Skala 2x – Wybiera ją większość projektantów, w tym w tej skali tworzone są w większości UI Kit’y, zatem jest to jej niewątpliwa zaleta. Wada – na większości monitorów 100% będzie zdecydowanie większe niż ekran urządzenia fizycznie, zauważyłem że wówczas mamy skłonność do przesycenia interfejsu elementami, a praca w skali 50% jest niewygodna w Photoshopie.

Skala 3x – Zaletą jest teoretycznie to, że nie będzie potrzeby skalowania assetów w dół, ale poniżej wytłumaczę, dlaczego to nie jest dla mnie argument. Odradzam projektowanie w tej skali na razie, bez wdawania się w szczegóły.

Najważniejsze jest to, aby pamiętać:

• Zawsze staraj się korzystać z obiektów inteligentnych dla zdjęć (pod spodem w wysokiej rozdzielczości) oraz dla elementów wektorowych (ikony, UI)
• Argument pracy w skali 3x aby później nie skalować w dół nie jest dla mnie zasadny – za moment możesz mieć skalę 4x i 5x, a stosując się do pkt. 1 to zawsze zadziała
• Spójrz na swój monitor – staraj się projektować tak, aby widok 100% mniej więcej odpowiadał rozmiarom urządzenia, na które projektujesz. Czyli na ekranach Retina w MacBookach – projektuj w Skali 2x. Bez skalowania, projektuj w skali 1x.
• Pamiętaj, żeby projektując w skalach 2x oraz 3x nie korzystać z wartości 1px dla outline czy linii a odpowiednio 2px oraz 3px. Chodzi o to, że jeśli w skali 2x zrobisz linię 1px, to eksportując do skali 1x dostaniesz 0,5px co oczywiście wyrenderuje się na 1px z rozmyciem
• To samo dotyczy grida, generalnie zapamiętaj po prostu aby elementy interfejsu umieszczać np. w skali 2x na współrzędnych podzielnych przez 2.
• Jeśli masz genialny UI Kit i jest w skali 2x – projektuj w skali 2x, będzie Ci łatwiej niż zmniejszać całość do 50% (wiele rzeczy może pójść nie tak, np. skalowanie efektów warstw)
• Projektuj w Sketch, zobaczysz, że wówczas praca w skali zaczyna mieć zdecydowanie mniejsze znaczenie

Rozdzielczości urządzeń iOS

W przeciwieństwie na przykład do platformy Android, rozdzielczości urządzeń iOS to zaledwie kilka najbardziej popularnych wartości, choć nowe modele iPhonów i iPadów z większą gęstością pikseli i większym ekranem cały czas powiększają listę, to jednak jest ona najkrótsza wśród dostępnych OS’ów. Poniżej znajdziesz podsumowanie rozdzielczości typowych urządzeń wraz z informacją o  tym, czy urządzenie dysponuje ekranem Retina.

Pamiętaj jednak o tym, że podane rozdzielczości są to rzeczywiste ilości pikseli z uwzględnieniem scale factorów x2 i x3. Bardziej szczegółowa prezentacja z uwzględnieniem punktów, pixeli i uwzględniająca rzeczywiste rozmiary znajduje się poniżej.

Jest to zestawienie ze strony http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions, z którego często korzystam.

Piksele a Punkty

Jednostki podawane w pikselach oznaczają, że ekran posiada fizycznie taką a nie inną ich ilość w poziomie i w pionie. Apple przyjęło jednak jeszcze jedną jednostkę, generyczną, jaką są punkty. W skali 1x ilość pikseli = ilość punktów, natomiast w kolejnych skalach ilość punktów pozostaje taka sama, ale 1 punkt może zawierać więcej niż jeden piksel. Dla skali 2x w jednym punkcie będą zawarte aż 4 piksele. Korzystanie z jednostki generycznej ułatwia podanie porównywalnej, fizycznej wielkości elementu na ekranie. Przykładowo, 30 punktów mierzone linijką przyłożoną do telefonu z Retiną i bez będzie miało taką samą wielkość. Trzeba w związku z tym pamiętać, że Apple posługuje się głównie wartościami w punktach – zatem jeśli mamy do przygotowania ikonę wielkości 40pt, to w skali 1x będzie to dokładnie 40px, w skali 2x – 80px, a w skali 3x = 120px. Naprawdę, nie ma w tym nic bardziej skomplikowanego!

Przygotowałem też kolejną tabelkę, z której dowiesz się pod jakie skale powinny być przygotowane grafiki dla iOS, a także jak prezentują się gęstości pikseli i fizyczne rozmiary przekątnych.

Na koniec jeszcze zestawienie rozmiarów ikon, które należy wygenerować dla aplikacji iOS. Mam także dobrą wiadomość – w tym wpisie znajdziesz informacje, jak można zautomatyzować proces przygotowania ikon dla urządzeń mobilnych z pomocą skryptu w Adobe Photoshop.

Wszystkie omawiane tutaj zagadnienia są częścią obszernego Kompendium iOS, które znajdziesz na eduweb.pl. W ramach Kompendium przygotowałem dla Ciebie 20 godzin materiałów wideo na temat projektowania i kodowania aplikacji iOS. Zachęcam do sprawdzenia darmowych lekcji i opisu kursów:

• Kurs Projektowania oraz UI/UX dla iOS
• Kurs Tworzenia Aplikacji iOS w Swift i Xcode

Do usłyszenia,
Grzegorz Róg