Социальная сеть «ВКонтакте» обновила дизайн своего сайта. Такого крупного обновления веб-версия «ВКонтакте» не получала с момента запуска соцсети.


Xw2pBiiCpnA

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

Самое главное изменение — веб-сайт «ВКонтакте» стал заметно шире. Раньше он был приблизительно 765 пикселей в ширину (это пережиток эпохи популярного разрешения экрана 800 на 600 точек), а теперь за счёт появления правого меню его ширина была увеличена до 975 пикселей (адаптация под наиболее распространённое разрешение мониторов 1366 на 768 пикселей). На экранах с разрешениями FullHD, 2K или 4K сайт по-прежнему смотрится слишком узким.

aYbwf9p6I00

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

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

Изменились и размеры рекламных блоков, причём значительно — мелкие баннеры увеличились по площади в 1,84 раза, а большие — в 2,21 раза.

chrome_2016-04-01_14-24-25

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

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

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

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

YqYDMBFEocY

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

Стиль репостов тоже поменялся, теперь они выглядя как цитирование в электронной почте. Кроме того, на аватарках друзей в ленте появился зелёный значок, который означает, что сейчас пользователь находится онлайн (ранее для этого использовалась текстовая подпись — online).

Z4xdVZZkeyY

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

В профилях пользователей появилась наглядная статистика аккаунта — число его подписчиков, общих друзей, друзей, опубликованных фотографий и добавленных видеозаписей (примерно как в Twitter). Блок последних опубликованных фотографий увеличился.

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

Из блога разработчиков «ВКонтакте»:

Работа над новым дизайном велась на протяжении последних полутора лет. Мы тщательно изучали, продумывали и создавали заново каждый элемент. Главный принцип нового дизайна ВКонтакте — на всех устройствах он выглядит похоже и узнаваемо. Пользователю веб-сайта легко найти нужный раздел в мобильном приложении, и наоборот. Переработано отображение каждого элемента. Записи в ленте стали заметнее. Списки новостей теперь в отдельном блоке справа вместе с поиском и комментариями. Включить умную ленту новостей стало проще — переключение в режим «Сначала интересные» находится сразу под этим блоком. Раздел сообщений переписан с нуля. В обновленном интерфейсе мы поместили на одном экране список последних бесед и текущий открытый чат. Переключаться между беседами и реагировать на новые сообщения стало проще. Непрочитанные сообщения помечаются синей точкой, которая исчезает после прочтения, а статус онлайн — зелёной точкой. Отметки «Мне нравится», заявки на добавление в друзья, упоминания, дни рождения друзей и другие события собираются в новом разделе уведомлений. На страницах людей и сообществ теперь можно подписаться на уведомления о новых записях, чтобы не пропускать важные новости. При появлении нового события у иконки «колокольчика» в шапке сайта появится красный индикатор. Фотографии в альбомах и при обзоре всех фотографий стали крупнее и отображаются в красивой журнальной верстке. Фотопросмотрщик ориентирован горизонтально, чтобы лучше задействовать пространство широкоформатных экранов. Комментарии выводятся справа от фотографии: больше не нужно прокручивать экран вниз, чтобы просматривать фотографии и одновременно видеть комментарии к ним.

Система Orphus