Използването на материалния дизайн за изработката на мобилни приложения за Android

С пускането на версията Lollipop на мобилната операционна система Android, Google наложи материалния дизайн като водещ при изграждането на мобилни приложения. Чрез този визуален език се въведоха нови стандарти в графичното представяне на елементите, в движенията и анимацията и във взаимодействието между потребителите и интерфейса. Запознайте се с някои от основните аспекти от прилагането му.

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

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

Дизайн, подобен на печатния
Основополагащите елементи тук са типографията (шрифтовете), решетките, празните пространства, цветовете, мащабите и използването на изображения. Тези елементи носят не само наслада за окото, а създават йерархия, смисъл и фокус. Какъв е най-добрият начин за използването им?

Основната решетъчна система, която се използва за изработката на Android мобилни приложения, идва с празно поле с размер от 8dp (dp е единица мярка, равна на един физически пиксел на екран с гъстота от 160). В повечето случаи между елементите се оставя място от 16dp за по-голяма прегледност. Така е по-лесно за хората да се концентрират върху даден елемент.

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

Използването на изображения е също толкова важно за въвличането на аудиторията. Най-добре е те да присъстват на всеки екран със съдържание, както и в менюто, където е удачно. Те трябва да подчертават и/или допълват посланието.

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

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

Бърз преглед - Може да се създаде специален бутон, при използването на който, уводната част на статия от списъка, включваща изображението и заглавието, изскача на екрана. Бързият преглед е особено ценен за потребителите, защото спестява време. Самият визуален ефект също е много приятен, когато е направен добре.
Визуална последователност - Когато потребителят иска да прочете цялата статия и тя се появи на екрана, той трябва да вижда увеличено копие на секцията от списъка, която е докоснал. Заглавието и снимката трябва да се пренесат най-горе на екрана в по-голям размер, така че да може човекът да се ориентира интуитивно. Принципът на последователност може да изглежда елементарен, но може да има и пречки при прилагането му. Такива могат да изникнат например, когато изображението е вътре в статията, а не под заглавието ѝ. Тук се изисква творческо решение.
Материална повърхност - Този принцип е свързан с изскачането на екрана за бърз преглед. Сам по себе си, той е материална повърхност, и неговият фон и размерът на елементите на него могат да се различават от тези на първоначалния екран. Така потребителят ясно разбира точно какво гледа и интуитивно се сеща как да се върне назад и как да продължи напред.

Адаптивен дизайн
Когато се изработва мобилно приложение за Android, целта е то да работи на всякакви видове устройства. Тук се включват не само хилядите смартфони и таблети, които използват тази операционна система, но и смарт часовниците и телевизорите с интернет връзка. Чрез адаптивния дизайн се реализира визията на Google, че всяко устройство отразява различна гледна точка на една и съща основополагаща система.

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

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

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

Споделете в: