Рунет беден обзорами редизайна известных сайтов и сервисов. Эта статья не ради того, чтобы это исправить. Моя цель обсудить с сообществом решение одной из проблем веб-версии Вконтакте.
В прошлогоднем конкурсе на редизайн ВК, авторы конкурса упомянули о проблемах веб-версии. Проблемой номер один они назвали узкую ширину сайта. Я согласен с командой Вконтакте и решил построить свое решение в борьбе с этой проблемой.
Боль
Проблема №1 - Узкий экран
Помимо ширины экрана я выделил еще 2 проблемы.
Проблема №2 - Разный стиль веб-версии и приложений
Проблема №3 - Месенджер
Мессенджер в ВК появился сравнительно недавно. Первая его версия заметно выбивалась по стилю и со временем это решили. Основная проблема месенджера на мой взгляд это то, что он живет параллельно с сайтом. Окно переписки маленькое. И хоть оно и масштабируется, но оно привязано к абсолютным координатам - пользоваться сервисом не удобно. На Фейсбуке месенджер также живет отдельно от сайта, плодя при этом множество маленьких окон-переписок.
Теория - способы стать шире
Давайте сначала решим, что такое узкий экран. Текущая ширина ВК - 791пк. В конкурсном задании было сказано адаптировать сайт под разрешение от 1024пк. Как я вижу, решением проблемы узкого экрана будет интерфейс рабочий на разрешении 1024-1600пк. То есть интерфейс способный работать как на узком (1024пк) разрешении, так и на широком (1440+пк).1. Физическое растяжение
Решение в лоб - делаем сайт резиновым.
Плюсы:
+ Легко реализовать
Минусы:
− Контент становится не читаемым
− Нужно полностью пересматривать некоторые разделы сайта (например, друзья)
2. Параллельное изложение
Прием был замечен в концепции редизайна Фейсбука 2006 года от iA - комментарии расположены справа от постов. 5 лет назад я опробовал его на одном из своих проектов.
Плюсы:
+ Посты располагаются линейно, не разрываясь комментариями
+ Комментарии к постам видны сразу без дополнительных переходов
Минусы:
− Неравномерная плотность информации на экране
− Версия под 1024пк с большим трудом может быть создана или вынуждена отличаться от широкой
− Нужно полностью пересматривать некоторые разделы сайта
3. Смещаемые панели
Подход ставший популярным в веб-сервисах: срм-системах, таск-менеджерах. Экран состоит из зависимых панелей. Панели появляются справа друг от друга, если экран не вмещает все, то левые панели скрываются по мере появления правых.
Плюсы:
+ На маленьких разрешениях можно переключать панели, на большом показывать все сразу
+ Схожесть интерфейса с версией под планшеты
Минусы:
− Не привычный для веб-пользователей вариант
− Сайт расположен не в центре экрана, а слева
− Большой обьем архитектурной работы
− Отсутствие линейного просмотра, требуется клик по новости для прочтения комментариев
4. Два окна
Интерфейс с двумя активными рабочими разделами на экране.
Плюсы:
+ Требует мало изменений в текущем интерфейсе
Минусы:
− Не ясно как работать с 2 режимами одновременно и зачем
5. Две колонки
Режим отображения информации схожий с таймлайном на Фейсбуке. Концепт, основанный на этом варианте, победил в конкурсе редизайна ВК.
Плюсы:
+ Легко компоновать информацию
+ Равномерная плотность данных на экране
Минусы:
− Раздваивается внимание при чтении новостей
− Фейсбук
6. Карточки
Переход от вертикального повествования в сторону сетки. Пример - Пинтерест.
Плюсы:
+ Легко масштабируется под любое разрешение
Минусы:
− Трудно воспринимать контент (трудно переучиваться)
− Нужно полностью пересматривать все разделы сайта
Практика - мое решение
Свое решение я построил на 4-м подходе: экран с двумя активными окнами. Второе окно - месенджер. Это позволяет переписываться во время чтения новостей. При этом не используя 2 вкладки браузера.
На небольших (<1440пк) экранах окно чата сворачивается.
При желании оно открывается поверх основного контента. Сценарий ведения переписки во время чтения новостей работает также.
Сама панель пользователей с последними переписками остается на экране во всех разделах сайта:
Детали за кадром
Если всмотреться в скриншоты, то видны и другие изменения в интерфейсе:
1. Фон. Появился фон для повышения контраста блоков.
2. Разделение на блоки. Посты расклеились на независимые блоки.
3. Лайки переехали вверх. Пожалуй самое спорное изменение и, вероятно, заслуживает отдельного обсуждения.
4. Пропало прежнее верхнее меню. Все его функции уже были задублированы в разделах сайта. На его место встал уровень вкладок. Таким образом удалось сократить один этаж навигации. Фильтры (редко используемая вещь) переехали в выпадающий список. Пропал еще один этаж навигации.
5. Два режима просмотра друзей. Один заимствован из веб-версии, другой из планшетной. Трудно оценить какой популярнее и удобнее.
6. Личные заметки. Появился блок личных заметок о каждом друге. Кому понравилось, берите тут - VK Memos .
7. Веб-звонки. Они уже были раньше в ВК, но были сделаны как отдельный режим работы. Сейчас это незаметная функция, не мешающая основному серфингу и общению.
Вместо постскриптума
Разве может быть редизайн социальной сети без прототипа страницы пользователя.Текущая версия перегружена информацией: музыка, видео, группы, паблики, фотографии, фотографии на карте, фотоальбомы, друзья, общие друзья, друзья онлайн, подписчики… Я решил отрезать все лишнее:
На этом все, спасибо за внимание.
Скорый редизайн мобильных приложений и iOS. Первые концепты обновлений внешнего вида опубликованы в официальном блоге «ВКонтакте», в котором, помимо всего прочего, Князев также рассказал о работе дизайнеров в компании.
В клиентах и iOS снова появится таббар - единая навигационная панель с вкладками в нижней части экрана, охватывающая основной функционал. К слову, дизайнеры социальной сети отказались от нее в 2012 году. В новом видении дизайна таббар включает главные разделы «ВКонтакте»: «Новости», «Поиск и рекомендации», «Сообщения», «Уведомления» и меню пользователя. Боковое меню, судя по опубликованным скриншотам, в редизайне приложений полностью уберут.
Помимо кардинально нового пользовательского интерфейса, дизайнеры «ВКонтакте» с грядущим обновлением внешнего вида добавят и несколько функциональных нововведений. В разделе «Поиск и рекомендации» появятся прямоугольные истории пользователей, находящихся поблизости, а также лента потенциально интересных записей от новых авторов. Ведущий дизайнер «ВКонтакте» описывает новый раздел как «такую залипательную штуку, где можно найти что-то качественное и незнакомое с учётом личных предпочтений». В ленте новостей введут счетчик просмотров (сейчас он отображается только при открытии записи), а лайки станут красного цвета.
Когда выйдут обновленные
Сегодня на конференции Dribbble Meetup Павел Шумаков, ведущий дизайнер ВКонтакте, представил новый дизайн сайта ВКонтакте, мобильных клиентов компании на iOS и Android, а также совершенно новое фотоприложение.
ВКонтакте предпочли продлить интригу по поводу нового дизайна сайта и даже на презентации наложили размытие на скриншот. Но и этого примера хватает для того, чтобы сложить общее впечатление о редизайне. Сайт разбит на так называемые “острова” - каждая запись или любой другой блок визуально разделены друг от друга. Ширина сайта и его шрифт будут увеличены.
Сроки: до конца 2015 года.
Фотоприложение ВКонтакте
Лично нам интереснее было посмотреть на совершенно новый продукт от ВКонтакте - фотоприложение . Это своего рода аналог Инстаграма. Оно было анонсировано ещё на нашем мероприятии LIVE Event 2014, но мы, как и вы, увидели его впервые только сегодня, и были под впечатлением. Новое приложение разрабатывается вместе с профессиональными фотографами. В нём, помимо очевидных возможностей, вроде цветокоррекции, вы сможете создавать свои фильтры и обмениваться ими с друзьями. Приложение полностью синхронизировано с ВКонтакте.
Сроки: надеемся на выход приложения уже этим летом, ведь именно в это пору оно будет актуальным как никогда.
Долгожданный Material Design в клиенте ВКонтакте для Android. Полный редизайн всего приложения. Даже наши коллеги “яблочники”, взглянув на него, стали немного завидовать. Так же появилась возможность заказать изготовление пакетов с логотипом . Теперь этот процесс станет удобным и быстрым.
Сроки: скоро.
Видеокаталог и новые записи для iPhone
Но и владельцам iPhone есть чему порадоваться. Они-то уже давно получили свой редизайн, который и сейчас остаётся актуальным, поэтому на презентации нам показали новые записи и, конечно, внедрённый видеокаталог. Очевидно, это не единственные грядущие изменения.
— это не шутка. Поскольку переход на такой интерфейс, очевидно, неизбежен для всех, вопрос, как вернуть старый дизайн Вконтакте имеет лишь временное решение. Но т.к. хоть и временно, но отключить новый дизайн Вконтакте и продолжить работать с привычным вменяемым интерфейсом всё же возможно , то это мы и сделаем.
Этот вопрос актуален, пожалуй, для всех пользователей Вконтакте, привыкших за 10 лет к простоте и удобству старого дизайна и использующих его функционал на полную катушку. В частности, это касается тех, кто создал и администрирует сообщества и группы – разработчики нового VK.com, безусловно, осложнили им жизнь своими нововведениями.
Кстати, для данной категории ВК-пользователей хочется дать дельную рекомендацию: дабы не терять драгоценное время на самостоятельную раскрутку паблика как во Вконтакте, так и во всех других популярных соцсетях, и полностью сконцентрироваться на качественном контенте для своего сообщества, Вам следует обратиться в сервис Soclike . Судя по многочисленным положительным отзывам, данная пиар-команда знает свое дело и сможет быстро обеспечить Вашу группу нужным числом качественных подписчиков.
Вернемся к основному вопросу. Сразу оговоримся – речь пойдет о браузерной версии социальной сети. Android и iOS-приложения, увы, в данной статье рассматриваться не будет.
Upd. 17.08.2016. Уважаемый Читатель, дабы не тратить твое драгоценное время, хотелось бы сразу проинформировать: «Восстание подавлено, Скайнет победил». Ну, а кроме шуток — случилось неизбежное: несмотря на все протестные настроения пользователей Вконтакте, разработчики после нескольких «волн» переводов пользователей на новый дизайн решили, что хватит мелочиться: 17.08.16 на новый дизайн были переведены ВСЕ пользователи соцсети… Соответственно, адреса new.vk.com на данный момент просто не существует, и использующие его возврат рекомендации не срабатывают…
Это не значит, что способов вернуть старый дизайн Вконтакте теперь совсем нет: специально для тех, кто не сдается — предлагаем ознакомиться с блоком ««, размещенным ниже по тексту. Там Вы найдете способ, который, вероятно, сможет погасить в Вас пламя праведного гнева.
Ну а до данного блока будет приведена информация, которая имеет скорее историческую, чем практическую значимость: далее изложена хронология борьбы с недугом под названием «Новый дизайн Vk.com «. Знакомство с этой информацией отнимет у Вас, уважаемые Читатели, не так много времени, и вероятно, кому-то будет интересно узнать «с чего всё начиналось», поэтому все ранее работоспособные способы в статье остались. Итак, начинаем.
Для тех, кто стал «подопытным кроликом» для дизайнеров Вконтакте поневоле (т.е. просто в определенный момент столкнулся с новым интерфейсом), должна остаться ссылка «Вернуться на старую версию…», размещенная в нижней части левой колонки с меню и рекламой. По правде говоря, дизайнеры явно старались сделать инструмент того, как вернуть старую версию Вконтакте, по максимуму незаметным: серые буквы на сером фоне – такое сложно заметить.
Те же, кто добровольно вступил в «ряды тестировщиков» нового интерфейса (кликнув по злосчастной кнопке «Присоединиться к тестированию»), могут и не обнаружить ссылки на возврат к старой версии.
И как отключить новый дизайн Вконтакте в таком случае?
Обратите внимание на адресную строку браузера:
Внимание на адресную строку! Как видите, перед vk.com добавлено “new ”. Т.е. фактически, это другая страница пользовательского профиля. Чтобы вернуть привычный vk.com/id_страницы, а вместе с ним вернуть и старую версию Вконтакте просто «правим» адрес: нужно стереть “new. ”. Ну и, разумеется, нажать Enter (или клавишу подтверждения ввода на сенсорном устройстве).
Выйдет такой результат:
Убрали из адреса «new.», получили то, что нужно! Знакомо? Наверное, до боли 🙂 . Да-да, это старый-добрый интерфейс vk.com, к какому все успели привыкнуть за 10 лет его существования. Ну а теперь дело за малым: остается лишь сделать закладку данной страницы в браузере, чтобы не редактировать каждый раз адрес, и вызывать эту страницу после авторизации в соцсети.
Пока неизвестно, когда конкретно редизайн Вконтакте «накроет» всех, так что есть надежда, что старой версией vk.com удастся пользоваться еще продолжительное время.
Upd. 09.06.2016. Похоже, недолго радовались «староверы»: команда VK.com начала принудительный перевод на новый дизайн без возможности вернуться к прежней версии.
Upd. №2 — радостный (уже не такой радостный — утратил актуальность…)
Оказывается, работоспособный метод вернуть старый интерфейс Вконтакте даже тем, кому, вроде бы, не оставили вариантов, всё же есть (по крайней мере за этот метод в ВК неоднократно благодарили «подсказавшего»). Однако предупреждаем сразу – всё действия Вам придется выполнять на свой страх и риск, а риск может присутствовать. Метод возврата старого дизайна vk.com связан с запусками скриптов, и Netobserver не гарантирует, что в теле скрипта отсутствует код, способный на кражу пользовательских логина и пароля.
Рассмотрим реально действующий метод, подходящий для браузера Google Chrome и его «собратьев», вроде Яндекс.Браузера (браузеры на платформе Chromium):
Итак, метод следующий: находим на Google Playmarket
Устанавливаем первый в списке плагин:
После установки активность плагина можно проверить по пиктограмме в правом верхнем углу браузера:
В открывшейся вкладке кликаем на кнопку «Установить этот скрипт»:
Далее возникнет предупреждение от Tampermonkey о том, что следует запускать только надежные скрипты (т.е. очередной раз предостерегает – Вы действуете на свой страх и риск), и отображается установленный скрипт:
На этом всё – скрипт сразу начинает свою работу. Вам осталось зайти во Вконтакте (или обновить страницу, если Вы уже там), и самостоятельно убедиться, что старый-добрый vk.com вернулся!
Причем эффект будет сохраняться и при переходе между элементами меню Вконтакте, и при повторном входе.
Это удобнее того метода, который был предложен в комментариях к данной статье (однако хочется сказать «Спасибо» и за такой вариант решения вопроса «Как вернуть старый дизайн Вконтакте»).
Для других браузеров также есть расширения-аналоги Tampermonkey:
- Для Огнелиса: ;
- для Оперы: ;
- у Сафари – .
Ну а после установки расширения для своего браузера возвращаетесь к шагу со скачиванием юзерскрипта – и далее по порядку 🙂 .
Upd. 3 — для самых упорных.
Уважаемые читатели, у вас есть 2 варианта: смириться и начать привыкать к новому дизайну (это сложно, но возможно — утверждаю на собственном опыте), или бороться до конца 🙂 . Оставшийся способ борьбы — применение пользовательских стилей . Сейчас их разрабатывается несколько, и все они пока являются весьма сырыми. Но, как говорится, на безрыбье и …
Для энтузиастов, которые не опускают руки и готов «заморочиться», мы подготовили следующие рекомендации:
- Применение пользовательского скрипта через Tampermonkey;
- Применение плагина для браузеров Stylish с подгрузкой стиля (наиболее популярный вариант).
Для тех, кто уже научился работать с Tampermonkey (смотрите описание в Upd.2 — выше по тексту), предлагается альтернативный скрипт (правда оочень сырой), возвращающий некое подобие старой версии. Применять его пока, пожалуй, смысла мало, но можно отслеживать вносимые изменения — уверен, что через некоторое время данный пользовательский стиль заработает куда лучше.
https://userstyles.org/styles/userjs/128986/%D0%A1%D1%82%D0%B0%D1%80%D1%8B%D0%B9%20%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%20%D0%92%D0%9A.user.js
Скрипт нужно будет подредактировать. Конкретно интересуют следующие строки (с 7 по 10):
// @include http://new.vk.com/*
// @include https://new.vk.com/*
// @include http://*.new.vk.com/*
// @include https://*.new.vk.com/*
Вам необходимо удалить «new.» в 7 и 8 строке, «.new» в строках 9 и 10.
Должно получиться вот так:
Плагин Stylish — наиболее распиаренный вариант возврата старого дизайна Вконтакте
В принципе, алгоритм работы Stylish аналогичен методу работы Tampermonkey, с тем лишь отличием, что Stylish в отличие от последнего работает со стилями, а не скриптами.
Внимание: Не запускайте Tampermonkey совместно со Stylish! Хотя оба плагина призваны делать, в принципе, одно и то же, не факт, что совместное их использование приведет к вдвое лучшему результату (скорее факт, что не приведет 🙂).
Так что, если Вы уже потестили первый способ и решили перейти ко второму, сначала деактивируйте плагин Tampermonkey.
Что необходимо сделать пользователю в первую очередь. Конечно же, скачать плагин, подходящий для его браузера. Ссылки ниже:
После установки расширения Вам требуется убедиться, что оно активировано. Для Chrome картина будет следующей: появится пиктограмма с буквой «S» в правом верхнем углу браузера:
Следующим шагом будет загрузка стиля с сайта разработчика: .
На открывшейся странице Вам нужно будет воспользоваться большой зеленой кнопкой — мимо нее трудно промахнуться:
Судя по скорости выпуска релизов, автор очень старается устранить все имеющиеся на данный момент недочеты. Поэтому, рекомендую Вам добавить эту страницу в закладки, чтобы спустя несколько дней (недель) скачать доработанный стиль для Вконтакте, который уже не будет настолько сырым.
А пока пусть у Вас будет всё так же, как у счастливчика, оставившего такой отзыв:
Уважаемые читатели, если у вас есть альтернативные методы решения возврата к старому дизайну Вконтакте — не стесняйтесь оставлять их в комментариях! Также ждем отзывов тех, кому помогли изложенные рекомендации.
Всем хорошего настроения!
Статья Как вернуть старый дизайн Вконтакте — отключаем новую версию была изменена: Май 4th, 2017 автором Netobserver