30 отличных примеров дизайна мобильных приложений

Опубликовано: 2015-01-28

Дизайн мобильных приложений отличается от веб-дизайна.

Конечно, есть теория цвета, тип настройки и поддержка сеток, но есть еще много всего, что нужно учитывать при смене устройства.

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

Томас Лауринавичюс — дизайнер-фрилансер и соавтор книги по мобильному дизайну.

Как разработать приложение

(с примерами хорошего дизайна)

Входит Томас:

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

Примеры приложений — экран запуска

Экран запуска будет виден каждому пользователю приложения и будет длиться пару секунд, однако очень важно произвести хорошее первое впечатление и установить некоторые ожидания.

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

Экраны запуска

Гиперлапс из Instagram и Yummly

Пустые состояния

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

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

Пустые состояния

Airbnb и флипборд

Примеры приложений — экраны входа

Забудьте имена пользователей. Вместо этого используйте адрес электронной почты.

Упростите процесс входа в систему, предоставив им возможность входа на существующие платформы. В зависимости от вашей аудитории это может быть Google, Facebook или даже LinkedIn.

Экраны входа

Саундклауд и Foursquare

Примеры приложений — ленты активности

При разработке привлекательной и иммерсивной ленты активности учитывайте контекст и используйте принципы геймификации.

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

Ленты активности

Swarm от Foursquare и Behance

Примеры приложений — экраны регистрации

Если процесс регистрации сложный, пользователи уйдут.

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

Экраны регистрации

Spotify и циркуляр

Проверить

Checkout — сложная функция для разработки в мобильных приложениях.

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

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

Проверить

Нацельтесь и продолжайте делать покупки

Комментарии

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

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

Комментарии

Путь и Tripstr

Поиск

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

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

Поиск

Входящие от Gmail и Lovely

Обмен

Совместное использование — важная функция для любого приложения, поскольку она позволяет пользователям распространять информацию о вашем продукте.

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

Обмен

Весна и Джукли

Читабельность

Читабельность сложна на маленьких устройствах. Легко сделать шрифт слишком большим или слишком маленьким.

Сосредоточьтесь на контрасте, размере шрифта и высоте строки. Убедитесь, что ваш шрифт имеет оптимальный размер и легко читается. Черный текст на белом фоне — это хорошо.

Читабельность

Читабельность и подача

Навигация

Навигация чрезвычайно важна для любого приложения.

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

Навигация

Facebook и LinkedIn подключены

Настройки

Экраны настроек часто упускают из виду, потому что они не интересны, но это будет один из ваших наиболее часто используемых экранов.

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

Настройки

Галочка 2 и YPlan

Уведомления

Уведомления — это причина, по которой пользователи продолжают возвращаться в ваше приложение.

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

Уведомления

Гогобот и выделение

Сообщения

Функции обмена сообщениями или чата также являются общей функцией. При разработке системы обмена сообщениями все зависит от коммуникации и контекста.

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

Обмен сообщениями — это все о мультимедиа в наши дни. Предоставьте пользователям возможность общаться, добавляя фотографии, видео, звуки, смайлики и старый школьный текст.

Сообщения

Facebook Messenger и Path Talk

Профиль

Многие приложения позволяют пользователям создавать учетную запись и хранить истории или действия в этом профиле.

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

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

Профиль

Фронтбэк и Квора

Вывод

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

Хотя любой может разработать приложение, важно нанять дизайнера, который имеет опыт работы в этой области и может применить все знания и передовой опыт.

Мелочи могут сделать или сломать ваше приложение. Не рискуйте своим временем и деньгами, нанимая кого-то, кто не понимает тонкостей разработки потрясающего приложения.