Последние новшества в дизайне мобильных приложений

02.11.2015 13:03364

Потребности пользователей в многозадачности растут. Исходя из этого, сформировались определенный тренды в дизайне мобильных приложений.

Люди все чаще используют мобильные приложения в работе и повседневной жизни. За последние 2-3 года их дизайн и функционал очень поменялся. И эти изменения только в лучшую сторону. На то, как будут выглядеть сами приложения, влияет много факторов - начиная от социальных трендов, заканчивая изменениями в технологиях.

Сегодня смартфоном пользуются 30 % украинцев и еще у 15 % есть планшет. Из года в год наблюдается позитивная динамика увеличения "юзеров" этих дэвайсов. А чем чаще люди используют мобильные устройства в повседневной жизни, тем больше они думают о качестве и удобстве установленных приложений.

Приложения позволяю в считанные минуты решить любую задачу. Проверка рабочей почты? Бронирование комнаты в отеле? Заказ еды на дом? Не проблема. Приложения, которые выделяются среди других, как, например, Airbnb, позволяют минимизировать время на поиск необходимого функционала внутри самих приложений. Это способствует развитию многозадачности пользователей и дает им возможность сделать больше дел одновременно. Потребности пользователей в многозадачности растут. Исходя из этого, сформировались определенный тренды в дизайне мобильных приложений.

1. Проведение пальцами  вытесняет нажатие клавиш

В момент появления первых смартфонов с тач-скрином программисты и дизайнеры столкнулись с созданием приложений с абсолютно непривычными свойствами. На тот момент нажатие необходимой кнопки на экране для увеличения или уменьшения изображений и текста стали инновацией. Однако, подобное решение не является лучшим для мобильного приложения. Пользователи часто сталкивались со слишком маленькими и неудобными кнопками, нажимать которые просто было бы лишь обладателям тонких музыкальных пальцев.

Проведение пальцем по экрану является намного более естественным движением для человека, в особенности если только одна рука является свободной. Для проверки, попробуйте нажать на экран своего смартфона большим пальцем руки, в которой его держите, а потом, для сравнения, провести этим же пальцем по экрану. Более комфортным движением будет второе.

Примером приложения, основой которого является проведение пальцем по экрану, может быть Tinder (приложение для знакомств с людьми, находящимися рядом, распространенное в Европе и США, основано на игре "нравится-не нравится", в случае если человек вам нравится, вы проводите пальцем вправо, если нет – влево; в случае совпадения симпатий вы можете познакомиться с человеком). За время меньшее нужного для просмотра трейлера романтической комедии, вы можете заявить о себе целой толпе потенциальных партнеров, и это с использованием всего лишь одного пальца на руке! Tinder является доказательством актуальности подобного решения в функционале приложения, поскольку количество его пользователей уже перевалило за миллиард.

2. Экраны телефонов увеличиваются

Всё больше людей начинают пользоваться "фаблетами" — телефонами с нестандартно большим экраном, что-то среднее между телефоном и планшетом ("phone"+"tablet"). Что же это может значить для разработчиков и дизайнеров мобильных приложений?

Разрабатывая дизайн для больших экранов важно учитывать то, как пользователи будут держать мобильное устройство в руках. Для этого необходимо размещать наиболее важные элементы навигации поближе к большим пальцам пользователя для более легкого доступа, поскольку, вероятно, не так просто будет достать их в верхних углах экрана. Таким образом, нужно просто размещать основные интерактивные элементы в нижних углах экрана. Однако, в этом решении есть свои подводные камни, ведь 10% пользователей являются левшами.

Конечно, можно дать всем пользователям возможность использовать хватку двумя руками, и, учитывая размер сегодняшних мобильных устройств, это будет самый распространенный способ держать свой телефон. С другой стороны, можно сделать максимально дружественный интерфейс посредством создания достаточно крупных интерактивных элементов, которые можно будет достать при любой позиции рук. Также хорошим решением этой проблемы будет создание интерфейса, который можно кастомизировать.

В любом случае, важно подходить к дизайну мобильных приложений с пониманием того, что некоторые решения могут привести не только к интерфейсу с пониженной функциональностью и интуитивностью, но и к усталости рук пользователя. Про это стоит помнить во время тестирования и анализа качества приложений.

3. Дизайн с выделенными элементами

В вечном споре между плоским дизайном и скевоморфизмом (физический орнамент или элемент дизайна, который повторяет черты других объектов, например, скин в вашем винампе, повторяющий музыкальный центр 90-х годов или десктопный календарь, который имитирует бумажный с отрывными страницами) вряд ли будет найдена золотая середина. Для критиков скевоморфизма он выступает как банальное перенесение текстур из реальной жизни в диджитал-контекст, и выглядит он так же аляповато, как и копирование текстур красного дерева на приборной панели вашего автомобиля. Однако, плоский дизайн, который приветствуют в наше время, тоже имеет свои недостатки. При минимизации текстур и выделений в мобильном приложении могут возникнуть трудности восприятия, поскольку не будет видно четких границ между активными и неактивными элементами.

Компромиссом является выделенный плоский дизайн, или то, что Google называет "материальным дизайном". Подобный тип изображения объектов многое перенял у плоского дизайна, однако, содержит и ключевые черты скевоморфизма. Как и в плоском дизайне, элементы материального дизайна такие же геометрически правильные, с преимущественно цветным выделением, вместо копирования натуральных текстур или сияния. Но так же, как и в скевоморфизме, материальный дизайн заимствует метафоры реального мира, в основном это манера движения и взаимодействия объектов друг с другом. Тени и другие световые эффекты возвращаются и становятся трендовыми.

Из этого слияния плоского дизайна с натуральной физикой следует, что пользователь более интуитивно понимает, как действуют объекты на экране. Объекты имеют вес и инерцию, когда вы взаимодействуете с ними на экране. Объекты может "заносить" если вы двигаете их вокруг экрана, и они могут отбрасывать тень на другие объекты под ними. Таким образом, получается элегантная смесь юзабилити скевоморфизма и эстетики плоского дизайна, которые позволяют пользователю переживать новые, приятные ощущения.

4. Аксессуары все больше влияют на дизайн

Переход на смартфоны с большими экранами сопровождается появлением маленьких экранов на наших запястьях. Международная Корпорация Данных прогнозирует что в 2015 году будет поставлено более чем 45,7 миллионов девайсов-аксессуаров, среди которых основными будут браслеты (наибольшая часть, 40 миллионов), одежда и очки.

То, что начиналось как браслеты для фитнеса, сейчас переросло в Apple Watch и Android Wear. Технологические аксессуары уже не только меряют пульс и давление человека, они сообщают вам о том, как долго вы сохраните концентрацию над работой, завтрашнюю погоду, а также напоминают о приготовлении ужина вашей тёте. Как это повлияет на работу дизайнеров мобильных приложений?

Подобные технологии всё ещё перебывают в зачаточном состоянии, потому Apple и Android предлагают большое количество решений. Обе компании разрабатывают девайсы, выглядящие как часы, и потому обе компании указывают на важность взгляда. В отличие от телефонов или планшетов, в которые пользователи погружаются надолго, дизайнеры приложений для аксессуаров должны создавать именно столько контента, сколько нужно, с необходимой скоростью для того, чтоб пользователь смог уловить суть при невнимательном взгляде, брошенном на свой девайс. Именно потому исключительную важность получают шрифты, контрастность и контекст (где сейчас пользователь? Какие данные нужны пользователю именно сейчас?).

И поскольку эта технология относительно новая, сейчас важным является своевременная и качественная реакция на отзывы и рекомендации пользователей. Хоть именно корпорации Apple и Android создают новые решения для технологий, именно пользователи решают, какие это будут решения.

5. Растущая производительность

Ваш смартфон обладает большей производительностью, чем компьютер, отправивший людей на Луну, или Deep Blue – компьютер, которые обыграл в 1997 году мирового чемпиона по шахматам Гарика Каспарова. И он становится только умнее. Наши мобильные девайсы не только становятся всё более и более производительными, способ передачи данных также изменяется. 3G дал основу для развития трёх вариантов 4G-интернета. Сегодня девайсы стараются превзойти друг друга в скорости и производительности, что даёт намного больше свободы для анимации мобильных приложений.

Движение даёт огромное количество преимуществ мобильному приложению. Оно способно привлечь внимание к необходимому объекту, побудить пользователя на необходимое действие, и попросту создать намного более интересный интерфейс. Смартфоны настолько развиты, и их сетевая поддержка настолько сильна, что на них возможно получить максимум из движущихся HTML5-объектов и сайтов с параллаксом. С уменьшением количества ограничений в мощности смартфонов, в этом году можно наблюдать быстрое развитие в движущемся дизайне мобильных приложений, и его темпы будут лишь ускоряться со временем.

6. Удобные глазу цвета

Каждый год трендовыми становятся свои цветовые гаммы, и в текущем году можно наблюдать преобладание цветовых схем с мягким контрастом и пастельными тонами. Это является следствием использования крайнего минимализма в плоском дизайне, кроме того, подобная гамма отражает модные цвета этого года – более холодные и мягкие цвета с нежно пробивающейся теплотой. Примером подобных гамм может быть белый или контрастный шрифт на фоне оттенков одного цвета, либо смесь из трёх приглушенных холодных цветов.

В результате подобной цветовой простоты, пользователь меньше отвлекается на смесь ярких вспышек и больше концентрируется на контенте. Долгая работа с ярким экраном, который сам по себе источает свет, уже вредит вашим глазам, но приглушенные цвета и умеренная яркость цветовой гаммы (одно из преимуществ плоского дизайна) делает мобильное приложение более приятным и удобным.

7. Разнообразие шрифтов

Еще совсем недавно печатный текст был ограничен небольшим количеством интернет-шрифтов в низком разрешении. За последние два года и iOS, и Android оптимизировали свои операционные системы под более плавные, масштабируемые и читабельные шрифты. Побочным эффектом больших экранов и технологических инноваций является использование печатного текста для придачи мобильному приложению красоты и выразительности. Вместе с трендовыми крупными фоновыми изображениями можно создать "говорящий" дизайн, передающий необходимое сообщение пользователю в минималистическом стиле.

8. Встроенная размывка

Интересным трендом для прозрачных приложений является размытие заднего плана. Конечно, подобные приложения приносят непередаваемые ощущения от их использования, однако, они имеют свои недостатки. В зависимости от выбранного пользователем фона их мобильного девайса и количества виджетов, недостаточная замутненность фона вашего приложения может создать проблемы для чтения пользователю. Встраивание эффекта Гауссовского размытия поможет справиться с этой проблемой.

9. Доступность приложений

Сегодняшние приложения намного менее требовательные в смысле производительности девайса. Упрощенные изображения объектов с крупными элементами и шрифтами требуют меньше визуальной обработки. В то же время, макро-жестикуляция (движение пальцами по экрану) также упрощает работу с приложением для людей с ограниченными возможностями, в отличие от приближения и нажатия определенных кнопок на экране, которые требуют лучшего микроконтроля конечностей человека. Также, использование крупных шрифтов делает приложения более доступными людям с плохим зрением.

Очень важно помнить о том, что при разработке юзабилити приложения, очень важно думать о доступности продукта. Можно ли кастомизировать дизайн людям, которым требуются более крупные шрифты? Встраиваете ли вы опцию обратной связи, для усовершенствования своего приложения в случае обнаружения недостатков в дизайне? Это поможет создать наиболее доступный и приемлемый дизайн.

10. Умные прототипы

Каждое приложение когда-то было всего лишь прототипом. Многие известные приложения начинались как нарисованные на куске бумаге статичные картинки, или картинки, сохраненные в pdf-формате. Поскольку сейчас разработка мобильных приложений усложняется, показать лишь статичное изображение приложение и оставить додумывать остальное разработчикам невозможно. Если ваше приложение во многом основано на анимации, в процессе разработки множество элементов могут быть утеряны. Кроме того, плоский дизайн сам по себе не создаст необходимое количество вау-эффектов для пользователя.

Потому дизайнеры вынуждены либо быть на постоянной связи с разработчиками для отображения всех желаемых эффектов в приложении, либо им нужно научиться самим создавать прототипы и кодить.

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

Таким образом, сегодняшние мобильные приложения становятся всё более совершенными, благодаря технологическому развитию как самих мобильных устройств, так и телекоммуникационных сетей, и процесс создания дизайна приложений превращается в искусство.

Агропортал agrotechnik.com.ua по материалам портала «Украинский Бизнес Ресурс»