10 идей, как оформить приложение
Необычные фоны, цветные тени или смешные иллюстрации с маскотами — 10 способов сделать дизайн приложения нескучным.
![](https://248006.selcdn.ru/main/iblock/a7a/a7a4e1d1a13a82b12e545d9c1b84b923/17719633f93945e539fb3395624e90aa.jpg)
![](https://248006.selcdn.ru/main/iblock/a7a/a7a4e1d1a13a82b12e545d9c1b84b923/17719633f93945e539fb3395624e90aa.jpg)
Иллюстрация: Annie для Skillbox Media
Главное в продуктовом дизайне — удобство пользователя. И все хорошие приложения похожи друг на друга — чтобы люди заведомо знали, где что расположено и как управлять интерфейсом. Но хороший UX — не преграда креативным дизайн-решениям. Показываем десять продуктов с необычными приёмами, которые можно брать на вооружение!
Фото как фон: Down Dog
В большинстве приложений используют однотонный фон нейтральных оттенков, градиенты или простые векторные паттерны. Один из способов выделиться — сделать фон из фотографий.
В приложении для йоги и медитации Down Dog нет однотонного фона — на какую бы страницу пользователь ни перешёл, его встречает фотография на весь экран. Картинки сделаны в едином фотостиле — со сходным освещением и тёплой цветовой гаммой.
Когда на экране всего несколько надписей или кнопок, фотографии чёткие — за счёт этого фон становится главным элементом, создающим настроение и транслирующим идеи компании:
![](/upload/setka_images/15584926092022_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
![](/upload/setka_images/15585126092022_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
Когда нужно разместить много текста, делают плашки, которые частично перекрывают фото — под ними фон размытый:
![](/upload/setka_images/15585026092022_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Если на странице нужно много текстового контента, размытым делают всё фото на фоне:
![](/upload/setka_images/15585326092022_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
Основной контент приложения — аудио, поэтому фото не мешают пользователю. Вероятно, такое решение не подошло бы для каталога товаров или для медиа. Но если текстового контента немного, фото на фоне помогают разнообразить дизайн и добиться нужного настроения.
Вертикальные карточки товаров: 12 Storeez
На большинстве маркетплейсов пользователи привыкли к квадратным карточкам товаров. Но иногда может быть целесообразно поэкспериментировать с форматом.
В приложении 12 Storeez сделали вертикальные карточки. Это позволяет показывать в каталоге не только отдельные вещи, но и образы целиком — покупатель сразу понимает, как одежда смотрится на фигуре в сочетании с другими вещами.
![](/upload/setka_images/15585526092022_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
При открытии карточки товара вертикальное фото показывается во всю ширину экрана. Так продукт виден максимально крупно — пользователь не отвлекается на другие элементы интерфейса.
![](/upload/setka_images/15594626092022_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Обратите внимание, что важные для конверсии кнопки никуда не исчезают — пользователь в любой момент может на них нажать.
Геймификация привычных действий: Bottled
Практически любую задачу, которую пользователь решает в приложении, можно представить в виде игры. Не всегда это имеет смысл: например, в банковских приложениях, магазинах или сервисах бронирования геймификация может раздражать — пользователи хотят быстро решить свою проблему и не отвлекаться. А если это развлекательный продукт — геймификация может пойти на пользу.
В приложении Bottled для знакомств с людьми из разных стран придумали игровую механику: пользователю предлагают написать письмо, положить его в виртуальную бутылку и закинуть в виртуальное море. Также он может получать бутылки от других пользователей и читать их письма.
![](/upload/setka_images/15594626092022_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
Иллюстрации погружают пользователя в игровой мир, делают типичное приложение для знакомств необычным и вовлекающим.
![](/upload/setka_images/15594626092022_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Иконки для маркировки товаров: «Кухня на районе»
Для описания товаров в каталоге необязательно использовать только слова. Передать отдельные характеристики можно с помощью иконок.
В приложении сервиса доставки еды «Кухня на районе» так маркируют блюда. Если еда попадает в какую-то особую категорию, в правом верхнем углу карточки будет стоять иконка. Например, с брокколи — если блюдо вегетарианское. Или с перцем — если блюдо острое.
![](/upload/setka_images/15594826092022_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
![](/upload/setka_images/15594926092022_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
Этот приём хорошо подходит для товаров, характеристики которых легко изобразить в иконке. Со сложными товарами или услугами может быть проще писать характеристики текстом, чтобы избежать неоднозначности.
Градиенты и цветные тени: Mail Cloud
Чтобы разнообразить дизайн, не отступая от минимализма, можно использовать mesh-градиенты — из нескольких оттенков.
В приложении Mail Cloud основная часть фона белая, но на него наложен неяркий градиент. Дизайн всё ещё лаконичный, но в то же время выделяется среди большинства приложений, использующих однотонные заливки.
![](/upload/setka_images/16011426092022_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
Градиенты используются и в оформлении других элементов приложения — некоторых плашек и кнопок. Также в поддержку этого решения в интерфейсе сделаны цветные тени с голубым оттенком.
![](/upload/setka_images/16011426092022_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
Чтобы не перегружать дизайн многообразием цветовых переходов, в приложении Mail Cloud сочетают элементы с градиентами и тенями с обычными монохромными кнопками и иконками.
3D-графика: Anatomy Learning
3D-иллюстрации в приложениях используют редко. Во-первых, делать уникальные визуализации довольно дорого. Во-вторых, они долго загружаются, и у пользователей с медленным интернетом могут возникнуть проблемы. Но 3D-модели можно делать для продажи технически сложных товаров или для обучения.
В приложении Anatomy Learning начинающие врачи, спортсмены, художники и все интересующиеся могут посмотреть на визуализации костей, увидеть места крепления мышц и посмотреть, какие мышцы работают при разных движениях. 3D для этого — оптимальное решение.
![](/upload/setka_images/16011526092022_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
Дополненная реальность: Civilizations AR
Приложения с дополненной реальностью могут использоваться для разных целей. Например, они актуальны для «примерки» вещей в широком смысле — пользователь сможет посмотреть, как картина выглядит в интерьере дома, кроссовки — на ногах, средство для макияжа — на лице. Но помимо этого есть много развлекательных продуктов с использованием AR — вспомнить хотя бы популярную игру Pokemon GO.
Также дополненная реальность хороша для познавательно-развлекательных проектов. В приложении Civilizations AR пользователь может буквально «принести» музейный артефакт к себе домой, вертеть его, взаимодействовать с ним, слушать или читать информацию об объекте. Так процесс получения новых знаний выходит более увлекательным, чем обычное чтение или прослушивание аудиокниги.
![](/upload/setka_images/16020126092022_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
Иллюстрации в едином стиле: «Лаоши»
Иллюстрации — один из очевидных способов разнообразить дизайн и повысить вовлечение. Обычно это довольно лаконичные 2D-картинки — чтобы они быстро загружались, а пользователям не приходилось всматриваться в детали в маленьком формате. Например, в приложении для изучения китайского языка «Лаоши» сделаны забавные иллюстрации с лицами в едином стиле.
Иллюстрации сопровождают системные сообщения, чтобы привлечь к ним внимание.
![](/upload/setka_images/16011426092022_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
Учебный процесс стилизован под диалог с учителем — в нём иногда появляются иллюстрации: они напоминают стикеры в мессенджере.
![](/upload/setka_images/16011426092022_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
Также небольшие иллюстрации акцентируют подсказки пользователю и помогают разобраться, что делать. Например, на этом скриншоте иллюстрация с подписью указывает, куда перемещать карточку с незнакомым словом.
![](/upload/setka_images/16022126092022_1c076733da30d01108464d85a8ffad1517acec59.jpg)
Иллюстрации с маскотом: TunnelBear
Если у компании есть бренд-персонаж, в приложении могут использоваться иллюстрации с ним. Маскот может «сопровождать» пользователя в разных ситуациях, предлагать товары, давать подсказки.
В приложении сервиса TunnelBear фирменный медведь в разных ипостасях появляется почти на каждой странице и делает взаимодействие с приложением более эмоциональным.
![](/upload/setka_images/16030926092022_62bf1942effdabf0107c530d35221fdf53489254.jpg)
![](/upload/setka_images/16030926092022_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
Диаграммы и карты: Stellarium
Диаграммы, графики, карты и схемы актуальны для многих приложений. В банковском сервисе нужно визуализировать доходы и расходы, в фитнес-приложении — спортивную нагрузку и калории, в сервисе доставки еды или такси — карту, по которой движется машина. Если информацию можно визуализировать, это стоит делать: на диаграмму обычно приятнее смотреть, чем на длинный текст.
При этом датавиз можно вписать в общую стилистику приложения, работая с формой, цветом и фоном. Например, это удачно сделано в приложении для наблюдения за звёздным небом Stellarium. В диаграмме Ганта, показывающей время видимости разных небесных тел, добавлены скругления элементов и схематично изображены планеты. Цветовая гамма в пастельных тонах сочетается с тёмным фоном.
![](/upload/setka_images/16030926092022_b200d8bc76303a5287d3954213dd40d331052ae4.jpg)
Карта звёздного неба показана непосредственно на иллюстрации с небом. Пользователь может перемещаться по разным участкам, чтобы рассматривать интересующие планеты и созвездия.
![](/upload/setka_images/16030926092022_178ae943fb180dbd85da113c997e71d410f43eb6.jpg)
Больше о дизайне интерфейсов
- Тренды в UX/UI: подводим итоги полугодия
- Морфизмы в дизайне: какие бывают, зачем нужны и как их создавать
- «Интерфейс»: основы проектирования удобных систем
- 8 ошибок в дизайне интерфейсов, которые раздражают пользователей
- Проектирование интерфейса: 8 принципов, которые должен знать каждый UX-дизайнер
- Моушн-дизайн в интерфейсах: зачем нужна UX-анимация и какие эффекты в ней используют