Design Killer Mobile App Strony internetowe Porady i przykłady

Scena mobilna rozwijała się wykładniczo w ciągu ostatnich kilku lat. Sklep iOS App Store wraz z aplikacjami Android w Google Play stały się dwoma hotspotami dla entuzjastów smartfonów. Wraz ze wzrostem liczby użytkowników smartfonów widzimy setki twórców aplikacji mobilnych wprowadzających na rynek nowe pomysły.

Najbardziej popularnym aplikacjom towarzyszy ich własna strona internetowa. Może to być pomocne w marketingu i zdobyciu twojego nazwiska. Jest to również dużo ładniejszy URL online niż którykolwiek z App Store. Uważam, że każda udana aplikacja mobilna prawie wymaga obecności w sieci.

W tym artykule chcę przejrzeć niektóre z nich najpopularniejsze trendy w projektowaniu stron internetowych aplikacji mobilnych. Nie ma ścisłej instrukcji, której należy przestrzegać, aby zbudować taki układ. Istnieją raczej wyjątkowe wytyczne i trendy, które projektanci stron internetowych dobrze sprawdzili się w pozyskiwaniu odbiorców. W połączeniu z moim iOS Development Guide możesz stworzyć fantastyczną aplikację mobilną i zbudować swoją stronę internetową.

Sprawdź poniższe koncepcje i spróbuj zaimplementować niektóre z nich we własnym układzie strony internetowej aplikacji.

Zrzuty ekranu urządzenia

Elementem staplowym dla każdej strony aplikacji mobilnej muszą być zrzuty ekranu aplikacji. Odwiedzający są zainteresowani tylko Twoją aplikacją i co szybszym sposobem zademonstrowania jej celu niż zrzuty ekranu? Możesz dopasować ujęcia urządzenia do dowolnego stylu układu, więc nie jest to czynnik ograniczający.

Easy Chef to hiszpańska aplikacja iOS, która wykorzystuje wiele ujęć urządzenia. W górnej części układu znajduje się podgląd różnych widoków w formie pokazu slajdów. Ale gdy przewijasz w dół, zauważysz inne diagramy za pomocą wyświetlaczy iPhone'a. Panele te zawierają szczegółowe etykiety i powiększone, powiększone widoki ekranu. Właściwie napisałem o zaprojektowaniu graficznej informacji o produkcie w starszym poście.

Inną ciekawą konfigurację można znaleźć na stronie galerii Tweetbot. Jest to bardzo popularny klient Twittera na iPhone'a, a programiści stworzyli przesuwną wizytówkę zrzutów ekranu. Jeśli próbujesz zaoszczędzić miejsce w swoim układzie, może to być łatwiejsze rozwiązanie. Odwiedzający nie będą musieli przewijać w dół, szukając konkretnego widoku. jQuery jest łatwy do zaimplementowania i można szybko złożyć przesuwny podgląd ekranu iPhone'a. Dodanie dodatkowych szczegółów może być trudne, ale można to dodać w innej sekcji.

Odznaki App Store

Ta technika również wydaje się bardzo bezsensowna po zakończeniu tworzenia aplikacji. Odznaki są szybko rozpoznawane jako linki do pobrania na rynek aplikacji. Zarówno użytkownicy systemu Android, jak i iOS mają możliwość przeglądania aplikacji bezpośrednio z przeglądarki lub przekierowanie podczas przeglądania na smartfonie.

Lubię używać Instagram jako przykładu, ponieważ witryna została zaktualizowana do nowszego układu. Mają odznaki wspierające Android Marketplace (Google Play) i iOS App Store. Obie odznaki są bardzo proste w konstrukcji, ale łatwo rozpoznawalne na pierwszy rzut oka. Jeśli szukasz bardziej złożonych projektów, polecam szybkie wyszukiwanie dryblingu. Utalentowani projektanci często dzielą się swoimi pomysłami związanymi ze sklepami z aplikacjami na konstruktywną krytykę.

Mobilne sieci społecznościowe

Facebook i Twitter przełączyły się na telefony komórkowe, ale to nie powstrzymało innych sieci przed wyrastaniem. Widzimy, że serwisy społecznościowe wykorzystują aplikacje mobilne, aby umożliwić zupełnie nową platformę komunikacji.

Localmind działa w oparciu o koncepcję podobną do koncepcji Foursquare, w której rejestrujesz konto i zaczynasz sprawdzać w lokalnych miejscach. Możesz zostawić pytania lub odpowiedzieć na pytania innych osób. Ich strona internetowa jest bardzo przyjazna i zachęcająca dla nowych użytkowników. Szczególnie podoba mi się sekcja górnego banera zaprojektowana z niestandardowym tłem mapy. Wykorzystanie gradientów i tekstury tła sprawia, że strona ma własne życie.

Minimalne udostępnianie zdjęć

Pose to kolejna sieć komórkowa z podobnymi ideałami minimalistycznego designu. Możesz pobrać aplikację mobilną na urządzenia z systemem iOS i Android. To uczucie jest podobne do weheartit, ale dla miłośników mody mobilnej. Cała aplikacja skupia się wokół mody, włosów, makijażu i glamour.

Użytkownicy mogą robić zdjęcia swojego stroju, ubrania lub akcesoriów i dzielić się nimi w sieci. Jedną rzeczą, którą należy zauważyć w Pose, jest to, jak szybko możesz przeglądać stronę. Łatwo jest znaleźć blog firmowy, dane kontaktowe itp. Inne witryny aplikacji często pomijają te funkcje korporacyjne, które mogą być drażliwym tematem.

Jeśli chcesz zwrócić uwagę mediów, ważne jest, aby Twoja strona wyglądała i wyglądała jak prawdziwy produkt społecznościowy. Próbujesz nie tylko sprzedać swoją aplikację (przez reklamy lub płatną subskrypcję), ale także sprzedać samą sieć. Aplikacje społecznościowe mogą być zdecydowanie trudniejsze niż projektowanie zwykłych stron aplikacji. Ale zbierają też dużo więcej plików do pobrania od użytkowników i jest to ekscytująca nowa dziedzina dla urządzeń mobilnych.

Od skromnych początków

Projektanci stron internetowych nie zawsze są w stanie połączyć skandaliczne grafiki i ikony. Na szczęście strony z aplikacjami nie są krytyczne w stosunku do tego, ile masz umiejętności Adobe Photoshop. Uważam, że minimalizm może działać znacznie lepiej w tym stylu układu.

Leef App to nowo wydany klient Forrst dla iPhone'a. Ich strona internetowa zawiera piękny zrzut ekranu wraz z dużym pogrubionym przyciskiem pobierania. Cały tekst strony jest uproszczony w podobny sposób jak czcionki i schematy kolorów Apple.

To, co sprawia, że strona Leef jest wspaniała, to szczery charakter każdego elementu strony. Jest rażący i na pierwszy rzut oka z niczym ukrytym lub zepchniętym na bok. Polecam wypróbować ten styl jako swoją pierwszą stronę aplikacji mobilnej, jeśli tylko dla praktyki. Możesz się wiele nauczyć, minimalizując mniejsze ciekawostki i koncentrując się na tym, co przyciąga uwagę.

Urocza biała spacja

Równie genialnie prosta jest strona Wood Camera App. Ich układ nie zawiera niczego poza zwykłym białym tłem i treścią wyśrodkowaną. Ta zawartość zawiera kilka domyślnych zrzutów ekranu, odznakę sklepu z aplikacjami i kilka dodatkowych kluczowych funkcji.

Jeśli uważasz, że minimalizm i białe znaki są ważne dla twojego układu, trzymaj się go! Wood Camera nie jest szczególnie ciekawym układem strony internetowej, ale jest bardzo łatwy w nawigacji. Ich strona nie zawiera nawet żadnych alternatywnych treści poza oficjalną stroną dewelopera. Pozwala to skupić się na aplikacji i jej możliwościach, co jest znacznie ważniejsze niż błyskotliwa grafika. Chociaż nie znaczy to, że błyskotliwa grafika jest złym pomysłem - wymaga tylko właściwej implementacji.

Kolorowe ilustracje

Dość odwrotnie do podejścia minimalistycznego jest praca z unikalnymi ilustracjami, które uwielbiam. Często ten dodatkowy szczegół całkowicie sprzedaje mi aplikację. Jednym z przykładów, do których mogę się odnieść, jest aplikacja Barista na iPhone'a. Ich nagłówek jest pełen małych, wektorowych cappuccino i napojów espresso.

Ale zauważ, że podczas przewijania strony nie ma żadnych innych obrazów. Ta cała górna sekcja została zaprojektowana specjalnie dla aplikacji na iPhone'a, podobnej do a wstęp. Wektory od razu rzucają się w oczy, a także wskazują, na czym polega aplikacja.

Kitchenator to podobna aplikacja iOS, która przekształca jednostki miary do gotowania i pieczenia. Ich układ nagłówka wykorzystuje bogate drewniane tekstury, obrus w kratkę i mini łyżeczki wody. To zdjęcie podpowiada cel tej aplikacji, zanim przejrzysz zawartość.

Ten styl projektowania przenika cały układ. Obszar stopki pasuje do podobnego drewnianego tła i wielu takich samych czcionek. Jest to przykład bardzo prostego układu strony z bardzo potężną grafiką.

Witryny aplikacji: Premium Showcase

Jaki artykuł byłby kompletny bez odrobiny słodyczy? Wraz z powyższymi technikami stworzyłem również tę piękną galerię stron internetowych aplikacji mobilnych; zwróć uwagę na logo i schematy nawigacji, a także adresy URL domen. Badając, co robią profesjonaliści, możesz zrozumieć trendy projektowe i wykorzystać je we własnych projektach.

Bosquet App