Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>27 сен 2022</li>

3 <li>0</li>

4 </ul>Необычные фоны, цветные тени или смешные иллюстрации с маскотами - 10 способов сделать дизайн приложения нескучным.

5 Иллюстрация: Annie для Skillbox Media

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

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

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

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

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

11 Скриншот: приложение<a>Down Dog</a>/ Skillbox MediaСкриншот: приложение<a>Down Dog</a>/ Skillbox MediaКогда нужно разместить много текста, делают плашки, которые частично перекрывают фото - под ними фон размытый:

12 Скриншот: приложение<a>Down Dog</a>/ Skillbox MediaЕсли на странице нужно много текстового контента, размытым делают всё фото на фоне:

13 Скриншот: приложение<a>Down Dog</a>/ Skillbox MediaОсновной контент приложения - аудио, поэтому фото не мешают пользователю. Вероятно, такое решение не подошло бы для каталога товаров или для медиа. Но если текстового контента немного, фото на фоне помогают разнообразить дизайн и добиться нужного настроения.

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

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

16 Скриншот: приложение<a>12 Storeez</a>/ Skillbox MediaПри открытии карточки товара вертикальное фото показывается во всю ширину экрана. Так продукт виден максимально крупно - пользователь не отвлекается на другие элементы интерфейса.

17 Скриншот: приложение<a>12 Storeez</a>/ Skillbox MediaОбратите внимание, что важные для конверсии кнопки никуда не исчезают - пользователь в любой момент может на них нажать.

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

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

20 Скриншот: приложение<a>Bottled</a>/ Skillbox MediaИллюстрации погружают пользователя в игровой мир, делают типичное приложение для знакомств необычным и вовлекающим.

21 Скриншот: приложение<a>Bottled</a>/ Skillbox MediaДля описания товаров в каталоге необязательно использовать только слова. Передать отдельные характеристики можно с помощью иконок.

22 В приложении сервиса доставки еды "<a>Кухня на районе</a>" так маркируют блюда. Если еда попадает в какую-то особую категорию, в правом верхнем углу карточки будет стоять иконка. Например, с брокколи - если блюдо вегетарианское. Или с перцем - если блюдо острое.

23 Скриншот: приложение "<a>Кухня на районе</a>" / Skillbox MediaСкриншот: приложение "<a>Кухня на районе</a>" / Skillbox MediaЭтот приём хорошо подходит для товаров, характеристики которых легко изобразить в иконке. Со сложными товарами или услугами может быть проще писать характеристики текстом, чтобы избежать неоднозначности.

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

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

26 Скриншот: приложение<a>Mail Cloud</a>/ Skillbox MediaГрадиенты используются и в оформлении других элементов приложения - некоторых плашек и кнопок. Также в поддержку этого решения в интерфейсе сделаны цветные тени с голубым оттенком.

27 Скриншот: приложение<a>Mail Cloud</a>/ Skillbox MediaЧтобы не перегружать дизайн многообразием цветовых переходов, в приложении Mail Cloud сочетают элементы с градиентами и тенями с обычными монохромными кнопками и иконками.

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

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

30 Скриншот: приложение<a>Anatomy Learning</a>/ Skillbox MediaПриложения с дополненной реальностью могут использоваться для разных целей. Например, они актуальны для "примерки" вещей в широком смысле - пользователь сможет посмотреть, как картина выглядит в интерьере дома, кроссовки - на ногах, средство для макияжа - на лице. Но помимо этого есть много развлекательных продуктов с использованием AR - вспомнить хотя бы популярную игру Pokemon GO.

31 Также дополненная реальность хороша для познавательно-развлекательных проектов. В приложении<a>Civilizations AR</a>пользователь может буквально "принести" музейный артефакт к себе домой, вертеть его, взаимодействовать с ним, слушать или читать информацию об объекте. Так процесс получения новых знаний выходит более увлекательным, чем обычное чтение или прослушивание аудиокниги.

32 Скриншот: приложение<a>Civilizations AR</a>/ Skillbox MediaИллюстрации - один из очевидных способов разнообразить дизайн и повысить вовлечение. Обычно это довольно лаконичные 2D-картинки - чтобы они быстро загружались, а пользователям не приходилось всматриваться в детали в маленьком формате. Например, в приложении для изучения китайского языка "<a>Лаоши</a>" сделаны забавные иллюстрации с лицами в едином стиле.

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

34 Скриншот: приложение "<a>Лаоши</a>" / Skillbox MediaУчебный процесс стилизован под диалог с учителем - в нём иногда появляются иллюстрации: они напоминают стикеры в мессенджере.

35 Скриншот: приложение "<a>Лаоши</a>" / Skillbox MediaТакже небольшие иллюстрации акцентируют подсказки пользователю и помогают разобраться, что делать. Например, на этом скриншоте иллюстрация с подписью указывает, куда перемещать карточку с незнакомым словом.

36 Скриншот: приложение "<a>Лаоши</a>" / Skillbox MediaЕсли у компании есть бренд-персонаж, в приложении могут использоваться иллюстрации с ним. Маскот может "сопровождать" пользователя в разных ситуациях, предлагать товары, давать подсказки.

37 В приложении сервиса<a>TunnelBear</a>фирменный медведь в разных ипостасях появляется почти на каждой странице и делает взаимодействие с приложением более эмоциональным.

38 Скриншот: приложение<a>TunnelBear</a>/ Skillbox MediaСкриншот: приложение<a>TunnelBear</a>/ Skillbox MediaДиаграммы, графики, карты и схемы актуальны для многих приложений. В банковском сервисе нужно визуализировать доходы и расходы, в фитнес-приложении - спортивную нагрузку и калории, в сервисе доставки еды или такси - карту, по которой движется машина. Если информацию можно<a>визуализировать</a>, это стоит делать: на диаграмму обычно приятнее смотреть, чем на длинный текст.

39 При этом датавиз можно вписать в общую стилистику приложения, работая с формой, цветом и фоном. Например, это удачно сделано в приложении для наблюдения за звёздным небом<a>Stellarium</a>. В диаграмме Ганта, показывающей время видимости разных небесных тел, добавлены скругления элементов и схематично изображены планеты. Цветовая гамма в пастельных тонах сочетается с тёмным фоном.

40 Скриншот: приложение<a>Stellarium</a>/ Skillbox MediaКарта звёздного неба показана непосредственно на иллюстрации с небом. Пользователь может перемещаться по разным участкам, чтобы рассматривать интересующие планеты и созвездия.

41 Скриншот: приложение<a>Stellarium</a>/ Skillbox MediaБольше о дизайне интерфейсов

42 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>