Концепт: Tabbar для Android-приложения ВКонтакте

Вся история началась с того, что Илья в начале марта скинул в дизайнерском чатике ссылку на этот твит:

Задолго до внесения Bottom navigation в гайды Google выпустили обновление для парочки своих приложений

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

Позже идея попробовать нарисовать таббарт ко мне вернулась снова, когда я редизайнил боковое меню. В какой-то момент всё-таки захотелось поэспериментировать с ним, а вопросов стало возникать только больше.

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

С этого момента и далее я рисовал аж три версии одновременно: 
1) со старой навигацией и новым дизайном
2) с навигацией как в Google+, то есть сохранив боковое меню
3) полностью новое, только с нижней навигацией

Всё еще периодически возникали вопросы о том, какой раздел куда поставить. Провожу опрос среди друзей, оказывается, что большинство людей (процентов 70) куда чаще заходят в список сообществ, чем в раздел “Друзья”. Делаю с этими данными первый вариант (слева). Позже понимаю, что в текущем меню приложения они уже стоят идеально и как раз здесь ничего менять не нужно. Кроме того, что я отдаю предпочтение Сообществам, а не Друзьям.

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

Дальше были какие-то безумные попытки выбрать правильную цветовую схему для тёмного варианта. Здесь они все абсолютно ужасные, итоговая будет в сто раз лучше. (Тогда я этого, конечно, не видел)

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

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

Зато решение от гугла приводит меня к другой идее, которая мне до сих пор нравится.

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

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

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

Сижу в библиотеке универа и думаю, чем плохо меню у фейсбука. (А мог бы учиться, да). Отвлекаюсь на что-то, закрываю приложение, а когда открываю, уже не могу вспомнить, на что смотрел. Потому что слишком запутанно, невозможно сразу найти то, зачем зашёл.

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

Именно то, что я ищу.

Меню должно стать центром использования приложения. Это меняет весь экспириенс.

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

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

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

В какой-то момент придумываю “избранные мероприятия”, хотя это свободно можно заменить на мероприятия, на которые пользователь точно пойдёт. Только с формулировкой не ясно, так что пока оставляю так.

Ну и будучи реалистом, предполагаю место под промо-акции внутри ВК.

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

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

Получилась огромная куча разных вариантов.

Если присмотреться, между центральным и левым столбцом можно увидеть немного боли и потерянные три часа.

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

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

Пару дней не делаю вообще ничего, пока в какой-то момент не понимаю, что названием “Уведомления” загнал себя в излишне узкие рамки. Хотелось бы расширить потенциал этой фичи, добавить в неё чего-то такого полезного и милого в то же время. Но как?
Меж тем понимаю, что блок с двумя внешними отступами по 8 и тремя внутренними по 16 занимает целую кучу места и выглядит очень грязно.

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

Вместо единицы здесь позже появится иконка подарка, но в тот момент мне, конечно же, было лень.

Спустя приличное время мучений с выравниванием аватарок, прихожу к этому решению. И снова всё стало намного лучше.

Крутилка невольно получает название “Карточек”, пока я объясняю её суть одногруппникам: в конце концов именно им пришлось бы пользоваться этим приложением, если бы оно пошло в релиз, спрашиваю, что ещё можно добавить, на что мне подсказывают интересную идею, о которой расскажу позже. Запомните.

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

Процесс вымучивания.

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

Выглядят карточки вот так

Помните, я говорил, что кто-то из одногруппников навёл меня на интересную идею? Так вот, отображать можно вообще что угодно.
Фейсбук вот погоду показывает в ленте, так почему бы ВК не показывать её в меню? Мило и юзерфрендли, как по мне.

Итого

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