Design Killer Webové stránky pre mobilné aplikácie Tipy a príklady

Mobilná scéna sa za posledné roky exponenciálne rozrástla. Aplikácia iOS App Store spolu s aplikáciami pre Android v službe Google Play sa stali dvoma hotspotmi pre nadšencov smartfónov. Ako sa zvyšuje počet používateľov smartfónov, vidíme stovky vývojárov mobilných aplikácií, ktoré na trh prinášajú nové nápady.

Najpopulárnejšie aplikácie sú sprevádzané vlastnou webovou stránkou. To môže byť užitočné pri marketingu a získaní svojho mena tam. Je to tiež omnoho úžasnejšia online adresa URL než ktorákoľvek z aplikácií. Mám pocit, že každá úspešná mobilná aplikácia takmer vyžaduje webovú prítomnosť.

V tomto článku chcem prejsť niektoré z nich najčastejšie trendy v oblasti návrhov pre webové stránky pre mobilné aplikácie. Neexistuje žiadna prísna kniha pravidiel, ktorú musíte dodržiavať pri vytváraní takého rozloženia. Namiesto toho existujú niektoré unikátne pokyny a trendy, ktoré web dizajnéri zistili, že dobre pracuje pri získavaní publika. Spolu s mojím príručkou pre vývoj iOS si môžete dať dohromady fantastickú mobilnú aplikáciu a vytvoriť aj webovú stránku.

Pozrite sa na tieto koncepty nižšie a skúste implementovať niektoré do vlastného rozloženia webových stránok aplikácií.

Snímky obrazovky zariadenia

Základnou časťou webových stránok pre mobilné aplikácie musia byť snímky obrazovky aplikácie. Návštevníci sa zaujímajú iba o vašu aplikáciu a aký rýchlejší spôsob, ako preukázať jej účel, ako prostredníctvom obrazoviek obrazovky? Môžete prispôsobiť zábery zariadenia do ľubovoľného štýlu rozloženia, takže to nie je obmedzujúci faktor.

Jednoduchý šéfkuchár je španielska aplikácia pre systém iOS, ktorá využíva veľa záberov na zariadeniach. Veľmi horná časť rozloženia má ukážku rôznych obrázkov v prezentácii. Ale pri prechode dole si všimnete iné diagramy používajúce displeje iPhone. Tieto panely obsahujú podrobné štítky a upclose, zväčšené zobrazenia obrazovky. V skutočnosti som napísal o návrhu grafickej grafiky produktu v staršom príspevku.

Ďalšie zaujímavé nastavenie nájdete na stránke galérie Tweetbot. Jedná sa o veľmi populárny Twitterový klient pre iPhone a vývojári dali dohromady posuvné vitríny screenshotov. Ak sa snažíte ušetriť priestor v rozložení, môže to byť jednoduchšie riešenie. Návštevníci nebudú musieť posúvať nadol hľadajúci konkrétny pohľad. Funkcia jQuery je ľahko implementovateľná a môžete rýchlo spojiť posuvný náhľad obrazovky iPhone. Môže byť ťažké zahrnúť ďalšie podrobnosti, ale to môže byť pridané do inej sekcie.

Odznaky aplikácie App Store

Táto technika sa taktiež javí ako veľmi nezmyselná, akonáhle dokončíte stavbu aplikácie. Odznaky sa rýchlo rozpoznávajú ako odkazy na stiahnutie na trhu aplikácií. Používatelia systému Android i iOS majú možnosť prezerať si aplikácie priamo z prehliadača, alebo to bude presmerovať pri zobrazení na smartphone.

Páči sa mi, že používam Instagram ako príklad, pretože webová stránka bola aktualizovaná na novšie rozloženie. Majú odznaky podporujúce aplikáciu Android Marketplace (Google Play) a službu iOS App Store. Obe odznaky sú veľmi jednoduché, ale na prvý pohľad ľahko rozpoznateľné. Ak hľadáte komplexnejšie návrhy, odporúčam rýchle vyhľadávanie. Talentovaní dizajnéri často zdieľajú svoje koncepty odznaku obchodu s aplikáciami za konštruktívnu kritiku.

Mobilné sociálne siete

Facebook a Twitter sa zmenili na mobilný telefón, ale to nezastavilo iné siete, aby vyrastali. Vidíme, že sociálne siete používajú mobilné aplikácie, aby umožnili úplne novú platformu komunikácie.

Localmind beží na koncepcii, ktorá je podobná Foursquare, kde si zaregistrujete účet a začnete kontroluť na miestne miesta. Môžete položiť otázky alebo odpovedať na otázky iných ľudí. Ich internetová stránka je veľmi priateľská a pozýva nováčikov. Obzvlášť mám rád hornú časť banner navrhnutú s vlastným pozadím mapy. Ich použitie gradientov a textúry pozadia dávajú webové stránky svoj vlastný život.

Minimálne zdieľanie fotografií

Pose je ďalšia mobilná sieť s podobnými ideálmi pre minimalistický dizajn. Mobilnú aplikáciu môžete prevziať pre iOS i pre zariadenia Android. Tento pocit je podobný pocitu, ale je to pre milovníkov mobilnej módy. Celá aplikácia je zameraná na módu, vlasy, make-up a pôvab.

Používatelia môžu fotografovať svoje oblečenie, oblečenie alebo príslušenstvo a zdieľať ich v sieti. Jedna vec, ktorú si môžete všimnúť, je, ako rýchlo môžete prehliadať webové stránky. Je ľahké nájsť blog spoločnosti, kontaktné údaje atď. Iné webové stránky aplikácií často prehliadajú tieto firemné funkcie, ktoré môžu byť citlivé.

Ak chcete upútať pozornosť z médií, je dôležité, aby vaše webové stránky vyzerali a cítili sa ako skutočný produkt sociálnych sietí. Pokúšate sa nielen predať vašu aplikáciu (podľa reklám alebo platených predplatných), ale predávať aj samotnú sieť. Sociálne aplikácie môžu určite byť menej náročné ako navrhovanie bežných webových stránok aplikácií. Ale tiež získavajú oveľa viac sťahovaní od používateľov a je to vzrušujúce nové pole pre mobilné telefóny.

Od skromných začiatkov

Web dizajnéri nie sú vždy schopní zostaviť nehorázne grafiku a ikony. Našťastie aplikácie webových stránok nie sú kritické k tomu, koľko Adobe Photoshop zdatnosť máte. Mám pocit, že minimalizmus môže fungovať oveľa lepšie v tomto štýle rozloženia.

Leef App je novo otvorený klient spoločnosti Forrst pre iPhone. Ich webové stránky obsahujú krásny screenshot aplikácie spolu s veľkým tučným tlačidlom na stiahnutie. Celý text stránky je zjednodušený podobným spôsobom ako písma a farebné schémy spoločnosti Apple.

Čo robí stránky Leef skvelé, je úprimná povaha každého prvku stránky. Je to očividné a vopred bez toho, aby bolo skryté alebo odtiahnuté. Odporúčam skúsiť tento štýl ako prvú webovú stránku mobilnej aplikácie, ak niečo len pre prax. Môžete sa naučiť veľa tým, že minimalizujete menšie tidbits a sústredíte sa na to, čo upúta pozornosť.

Krásny biely priestor

Tiež ako brilantne jednoduché je webová stránka aplikácie Wood Camera. Ich usporiadanie neobsahuje nič iné ako obyčajné biele pozadie a sústredený obsah. Tento obsah obsahuje niektoré predvolené snímky obrazovky, odznak obchodu aplikácie a niektoré ďalšie kľúčové funkcie.

Ak máte pocit, že minimalizmus a biely priestor sú dôležité pre vaše rozloženie, potom sa držte s ním! Drevená kamera nie je zvlášť rozmazané rozloženie webových stránok, ale je veľmi jednoduché navigovať. Ich stránka sa ani nenachádza na žiadnom alternatívnom obsahu okrem oficiálnej stránky vývojára. Toto sa zameriava na aplikáciu a na to, čo môže ponúknuť, čo je oveľa dôležitejšie ako farebná grafika. Hoci to neznamená, že oslnivé umelecké diela sú zlým nápadom - vyžaduje len správnu implementáciu.

Farebné ilustrácie

Opačný k minimalistickému prístupu je práca s jedinečnými ilustráciami, ktoré úplne zbožňujem. Častokrát bude táto ďalšia podrobnosť úplne predávať aplikáciu. Jedným príkladom, s ktorým sa môžem zaoberať, je Barista App for iPhone. Hlavička ich stránok je plná malého vektora cappuccinos a espresso nápojov.

Všimnite si však, ako pri posúvaní stránky nie sú žiadne iné obrázky. Celá táto horná časť bola navrhnutá špeciálne pre iPhone aplikáciu podobnú a vstupnej stránky. Vektory okamžite zachytia vaše oči a tiež naznačujú, na čom je aplikácia.

Kitchenator je podobná aplikácia pre systém iOS, ktorá konvertuje jednotky merania na varenie a pečenie. Usporiadanie hlavičky využíva bohaté drevené textúry, kockovaný obrus a mini lyžice vody. Táto snímka naznačuje účel tejto aplikácie ešte skôr, než dokončíte obsah.

Tento dizajnový štýl skutočne preniká celým rozložením. Zápalová plocha sa zhoduje s podobným dreveným pozadím a väčšinou rovnakých možností písma. Toto je príklad veľmi jednoduchého rozloženia webových stránok s veľmi silnou grafikou.

Webové stránky aplikácie: Premium Showcase

Aký článok by bol kompletný bez trochu očného cukroví? Spolu s vyššie uvedenými technikami som tiež vytvoril túto krásnu galériu webových stránok pre mobilné aplikácie. si všimnite logo a navigačné schémy, ako aj adresy URL domén. Skúmaním toho, čo robia odborníci, môžete porozumieť návrhovým trendom a použiť ich vo svojich vlastných projektoch.

Bosquet App