Лого vc.ru

«ВКонтакте» представила новый дизайн веб-версии соцсети

«ВКонтакте» представила новый дизайн веб-версии соцсети

Соцсеть «ВКонтакте» запустила в тестовом режиме на ограниченное количество пользователей новую версию дизайна сайта. Это первое крупное обновление интерфейса веб-версии сервиса за 10 лет. Редакция vc.ru в числе первых пользователей успела изучить новую версию «ВКонтакте».

Поделиться

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

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

Мы увеличили ширину экрана и шрифты, избавились от лишних деталей и сделали сайт проще для восприятия. Появилось дополнительное пространство для новых полезных функций. Также мы обновили левое меню: сократили названия пунктов, добавили иконки и перенесли наверх самые востребованные разделы — «Новости» и «Сообщения».

— Андрей Рогозов, операционный директор «ВКонтакте»

Интерфейс новой версии сайта российской соцсети выполнен в концепции «островов»: основной контент страниц — записи сообществ и пользователей — находится в блоках с белым фоном. Весь сайт получил голубой фон.

«Новости»

Списки новостей теперь находятся в отдельном блоке справа — вместе с поиском и комментариями. Появился отдельный переключатель для «умной ленты новостей»:

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

Фотографии

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

Шапка сайта

Полностью переработана шапка сайта — она растянута на всю ширину страницы. Исчезли прежние элементы меню («Люди», «Сообщества», «Игры», «Помощь»). Теперь здесь расположены центр уведомлений, быстрый доступ к разделу «Музыка» и меню профиля.

В новом дизайне используется только международная версия логотипа «ВКонтакте» — VK

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

Центр уведомлений

Профиль пользователя

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

Меню профиля в шапке сайта
Создание новой записи

Сообщество

Все элементы управления сообществом теперь спрятаны в меню.

Сообщения

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

«О компании» и блог соцсети

Полностью переделан раздел «О компании». Он выполнен в виде лендинга с основными фактами о компании, ссылками на официальные сообщества и контакты представителей соцсети.

Также «ВКонтакте» анонсировала возобновление блога компании. Первая запись посвящена запуску нового дизайна сайта.

Из подвала сайта исчезла ссылка на профиль основателя соцсети Павла Дурова

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Статьи по теме
«ВКонтакте» запустила режим «умной ленты» в мобильной версии соцсети29 марта 2016, 20:41
«Лента превращается в трудно воспринимаемый поток публикаций»25 марта 2016, 11:35
Издание «Мотор» провело редизайн сайта11 марта 2015, 19:12
Кейс редизайна: «Яндекс.Деньги» обновили сервис04 февраля 2015, 17:55
Руководитель проекта «Яндекс.Авиабилеты» о редизайне сервиса02 февраля 2015, 19:59
Редизайн HeadHunter: Арт-директор проекта об обновлении российского сайта по поиску работы22 декабря 2014, 18:55
Масштабный редизайн Airbnb: мнения экспертов17 июля 2014, 17:35
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Так в прошлом дизайне расположение элементов было почти таким же.

Уведомления тоже были вверху?
А показ изображений тоже был с комментами справа?
И где в новом дизайне аватарка, там раньше была кнопка "Выйти".

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

Точно. Сначала даже не понял, а что же изменилось, пока не вспомнил, что год назад stylish поставил.

1 апреля, никому не верят, ля ля ля

0

Неплохая шутеечка

0

Было бы здорово, если его можно было бы в настройках включить.

да, на момент публикации коммента не увидел)

0

Как не крути, но нового ничего не изобрели
Новшества = 0

п.с. С 1 апреля.
п.с.с. Где-то видел уже этот диз)

Material Design покоряет еще одну вершину)

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

0

Сиди читай что такое MD: www.google.com/design/spec/material-design/introduction.html

А не увидев похожие селекторы ори, что вк ввел Material Design.

0

Спасибо но я уже прочитал ее 2 года назад.
Вот теперь пруфы:
Active effect - с gmail.com
Фильтр - materialdesignicons.com/icon/filter
Свич - www.google.com/design/spec/components/selection-controls.html#selection-controls-switch

Попробуй оспорить теперь.

0

Я тебе последний раз говорю. MD не в том, что элементы похожи, MD в подходе к разработке дизайна, ui/ux. И пока это ты не поймешь, буду говно дизайны с MD. Давай закроем эту тему.

Что-то я не могу эту кнопку найти. Или уже удалили?

0

А я уже было поверил, пока комменты не почитал. :(

0

Я в первом миллионе пользователей, ничего не изменилось - с первым апреля!

0

А не, нифига не первое апреля, ща подключил себе новый дизайн, будем посмотреть

1) Сообщения ужасны.
2) Круглые иконки убоги и не информативны. Не для людей точно, вот когда камеры станут делать снимки круглыми, то может.
дальше не стал смотреть

тройной скролл в профиле - как вишенка на торте

0

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

0

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

А вот видимо и "лучшие умы" подтянулись. Хуево быть таким серьезным, Юрий, особенно первого апреля.

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

какое 1 апреля, действительно же можно включить...

Это один в один мобильная версия сайта открытая на ПК.
Ну как так то?(

0

ответы - колокльчик возле поиска сверху. предупредили бы.

0

В статье об этом написано, почитали бы.

0

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

0

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

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

Новости больше не разъезжаются на ширину сайта, когда скролишь вниз.

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

Кстати да, широкие по-умолчанию (хотя таки чуть уже :)). Но смотрится очень сжато.

0

Ну с диалогами +- терпимо, не сильно уменьшилось пространство, исходя из того что раньше было ~500-600px, сейчас 400 на текст сообщения. Зато вкладки сообщений в целом стали "статическими", для меня это удобно.
С новостями я вангую будет фикс, и поведение вернут на старое.

0

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

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

На личной странице фиксируется последний элемент, я так понял.

0

>> Новости больше не разъезжаются на ширину сайта, когда скролишь вниз.

И слава Богу. Бесило это, слушаешь видос, прокрутил вниз - и нет видоса.

Чатик в нижнем углу не вижу, например.

Почему-то не работает подсказка при вводе @имя

0

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

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

Дуров, верни стену!! Хотя нет, не так, вот так, для начала: "Верните Дурова!"))

1. Ппц. На фейсбуке не сидел только по причине уебодизайна. Куда теперь податься?
2. Убогость шрифта еще переживу, но вот интерлиньяж и расстояние между абзацами...
3. Круглые иконки как крышки гвоздей в гроб нового сайта. Верните квадратные хоть на платной основе.

p.s. и да, увеличить шрифты и ширину сайта можно было и по-другому. Как вам мой вариант?

на вкус и цвет, как говорится.

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

Диалоги у вас вообще ничитаемые.

0

Они сделали просто ещё один Фейсбук. Зачем мне ещё один, когда уже есть я не понимаю.

другое комьюнити, другой фид

0

Кто нибудь объясните - зачем это делать? Зачем?

Почему ширина разная в разных разделах, чот не оч

Фото профилей ВКругах как на VC, слизали

0

Пиздец. Сейчас круги везде, пишут исследования почему рожи в кругах лучше, а тут "слизали с vc"

Вообщем нравиться.
С того что успел заметить два минуса:
1) диалоги вкладками (дело привычки)
2) в диалоге не видно сидит ли собеседник с мобильного или пк

А нафига скрывается левое меню после прокрутки новостей? Сделали бы его статичным.

Как хорошо, что сегодня 1 апреля 😅

0

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

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

Круглые авки? Рил? Самое время ставить пекафейс на авку.

Если не понравится, просто поздравят всех с первым апреля и вернут старый дизайн

Заметил вот реально пропавшую вдруг фичу — администраторы не могут посмотреть сообщения паблику.

Верим и ждем. Просто странно, что не успели именно ее, все остальное на месте.

0

А как отправить отзыв то ребятам? Почему раздел сообщений становится шире? А все остальные разделы одинаковой ширины, это фишка такая?

чатик ок, фотки ок остальное не очень

0

чтота не то с этим серый фоном

0

Довольно чисто стало. Понятность осталась. Все хорошо в целом.

0

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

0

Ёпт, потому что на прод такого релиза нужно влить кучу ресурсов — ради шуточки никто не будет рыпаться. Ну и потому что UI у вконтактика застрял в 2008-м.

0

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

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

Иногда первое апреля — это просто дата в календаре, не более.

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

0

Если же это не прикол, очевидно, Google не совсем уверены в Gmail, и, делая релиз в такую дату, они оставляют для себя возможность включить бэкпедал и сказать "ой, мы пошутили".
Для справки: бетатест Gmail был запущен 1 апреля.

0

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

За историческую справку спасибо, непременно запишу себе в календарик.

0

а вы не знаете 1-апрельскую шутку от гугла на позапрошлый год?

0

"Откуда такая логика?"

Возможно из "Присоединиться к тестированию". (но я побоялась присоединяться)

0

Фейсбук - разлогинься

Таки удобней стало намного

−1

Как вернуть старый сайт?

под левым меню в самом низу нажмите Вернуться на старую версию сайта

Arial на Open Sans зря заменили.
Мало контраста, раньше нужные элементы выделялись намного лучше
Местами слишком много бордеров (полосок), когда в других местах их нету вообще.
У фейсбука голубой фон нейтральный и не давящий, как в случае с вконтакте.

Привыкнем
Мне больше нравиться когда не прочитанные сообщения подсвечивались другим цветом, куда стикеры пропали?

ахах это телеграмм ))) вот бы еще не лагал так ваще шик)

0

Отлично. Очень свежо и интуитивно понятно. Как будто реализовали всё чего не хватало. Спасибо )))

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

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

0

По мне так больше на «Одноклассники» похоже, чем на Фейсбук

фон уберите
шрифт в меню 13рх
шрифт контента 14рх
letter-spacing: -0,1рх тоже уберите

да и вообще больше похоже на шутку, все сделано уеб..щно

Привыкнуть можно, а так такое..фейсбук-стайл.

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

0

Минус, что не видно, прочитано сообщение или нет.

Сообщения как в телеге, фото как в инсте. Заебись.

0

А логотип VK отличается немного! (было раньше лучше, ящитаю)

аксиома Эскобара

0

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

0

Меня бесит что звука сообщений нету,да и ваще када оно приходит не сразу отображается..а так неплохо Но! КАК ВЕРНУТЬ СТАРУЮ ВЕРСИЮ НИКАК НАЙТИ НЕ МОГУ ТУ ССЫЛКУ!!!

Это потому что вы капсите.

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

0

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

0

в каком месте тут яблоко-то? вы вообще видели OS X и iOS хоть раз?

0

Просто сравните версию для iPad iOs 6.1 и новый дизайн ..

0

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

0

Вспомнил Яндекс с КиноПоиском)))

0

Не тот случай, что приятно. Здесь поменяли оформление, а не сервис А на сервис Б.

0

Как убрать этот новый дизайн??

вы когда на него перешли - вам должны были сказать как) кнопочка слева снизу!

1

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

Очень классное обновление! Всё качественно сделано, нет ничего лишнего :-)

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

Чего вы, все кто ноет, хотели от редизайна? Это редизайн а не обновление/добавление функционала

Такое чувство что не на vc а в мдк комменты прочитал

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

если все будет находиться на своих местах то это не редизайн

Ну, вышло не так плохо, как я ожидал, но стилиш всё равно нужен

0

Лайфхак для слепых (таких как я) - подкручивание в браузере масштаба до 125% делает пребывание вконтакте (что в старом, что в новом) приятнее и читабельнее. Кто ругается на шрифт - попробуйте, может быть и вам полегчает.
PS: лично у меня только к новым диалогам вопросы, остальное без боли

В старом ВК был пункт настроек "увеличенный шрифт".

0

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

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

0

Не забудьте обновить страницу входа! :)

если не шутка, то это чтобы адептов фейсбука было проще переманивать привычным им дизайном? тогда как бы ВК-исты не убежали

Попытка оживит умирающего. Такой постсовковый фб получился.

У меня уже второе апреля. Признавайтесь, это была шутка или всё таки нет. :)

Чет так и не увидел у себя на стр. изменения. Может мне старый вид оставят?))) А вообще голубой фон напрягает, если действительно так будет.

0

Когда хочу посмотреть полный список тех кто поставил лайки на фото, даёт ошибку, но только на некоторых фото, на остальных вс нормально

0

А как вам такое?

0

Давайте не будем забывать, что вконтакте изначально был клоном фейсбука и пока он стойко держит свой вектор развития (следует за фб). Это в принципе будет так происходить пока все участники разработки вк не перестанут заходить на фб и смотреть что там и как работает.

0

на фб принципиально не сидел из-за дизайна. теперь и вк сделали подобным. БРЕД!!!!!

0

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

Извините, если ошибаюсь, но, ведь можно зайти по ссылке new.vk.com и всё. Под меню потом появиться ссылка с текстом вроде "постоянно пользоваться новой версией". Нажимаешь и PROFIT!!!

0

Странно что еще никто,не поменял логотип VK на FB

0

"Полностью переделан раздел «О компании». Он выполнен в виде лендинга с основными фактами о компании, ссылками на официальные сообщества и контакты представителей соцсети"

Омг, что я прочитал.
Лендинг - это посадочная страница, созданная для привлечения клиентов или продаж.

Вопрос: что ВК нам хочет впарить?

0

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

0

даже в сообществах такая же проблема

0

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

0

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

почему у меня не хотел заходить?

0

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

Сейчас обсуждают
Данил Петрусёв

Сук, я так себе велосипед не закажу никогда такими темпами

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Pavel Molchanov
SoftProducers

Я клиент Агавы

Регистратор Reg.ru приобрёл старейшего российского хостинг-провайдера Agava
0
Alexander Dembovski

Рэйчика уважаем!

PewDiePie сохранил лидерство в рейтинге самых высокооплачиваемых YouTube-блогеров по версии Forbes
0
Yevgeniy Rozenblat

Про многомиллионные откаты и заносы ни слова?

Почему корпоративных клиентов не интересуют скидки
0
Victor Babichev
Atlas

Не уверен. Тут все зависит от следующей акции.

Кейс из России: Как «Атлас» продавал тесты в «Черную пятницу» при помощи онлайн-голосования в Facebook Live
0
Показать еще