Killer Mobile App webhelyek tervezése Tippek és példák

A mobil jelenet az elmúlt pár évben exponenciálisan nőtt. Az iOS App Store és az Android-alkalmazások a Google Playen az okostelefon-rajongók két hotspotjává váltak. Ahogy növekszik az okostelefon-felhasználók száma, több száz mobilalkalmazás-fejlesztőt látunk, akik új ötleteket hoznak a piacra.

A legnépszerűbb alkalmazásokat saját honlapjuk kísérheti. Ez segíthet a marketingben és a neved megszerzésében. Ez is egy sokkal szépebb online URL, mint bármelyik App Stores. Úgy érzem, hogy minden sikeres mobilalkalmazás szinte webes jelenlétet igényel.

Ebben a cikkben szeretnék átugrani néhányat a mobilalkalmazások webhelyeinek leggyakoribb tervezési trendjei. Nincs ilyen szigorú szabálykönyv, amit követnie kell az ilyen elrendezés kialakításához. Inkább vannak olyan egyedi iránymutatások és trendek, amelyeket a webes tervezők jól találtak a közönség megszerzéséhez. Az iOS Fejlesztési Útmutatóval párosítva fantasztikus mobilalkalmazást is összeállíthat és webhelyét is felépítheti.

Tekintse meg ezeket az elképzeléseket, és próbálja meg végrehajtani néhányat a saját webhely-elrendezésében.

Eszközképek

A mobilalkalmazás webhelyének vágott darabjának az alkalmazás képernyőképének kell lennie. A látogatókat csak az alkalmazás érdekli, és mi a gyorsabb módja annak, hogy bemutassa célját, mint a képernyőképek? Az eszközképeket bármilyen elrendezési stílusba illesztheti, így ez nem korlátozó tényező.

Az Easy Chef egy spanyol iOS alkalmazás, amely számos eszközfelvételt használ. Az elrendezés legelső részén különböző nézetekről van szó diavetítésről. De amikor lefelé görgetünk, más iPhone-kijelzőket is láthatsz. Ezek a panelek tartalmazzák a részletes címkéket és az upclose-t, a nagyított képernyő nézeteket. Tényleg írtam egy informatív termékgrafika tervezéséről egy régebbi hozzászólásban.

Egy másik érdekes beállítás megtalálható a Tweetbot galéria oldalon. Ez egy nagyon népszerű Twitter kliens az iPhone számára, és a fejlesztők egy csúszó bemutatót készítettek a képernyőképekről. Ha helyet akar megtakarítani az elrendezésben, ez könnyebb megoldás lehet. A látogatóknak nem kell lefelé görgetniük egy adott nézetet. A jQuery könnyen kivitelezhető, és gyorsan összeállíthat egy iPhone képernyőkép előnézetet. Nehéz lehet további részleteket felvenni, de ezt egy másik részben is hozzá lehet adni.

App Store jelvények

Ez a technika is nagyon rosszul tűnik, ha befejezte az alkalmazás építését. A jelvények gyorsan felismerhetők, mint letöltési hivatkozások az alkalmazáspiacra. Az Android és az iOS felhasználók egyaránt megtekinthetik az alkalmazásokat a böngészőjéből, vagy egy okostelefonra nézve átirányítják.

Szeretem példaként használni az Instagram-ot, mivel a webhely újabb elrendezésre frissült. Az Android Marketplace-t (Google Play) és az iOS App Store-t támogató jelvényekkel rendelkeznek. Mindkét jelvény nagyon egyszerű, mégis könnyen felismerhető. Ha bonyolultabb terveket keres, javaslom, hogy gyorsan keressen. A tehetséges tervezők gyakran osztják meg apptároló jelvénykoncepcióikat a konstruktív kritikákra.

Mobil szociális hálózatok

A Facebook és a Twitter mobilra váltott, de ez nem akadályozta meg más hálózatok kihajtását. A közösségi hálózatok mobilalkalmazásokat használnak, hogy teljesen új kommunikációs platformot biztosítsanak.

A Localmind egy olyan koncepcióra fut, amely hasonló a Foursquare-hoz, ahol regisztrál egy fiókot, és elkezdi ellenőrizni a helyi helyeket. Hagyhat kérdéseket, vagy válaszolhat más emberek kérdéseire. Honlapjuk nagyon barátságos és meghívó az újonnan érkezőknek. Különösen szeretem a felső bannerszakaszt, amelyet egy egyedi térkép háttérrel terveztek. A színátmenetek és a háttér textúra használatával a honlap saját életet biztosít.

Minimális fotómegosztás

A Pose egy másik mobilhálózat, amelynek hasonló eszméi vannak a minimalista design számára. A mobilalkalmazást letöltheti mind az iOS, mind az Android készülékekre. Az érzés hasonló a weheartithoz, de a mobil divat szerelmeseinek. Az egész alkalmazás a divat, a haj, a smink és a csillogás köré összpontosít.

A felhasználók fotókat készíthetnek a ruhájukról, ruháikról vagy kiegészítőkről, és megoszthatják őket a hálózaton. Az egyik dolog, amit a Pose-ról észrevehetünk, milyen gyorsan lehet böngészni a weboldalon. Könnyű megtalálni a cég blogját, elérhetőségeit stb.

Ha szeretné felhívni a figyelmet a médiából, fontos, hogy a webhelye úgy nézzen ki és érezze magát, mint egy igazi közösségi hálózati termék. Nemcsak az alkalmazásodat (hirdetések vagy fizetett előfizetés) próbálod eladni, hanem magad is eladod a hálózatot. A szociális alkalmazások határozottan bonyolultabbak, mint a rendszeres alkalmazás weboldalak tervezése. De sokkal több letöltést is gyűjtenek a felhasználóktól, és ez egy izgalmas új terület a mobil számára.

Alázatos kezdetekből

A webes tervezők nem mindig képesek felháborító grafikák és ikonok összeállítására. Szerencsére az app weboldalak nem kritikusak ahhoz, hogy mennyi Adobe Photoshop prowess van. Valójában úgy érzem, hogy a minimalizmus sokkal jobban működik ezen az elrendezési stílusnál.

A Leef App egy újonnan kiadott Forrst ügyfél az iPhone számára. Honlapjuk egy szép alkalmazásképet tartalmaz egy nagy, merész letöltési gomb mellett. Az oldal minden szövegét az Apple betűkészleteihez és színsémáihoz hasonló módon egyszerűsítik.

A Leef weboldalának nagyszerűsége az egyes oldalelemek őszinte jellege. Kétségtelen és elején, semmi sem rejtve, sem félretéve. Azt javaslom, hogy próbálja meg ezt a stílust az első mobilalkalmazás weboldalaként, ha bármi csak a gyakorlat számára. Sokat tanulhat a legkisebb tidbits minimalizálásával és arra, hogy összpontosítson a figyelemre.

Lovely Whitespace

A Wood Camera App honlapja is kiválóan egyszerű. Elrendezésük semmi más, mint egy egyszerű fehér háttér és középre szabott tartalom. Ez a tartalom tartalmaz néhány alapértelmezett képernyőképet, egy alkalmazástároló jelvényt és néhány további alapvető funkciót.

Ha úgy érzi, a minimalizmus és a fehér tér fontos az elrendezéshez, akkor ragaszkodj hozzá! A Wood Camera nem egy különösen elgondolkodó weboldal elrendezés, de nagyon könnyű navigálni. A webhelyük még a fejlesztői hivatalos lapon kívül sem hivatkozik más alternatív tartalmakhoz. Ez az alkalmazásra és a kínálatra összpontosít, ami sokkal fontosabb, mint a ragyogó grafika. Bár ez nem jelenti azt, hogy ragyogó műalkotás egy rossz ötlet - csak megfelelő végrehajtást igényel.

Színes illusztrációk

A minimalista megközelítéssel ellentétben az egyedülálló illusztrációkkal rendelkező munka, amit teljesen imádok. Gyakran ez az extra részlet teljesen eladja nekem az alkalmazást. Egy példa erre a Barista App for iPhone. A webhely fejlécét kis vektor cappuccinos és eszpresszó italok látják el.

De vegye észre, hogy nincsenek más képek, amikor az oldalt lefelé görgetjük. Ez az egész felső rész kifejezetten az iPhone alkalmazáshoz készült, hasonlóan az a nyitóoldal. A vektorok azonnal elkapják a szemét, és arra is utalnak, hogy mi az alkalmazás.

A konyhai eszközök egy hasonló iOS alkalmazás, amely a mérési egységeket főzésre és sütésre alakítja át. A fejléc elrendezése gazdag fából készült textúrákat, kockás terítőt és mini kanál vizet tartalmaz. Ez a kép az alkalmazás céljaira utal, mielőtt még a tartalmat is megveti.

Ez a tervezési stílus ténylegesen áthatol a teljes elrendezésen. A láblécterület hasonló fa háttérrel és ugyanazzal a betűtípus-választással rendelkezik. Ez egy példa egy nagyon egyszerű webhely-elrendezésre, amely nagyon erős grafikával rendelkezik.

App Websites: Prémium bemutató

Milyen cikk lenne teljes anélkül, hogy egy kis szemcukorka lenne? A fenti technikák mellett a mobilalkalmazások weboldalainak ezt a gyönyörű galériáját is összeállítottam; észre a logót és a navigációs rendszereket, valamint a tartomány URL-címét. A szakemberek tanulmányozásával megértheti a tervezési trendeket és használhatja azokat saját projektjeiben.

Bosquet App