30 świetnych przykładów projektowania aplikacji mobilnych

Opublikowany: 2015-01-28

Projektowanie aplikacji mobilnych nie przypomina projektowania stron internetowych.

Jasne, że istnieje teoria kolorów, typ ustawienia i utrzymywanie siatek, ale jest o wiele więcej do rozważenia, gdy urządzenie się zmienia.

Aby rzucić nieco światła na nakazy i zakazy projektowania aplikacji mobilnych, Tomas Laurinavicius przedstawił swoje najlepsze praktyki projektowania dla urządzeń mobilnych.

Tomas Laurinavicius jest niezależnym projektantem i współautorem Mobile Design Book.

Jak zaprojektować aplikację

(z przykładami dobrego projektu)

Wpisz Tomasza:

W tym artykule chciałbym podzielić się kilkoma przykładami świetnych projektów aplikacji mobilnych. W szczególności elementy, które składają się na świetną aplikację.

Przykłady aplikacji – ekran startowy

Ekran startowy będzie widoczny dla każdego użytkownika aplikacji i będzie trwał kilka sekund, jednak ważne jest, aby zrobić dobre pierwsze wrażenie i ustalić pewne oczekiwania.

Użyj obrazu tła, który mówi coś o aplikacji, uczyń ją przejrzystą i dobrze oznakowaną. Ogranicz rozmiar ekranu uruchamiania do minimum, aby skrócić czas ładowania.

Ekrany uruchamiania

Hyperlapse z Instagrama i Yummly

Puste stany

Gdy użytkownik po raz pierwszy pobierze Twoją aplikację, nie będzie miał żadnych danych do wyświetlenia. Nazywa się to pustym ekranem.

W tym momencie musisz wyjaśnić cel swojej aplikacji i poprowadzić ich do korzystania z aplikacji po raz pierwszy. W przeciwnym razie wyjdą zdezorientowani i mogą nigdy nie wrócić.

Puste stany

Airbnb i Flipboard

Przykłady aplikacji – ekrany logowania

Zapomnij o nazwach użytkowników. Zamiast tego użyj adresu e-mail.

Ułatw proces logowania, dając im możliwość logowania się na istniejących platformach. W zależności od odbiorców może to być Google, Facebook, a nawet LinkedIn.

Ekrany logowania

SoundCloud i Foursquare

Przykłady aplikacji – kanały aktywności

Projektując angażujący i wciągający kanał aktywności, weź pod uwagę kontekst i zastosuj zasady grywalizacji.

W razie potrzeby podaj niezbędne dane, takie jak data, godzina i lokalizacja. Aby upodobnić go do gry, użyj cyfr, przycisków wezwania do działania i małych ikon, aby interfejs był bardziej atrakcyjny.

Kanały aktywności

Rój przez Foursquare & Behance

Przykłady aplikacji – ekrany rejestracji

Jeśli Twój proces rejestracji jest złożony, użytkownicy odejdą.

Uprość go tak bardzo, jak to możliwe. Dołącz tylko niezbędne informacje, a nawet zasugeruj korzystanie z innych sieci, które przechowują informacje o użytkownikach, takich jak Facebook lub Twitter.

Ekrany rejestracji

Spotify i krąg

Wymeldować się

Checkout to trudna funkcja do projektowania w aplikacjach mobilnych.

Musi prezentować wiele informacji na pierwszy rzut oka i dawać wskazówki dotyczące następnego kroku. Ustal priorytety danych i podziel je na części, które można prezentować w grupach.

Na przykład adres wysyłki i informacje o płatności mogą tworzyć dwie grupy, ceny i rabaty inną grupę i tak dalej. Zorganizuj swój proces, aby nie przytłoczyć swoich klientów.

Wymeldować się

Celuj i utrzymuj zakupy

Uwagi

Komentarze są dobre do budowania społeczności lub po prostu do pokazania innym użytkownikom, że warto dołączyć do Twojej aplikacji.

Podczas projektowania komentarzy, czytelność i kontekst (tj. zdjęcia profilowe, nazwiska i daty) są najważniejszymi czynnikami zapewniającymi „żywy” ekosystem społeczności aplikacji.

Uwagi

Ścieżka i Tripstr

Szukaj

Wyszukiwanie to podstawowa funkcja dla treści generowanych przez użytkowników i innych aplikacji z dużą ilością danych.

Zapewnij kontekst i inteligentne sugestie, aby poprawić wrażenia użytkownika i zachwyci go. Dodanie odpowiednich opcji filtrowania może znacznie usprawnić proces wyszukiwania i doprowadzić do zadowolenia klientów.

Szukaj

Skrzynka odbiorcza przez Gmail i Lovely

Dzielenie się

Udostępnianie jest ważną funkcją każdej aplikacji, ponieważ pozwala użytkownikom rozpowszechniać informacje o Twoim produkcie.

Ułatw udostępnianie swojej aplikacji lub zawartości, dodając oczywiste ikony udostępniania i umożliwiając szybkie udostępnianie w różnych sieciach.

Dzielenie się

Wiosna i Jukely

Czytelność

Czytelność jest trudna na małych urządzeniach. Łatwo jest napisać za duży lub za mały tekst.

Skoncentruj się na kontraście, rozmiarze czcionki i wysokości linii. Upewnij się, że Twój tekst ma optymalny rozmiar i jest łatwy do odczytania. Czarny tekst na białym tle jest dobry.

Czytelność

Czytelność i Feedly

Nawigacja

Nawigacja jest niezwykle ważna dla każdego rodzaju aplikacji.

Spraw, by było to łatwe i zrozumiałe dla różnych segmentów odbiorców. Użyj prostej kopii, aby użytkownicy zaznajomili się z żargonem nawigacyjnym z innych aplikacji. Wykorzystaj ikony i negatywną przestrzeń, aby nadać kontekst nawigacji i dołącz tylko niezbędne linki.

Nawigacja

Połączenie z Facebookiem i LinkedIn

Ustawienia

Ekrany ustawień są często pomijane, ponieważ nie są ekscytujące, ale będzie to jeden z najczęściej używanych ekranów.

Używaj ikon, oddzielaj różne grupy ustawień za pomocą dzielników lub ujemnej przestrzeni i pomóż użytkownikom szybko nawigować, aby zdecydować, co dalej. Zapewnij też szybkie opcje za pomocą natywnych przycisków przełączania, aby użytkownicy mogli zapisywać kliknięcia.

Ustawienia

Zaznaczenie 2 i YPlan

Powiadomienia

Powiadomienia są powodem, dla którego użytkownicy wracają do Twojej aplikacji.

Spraw, aby te powiadomienia były oczywiste, ale niezbyt denerwujące. Ludzie muszą wiedzieć, co się dzieje, ale nie chcą być przytłoczeni. Podaj subtelne kolorowe wskaźniki i liczby, aby zobrazować to, co nowe.

Powiadomienia

Gogobot i podświetlenie

Wiadomości

Częstą funkcją są również funkcje wiadomości lub czatu. Projektując system przesyłania wiadomości, liczy się przede wszystkim komunikacja i kontekst.

Zoptymalizuj rozmiar czcionki, aby użytkownicy mogli czytać dłuższe wiadomości i dołącz datę, godzinę opublikowania, lokalizację i inne istotne informacje.

W dzisiejszych czasach przesyłanie wiadomości to multimedia. Zapewnij użytkownikom możliwość komunikowania się poprzez dodawanie zdjęć, wideo, dźwięków, emotikonów i starego szkolnego tekstu.

Wiadomości

Facebook Messenger i rozmowa o ścieżce

Profil

Wiele aplikacji umożliwia użytkownikom tworzenie kont i przechowywanie historii lub działań związanych z tym profilem.

Niezależnie od tego, czy chodzi o media społecznościowe, zakupy, czy jakakolwiek inna aplikacja, ważne jest, aby strony profilu były przejrzyste i atrakcyjne dla użytkowników.

Podkreśl zdjęcie profilowe użytkownika i jego nazwę. Podaj również odpowiednie informacje i statystyki, aby ludzie mogli zobaczyć, jak aktywny lub szanowany jest użytkownik.

Profil

Przód i Quora

Wniosek

Jak widać ze wszystkich wymienionych przeze mnie aplikacji, przy projektowaniu zwycięskiej aplikacji jest wiele do rozważenia i opanowania.

Chociaż każdy może zaprojektować aplikację, ważne jest, aby zatrudnić projektanta, który ma doświadczenie w tej dziedzinie i potrafi zastosować całą wiedzę i najlepsze praktyki.

Drobne rzeczy mogą stworzyć lub zepsuć Twoją aplikację. Nie ryzykuj swojego czasu i pieniędzy, zatrudniając kogoś, kto nie rozumie zawiłości projektowania niesamowitej aplikacji.