Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android
Code

Android od podstaw: popularne szablony interfejsu

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Android From Scratch.
Android From Scratch: How to Run Your Application on a Physical Device
Android From Scratch: Understanding Views And View Groups

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Chociaż Android pozwala na stworzenie niemal każdego widoku i interfejsu użytkownika, istnieje kilka szablonów, które okazały się działać dobrze dla użytkowników w odpowiednich sytuacjach. W tym poradniku poznasz kilka z tych szablonów oraz dowiesz się jak mogą one pomóc stworzyć świetne wrażenie na użytkownikach podczas korzystania z twojej aplikacji.

2. Ekran główny

Pierwszy ekran, który widzą twoi użytkownicy podczas otwierania aplikacji, jest często najważniejszy. W tym miejscu użytkownik powinien przeprowadzić szybką czynność lub wejść głębiej w aplikację w celu udoskonalenia tego, co próbuje osiągnąć.

Wybór szablonu interfejsu dla tego ekranu dotyczy celu twojej aplikacji. Należy zwrócić uwagę, że większość aplikacji korzysta z więcej niż jednego szablonu ekranu głównego, dopóki spełnia on wymagania aplikacji.

Lista i szczegóły

Lista i szczegóły jest jednym z najbardziej powszechnych szablonów, które możemy zobaczyć na urządzeniach przenośnych. Jak nazwa wskazuje, przedstawia dane w formacie listy, a po kliknięciu elementu na tej liście, otwiera się nowy ekran, który wyświetla więcej szczegółów.

Chociaż ten szablon nazywany jest listą i szczegółami, ten sam schemat można również zastosować dla siatki. Kluczową funkcją tego szablonu jest to, że każdy element na liście lub siatce po zaznaczeniu powinien przeprowadzać tę samą czynność wyświetlania szczegółów.

Przykład tego szablonu możemy zobaczyć w aplikacji Muzyka Play, która przedstawia użytkownikom siatkę albumów, które mogą być wybrane, aby wyświetlić piosenki dostępne w albumie.  Hangouts jest kolejnym przykładem szablonu listy i szczegółów. Hangouts pozwala na wybranie konwersacji, aby zobaczyć ją całą i rozpocząć rozmowę.

Google Play Music Grid of Items

Karuzela

Czasami jedna lista może nie wystarczyć. Jeśli aplikacja posiada różne kategorie i dobrym sposobem na zaprezentowanie jej zawartości jest obraz, to szablon karuzeli jest dla ciebie. Tym razem bierzemy szablon listy i szczegółów i używamy jej wiele razy na tym samym ekranie. Różnica polega na tym, że elementy listy mogą być przesuwane poziomo, a nie pionowo.

Przykład tego szablonu można zobaczyć w aplikacji Sklepu Play, która wyświetla karuzelę dla wielu kategorii aplikacji, które możesz przeglądać.

Carousel Pattern in the Google Play Store

Mapa

Nie wszystkie aplikacje opierają się na wyświetlaniu listy danych. Jedną z kluczowych cech urządzeń mobilnych jest niesamowita przydatność w znajdowaniu miejsc, gdy użytkownik jest poza domem. Mapa jest często doskonałym narzędziem do tego celu.

Jeśli twoja aplikacja polega na pokazywaniu lokalizacji, nawigowaniu lub podróżowaniu, mapa może być idealna dla twoich użytkowników. Chociaż oczywisty przykład tego szablonu znajduje się w Mapach Google, w wielu innych aplikacjach takich jak Waze i Uber mapa również jest głównym punktem.

Map Home Screen in Waze

2. Nawigacja i czynności

Chociaż poznałeś kilka szablonów interfejsu użytkownika, które możesz wykorzystać w ekranie głównym aplikacji, prawdopodobnie nadal potrzebujesz sposobu na przejście do innych sekcji aplikacji. Na szczęście istnieje kilka powszechnie używanych szablonów nawigacji.

Karty

Karty są często używane w połączeniu z szablonem listy i szczegółów. Jeśli masz wiele list, które są ze sobą powiązane, ale mają różne kategorie, skutecznym rozwiązaniem może być wykorzystanie ViewPager z kartami dla każdej kategorii.

Ten szablon jest przydatny, kiedy masz tylko kilka sekcji w swojej aplikacji, które zapewniają użytkownikom szybką i łatwą zmianę widoku. Jednakże jeśli masz pięć lub więcej elementów, które chcesz umieścić na kartach, powinieneś rozważyć przeniesienie nawigacji do rysownika.

ViewPager Tab Design Pattern

Według wytycznych Android material design, karty mogą również znajdować się na dole ekranu jak widać w aplikacji Google+.

Bottom Tabs Design Pattern

Rysownik nawigacji

Rysownik nawigacji jest widokiem, który może być wysunięty z boku aplikacji w celu przedstawienia użytkownikowi listy opcji. Ten szablon interfejsu jest dość regularnie wykorzystywany w aplikacjach na Androida, umożliwiając zmianę sekcji lub przeprowadzanie globalnych czynności, które niekoniecznie są związane z jednym ekranem.

Ponieważ ten szablon nadaje się na najwyższy poziom nawigacji, może być z łatwością sparowany z szablonem kart, tworząc skomplikowany schemat nawigacji w aplikacji.

Navigation Drawer Design Pattern

Pasek narzędzi

Jak już zapewne zauważyłeś, większość stron w aplikacjach na Androida zawiera pasek na górze ekranu. W najgorszym wypadku ten pasek narzędzi zawiera tytuł sekcji lub aplikacji, ale szablon paska narzędzi umożliwia również umieszczenie przycisków akcji bezpośrednio na pasku lub w menu, umożliwiając przeprowadzanie zadań w tej sekcji aplikacji.

Przykład tego można znaleźć w aplikacji Google Keep, która pozwala na zmianę koloru notatki, dodania innych ludzi do notatki i wielu innych akcji, które są znajdują się w menu.

Toolbar Design Pattern With Action Buttons

Pływający przycisk akcji

Szablon pływającego przycisku akcji pozwala deweloperom wyróżnić pojedynczą czynność, którą użytkownik może przeprowadzić w sekcji aplikacji. Przykłady tych czynności to pływający przycisk akcji w kliencie poczty, przycisk odtwarzania/wstrzymywania w aplikacji muzycznej lub przycisk dodawania w aplikacji zarządzającej wydarzeniami lub danymi.

Szablon nie powinien dotyczyć drobnych czynności lub niczego destrukcyjnego, ponieważ pływający przycisk akcji ma za zadanie być wyraźnie widoczny na ekranie.

Floating Action Button

3. Forma Androida

Chociaż niektóre szablony omówione powyżej prowadzą do innych form, odnoszą się one przede wszystkim do aplikacji na telefony i tablety. Ostatnio Google rozszerzył Androida o inne typy urządzeń, takie jak telewizory i zegarki. Aby maksymalne wykorzystać każdą formę, należy użyć nowych szablonów.

Android Wear

Z powodu mniejszego rozmiaru ekranu, w Android Wear przedstawiony został całkiem nowy zestaw szablonów interfejsu. Wear działa z systemem kart i przycisków akcji, które użytkownicy mogą przełączać za pomocą GridViewPager.

Możesz również nadal korzystać z szablonu listy i szczegółów, ale elementy listy będą musiały być większe, aby użytkownicy mieli do nich łatwy dostęp. Więcej informacji o projektowaniu Android Wear znajdziesz w oficjalnej dokumentacji.

Android Wear Card and Action Button UI Design Pattern

Telewizja

Podczas gdy szablony interfejsu dla urządzeń z Android Wear musza wziąć pod uwagę znacznie mniejsze ekrany, projektowanie dla Android TV ma odwrotny problem. Ekrany są znacznie większe, a użytkownicy znajdują się dużo dalej od nich.

Nie dość, że twoje aplikacje dla TV muszą brać te dwie rzeczy pod uwagę, na dodatek telewizory są wyposażone w kontroler D-pad, a nie w ekran dotykowy. W tym przypadku, karuzela działa niezwykle dobrze.

TV UI Design Pattern Rows of Content

Użytkownicy mogą przełączać między rzędami elementów, a następnie przewijać poziomo, aby zobaczyć dostępną dla nich treść. Kiedy użytkownik znajdzie element, który chce obejrzeć, może wybrać ekran ze szczegółami, który zawiera listę czynności dla tego elementu.

Podsumowanie

Chociaż to nie jest wyczerpująca lista szablonów interfejsu dla Androida, przedstawiłem ci niektóre z najbardziej powszechnych szablonów dla Androida oraz jak są one wykorzystywane do zwiększenia użyteczności aplikacji.

Biorąc to pod uwagę, nie wszystkie aplikacje są takie same i może się zdarzyć, że będziesz musiał wymyślić nowe rozwiązanie dotyczące interakcji użytkowników z aplikacją. Jedyną wspólną rzeczą wszystkich szablonów jest prostota, użyteczność i niewchodzenie użytkownikom w drogę.

W miarę jak będziesz używał i uczył się o systemie Android, zyskasz doświadczenie niezbędne do tego, aby wiedzieć co działa, a co nie w danej sytuacji.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.