Новый интерфейс веб-версии вконтакте. Новый мобильный «ВКонтакте

04.08.2019

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

В веб-версии соцсети у ленты новостей уже был раздел «Рекомендации», но его контент не синхронизирован со вкладкой поиска в приложении, где работает новый алгоритм. Кроме того, контент во вкладке визуально группируется: фотографии и видео укладываются плиткой, записи с длинными текстами занимают больше пространства и выделяются.

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

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

«ВКонтакте» называет свой алгоритм «Прометеем» (в древнегреческих мифах он приносил людям огонь): когда пост пользователя попадает в рекомендации, он получает метку в виде пламени на своей странице. Так можно будет понять, откуда пошёл поток новых комментариев и лайков.

Но в ленте рекомендаций работает не только «Прометей», который ищет что-то новое и поддерживает малоизвестных блогеров. Есть ещё два типа подбираемого контента: первый - персональные рекомендации, построенные на социальном графе пользователя, а второй - общие для «ВКонтакте» тренды.

Представители «ВКонтакте» рассказали, что «Прометей» умеет искать пользователей, подобным другим. Если соцсеть знает, что у пользователей популярен художник Дюран, она будет использовать собранные об их интересах данные, чтобы искать похожих на него блогеров.

Вместе с тем компания обещает, что будет бороться с плагиаторами, которые не производят свой контент, а зарабатывают популярность на краже его у других. Алгоритм будет искать оригинал и стараться показывать именно его, причём речь идёт о всех медиа - тексте, картинках и видео, поясняет Сергей Паранько, развивающий медиаплатформу соцсети: «Если кто-то взял чужой контент и начал на нём подниматься, то мы всегда проверим - а не был ли этот контент загружен кем-то ранее».

Косметика

В начале сентября ведущий дизайнер «ВКонтакте» Павел Князев анонсировал скорый редизайн мобильных приложений. В текущем виде приложения реализовано только половина из обещанного: лайки стали красными (выглядят гораздо сочнее, нажимать приятнее), кнопки стали более круглыми, перерисовано много иконок и, главное, в приложении больше нет бокового меню - есть только пять кнопок снизу.

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

Лента новостей очень напоминает комбинацию Фейсбука и Инстаграма: с одной стороны, здесь есть разнокалиберный «тяжёлый» контент, выдача которого находится под управлением алгоритма. С другой - истории и быстрый доступ к их созданию по свайпу вправо. Но теперь у «ВКонтакте» есть не одна, а уже две алгоритмических ленты в соседних вкладках: новости и рекомендации.

Звучит непросто, тем более что полной синхронизации с десктопом мобильная версия не предполагает - ни в методах работы, ни в визуальном оформлении. Управляющий директор «ВКонтакте» Андрей Рогозов поясняет: веб давно ушёл на второй план, впереди - мобильные платформы, да и паттерны пользователей на них сильно различаются.

Платформа для лонгридов

Пока у «ВКонтакте» есть лишь старые возможности для создания записей - написание текстовых постов, съёмка фотографий, видео и историй с масками. Но до конца 2017 года соцсеть обещает запустить платформу для создания лонгридов, которые будут «корректно отображаться на всех устройствах».

Паранько пояснил, что платформа для лонгридов - это по сути редактор длинных записей с различными вложениями, который позволит публиковать внутри соцсети сложные форматы. Раньше паблики «ВКонтакте» использовали для этого wiki-разметку, но она, скорее всего, канет в прошлое - её не отключат, но развивать не будут. По описанию платформа будет напоминать то, что уже существует у Medium, Facebook и Telegram.

У Medium это каталог интересных статей, у Facebook - инструмент более богатой вёрстки текста, а у Telegram - примитивный редактор для публикации любых больших материалов с поддержкой быстрой загрузки через Instant View. Во «ВКонтакте» заявляют, что будут поддерживать инициативу AMP (этот стандарт используют Google и Twitter) для более быстрой загрузки своих материалов, в том числе встроенных на внешние сайты.

По задумке компании, для пользователя чтение внешних материалов и опубликованных через платформу не должно ничем отличаться - причём «умная» лента будет ранжировать такие записи выше, чем обычные ссылки, так как для пользователя контент будет загружаться быстрее. По статистике «ВКонтакте», за год работы «умной» ленты на неё перешло 85% пользователей.

Насколько корректным будет отображение на всех устройствах - пока вопрос. Ещё несколько лет назад в рамках аналогичной инициативы для медиа во «ВКонтакте» появились большие карточки у ссылок на материалы СМИ и других внешних сайтов - однако приложение соцсети для iPad до сих пор не умеет их корректно отображать.

Встроенный мессенджер

Ещё в августе 2014 года представители «ВКонтакте» во время специального мероприятия заявили о планах выпустить отдельный мессенджер для обмена сообщениями. Эти планы многократно повторялись источниками в СМИ вплоть до конца 2016 года, пока вопрос «Когда “ВКонтакте“ выпустит мессенджер» окончательно не стал мемом.

Неформально представители соцсети уже давно признают, что необходимость в отдельном мессенджере отпала. Теперь это закреплено в официальных пресс-релизах компании: она стала отдельно считать аудиторию «встроенного мессенджера ВКонтакте» - по последним данным, это 82 миллиона человек в месяц. Ежедневно соцсетью пользуется 97 миллионов человек.

  • Дизайн мобильных приложений ,
  • Интерфейсы
  • ВКонтакте - это множество интерфейсов для разных платформ. Сегодня Вы узнаете о том, как мы работаем над этими интерфейсами, создавая дизайн своих продуктов.

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

    Инструменты и подходы

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

    Например, с иконками. Их действительно много. Один усидчивый дизайнер недавно перерисовал больше ста штук:

    Раньше на каждом экране приложения использовались свои иконки в разных цветах и размерах. Например, newsfeed_search, wall_search_gray и т.д. Теперь мы сделали иконки универсальными и можем переиспользовать их. Всего одна иконка поиска вместо пяти разных.

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

    Все основные компоненты для каждой платформы собираются в коллекцию - UI Kit. Вот как это выглядит:

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

    В 2015 году мы полностью перешли с Photoshop на Sketch для проектирования наших интерфейсов. Для распределения задач мы используем Trello, а рабочие файлы синхронизируются в Dropbox. Создаём прототипы в Principle, Framer и Origami, пробуем новые инструменты и плагины.

    Ставим цели

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

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

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

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

    Навигация

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

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

    Сам по себе таббар - ни разу не новинка. Сейчас это стандартный подход к навигации на Android и iOS. У нас он когда-то тоже был:

    Обратите внимание на 2011 год - всё довольно просто, если функциональность приложения вмещается в пять вкладок.

    Тогда все фичи в первую очередь внедрялись в вебе, и в лучшем случае воплощались в API заметно позже, а то и вообще никогда. Но времена менялись: всё больше пользователей обзаводились смартфонами, парадигма Mobile First набирала обороты, и приложения стали уметь гораздо больше. На подходе были новые занимательные разделы и сервисы, и одной нижней панели им катастрофически не хватало.

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

    И, кажется, таббар - идеальный вариант. На дворе MMXVII, табы прочно обосновались в гайдлайнах Apple и Google. Так мы решим свою задачу - вынесем самое нужное на расстояние одного тапа и сохраним всё разнообразие возможностей в привычном меню.

    Что ж, отлично. Осталось понять, что будет во вкладках. Здесь нужно отметить, что идеологически мы почти не практикуем A/B тестирование UX на больших выборках живых людей. Даже глобальный редизайн полной версии сайта после выкатки на часть пользователей допиливался только в отношении каких-то мелких деталей. Принципиальные вопросы вроде приоритета разделов мы решаем ретроспективно, планируя будущее на основе обширного опыта из прошлого.

    Проанализировав множество разных статистик, мы (без особой, впрочем, интриги) выбрали четыре основных раздела: Новости, Поиск и Рекомендации, Сообщения и Уведомления. В пятой вкладке оставляем меню, где будет всё остальное.

    А что же старое доброе меню? Здесь мы дали себе волю в создании концептов:

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

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

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

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

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

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

    Лента новостей

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

    Но нельзя просто взять и добавить счётчик. Это новый статичный значок, и важно не запутать пользователя. Мы изменили стиль иконок действий: из залитых они стали контурными. Такие иконки можно сделать контрастнее и крупнее, сохранив воздушность интерфейса - контурные значки не станут визуально «тяжёлыми». Они выглядят эстетичнее, не воспринимаются неактивными и привносят элемент игры: хочется заполнить «пустую» иконку своим действием. Благодаря разным стилям Вы можете легко понять, что здесь ждёт Вашего тапа, а что - просто информирует.

    И самое главное - мы покрасили лайк. Да, теперь он красный (ну почти, #FF3347), сочный и заметный. Больше никаких сомнений, лайкнули Вы эту роскошную статью или ещё только собираетесь. Мы давно к этому шли. Первые эксперименты с цветом сердечка мы начали ещё в 2014 году, в процессе создания нового дизайна веб-версии ВКонтакте.

    Аудиоплеер

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

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

    Нужно было придумать удобный способ отображения большого количества контента в плеере. И вот что у нас получилось:

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

    Редактор историй

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

    Мы решили попробовать другой распространённый подход для быстрого переключения между масками:

    Подводим итоги

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

    Уже совсем скоро будут официально запущены обновлённые приложения ВКонтакте для Android и iOS, где реализованы некоторые из описанных концептов.

    «Мгновенно заметить лайк от топовой тян, написать ей «привет, как дела» и тут же вернуться к мемасикам в ленте - изи как никогда.»

    Муртол Лазвачев, активный пользователь ВКонтакте

    Социальная сеть «ВКонтакте» объявила о выпуске полностью обновленных мобильных и iOS. В них изменилось буквально все - появились как новые функции для пользователей, так и переработанный пользовательский интерфейс. Обновление ранее в этом месяце.

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

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

    Раздел уведомлений с новым дизайном теперь включает все оповещения и заявки в друзья - как в веб-версии «ВКонтакте». Также лайки стали красного цвета, а счетчик просмотров показывается на каждой записи без необходимости открытия отдельного поста.

    Обновление станет доступно для установки в Google Play и App Store в течение ближайших суток. Или вы можете скачать его на Трешбоксе.

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

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

    Новая версия

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

    И это еще далеко не все «новинки» сайта. Вверху раздела «новости», можно воспользоваться вкладками «Поиск» и «Рекомендации». Вкладкой «комментарии» можно воспользоваться в отделе «Ответы». Ранее же все это можно было делать только при помощи свайпа экрана в правой части.

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

    Обновление

    Крайне просто загрузить обновления на андроид. Как обновить вк на телефоне андроид:

    1. Для этого нужно зайти в стандартное приложение всех андроид смартфонов – Google Play. В этом магазине программ и приложений удобнее всего скачивать обновления.
    2. Сверху слева нужно нажать на меню и выбрать вкладку «Мои приложения».
    3. Далее будет видно, какие приложения установлены на телефоне, а в самом верху будут обозначены те, которые требуют обновления.
    4. Ищем среди них приложение Вк и нажимаем «обновить».
    5. Приложение выведет на экран уведомление о том, что оно будет иметь доступ к идентификационным данным, нужно нажать кнопку «принять».
    6. После этого обновление начнется скачиваться.
    7. Программа на этом этапе обновляется автоматически.

    Если используется обычный интернет-трафик, то приложение может уведомить о том, что размер скачиваемого файла слишком большой. Это нужно для того чтобы пользователь знал, что возможна задержка или переплата за трафик. Лучше всего обновлять Вк при подключенном Wi-Fi, это позволит сэкономить денежные средства на трафике.

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

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

    Сегодня 27.09.2017 я с удивлением обнаружил, что в моём Айфоне, да и на других телефонах с ОС Андроид, появилась возможность обновить . Обновление Мобильного ВК приходиться принимать как данность, резкий переход к новому виду.

    Быстрая навигация:

    Новый вид мобильного приложения VK.

    На первый взгляд, очень интересно, что-то новое! Но после нескольких секунд, когда не смог найти в меню вкдадку «Сообщения», меня смутило и я вспомнил все эти дрявые сервисы от маил ру . Конечно же, ВК уже не Павла Дурова. В моей голове прокатилась волна негодования с лозунгами, типа: «Верните Дурова!»…

    Что нового и хорошего?

    А хорошее действительно есть, как и кто бы чего не говорил. Ведь всё новое всегда воспринимается в штыки.

    Новое меню (Удобнее с большим экраном)

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

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

    Теперь это самое меню находится внизу и его легко можно кликнуть большим пальцем.

    Ответы «Колокольчик»

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

    Улучшенный поиск

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

    Для отключения безопасного поиска, по прежнему нужно переключаться в браузере (См. ).

    Менее значимые изменения нового ВК.

    Как только я поставил первый , как заметил что он стал красным, сразу же напомнило Инстаграм. Ранее при нажатии, он приобретал более тёмный, голубой цвет. Что сразу понравилось, так это очень акуратно выполнные элементы под новостями, лайки, сообщения, и просмотры. Теперь смотрятся более гармонично и стильно.

    Кстати музыка Вконтакте теперь имеет лимит на прослушивание, как обойти такое нововведение (См. ).

    Как вам новшества?

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


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

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