Praktyczny przewodnik po ikonach aplikacji na Androida: objaśnienie ikon adaptacyjnych (i sposób ich prawidłowego wygenerowania)
Jest to częsta niespodzianka dla początkujących programistów Androida: wypolerujesz pojedynczy kwadrat PNG dla ikony aplikacji, wyeksportujesz go w schludnych wymiarach 512 x 512 i będzie wyglądać idealnie w edytorze obrazów. Następnie instalujesz wersję debugującą na telefonie Samsung, a ikona nagle wygląda na przyciętą i nieco przesuniętą na środek, jakby część logo została odcięta. Z samym plikiem nie dzieje się nic złego. Problem w tym, że pojedynczy kwadratowy obraz nigdy nie przetrwałby kontaktu z prawdziwym światem programów uruchamiających Androida, z których każdy inaczej przycina, maskuje i zmienia kształt ikon. Jeśli jeszcze się z tym nie spotkałeś, to tylko kwestia czasu, zanim to zrobisz, więc przyjrzyjmy się, co dzieje się pod maską i jak zrobić to dobrze za pierwszym razem.
Dlaczego pojedynczy kwadrat PNG już nie wystarczy
We wczesnych latach Androida ikony aplikacji wyglądały dokładnie tak, jak wyglądały: pojedynczy kwadratowy (lub czasami o swobodnym kształcie) plik PNG, który był wyświetlany w każdym programie uruchamiającym. Działało to dobrze, dopóki producenci nie zaczęli wizualnie różnicować swoich telefonów, a jednym z najłatwiejszych miejsc do zrobienia tego był ekran główny. Samsung chciał zaokrąglonych kwadratów, niektóre chińskie skórki OEM chciały różnych obróbek narożników, a standardowy Android ostatecznie zdecydował się na koła. Nagle dokładnie ten sam plik ikony wyglądał zauważalnie inaczej, a czasem wyraźnie gorzej, w zależności od tego, na czyim telefonie wylądował.
Odpowiedzią Google, wprowadzoną wraz z systemem Android 8.0 Oreo, był system ikon adaptacyjnych. Zamiast dostarczać jeden stały kształt, programiści udostępniają warstwową grafikę, którą sam system operacyjny maskuje do kształtu preferowanego przez dany program uruchamiający. Identyfikacja wizualna pozostaje spójna; zmienia się tylko zewnętrzna sylwetka.
Czym dokładnie jest ikona adaptacyjna?
Ikona adaptacyjna składa się z dwóch oddzielnych warstw, z których każda zajmuje obszar roboczy o rozdzielczości 108 na 108 dp: warstwy tła i warstwy pierwszego planu. Android łączy te dwa elementy, a następnie stosuje dowolny kształt maski, którego używa bieżący program uruchamiający, niezależnie od tego, czy jest to okrąg, zaokrąglony kwadrat, łza czy coś zupełnie innego. Dzięki dwuwarstwowej strukturze Android może dodawać także subtelne efekty paralaksy i ruchu, ponieważ warstwy mogą przesuwać się niezależnie po dotknięciu lub przeciągnięciu ikony.
W zasobach aplikacji jest to zwykle definiowane za pomocą pliku XML, takiego jak mipmap-anydpi-v26/ic_launcher.xml, który po prostu wskazuje rysunki w tle i na pierwszym planie, a nie zawiera same dane w pikselach. Tradycyjny płaski ic_launcher.png jest nadal używany jako rozwiązanie zastępcze dla urządzeń z systemem Android 7.1 lub starszym, który jest całkowicie starszy od adaptacyjnego systemu ikon.
Dlaczego bezpieczna strefa ma znaczenie
Oto część, która najbardziej wprawia ludzi w zakłopotanie. Mimo że obszar roboczy każdej warstwy ma wymiary 108 na 108 dp, tylko wewnętrzny okrąg o wymiarach 66 na 66 dp, wyśrodkowany na tym obszarze roboczym, będzie widoczny niezależnie od zastosowanego kształtu maski. Ten wewnętrzny obszar jest powszechnie nazywany strefą bezpieczną. Wszystko, co znajduje się poza nią, może zostać pokazane na okrągłej masce, a następnie nagle przycięte na bardziej agresywnej masce w kształcie skrzywienia lub łezki lub odwrotnie.
To jest dokładnie ten sam problem, który pojawia się, gdy logo jest rysowane blisko krawędzi płótna, aby zmaksymalizować jego rozmiar: może wyglądać idealnie na okrągłej masce, ale może być nierównomiernie przycięte na masce Samsunga. Poprawka nie polega na przeprojektowaniu, a jedynie na lekkim zmniejszeniu grafiki, tak aby znacząca treść pozostała w bezpiecznej strefie, niezależnie od tego, który kształt ostatecznie zostanie zastosowany.
Kształty programu uruchamiającego, które spotkasz
| Kształt | Gdzie to zobaczysz |
|---|---|
| Koło | Standardowy Android, program uruchamiający Pixel (długotrwały domyślny) |
| Squircle (zaokrąglony kwadrat) | Samsung One UI i kilka innych skórek na Androida |
| Zaokrąglony kwadrat (superelipsa) | iOS, stosowany automatycznie przez system bez kontroli programisty |
| Łza | Oferowane jako opcja do wyboru w niektórych wersjach oprogramowania Samsung |
| Kwadrat z miękkimi narożnikami | Różne skórki programu uruchamiającego innych producentów |
Praktyczny wniosek jest taki, że nie masz możliwości wyboru, który z tych kształtów przybierze Twoja ikona. Użytkownicy standardowych programów uruchamiających Androida często mogą nawet wybrać preferowany kształt z menu ustawień. Jedyną prawdziwą dźwignią jest upewnienie się, że sama grafika przetrwa je wszystkie z wdziękiem, co dokładnie gwarantuje bezpieczna strefa.
Budowanie aktywów: potrzebne rozmiary i gęstości
| Wiadro gęstości | Rozmiar ikony programu uruchamiającego |
|---|---|
| mdpi | 48 x 48 pikseli |
| hdpi | 72 x 72 piksele |
| xhdpi | 96 x 96 pikseli |
| xxhdpi | 144 x 144 pikseli |
| xxxhdpi | 192 x 192 piksele |
| Ikona informacji o Sklepie Play | 512 x 512 pikseli |
Jeśli udostępniasz aplikację także na iOS, dodaj zupełnie inny zestaw, ponieważ wymagania Apple dotyczące ikon w sklepie App Store wynoszą maksymalnie 1024 x 1024 i używają zupełnie innego, niewarstwowego formatu, bez żadnej przezroczystości.
Sposób ręczny a użycie generatora
Możesz absolutnie wygenerować każdy z tych rozmiarów ręcznie w edytorze obrazów lub za pomocą wbudowanego w Android Studio Image Asset Studio, które radzi sobie dość dobrze ze skalowaniem gęstości i podglądem masek w przypadku pojedynczego projektu. To staje się nudne, gdy utrzymujesz system projektowania w kilku aplikacjach, potrzebujesz dopasowania eksportu iOS z tej samej grafiki głównej lub po prostu chcesz w szybki sposób dwukrotnie sprawdzić, jak projekt zachowuje się w każdym kształcie, zanim go zatwierdzisz.
Wygeneruj każdy rozmiar z jednego obrazu wzorcowego
Nasz Generator ikon aplikacji pobiera pojedynczy obraz źródłowy o wysokiej rozdzielczości i tworzy pełny zestaw segmentów gęstości Androida, adaptacyjną strukturę pierwszego/tła ikon oraz rozmiar listy Sklepu Play – wszystko w jednym przesłaniu, więc nie musisz ręcznie eksportować ani ręcznie zmieniać nazw kilkunastu plików.
Wyodrębnianie ikon z istniejącego pliku APK
Czasami potrzeba działa w odwrotnym kierunku. Być może odziedziczyłeś projekt bez oryginalnych plików graficznych, chcesz dokładnie sprawdzić, jak konkurencja zbudowała swoją ikonę przed zaprojektowaniem własnej, albo po prostu musisz wyodrębnić ikonę z gotowego pliku APK, aby użyć jej ponownie w powiązanym narzędziu lub materiałach marketingowych. Ponieważ plik APK jest w rzeczywistości uporządkowanym archiwum zawierającym wszystkie zasoby aplikacji, pliki ikon programu uruchamiającego znajdują się fizycznie wewnątrz pakietu i można je bezpośrednio wypakować, zamiast odtwarzać od zera.
Nasz Ekstraktor ikon pobiera dokładnie te pliki z każdego przesłanego pliku APK, udostępniając surowe zasoby ikon w dowolnej rozdzielczości dostarczonej przez oryginalnego programistę, co często jest najszybszym sposobem na odzyskanie utraconego pliku źródłowego lub sprawdzenie, jak inna aplikacja podeszła do tego samego problemu projektowego.
Typowe błędy ikon, które są oznaczane podczas recenzji
- Pieczenie w dodatkowej wyściółce lub chromowaniu interfejsu użytkownika. Efekt cienia, obramowania lub zaokrąglonych narożników dodany ręcznie do obrazu koliduje z własnym maskowaniem systemu i często wygląda na podwojony lub źle wyrównany.
- Używanie czystego białego tła bez wyraźnych krawędzi. W programach uruchamiających z jasnym motywem ikona może stać się prawie niewidoczna na tle ekranu głównego.
- Zbyt drobne szczegóły. Tekst i skomplikowane linie, które wyglądają ostro przy rozdzielczości 512 pikseli, często zmieniają się w nieczytelną smugę po zmniejszeniu do 48 pikseli, czyli tak, jak większość użytkowników widzi to na co dzień.
- Niezgodność między ikoną wpisu w Sklepie Play a ikoną instalacji. Zarówno recenzenci, jak i użytkownicy zauważają, kiedy te dwa elementy nie pasują do siebie, i brzmi to jako niechlujstwo lub, co gorsza, podejrzane.
- Całkowicie zapominając o starszej wersji awaryjnej. Jeśli Twoja aplikacja nadal obsługuje wersje Androida starsze niż 8.0, pominięcie płaskiego zastępczego pliku PNG może spowodować, że użytkownicy będą mieli uszkodzoną lub wyglądającą zwyczajnie ikonę.
Testowanie ikony w różnych kształtach przed wysyłką
Przed sfinalizowaniem ikony warto obejrzeć ją przynajmniej pod maską okrągłą i maską w kształcie wicia obok siebie, zamiast zakładać, że przetłumaczy się gładko. Właśnie z tego powodu narzędzie Image Asset Studio w Android Studio zawiera podgląd na żywo w kilku kształtach programów uruchamiających, a wykrycie problemu, który w innym przypadku pojawiłby się dopiero po opublikowaniu, zajmuje tylko minutę. Gdy użytkownik korzystający z „niewłaściwego” kształtu programu uruchamiającego zgłosi, że coś jest nie tak.
Kluczowe dania na wynos
- Ikony adaptacyjne wykorzystują dwie warstwy, tło i pierwszy plan, na płótnie o rozdzielczości 108 dp, które system maskuje w różne kształty w zależności od programu uruchamiającego.
- Gwarantowana jest widoczność tylko wewnętrznej bezpiecznej strefy 66 dp w każdym kształcie maski; przechowuj w nim znaczące dzieła sztuki.
- Nadal potrzebujesz płaskiej starszej ikony dla urządzeń z systemem Android 7.1 lub starszym.
- Generator może wygenerować dowolną wymaganą gęstość i rozmiar wpisu w Sklepie Play z jednego obrazu wzorcowego, oszczędzając znaczną ilość ręcznej pracy związanej z eksportem.
- Ikony można wyodrębnić bezpośrednio z istniejącego pliku APK w przypadku utraty plików źródłowych lub konieczności sprawdzenia zasobów innej aplikacji.
Często Zadawane Pytania (FAQ)
Jaki jest rzeczywisty rozmiar w pikselach wymagany dla ikony z informacjami o Sklepie Play?
512 x 512 pikseli, 32-bitowy plik PNG z kanałem alfa. Różni się to od rozmiarów ikon programu uruchamiającego zawartych w samym pliku APK.
Czy warstwa tła mojej ikony adaptacyjnej musi mieć jednolity kolor?
Niekoniecznie jednolity kolor, ale ogólnie powinien być nieprzejrzysty i prosty, ponieważ można go przesuwać, skalować lub maskować w sposób, nad którym w pełni nie masz kontroli. Zajęte lub przezroczyste tła wydają się wyglądać niespójnie w różnych programach uruchamiających.
Czy mogę ponownie wykorzystać projekt ikony adaptacyjnej systemu Android bezpośrednio na iOS?
Nie bezpośrednio. iOS używa pojedynczego, płaskiego, kwadratowego obrazu z zaokrągleniami rogów zastosowanymi przez system, a nie oddzielnych warstw, więc zazwyczaj eksportujesz uproszczoną, spłaszczoną wersję tej samej grafiki na iOS.
Dlaczego moja ikona wygląda dobrze na telefonie, ale jest rozmyta na stronie Sklepu Play?
Zwykle dzieje się tak, gdy ikona aukcji została powiększona z małego obrazu źródłowego. Zawsze zaczynaj od pliku głównego o wymiarach co najmniej 1024 x 1024 pikseli i eksportuj każdy wymagany rozmiar w dół.
Co się stanie, jeśli pominę zastępczą ikonę starszej wersji dla starszych wersji Androida?
Urządzenia z systemem Android 7.1 lub starszym, które nie obsługują ikon adaptacyjnych, mogą powrócić do ogólnej ikony systemowej lub wyświetlać ją niepoprawnie. Można bezpiecznie pominąć tę opcję tylko wtedy, gdy minimalna obsługiwana wersja Androida Twojej aplikacji to 8.0 lub nowsza.
Do tego nie potrzebujesz wiedzy z teorii projektowania, wystarczy świadomość, że Twoja ikona zostanie przekształcona w sposób, nad którym nie masz kontroli, w momencie, gdy opuści Twoje ręce. Zaprojektuj dla bezpiecznej strefy, zachowaj starsze rozwiązania awaryjne, wygeneruj każdy wymagany rozmiar z jednego czystego pliku głównego, a Twoja ikona będzie działać niezależnie od tego, na którym programie uruchamiającym wyląduje.