Дизайн
Jordan Slon
7336

Рефакторинг дизайна Telegram

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

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

Примечание. Кейс будет состоять больше из моих рассуждений и объяснений, как я пришел к определенному решению. Также постараюсь донести исходную идею.

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

Группировка чатов

C течением времени в Telegram скапливается столько барахла: мертвые переписки; каналы, которые никогда не будете читать, но себе в этом не признаетесь; боты, которых пару раз потыкали ради интереса и забыли; еще есть рабочие чаты, тематические чаты, чаты друзей, чат друзей для обсуждения именно определенной темы, семейные чаты, чат кружка ребенка, чат школьного класса ребенка…

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

По крайней мере пользователи на Android уже имеют группировку в каком-то виде, самое известное решение — Plus Messenger (неофициальный клиент Telegram от сторонних разработчиков).

Plus Messenger​

Проблема этого решения в том, что оно группирует по сущностям, то есть отдельно каналы, чаты, групповые чаты, суперчаты… Но люди подписываются на каналы, вступают в чаты по определенным потребностям и интересам: для развлечения; по работе; чтобы знать, что происходит рядом; чтобы потупить… И надо группировать именно по интересам, пока лучше делать это вручную.

Теперь перейдем реализации группировки.

Решение

Самое распространенное решение — табы, но их нецелесообразно имплементировать в Telegram:

  • Если ставить их в верхней части, то будет неудобно каждый раз дотягиваться, чтобы переключать. Хотя обычно табы дополняются горизонтальными свайпами для быстрого переключения, но их нельзя использовать, так как горизонтальные свайпы уже заняты в экране чатов — для вызова спрятанных кнопок: удалить, архивировать, прикрепить.
  • В нижний части табы выглядят как подписи к пиктограммам.
  • Сгенерированные пользователями названия к табам будут длинными, следовательно, табы будут состоять из обрезанных слов, а это выглядит не очень. Ещё надо учитывать другие языки, на которых Telegram работает, в большинстве этих языков количество букв в слове больше, чем на том же английском.
Табы выглядят как подписи к пиктограммам

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

  1. Если применить этот паттерн для переключения между созданными группами (workspace) без особых изменений, то рисунок в окнах получается одинаковым, и это дискредитирует его функцию. Поскольку общий рисунок окон будет списком, даже учитывая отличающиеся аватарки в окнах, все равно сделать выбор в момент переключения будет очень тяжело, так как надо разглядывать отличия.
  2. Если оставить сразу заметную отличительную черту — аватарки — и заполнить ими окна, чтобы было возможно легче ориентироваться, это начинает вызывать трипофобию (мне стало немного неприятно), и всё равно приходиться читать подпись карточки, чтобы понять, что открываешь.

Поэтому я остановился на системном решении — контекстное меню iOS. Его уже используют для переключения между аккаунтами в iOS-версии Telegram.

Контекстное меню практично, потому что в этом случае мы следуем исходному паттерну — пользователя не надо будет обучать ещё раз.

Прототип

​Для просмотра в полном размере

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

У каналов, которые уже прикреплены к определенной группе, будет соответствующая подпись и их по второму разу нельзя добавить в другую​

Локальный поиск

Изначально исходный тезис этого блока был в том, что в iOS-версии Telegram нет локального поиска, если не учитывать Shared Media — нет возможности поиска именно в конкретном чате или канале. Есть только глобальный поиск, который ищет по всему вашему списку.

После написания этого блока в октябре прилетает обновление 5.12.1 для iOS-версии Telegram с описанием "Improved search. When searching for messages in a chat, tap on the number of results to view them as a list..." и я понимаю, что поиск имеется, потыкав в разные места интерфейса, я его обнаружил. Надо было нажать на название канала или чата в панели навигации — и спустится небольшая панель с кнопками: поиска, выключения уведомлений и просмотра информации.

Для меня это стало откровением, сильно возмутился — как я должен догадаться, что на него можно было нажать? Оно не обозначено никаким цветом, иконкой, плашкой и так далее. Я активно использую Telegram с 2015 года, и для меня поиск всегда был болью в iOS-версии, поэтому, если мне надо было найти что-то конкретное в конкретном канале или чате, я сразу шёл за комп.

По крайней мере сделанный прототип не потерял ценность. Если изначально прототип позиционировался как единственное решение для локального поиска, то учитывая факт выше, можно прототип имплементировать как альтернативный сценарий: пользователь идёт с глобального поиска к локальному.

Сам процесс: свайпнуть влево соответствующий канал или чат в списке результатов глобального поиска и нажать на кнопку Search in — и останутся только релевантные результаты выбранного канала или чата. А чтобы вернуться к общему поиску, надо нажать крестик, который появится в подзаголовке выше.

Опубликован в Telegram Designers

Taskbar

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

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

Самый простой способ — задвинуть аватарку к левой части к кнопке назад, а вместо неё поставить кнопку звонка, например, как в Facebook Messenger.

Но не хотелось, чтобы Telegram был похож на Facebook Messenger, да и не хотелось менять устоявшиеся привычки другого пласта аудитории. В этом случае по привычке все тянутся в правый угол, чтобы посмотреть номер, логин, аватарку или заблокировать и так далее. Принимая во внимание эти обстоятельства, решил попробовать найти другое место.

И пришел к этому:

Наверняка первая мысль, которая у вас появилась, — напрямую позаимствовано у iMessage. Не совсем так, это доработанная версия панели стикеров самого Telegram, только убрал переключающую кнопку, чтобы она была сразу на виду.

Итерация подбора:

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

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

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

Единственный минус, который имеет последний вариант, — если пользователь пользуется кастомной клавиатурой, цвет плашки под таскбаром может не совпадать с цветом кастомной клавиатуры.

Прототип

Таскбар будет меняться в зависимости от сценария:

  • В обычной переписке все будет включено.
  • Если у вас есть канал, появиться кнопка для переключения режима уведомления при его открытии.
  • В групповом чате, в зависимости от настройки чата — разрешено ли групповые звонки или нет, будут кнопки вызова.
  • А при взаимодействии с ботами появится кнопка меню.

При желании можно будет отключить таскбар или же настроить под себя.

Кнопки звонилки никуда не уходят с экрана профиля

Форматирование текста

Ещё одна не сильно удобная особенность в Telegram — форматирование текста. Большинству эта функция не важна и в следствии не ощутим дискомфорт, но тем, кто ведёт каналы (в особенности на смартфоне), требуется чуть больше усилий.

Не могу сказать, что нынешнее решение плохое, это не так, по приоритету в тултипе (всплывающая плашка) оно стоит в правильном месте.

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

Решение

Первый вариант

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

Прототип

Вариант второй

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

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

1. Была идея с вертикальной плашкой вдоль поля сообщения, но она настолько маленькая, что будет вызывать ошибочные нажатия. Да и выглядит не очень.

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

Прототип

Приватность

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

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

Конечно же, можно установить локальный PIN-код и даже дополнительно включить опцию в iPhone, чтобы после 10 попытки входа все данные стёрлись, но есть вероятность, что товарищ майор настойчивый и применит административные методы воздействия или же в худшем случае насильственные методы — два удара в печень открывают любые замки. Но это конечно невозможная ситуация!

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

Это все я ввел к тому, что надо бы сделать более изощренный метод локальной защиты. Чтобы волки были сыты и овцы целы — как бы открыл доступ к Telegram, но на самом деле нет.

Решение

Можно включить альтернативный PIN-код, который при вводе его будет вызывать следующие действия по выбору:

  • Скрыть отдельные чаты. После ввода PIN-кода будут скрыты выбранные чаты с общего списка.
  • Скрыть все. Все будет скрыто, но самое главное — взамен будут сгенерированы другие чаты с псевдореальными людьми и диалогами, чтобы минимизировать подозрение.

Дополнительно поможет следующая опция:

  • Сигнал бедствия. Вначале нужно выбрать один и более контактов. При вводе альтернативного PIN-кода — ЧП, контакт сразу же получит геолокацию в реальном времени и три-четыре снимка с фронтальной камеры, которые будут сделаны в течение первой минуты, после будут записываться 35 секундные аудио и делаться два снимка за время сессии, так как неизвестно, когда сессия закончится и выключат телефон. Чтобы как-то обеспечить передачу всех этих данных, Telegram будет запрашивать подключение к сети для псевдоподгрузки диалогов после ввода альтернативного PIN-кода, а на самом деле передавать записи.

Чтобы не спалить, что альтернативный PIN-код активирован, после его ввода в настройках будет выглядеть как деактивирован.

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

Написать
{ "author_name": "Jordan Slon", "author_type": "self", "tags": ["telegram"], "comments": 63, "likes": 41, "favorites": 70, "is_advertisement": false, "subsite_label": "design", "id": 103243, "is_wide": true, "is_ugc": true, "date": "Wed, 29 Jan 2020 09:35:45 +0300", "is_special": false }
0
{ "id": 103243, "author_id": 118463, "diff_limit": 1000, "urls": {"diff":"\/comments\/103243\/get","add":"\/comments\/103243\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/103243"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
63 комментария
Популярные
По порядку
Написать комментарий...
17

про пин код - тема

Ответить
–9

Я так понимаю автор надеется на то, что в телеге прочитают эту статью, особенно мне понравился момент про права человека, куда ж без этого...и тут же возьмут его к себе на работу. Дуров уже сидит и думает как они существовали без этого раньше..

Ответить
11

Не переживайте, Дурову не до этой статьи

Ответить
0

вы меня успокоили

Ответить
0

Вдох и выдох

Ответить
0

вы не правы. Мой знакомый рисует для дурова стикеры. Ничего такого. Работа по удалёнке, это всё равно работа в телеграме.

Ответить
0

причем тут ваш знакомый, которых миллион, которые рисуют сейчас стикеры?

Ответить
0

Господа, а можно объяснить динозавру, что есть такого интересного и ценного в телеграмме? Почему я должен обязательно установить это приложение?

Ответить
7

Олдскульным я объясняю так
Телеграмм - это смесь ICQ, IRC и RSS в одном месте =)

Ответить
2

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

Ответить
4

Насколько важной, где, в чем? Для чего? И особенно смешно про "полит темы". В стиле: "ну, я точно знаю, мне знакомый из АП вчера это сказал".

Ответить
0

Мне - намного. Для бизнеса, например. 
Читайте нормальные каналы. Если есть сомнения в новости - гуглите, и делайте для себя вывод

Ответить
0

а как вообще каналы по интересам искать в телеграме?

Ответить
0

Не так просто, как хотелось бы... Иногда - просто загуглить, или есть еще сайты-каталоги каналов, можно в них посмотреть - Tgstat например

Ответить
0

Канал - это однонаправленный пуш новостей, информации? Нельзя обсуждать?

Ответить
0

можно. обсуждения будут в отдельной группе. так же можно комменты прикрутить. на фонтанке ру и у лебедева. оба примера

Ответить
3

Конкретно вы не должны. Ну а так на вскидку если сравнивать с конкурентами, то у whatsapp десктопный клиент привязан к приложению на телефоне. А через viber идет столько спама, причем не только в виде рассылок но и «посмотрите, очень важно!!! У нас новый стикерпак» что это просто невозможно, пришлось удалить

Ответить
2

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

Ответить
0

Да обычный он. Ну что там такого "хорошего в использовании", чего нет у Вайбера или прости господи Скайпа? Скорость тоже, на десктопе 100М на старте отжирает.

Боты... Я так и не понял зачем они нужны. Вот вы лично какие используете?

Ответить
0

Не знаю, что за хлам у вас в качестве десктопа стоит. У меня в среднем 30-40 мб, и это мелочь для современных приложений

Ответить
1

30-40 он забирает только пока сидит в трее, а если его оттуда достать то немедленно заберёт 100-110М. Windows 10 professional, никаких ботов или каналов с гиф-видео и тому подобного. Так что, как говорится, умерьте ваш пыл. Я сильно сомневаюсь, что на Маке ситуация как-то кардинально другая.

И да, для "супербыстрого суперлёгкого" мессенджера, который даже не умеет в видеозвонки - это fail. Толстый и неуклюжий, переписаный на б-гомерзком Электроне(Javascript, Карл!) Скайп, который и в групповые видеоколы умеет, и расшарить скрин и бог знает что еще отъедает примерно те же 100М. 

Ответить
0

Как пишет собеседник пониже, "30-40 он забирает только пока сидит в трее". 

Особенность практически любого Windows-приложения. Для нормальной и быстрой работы приложение требует, например, 100 мегабайт. Windows дает ему 100 мегабайт "в сумме" - там и быстрая память, и медленная, в каких-то долях. Но пока приложение "спит" - Windows отбирает кусок быстрой памяти и делит между другими нищебродскими приложениями. Поэтому пользователю кажется, что приложение в "трее" потребляет "в среднем 30-40 мб".

Ответить
0

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

Ответить
0

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

Ответить
0

Паше нада монетизировать свою аудиторию. 

Ответить
2

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

Ответить
0

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

1. Если говорить про звонилку на клавиатуре, то это не для вас, а для тех кто не имеет большого опыта работы с цифровыми продуктами. Не всем понятно что надо переходить в экран профиля. Я об это написал.

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

Ответить
0

Открыть клаву для звонка... ну такое. Мне нравится решение у Ватзапа – по доступности явно телегу выигрывает. Конечно, эстетика теряется в таком случае...

Ответить
0

ничего открывать не надо! Кнопки стоят над клавой

Ответить
0

Ну то есть таскбар все время виден, получается?

Ответить
0

не совсем, когда начинаете печатать он исчезает пока сообщение не будет отправлена

Ответить
0

А до того как начал печатать?
Речь ведь именно об этом.

Ответить
0

До того как начать и после — стоит

Ответить
0

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

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

Ответить
1

"Как я должен догадаться" – задает вопрос автор. 

А как он должен был догадаться, что тап по аудио переключает на запись видео? У меня приятель (активный пользователь Телеграм) был очень удивлен, когда я рассказал ему, почему все мои видео круглые – он просто не знал об этом, Паша! И это проблема. Кажется, даже был конкурс на эту тему, но воз и ныне там. Да и не решается это никак, кроме как двумя кнопками или слайдером. В видео постоянно приходится тупить, переключаясь на основную камеру – почему я не могу выбрать с какой камеры снимать до, Паша? 

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

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

Как я должен догадаться, где искать эти архивированные чаты?

Но по сравнению с тем, топикстартер, что я должен догадаться (тм) начать писать сообщение, что бы позвонить – это все детский сад =)

Ответить
1

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

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

3. Вам там огромный онбординг показывают при первом использовании архивации

Ответить
0

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

Онбординг ) Это смешно, а манул как пользоваться мессенжером (!) не нужно купить? До момента, когда мне это вновь понадобилось прошло пол года. Или вы предлагаете каждый, хм, месяц проходить тренировку и смотреть "онбоарды", что бы не забывалось? )

Ответить
1

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

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

Ответить
1

Группировка чатов будет реализована подобным образом, это уже добавлено в бета-версии клиента для MacOS – tele.cx/tgbeta/3963

Некоторые предложенные решения достойны внимания, спасибо!

Ответить
0

А когда в мобильные (iOS)? И да - группировка только по типам чатов, но нет ручного варианта сортировки, как я понял?

Ответить
1

Будет называться Пресет (Preset), можно создавать кастомные списки с выбранными чатами.

Ответить
0

Очень круто. Спасибо.
А то пихать все каналы в архив - ну такое)

Ответить
1

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

Ответить
0

Да клавиатура нужна, особенна в айОС, начиная с айфон 6 эс она служит как для быстрой ориентации курсора по текстовому полю

Ответить
1

В Аське в QIP удобная группировка была про группам которую можно было отключать

Ответить
1

Наивные, думают что Telegram не читают :)

Ответить
0

Всё уже сделано до вас и вполне удобно. 
Nicegram для ios, Telegraph и BGram для андроид. Попробуйте, Telegram'у есть чему поучиться.
А вот с безопасностью есть лучше варианты. 

Ответить
0

Классный концепт, автор молодец. 

Похожий паттерн с воркспейсами реализовал Franz (агрегатор мессенджеров на маке). В телеге хаос с каналами и личной перепиской, наверное, бесит 99% пользователей. Но, хитрые продакты не спешат улучшать ux — мы бы все проводили меньше времени там если было бы удобно.. 

Как делали прототип? Framer/ собрали прямо под ios? 

Ответить
1

After Effects

Ответить
0

Про группировку чатов. Как узнать, что пришло новое сообщение в группу "Строительство" если ты находишься в "Садоводстве" ?

Ответить
0

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

Второй момент, у вас еще остаются системные решения уведомление в шапке и на экране блокировки.

А при переключении в списке можно сделать счетчик

Ответить
0

+ в самом меню переключения групп чатов можно написать что "Садоводство" +2. Хотя не увидишь пока не откроешь меню. Можно показывать цветной точкой под иконкой в тапбаре

Ответить
0

Было подобное решение, отбросил, так как цвета вы не запомните, когда категории станут больше 4

Ответить
0

Тут вопрос не в том, что юзера надо учить запоминать цвета групп. А в том, чтобы показать - "Хей! У тебя новые сообщения". Иными словами побудить нажать на кнопку с чатами. А в развернутом меню уже увидишь сколько сообщений в каждой группе. 
Если число групп 12 и во всех есть новые сообщения - показывать только 4 точки и на последней знак +

Ответить
0

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

Ответить
0

Есть уже подобный клиент для телеги - telefuel.com

Ответить
0

еще нет

Ответить
0

Про вкладки уже есть bgram Качайте бета версию. Такой удобной работы с вкладками нет нигде. Можно дать текстовое название или emoji значек. Добавленный во вкладку чат исчезает из других вкладок.
Таким образом к меня есть вкладки избранные все, только боты, юмор, работа со стикерами, мои личные боты ,Каналы по разработке , каналы на тему велосипеда и самоката

По форматированию там тоже продумано. Выделяет текст и появляется меню форматирования.

Ответить
0

успехов

Ответить
0

Лично для меня само важно это группировка и возможность поиска в этих группах

Ответить
0

в чем прототип делали?) спасибо

Ответить
0

В After Effects

Ответить
{ "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" }