Дизайн Killer Mobile App сайтове Съвети и примери

Мобилната сцена нараства експоненциално през последните няколко години. IOS App Store заедно с Android Apps в Google Play се превърнаха в две горещи точки за любителите на смартфоните. С увеличаването на броя на потребителите на смартфони виждаме стотици разработчици на мобилни приложения, които пускат на пазара нови идеи.

Най-популярните приложения са придружени от собствен уебсайт. Това може да бъде от полза при маркетинга и получаването на името ви там. Също така е много по-красив онлайн URL адрес от който и да е от магазините за приложения. Чувствам, че всяко успешно мобилно приложение почти изисква уеб присъствие.

В тази статия искам да прегледам някои от най-често срещаните тенденции при проектирането на уебсайтове за мобилни приложения. Няма строг правилник, който трябва да следвате за изграждането на такова оформление. По-скоро има някои уникални насоки и тенденции, които уеб дизайнерите са намерили да работят добре в привличането на аудитория. Съчетано с моето ръководство за разработка на iOS можете да съберете фантастично мобилно приложение и да създадете неговия уебсайт.

Разгледайте тези понятия по-долу и опитайте да въведете някои в собственото оформление на уебсайта на приложението.

Екранни снимки на устройството

Едно основно парче за всеки уебсайт за мобилни приложения трябва да бъде екранни снимки на приложението. Посетителите се интересуват само от вашето приложение и какъв по-бърз начин да демонстрирате неговата цел, отколкото чрез екранни снимки? Можете да поставите снимките на устройството във всеки стил на оформление, така че да не е ограничаващ фактор.

Лесно Chef е испански iOS приложение, което използва много снимки на устройството. В горната част на оформлението има преглед на слайдшоуто на различни изгледи. Но докато превъртате надолу, ще забележите други диаграми с помощта на дисплеите на iPhone. Тези панели включват подробни етикети и увеличени, увеличени изгледи на екрана. Всъщност пиша за проектирането на информационни продуктови графики в по-стари постове.

Друга интересна настройка може да бъде намерена на страницата на галерията в Tweetbot. Това е много популярен Twitter клиент за iPhone и разработчиците са събрали плъзгаща се витрина със снимки на екрани. Ако се опитвате да спестите място в оформлението си, това може да е по-лесно решение. Посетителите няма да трябва да превъртат надолу, за да търсят конкретен изглед. jQuery е лесен за изпълнение и можете бързо да съберете плъзгащ се предварителен екран на iPhone. Може да е трудно да се включат допълнителни подробности, но това може да се добави в друг раздел.

Значки на App Store

Тази техника също изглежда много безсмислена, след като приключите с изграждането на приложението. Значките бързо се разпознават като връзки за изтегляне към пазара на приложения. Потребителите на Android и iOS имат възможност да преглеждат приложенията директно от браузъра си, или това ще се пренасочи, когато се гледа на смартфон.

Харесва ми да използвам Instagram като пример, тъй като уебсайтът беше актуализиран до по-ново оформление. Те имат значки, поддържащи Android Marketplace (Google Play) и iOS App Store. И двата значка са много прости в дизайна, но лесно се разпознават с един поглед. Ако търсите по-сложни дизайни, препоръчвам бързо търсене на дрибъл. Талантливите дизайнери често споделят концепциите си за значки в магазин за приложения за конструктивни критики.

Мобилни социални мрежи

Facebook и Twitter са преминали към мобилни, но това не е спряло други мрежи да поникнат. Виждаме, че социалните мрежи използват мобилни приложения, за да позволят изцяло нова платформа за комуникация.

Localmind работи по концепция, която е подобна на Foursquare, където регистрирате сметка и започнете да посещавате местните места. Можете да оставяте въпроси или да отговаряте на въпроси на други хора. Сайтът им е много приятелски настроен и приканва новодошлите. Особено ми харесва горната част на банера, създадена с персонализиран фон на картата. Използването на градиенти и фонова текстура придават на сайта свой собствен живот.

Минимално споделяне на снимки

Pose е друга мобилна мрежа с подобни идеали за минималистичен дизайн. Можете да изтеглите приложението за мобилни устройства за устройства с iOS и Android. Усещането е подобно на weheartit, но е за любителите на мобилната мода. Цялото приложение е фокусирано около модата, косата, грима и блясъка.

Потребителите могат да правят снимки на своето облекло, дрехи или аксесоари и да ги споделят в мрежата. Едно нещо, което трябва да забележите, е колко бързо можете да разглеждате уебсайта. Лесно е да намерите блога на компанията, данните за контакт и др. Други уебсайтове на приложения често пренебрегват тези корпоративни функции, които могат да бъдат чувствителна тема.

Ако искате да привлечете вниманието от медиите, важно е да направите уебсайта си и да се почувствате като истински продукт за социални мрежи. Вие не само се опитвате да продавате приложението си (чрез реклами или платен абонамент), но и да продавате мрежата. Социалните приложения определено могат да бъдат по-трудни от проектирането на обикновени уебсайтове на приложения. Но те също така привличат много повече изтегляния от потребителите и това е вълнуващо ново поле за мобилни устройства.

От скромно начало

Уеб дизайнерите не винаги са в състояние да съберат скандални графики и икони. За щастие уебсайтовете на приложенията не са критични по отношение на това колко много притежавате Adobe Photoshop. Аз всъщност чувствам, че минимализмът може да работи много по-добре за този стил на оформление.

Leef App е новоиздаден Forrst клиент за iPhone. Техният уебсайт включва красива скрийншот на приложението заедно с голям смел бутон за изтегляне. Целият текст на страницата е опростен по подобен начин на шрифтовете и цветовите схеми на Apple.

Това, което прави уебсайта на Leef голям, е откровеният характер на всеки елемент на страницата. Това е очевидна и авангардна с нищо скрито или отблъснато. Препоръчвам да изпробвате този стил като първия си уебсайт за мобилни приложения, ако имате нещо друго само за практика. Можете да научите много чрез свеждане до минимум на по-малките парченца и съсредоточаване върху това, което грабва вниманието.

Прекрасно бяло пространство

Също така брилянтно проста е уебсайтът на приложението Wood Camera. Тяхното оформление съдържа само обикновен бял фон и центрирано съдържание. Това съдържание включва някои скрийншотове по подразбиране, значка в магазина за приложения и някои допълнителни ключови функции.

Ако се чувствате като минимализъм и бяло пространство са важни за оформлението ви тогава се придържайте към него! Дървената камера не е особено впечатляваща, но е супер лесна за навигация. Сайтът им дори не свързва никакво алтернативно съдържание встрани от официалната страница на разработчика. Това продължава да се фокусира върху приложението и това, което може да предложи, което е много по-важно от находчивите графики. Въпреки, че това не е да кажем наперен произведения на изкуството е лоша идея - тя просто изисква правилно изпълнение.

Цветни илюстрации

Точно обратното на минималистичния подход е работа с уникални илюстрации, които напълно обожавам. Често пъти тази допълнителна подробност напълно ще ми продаде приложението. Един пример мога да се отнасят до е Barista App за iPhone. Заглавната част на сайта им е изпълнена с малко капучино и еспресо напитки.

Но забележете как няма никакви други изображения при превъртане надолу по страницата. Целият горен раздел е създаден специално за iPhone приложението, подобно на a целевата страница. Векторите хванат очите ви веднага и също намекват за това, за което се отнася приложението.

Kitchenator е подобно приложение за iOS, което преобразува мерни единици за готвене и печене. В тяхното заглавно оформление се използват богати дървени текстури, карирана покривка за маса и мини лъжици вода. Тези изображения предполагат целта на това приложение, преди дори да прегледате съдържанието.

Този стил на дизайн действително прониква през цялото оформление. Областта на долния колонтитул съвпада с подобен дървен фон и много от същите възможности за избор на шрифт. Това е пример за много просто оформление на уебсайт с някои много мощни графики.

Уебсайтове на приложения: Premium Showcase

Коя статия ще бъде пълна без малко бонбони? Заедно с горните техники съм събрал и тази красива галерия от уебсайтове за мобилни приложения; забележите логото и навигационните схеми, както и URL адресите на домейна. Като изучавате какво правят професионалистите, можете да разберете тенденциите в дизайна и да ги използвате във вашите собствени проекти.

Bosquet App