Тренды мобильного дизайна 2020

Сегодня расскажу про тренды мобильного дизайна и про то, как должно выглядеть идеальное приложение в 2020 году. Пройдемся по основным пунктам, на которые стоит обратить внимание.

В закладки
Аудио

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

Вова Красильников
Lead product designer

1. Темная тема

Яндекс навигатор. Телеграм, iOS, Instagram​

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

2. Сторителлинг

На первый взгляд не самый очевидный пункт, но очень важный. У большинства приложений, которые есть на рынке есть цель №1 — заработать денег и полное погружение пользователя в контент это отличная возможность довести его до точки, когда ему будет интересно узнать, что же дальше. А дальше он узнает только за подписку в $10 per month. Хороший пример — приложение Darkr, которое помимо бесчисленного фичеринга, еще и получило статус Editor's choice в App Store. А идея очень простая, вы получаете черно-белые фотографии, прогоняя их через приложение, причём они абсолютно ничем не отличаются от ЧБ фильтров, просто подача: проявка пленки, сканирование и т. д. заставляют верить, что вы делаете что-то очень важное и интересное. Именно погружаясь в историю, вы готовы заплатить, чтобы получить эмоции. И при этом покупка не будет разочаровывать вас.

3. Кислотные и яркие цвета

В 2019 году это уже классика, в 2020 она останется трендом. Просто посмотрите на акцидентные цвета в крупных приложениях. И да, именно крупные приложения будут давать развитие для всех остальных.

DuoLingo, Делимобиль, Кинопоиск, Яндекс.Драйв, Тинькоф, Циан​

4. Плашечки и карточки

Изобилие карточек, шторок, всеразличных плашек — тренд, во многом обсуловленный iOS 13 и дриббблу. Первому, за кучу мелочей и нативную шторку, вместо полноразмерного окна с крестиком, дриббблу — за бесконечные дизайны, состоящие ТОЛЬКО из карточек, а-ля как у Cuberto.

5. Микровзаимодействия, анимации и гифки

​AppStore, Mighty, Balance

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

6. Скевоморфизм

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

7. Грамотная персонализация

Вы замечали, что некоторые приложения постоянно подсовывают вам то, на что вы нажимаете? Как пример — тикток или Инстаграм. Стоит вам только несколько секунд потратить на разглядывание фото или видео, как вот уже соц. сеть отняла у вас пару десятков минут жизни, а все потому, что работа над приложением ведется не только со стороны дизайна, но и со стороны, так скажем, предпочтений. И да, она намного больше и масштабнее, ведь повышая retention (коэффициент удержания), компании зарабатывает больше денег.

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

8. Шрифт широкий

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

9. Иллюстрации

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

Заключение

Я уверен, что это не полный список, но это, что точно будут использовать люди и на что стоит обратить внимание. А если вам понравилась статья — поддержите меня подпиской на канал secret design в телеграме, нас уже 10 000.

Спасибо!

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Vova Krasilnikov", "author_type": "self", "tags": [], "comments": 40, "likes": 33, "favorites": 220, "is_advertisement": false, "subsite_label": "design", "id": 99555, "is_wide": false, "is_ugc": true, "date": "Sat, 28 Dec 2019 23:46:19 +0300", "is_special": false }
Создать объявление на vc.ru
Маркетинг
Илья Исерсон: «Агентства контекстной рекламы не могут, не умеют и не мотивированы делать нормально»
Интервью Катерины Ерошиной с Ильёй Исерсоном, владельцем контекстного рекламного агентства MOAB и семантического…
0
{ "id": 99555, "author_id": 106890, "diff_limit": 1000, "urls": {"diff":"\/comments\/99555\/get","add":"\/comments\/99555\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/99555"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
40 комментариев
Популярные
По порядку
Написать комментарий...
40

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

Ответить
4

Кислотных цветов то и не вижу, особенно у Делимобиля:)

У МС появились плиточки, а не карточки. Смысл один реализация разная. МС как всегда не смог довести хорошую идею до конца.
Карточки это MD, если этот тренд подхватила Apple спустя 3 года в iOS 13, то явно уже не тренд.

Ответить
1

потому что тренды не меняются под куранты, але

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

Ответить
5

але 

перестать пиздеть

душные уебаны

крик души прям

Ответить
–1

может, перестать пиздеть и сказать человеку спасибо за прекрасный обзор?

Нет.

Ответить
0

Кстати, это же применимо и к вебу 

Ответить
0

Где пруфы? Я хоть примеры привел, а не просто вбросил

Ответить
0

Да, твоя версия лучше

Ответить
9

Можно поспорить, да?

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

Кислотные цвета сменяют приглушенные, более натуральные.

Темная тема это не тренд, а необходимость - battery saving, легче считывается в любое время дня.

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

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

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

Я зануда, поэтому когда вижу "lead designer" сразу ожидаю увидеть дальше лид дизайнер чего именно или где именно.

Ответить
0

А можете подробнее рассказать про сохранение контекста? О чем это?

Ответить
8

1. Темная тема

Яблочники придумали wm8 спустя 10 лет? 
И все как с ума посходили, за-то от тёмной темы wm все плевались и вечно выражали своё «фе»

Ответить
1

за-то от тёмной темы wm все плевались

@Denis Shiryaev а помнишь ты говорил, что тёмная тема не нужна?

Ну шо там? Где моя темная тема на веб-версии?

Ответить
0

В веб версии нет :)

Ответить
8

Я думал скевоморфизм это вот такое 👇🏻

А оказалось это эмодзи. 
Кто прав?) 

Ответить
0

А есть гайды как такое сделать в фигме?

Ответить
2

не дай бог вернемся в фотожопу

Ответить
0

Есть гайд как делать элементы в этом стиле. Напишите мне в Телеграм: @atimohov

Ответить
7

Больше похоже на подведение итогов уходящих трендов чем обзор будущего дизайна

Ответить
2

А какие будут?

Ответить
0

Узнаем из другой статьи )

Ответить
3

Через год, в декабре)

Ответить
1

Когда этот парень наконец стает дизайнером 😄

Ответить
4

Из года в год тренды одни и те же, только меняется цифра в годе

Ответить
3

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

Ответить
0

Мощный гайд! Спасибо!

Ответить
1

Тренды, где использованы примеры только для iOS, показывает ограниченный кругозор автора.

Ответить
–1

А приведите примеры из Android, если не сложно? iOS обычно тренды задает, как-то так сложилось. Но вообще шторки и вообще весь этот стиль действительно iOS-подобные, Материалом здесь не очень пахнет, было бы интересно про Андроид посмотреть.

Ответить
1

Чувак опаздал со своими трендами примерно на пару лет. Может год назад такое и прокатило бы, но уж точно не сейчас. Тренды на то и тренды, что по ним делаЮТ, а не делаЛИ.

Ответить
1

Если говорить про восходящие тренды, то ждем адекватный AR, иммерсивность, супер-сервисы и нулевой интерфейс

Ответить
0

Темная тема безусловно трэнд, но она далеко не всем по душе. 

Ответить
0

Темные сайты будут в тренде? 

Ответить
0

Мне кажется темные сайты передают настроение и имидж компании/продукта. Тут тяжело сказать за тренд

Ответить
0

Ребята дизайнеры, вы определитесь пожалуйста какие будут тренды, дайте статистику «почему будет так?»

Полный антипод статьи: https://vc.ru/99219

Ответить
0

По-моему, одна статья дополняет другую))

Ответить
0

Zero Ui, дополняет анимации и иллюстрации? Серьёзно?!

Ответить
0

В той статье тоже есть про видео и анимации. Они во многом пересекаются.

Ответить
0

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

Ответить
0

Одну из статей явно надо забанить

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }