5 идей, как оформить приложение

Главное в продуктовом дизайне — удобство пользователя. И все хорошие приложения похожи друг на друга — чтобы люди заведомо знали, где что расположено и как управлять интерфейсом. Но хороший UX — не преграда креативным дизайн-решениям. Показываем десять продуктов с необычными приёмами, которые можно брать на вооружение!

Фото как фон: Down Dog

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

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

Когда на экране всего несколько надписей или кнопок, фотографии чёткие — за счёт этого фон становится главным элементом, создающим настроение и транслирующим идеи компании:

Скриншот: приложение Down Dog 

Скриншот: приложение Down Dog

Когда нужно разместить много текста, делают плашки, которые частично перекрывают фото — под ними фон размытый:

Скриншот: приложение Down Dog 

Если на странице нужно много текстового контента, размытым делают всё фото на фоне:

Скриншот: приложение Down Dog 

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

Вертикальные карточки товаров: 12 Storeez

На большинстве маркетплейсов пользователи привыкли к квадратным карточкам товаров. Но иногда может быть целесообразно поэкспериментировать с форматом.

В приложении 12 Storeez сделали вертикальные карточки. Это позволяет показывать в каталоге не только отдельные вещи, но и образы целиком — покупатель сразу понимает, как одежда смотрится на фигуре в сочетании с другими вещами.

Скриншот: приложение 12 Storeez

При открытии карточки товара вертикальное фото показывается во всю ширину экрана. Так продукт виден максимально крупно — пользователь не отвлекается на другие элементы интерфейса.

Скриншот: приложение 12 Storeez 

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

Геймификация привычных действий: Bottled

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

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

Скриншот: приложение Bottled 

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

Скриншот: приложение Bottled 

Градиенты и цветные тени: Mail Cloud

Чтобы разнообразить дизайн, не отступая от минимализма, можно использовать mesh-градиенты — из нескольких оттенков.

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

Скриншот: приложение Mail Cloud

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

Скриншот: приложение Mail Cloud 

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

3D-графика: Anatomy Learning

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

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

Скриншот: приложение Anatomy Learning