Design Killer Mobile App webové stránky Tipy a příklady

Mobilní scéna v posledních letech exponenciálně rostla. IOS App Store spolu s Android Apps na Google Play se staly dvěma hotspoty pro nadšence smartphonu. Se zvyšujícím se počtem uživatelů smartphonů se setkáváme se stovkami vývojářů mobilních aplikací, kteří uvádějí na trh nové nápady.

Nejoblíbenější aplikace jsou doprovázeny vlastní webovou stránkou. To může být užitečné s marketingem a dostat své jméno tam. Je to také mnohem hezčí online adresa URL než některý z App Store. Mám pocit, že každá úspěšná mobilní aplikace téměř vyžaduje přítomnost na webu.

V tomto článku chci jít přes některé z nejběžnější trendy v designu webových stránek pro mobilní aplikace. Neexistuje žádná striktní pravidla, která musíte dodržovat pro vytvoření takového uspořádání. Spíše existují některé unikátní pokyny a trendy, které web designéři zjistili, že pracují dobře při získávání publika. Spolu s mým iOS Development Guide můžete dát dohromady fantastické mobilní aplikace a postavit své webové stránky, taky.

Podívejte se na tyto pojmy níže a zkuste implementovat některé z nich do vlastního rozložení webových stránek aplikace.

Snímky zařízení

Základní kus pro všechny webové stránky mobilní aplikace musí být snímky obrazovky aplikace. Návštěvníci se zajímají pouze o vaši aplikaci, a co rychlejší způsob, jak demonstrovat svůj účel, než prostřednictvím screenshotů? Záběry zařízení můžete umístit do libovolného stylu rozvržení, takže to není omezující faktor.

Easy Chef je španělská aplikace pro iOS, která používá mnoho záběrů zařízení. Velmi horní část rozložení má náhled prezentace různých pohledů. Ale jak se posouváte dolů, uvidíte další diagramy pomocí displejů iPhone. Tyto panely obsahují detailní popisky a upclose, zvětšené zobrazení obrazovky. Vlastně jsem psal o návrhu informativní grafiku produktu ve starším příspěvku.

Další zajímavé nastavení naleznete na stránce galerie Tweetbot. To je velmi populární Twitter klient pro iPhone a vývojáři dali dohromady posuvné vitrína screenshotů. Pokud se snažíte ušetřit místo v rozvržení, může to být jednodušší řešení. Návštěvníci nebudou muset posouvat dolů a hledat konkrétní pohled. jQuery je snadno implementovat a můžete rychle dát dohromady posuvné iPhone náhled. Může být obtížné zahrnout další podrobnosti, ale toto může být přidáno do jiné sekce.

Odznaky App Store

Tato technika se také zdá být nesmyslná, jakmile dokončíte stavbu aplikace. Odznaky jsou rychle rozpoznány jako odkazy ke stažení na trh aplikací. Uživatelé systému Android i iOS mají možnost prohlížet aplikace přímo z prohlížeče nebo přesměrovat při prohlížení na smartphonu.

Jako příklad používám Instagram, protože webové stránky byly aktualizovány na novější uspořádání. Mají odznaky podporující Android Marketplace (Google Play) a iOS App Store. Oba odznaky jsou v designu velmi jednoduché a snadno viditelné na první pohled. Pokud hledáte složitější návrhy, doporučuji rychlé driblování. Talentovaní designéři často sdílejí své koncepty pro aplikace v obchodě se značkami pro konstruktivní kritiku.

Mobilní sociální sítě

Facebook a Twitter přešli na mobilní telefony, ale to nezastavilo ostatní sítě před vzestupem. Vidíme sociální sítě, které využívají mobilní aplikace, aby umožnily celou novou komunikační platformu.

Localmind běží na konceptu, který je podobný Foursquare, kde si zaregistrujete účet a začnete kontrolovat na místních místech. Můžete zanechat otázky nebo odpovědět na otázky ostatních lidí. Jejich webové stránky jsou velmi přátelské a zvou na nováčky. Zejména milovat horní části banneru navržen s vlastní mapou pozadí. Jejich použití přechodů a textur pozadí dává webu vlastní život.

Minimální sdílení fotografií

Pose je další mobilní síť s podobnými ideály pro minimalistický design. Mobilní aplikaci můžete stáhnout pro zařízení iOS i Android. Ten pocit je podobný jako my, ale je to pro mobilní milovníky módy. Celá aplikace je zaměřena na módu, vlasy, make-up a půvab.

Uživatelé mohou fotografovat oblečení, oblečení nebo doplňky a sdílet je po síti. Jedna věc k oznámení o Pose je, jak rychle můžete procházet webové stránky. Je snadné najít firemní blog, kontaktní údaje, atd. Ostatní webové stránky aplikací často přehlížet tyto firemní funkce, které mohou být nedotčené téma.

Pokud chcete upozornit na média, je důležité, aby vaše webové stránky vypadaly a vypadaly jako skutečný produkt sociálních sítí. Nejen, že se snažíte prodat svou aplikaci (reklamou nebo placeným předplatným), ale také prodat samotnou síť. Sociální aplikace mohou být rozhodně složitější než navrhování běžných webových stránek pro aplikace. Ale také získávají mnohem více stažení od uživatelů a je to vzrušující nové pole pro mobilní telefony.

Od skromných začátků

Weboví designéři nejsou vždy schopni sestavit pobuřující grafiku a ikony. Naštěstí webové stránky aplikace nejsou kritické k tomu, jak moc Adobe Photoshop statečnost máte. Vlastně mám pocit, že minimalismus může pracovat mnohem lépe pro tento styl rozložení.

Leef App je nově vydaný klient Forrst pro iPhone. Jejich webové stránky obsahují krásný app screenshot spolu s velkým tučným tlačítkem ke stažení. Veškerý text stránky je zjednodušen podobným způsobem jako písma a barevná schémata společnosti Apple.

Co dělá webové stránky Leef skvělé, je upřímná povaha každého prvku stránky. Je to do očí bijící a nahoře s ničím skrytým nebo odsunutým stranou. Doporučuji vyzkoušet tento styl jako první webové stránky pro mobilní aplikace, pokud něco jen pro praxi. Můžete se naučit hodně tím, že minimalizujete menší tidbits a soustředíte se na to, co přitahuje pozornost.

Krásné bílé místo

Také jako brilantně jednoduchý je webová stránka aplikace Dřevěná kamera. Jejich rozvržení drží nic jiného než obyčejné bílé pozadí a soustředěný obsah. Tento obsah obsahuje některé výchozí snímky obrazovky, odznak aplikace a některé další klíčové funkce.

Pokud máte pocit, že minimalismus a prázdné místo jsou důležité pro vaše rozložení pak držet se ho! Dřevěná kamera není zvláště ohromující rozložení webových stránek, ale je velmi snadné se s ní orientovat. Jejich stránky ani odkaz na žádné alternativní obsah stranou od oficiální stránky vývojáře. To udržuje zaměření na aplikaci a to, co může nabídnout, což je mnohem důležitější než honosné grafiky. Ačkoliv to neznamená, že by to byla falešná představa, je to jen správná implementace.

Barevné ilustrace

Opačným opakem minimalistického přístupu je dílo s jedinečnými ilustracemi, které zbožňuji. Často se tento podrobný detail zcela prodá aplikaci. Jeden příklad, který se můžu týkat, je aplikace Barista pro iPhone. Jejich záhlaví stránek je prošpikováno malými vektorovými cappuccinos a espresso nápoji.

Všimněte si však, že při posouvání stránky nejsou žádné další obrázky. Tato celá horní sekce byla navržena speciálně pro aplikaci pro iPhone, podobná aplikaci vstupní stránka. Vektory okamžitě zachytí vaše oči a také naznačují, o čem je aplikace.

Kitchenator je podobná aplikace pro iOS, která převádí jednotky měření pro vaření a pečení. Jejich uspořádání záhlaví využívá bohaté dřevěné textury, kostkovaný ubrus a mini lžíce vody. Tyto snímky se týkají účelu této aplikace, než budete ještě sbírat obsah.

Tento designový styl skutečně prochází celým rozvržením. Oblast zápatí se shoduje s podobným dřevěným pozadím a hodně stejných možností písma. Toto je příklad velmi jednoduchého rozložení webových stránek s velmi výkonnou grafikou.

Webové stránky aplikací: Premium Showcase

Jaký článek by byl kompletní, aniž by se trochu oční cukroví? Spolu s výše uvedenými technikami jsem také sestavil tuto krásnou galerii webových stránek pro mobilní aplikace; si všimnout loga a navigačních schémat, stejně jako doménových adres URL. Studiem toho, co odborníci dělají, můžete porozumět trendům v oblasti designu a používat je ve vlastních projektech.

Bosquet App