Z tego przewodnika dowiesz się, jak zacząć projektować na Androida, przekształcając istniejące projekty mobilne na iOS w projekty na Androida przy użyciu podstawowych wzorców UX Androida i Material Design.
Zarysowane pod kątem równości projektu i uporządkowane pod kątem wydajności. Jeśli korzystasz z udostępnionego podstawowego systemu projektowania, możesz tłumaczyć projekty za pomocą własnego systemu zamiast Material 3. Zarówno Android, jak i iOS kierują się zasadą, że najważniejsze są treści.
Następnie możesz dodać elementy marki, takie jak kolor, typ i kształt. Nie tylko ułatwia to czytanie treści, ale też sprawia, że łatwiej jest zachować spójność.
Zacznij od projektów na iOS
Zanim zaczniesz, utwórz kopię aplikacji na iOS. Aplikacje na iOS dzielą się na 3 obszary: paski, widoki i elementy sterujące. Możesz użyć tej struktury, aby przejść do tłumaczenia, a na końcu zastosować style.
Sprawdź elementy aplikacji na Androida.
1. Usuwanie interfejsu systemu iOS
Usuń pasek stanu i wskaźnik ekranu głównego. Teraz jest to prostsze.
2. Zmienianie rozmiaru ramek
Możesz użyć kompaktowego rozmiaru Androida, czyli 412 dp. Pamiętaj jednak, że nawet w przypadku urządzeń o podobnej wielkości ekranu mogą występować różnice. Na przykład testuj przy 360 dp, aby uwzględnić mniejsze ekrany, i dostosowuj do wszystkich rozmiarów okien.
3. Zastąp paskami systemowymi Androida
Interfejs systemu Android może się różnić w zależności od urządzenia i ustawień użytkownika, ale wyświetlanie domyślnego interfejsu systemu może pomóc w nadaniu projektom większego kontekstu. Umieść pasek powiadomień u góry, a pasek nawigacji z 3 przyciskami lub pasek nawigacji przy użyciu gestów u dołu.
Więcej informacji znajdziesz w sekcji Paski systemu Androida.
4. W zależności od sposobu nawigacji
Zastąp pasek kart (nawigacja u dołu) paskiem nawigacyjnym.
Spójrz ponownie na mapę procesu. Czy Twoja aplikacja na iOS korzysta z menu „Więcej”? (Sprawdzone metody HIG sugerują, aby nie używać tego wzorca). Ogranicz liczbę elementów do 5 lub mniej, zachowaj na dolnym pasku nawigacyjnym tylko główne elementy nawigacyjne, sprawdź, czy można przenieść na górny pasek aplikacji elementy drugorzędne, takie jak profil lub ustawienia, albo czy masz działanie główne, które można przekształcić w FAB.
Główny pasek nawigacyjny powinien być zawsze widoczny w widokach nadrzędnych (najwyższy poziom sekcji na mapie przepływu). Widoki podrzędne (wszystkie widoki pod widokiem nadrzędnym) mogą zawierać nawigację główną, jeśli znajdują się wyżej w hierarchii nawigacji i nie są oknem modalnym.
Zaktualizuj dolny pasek nawigacyjny, dodając odpowiednie ikony i etykiety. Obie platformy unikają ruchu bocznego między miejscami docelowymi nawigacji.
5. Paski nawigacyjne na górne paski aplikacji
Podziel je na sekcje: najpierw widoki rodzica, a potem widoki dziecka. Pasek aplikacji składa się z części po lewej stronie: nawigacji i tytułu, oraz części po prawej stronie: działań.
Jeśli Twoja aplikacja używa menu w panelu nawigacyjnym zamiast dolnego paska nawigacyjnego, we wszystkich widokach nadrzędnych będzie wyświetlana ikona panelu.
Jeśli aplikacja nie ma kolumny bocznej ani panelu, widoki nadrzędne nie wyświetlają ikony nawigacji głównej.
Tytuł jest domyślnie wyrównany do lewej w pasku aplikacji na Androida.
Widoki podrzędne mają strzałkę w górę w miejscu ikony nawigacji. Nie myl z tyłem. Strzałka w górę przenosi użytkownika o jeden poziom wyżej w hierarchii nawigacji aplikacji w ścieżce użytkownika, a gesty „wstecz” lub „przesuń od krawędzi” należą do nawigacji systemowej, która przenosi użytkownika do tyłu, a nawet poza aplikację.
A co z widokami modalnymi? W przypadku okien modalnych na pełnym ekranie (takich jak odtwarzacze wideo i obrazy) będzie to podobne do paska aplikacji widoku podrzędnego, z tym że ikona nawigacji powinna zmienić się na ikonę zamykania, która zamyka okno modalne.
6. Większa różnorodność
Zacznij od dużych widoków modalnych, które najlepiej sprawdzają się, gdy chcesz skupić uwagę użytkownika na zadaniu. Na urządzeniach z iOS często są wyświetlane jako arkusze, które użytkownik może przesuwać w dół.
Dokończ zamianę pasków aplikacji. W przypadku arkuszy modalnych na iOS zamień górną część arkusza i podgląd tła na pasek aplikacji w oknie dialogowym na pełnym ekranie.
Dodatkowo sprawdź, czy któreś z arkuszy modalnych w iOS można przekształcić w plansze dolne.
arkusze działań i aktywności na plansze dolne; (Arkusze udostępniania można teraz też przetłumaczyć).
W przypadku alertów używaj okien systemowych. Jeśli używasz ich do przekazywania ważnych informacji, które użytkownik musi w jakiś sposób potwierdzić, zastąp je oknami systemowymi. Pamiętaj, aby w tym momencie zamienić wszystkie pola i selektory.
7. Treści pokrewne
Karty, widoki stron lub karty przesuwane. Jeśli używasz segmentowanych elementów sterujących na iOS, zostaną one przeniesione na karty na Androidzie. Oba te elementy służą do filtrowania widoków informacji, które są podobne, ale nie takie same. Karty na Androidzie są zwykle dołączone do paska aplikacji i mają dodatkową zaletę, jaką jest możliwość przełączania treści za pomocą gestu przesuwania.
8. Treści i ustawienia
W zależności od tego, jak skonfigurowano ograniczenia lub zachowanie związane ze zmianą rozmiaru, większość treści mogła już zostać zmieniona. Poświęć ten czas na sprawdzenie i ustawienie marginesów. 16 dp to dobry standard na małych ekranach.
Linia bazowa siatki jest oparta na siatce 8 dp w przypadku komponentów i 4 dp w przypadku tekstu i ikon. Siatka 8-punktowa dobrze sprawdza się w iOS, więc możesz ją potraktować jako punkt wyjścia dla obu platform.
Elementy sterujące Zmień te przełączniki na przełączniki Androida. używać pól wyboru i przycisków opcji na Androidzie; Android ma wszystkie te funkcje.
Jeśli masz formularze, zamień pola tekstowe iOS na pola Androida. Materiały są dostępne w wersji z konturem lub wypełnieniem, więc wybierz tę, która najlepiej pasuje do Twojej marki.
Listy materiałów różnią się od komórek tabeli w iOS:
- Linie podziału są używane oszczędnie.
- Na listach nie są używane wskaźniki, aby ograniczyć szum wizualny do minimum.
- Wymiary są zgodne z siatką 8 dp.
9. Styl
Kolor: kolor interfejsu użytkownika składa się z kolorów akcentujących, semantycznych i powierzchni, które są zestawione w schemacie kolorów. Te kolory są stosowane w interfejsie zgodnie z ich rolami.
Typ: jeśli używasz czcionki systemowej, zastąp „San Francisco”. Roboto to domyślna czcionka systemowa Androida. Zachęcamy jednak do wyrażania unikalnego stylu marki za pomocą motywów i czcionek Google, które można pobrać.
Ikony: tak samo. Jeśli używasz symboli SF, sprawdź, czy wszystkie zostały przekonwertowane na ikony lub symbole Material. Wybierz wersję odpowiednią dla Twojej marki. Czy wiesz, że możesz używać ikon Material Design na dowolnej platformie?
Ruch: Android i iOS mają odmienne projekty ruchu, które należy uwzględniać na każdej platformie. Ruch materiału jest informacyjny, skupiony i wyrażony. Efekt fali to charakterystyczne wyróżnienie używane w komponentach, aby zapewnić reakcję na dotyk. System Motion to zestaw wzorców przejść, które wykorzystują przekształcenie kontenera, współdzieloną oś, zanikanie i animacje zanikania. Zastanów się, czy elementy w Twoim projekcie mają trwałe kontenery, jaka jest relacja między elementami i jak mają się pojawiać lub znikać.
10. Zrób porządki
Jeśli tłumaczysz prototyp, to dobry moment na ponowne połączenie elementów. Wróć do głównego menu nawigacyjnego. Następnie dodaj paski aplikacji, pamiętając o różnicy między przejściami w górę i w dół oraz wybierając przejścia stron odpowiednie dla Androida (wspomniane w kroku 9).
Powinien być gotowy w pełni działający prototyp, a ponieważ został zmieniony jego rozmiar, można go przekazać.
Przewodnik po stylach i komponentach
Jeśli masz już system projektowania lub przewodnik po stylu, możesz mieć własne podstawowe style (kolor, typ, ikony, kształt), których możesz używać razem z Material Design, tak jak używasz ich razem z wytycznymi dotyczącymi iOS. Dzięki Material Theming możesz dostosowywać komponenty Material do niepowtarzalnego stylu swojej marki, używając kolorów, typów i kształtów.
Wytyczne dotyczące poszczególnych platform są powszechne w przypadku produktów wieloplatformowych i mogą sprawić, że Twój system projektowania będzie bardziej zorientowany na użytkownika.
Pamiętaj też, że nie każda aplikacja lub usługa wymaga pełnego, niestandardowego systemu projektowania. Rozważ utworzenie wskazówek redakcyjnych na jednej stronie. Przewodnik po stylu to dokument, który zawiera podstawowe specyfikacje projektów. Wytyczne dotyczące marki często zawierają poradnik stylu.
Możesz go skopiować na Androida i użyć jako źródła do aktualizowania stylów (lub symboli, komponentów lub biblioteki).