Новый дизайн пикабу. Обсуждение+голосовалка.
В связи со скорым отключением старого пикабу и ещё одной волной недовольства его адептов, решил собрать в одном посте самые частые причины неприятия дизайна нового. Написал только то, что сам смог более-менее обосновать, поэтому список не полный, если есть что добавить, прошу.
Понимаю, что у руководство сайта потратило уже много денег и сил на этот дизайн, занято сейчас совсем не этим, но пикабу это вроде как «сайт создаваемый пользователями и для пользователей», а судя по тому, что в комментариях постоянно натыкаюсь на критику нового дизайна, многим он не нравится. Не обязательно полностью, скорее всего не устраивает что-то одно, но критично. Большинство из того, что ниже написано, меняется от одной до двадцати строчек кода в css, затраты небольшие. Почему бы и не внести кое-какие правки, хотя бы и в виде опций. Старый зелёный добавить в темы внизу, адаптив под широкий формат чекбоксом в настройках и т.д.? Лояльность пользователей тоже валюта. Ну или на крайняк расставить все точки над "i" о причинах того или иного изменения или невозможности сделать нам хорошо.
Плюсом чего бы сразу не собрать хоть какую-то статистику о желаниях пользователей, поэтому для каждого пункта оставлю комментарий, если согласны, что косяк, ставьте плюс, если считаете, что сейчас в этом плане всё круто, ставьте минус. Если «пофиг ваще, вертите сайтом как хотите», то для вас будет отдельный коммент. Мож чегой и выгорит. Посту ставлю «без рейтинга», к каждому пункту прикладываю комментарий для обратных плюсов/минусов, не кармадрочерства ради стараюсь, а для благого дела.
Поехали.
1. Цвета. Если про них говорят, то в основном с эпитетами «вырвиглазный», «кислотный» и т.п. Хорошего почти не слышал Лично у меня стойкое ощущение, что выкрутили яркость на мониторе. Это как раз из-за зелёного цвета. Он не контрастен к белому. У голубой темы оформления та же, например, проблема. А вот тёмно-синяя и старый зелёный цвет уже смотрятся нормально.
Ядовито-зелёный текст меню ещё добавляет к этому чувству. Я понимаю, что в цветовом круге он входит в комплементарную схему, но надо ж ещё принимать внимание уместность, всё таки сайт не о лсд-трипах. Вполне лечится серым цветом и строчными буквами у неактивных пунктов, например.
2. Выскакивающая плашка сверху. Мне лично норм, главное исчезает сразу, но это одна из самых часто упоминаемых вещей среди бесящих. Понятно, что вебдваноль, прокручивающиеся меню моветон, но можно же делать меню просто узким при прокрутке, или появление по нажатию, а посередине полосы всем понятный знак «v» поставить, да просто сделать кнопку где-нибудь в углу:
3. Ширина сайта. Вот сравнение секции комментариев старого и нового дизайна:
Пикабу создавался во времена 4:3, но во времена широкоформатников зачем-то понадобилось ещё сузить контент.
4. Вертикальные отступы, 2 из 3-х юзерстилей, которые я нашёл на пикабу, исправили в первую очередь именно их. «Гигантомания» тоже часто встречаемый эпитет. Довольно странно, если задуматься, что под широкий формат сайт сузили, но вытянули по вертикали. На один экран меньше влезает > читать неудобней, ваш кэп.
5. Цвет ссылок. В интернете не за одно десятилетие (а для огромного числа людей это вся сознательная жизнь) сложилась связь «синий текст = ссылка». И тут один сайт делает их зелёными. Это примерно как если бы на одной улице в городе у светофоров красный поставили вниз, а зелёный – наверх, или цвет знаков ограничения скорости сменили на жёлтый. Или в каком-нибудь приложении на телефоне сделали кнопки [назад>] и [<впёрёд]. Хоть это непривычно, приноровиться можно, но вопрос «нахрен они это сделали?» останется. Это же относится ко всем элементам непосредственно внутри блоков текста, тоже их желательно черными или синими делать (это я на кнопки «ответить» в комментах намекаю).
Желание прям всё-всё сделать в один стиль понятно, но не в ущерб же удобству людей? Ниже будет ещё аргумент в пользу синего цвета.
6. Визуальный мусор. За создателями нового дизайна заметно стремление сделать сайт проще, лаконичнее и просторнее. Они убрали градиенты, иконки в меню пользователя и т.д. Но добавили зачем-то лишних элементов дизайна. Вот, например, секция комментариев:
Куча моментов, которые создают рябь и мешают главному – чтению.
Если почистить:
По пунктам о лишнем.
- К чему это меню справа? Там не настолько часто используемые ссылки, чтоб они постоянно на виду были. Пусть бы проматывалось себе с основной колонкой. Если уж и нужны они постоянно на экране, то разместите их внизу полосой на сером фоне, лучше даже выдвигаемой по клику. Это ж типично футерные ссылки, нехай и будут в подвале.
- Почему кнопка загрузки комментариев должна быть именно по центру? Когда она серая, то ещё, наверное, терпимо, но когда появляется новый коммент, эта зелёная блямба невероятно мозолит глаза. Почему б её не разместить наверху, там на неё очень легко не обращать внимание.
И делается это всего одним правилом:
.comments-navigator__inner {top: 10px;}
- Зелёные кнопки «ответить» и кнопки свёрнутых веток. Как я уже говорил, люди с младых ногтей привыкли к синим ссылкам. Настолько, что вкрапления синего в тексте практически не выделяются и чтению не мешают. К другим же цветам такой привычки нет, ещё один минус к удобству.
-Кнопка переключения стилей тоже редко нужна, можно её и убрать. Поставить, например, сюда:
Это всё реально помогает. Когда я выкатил свой стиль, меня попросили сделать цвет ников побледнее, а то мешают. Посмотрите сейчас на комментарии, ники вообще не выделяются.
7. Круглые аватарки. Они сносно работают в местах, где в основном изображены лица – контакт, скайп и т.д. Здесь же у многих абстрактные картинки, многие из них изначально не заточены под круг. Изображения-то до сих пор прямоугольные, чего б ни дать людям использовать их полностью?
Ну и по мелочи: заголовок просмотренного поста можно и посветлее различие иногда видно только в момент перехода; стандартные аватарки больше мешают, чем помогают, просто пустое место чище выглядит; с белым фоном без рамки комментарии ещё приятней читать; чего бы у текста в посте выравнивание по ширине не сделать и т.п.
Вот для сравнения с большинством описанных изменений + парой других, секцию комментов выше выкладывал (стрелками <- -> можно листать картинки, если вы на новом дизайне):
Поднимите, пожалуйста, в топ, писал я тег моё, снимал на принтскрин, за ошибки не пинайте. Вроде всё кастанул.
@admin, @BarsikFAQ, @moderator, @Uspeli, кого тут правильно звать, чтобы за дизайн пообщаться?
@darkrave, @NeverLoved, есть, чего добавить?
Старая/новая версия пикабу
Пользовался Пикабу со старым дизайном долгое время. Затем руководство сайта решило обновить сайт. Видимо, в новой версии резко возросло выполнение кода на машине пользователя (я полный ламер, могу быть неправ). У меня на моем старом компе пользоваться сайтом стало невозможно, все жутко лагало (другие сайты норм).
Потом, месяц назад узнал, что Пикабу оставили старую версию по адресу old.pikabu. Я смог снова пользоваться сайтом.
А тут выдают сообщение, что скоро ее совсем уберут.
Это печально.
Как теперь пользоваться старым дизайном с помощью расширения redirector
Инструкция, как перенаправлять url из новой версии пикабу в старую.
1. Ставим
https://addons.mozilla.org/en-US/firefox/addon/redirector/
http://einaregilsson.com/redirector/
2. Идём в настройки: chrome://redirector/content/redirector.html
3. Создаём правило для комментов
Include Pattern: https://pikabu.ru/*?cid=%2A
Redirect To: https://pikabu.ru/$1#comment_$2
Тип: Wildcard
4. Создаём правило для остального сайта:
Include Pattern: https://pikabu.ru/*
Exclude Pattern: https://pikabu.ru/*?cid=%2A
Redirect To: https://pikabu.ru/$1
Тип: Wildcard
5. Пробуем. Спрашиваем. Критикуем.
Pikabu из Германии
Для проверки развернул чистую ВМ на вин7, выделил ей белый IP, отключил всё что только возможно - не работает, скрины догадался сделать только с сервака который за виртуальным роутером, но он точно не блочит. Куды копать?
Возвращем олдскульную навигацию на пикабу
В новой версии пикабу меня опечалило отсутствие навигации между постами с помощью выведенных стрелок в меню. И я написал скрипт, который возвращает те самые стрелочки, которых мне так очень не хватало, может быть я не один такой и скрипт будет полезен.
Для установки нужен плагин tampermonkey и один из следующих браузеров: Chrome, Microsoft Edge, Safari, Opera Next, и Firefox (как заявляют сами создатели этого плагина). При разработке все тестил на chrome последней версии. Если найдутся баги, пишите в комментарии или оставьте свой фидбек на странице к плагину.
После установки tampermonkey достаточно нажать "установить этот скрипт" и все заработает.















