Автор темы
Новый дизайн форума теперь стоит по умолчанию. Он жил в переключателе стилей с начала сентября, его выбирали вручную, и я смотрел, что будет ломаться. Ломалось достаточно, чтобы не спешить. Сейчас он готов быть основным: открываешь codeby.net и видишь то, что мы собирали с конца июня.
Начало работ я анонсировал в этой теме Новый дизайн форума Codeby: из доски - в платформу знаний
Если не зашло, прежний вид никто не удалял. Идёшь в настройки стиля, выбираешь старый и работаешь как раньше. Переключение мгновенное, писать в поддержку не нужно.
Дальше по делу: зачем я это затеял, что изменилось на каждой странице, и что честно ещё не готово.
Зачем менял
Старый форум работал как доска объявлений: список разделов, внутри список тем, дальше разбирайся сам. Для площадки с 52 тысячами тем и 346 тысячами сообщений этого мало. Сильный разбор трёхлетней давности найти было сложнее, чем свежий флуд на первой странице. Логика перевёрнутая: чем ценнее материал, тем глубже он утонул.
Я хотел, чтобы форум работал как инструмент. Путь у практика простой: нашёл, прочитал, сохранил, обсудил, применил. Мне интересно, сколько людей проходят этот путь целиком, а не сколько минут держится вкладка.
Плюс пять вещей, которые мешали каждый день. На телефоне первый экран уходил на шапку и баннеры, до текста поста надо было прокручивать. Согласие на cookie лежало полосой во всю ширину на каждой странице и перехватывало клики по нижнему краю. В длинной статье не было оглавления, ориентировался ты полосой прокрутки.
Ещё две: навигация раздроблена, и чтобы найти материал, надо помнить, в каком разделе он лежит. Вакансии свалены в один список без фильтров и без вилки. Ни одна из этих пяти проблем не про красоту, все пять про потерянное время.
Собрал первый экран заново
Шапка теперь одна строка: логотип, поиск, три иконки (оповещения, сообщения, закладки), профиль. Синие кнопки движка заменены на зелёные, наши. Логотип переведён в вектор, на экранах с высокой плотностью точек он больше не гранёный.
Главная навигация переехала в левую колонку. Там дерево разделов с числом тем, входы в Ленту, Разборы, Практику, Инструменты, Карьеру и закладки, переключатель темы и блок Экосистемы: HackerLab, форум, Academy. Хлебные крошки я перенёс в верх колонки с контентом, и с 9 сентября они стоят вровень с текстом на всех страницах, а не с отступом, как раньше на витринах.
На широких мониторах поменялась сетка. Если экран шире 1520 точек, левая колонка уходит к левой кромке, сайдбар к правой, а колонка чтения при этом не растягивается: строка держит читаемую длину и стоит по центру. На ноутбуке вид прежний, там ничего не поехало.
Шрифт один на весь форум: Geist для интерфейса и Geist Mono для чисел, дат и бейджей. Лежит он на нашем сервере, а не тянется со стороннего CDN, так что текст не мигает при загрузке.
Сделал витрины вместо списков
Это главное приобретение. Поверх разделов встали шесть страниц-агрегаторов, которые собирают материалы по смыслу, а не по месту хранения.
- Разборы: библиотека из 889 материалов, по 30 на страницу, сортировки и фильтры по направлению, «Разбор недели» сверху. Обложка карточки берётся из первой картинки самой статьи.
- Практика: write-ups, статьи и задачи HackerLab на одном экране, 144 write-up и 110 статей на сегодня. Мёртвые вкладки я оттуда убрал: свежайшей «новости» в одной из них было 81 день.
- Карьера: вакансии разложены по вкладкам «От сообщества», «Агрегированные» и «Архив», по 30 на страницу. Раньше на странице раздела открывались только 47 карточек, всё остальное было недостижимо. Кнопка «Откликнуться» стала живой: у собранных роботом вакансий уводит на источник, у человеческих открывает переписку с автором с готовым заголовком и ссылкой на тему, гостя проводит через Codeby ID и возвращает на ту же вакансию.
- Инструменты: каталог и вкладка «От сообщества», куда собран софт из профильных разделов.
- Обсуждения: клуб одним экраном, вместе с вкладкой «Программирование».
- Лента: конструктор по трём осям (разделы, формат, свежесть). Настройки живут в адресе страницы, поэтому свою ленту можно положить в закладки и открывать сразу собранной. Позицию прокрутки страница помнит, после клика по фильтру наверх не прыгает.
Переписал чтение
Список тем внутри раздела стал карточками: заголовок нормального веса, автор, ответы, свежесть, тонкий пунктирный разделитель вместо серого бруска. Сверху карточка раздела со статистикой: темы, сообщения, без ответа, медиана времени ответа. Закреплённые темы больше не занимают весь первый экран, они сложены в один сворачиваемый блок. Справа появилась колонка с показателями раздела, и на широком экране она стоит у кромки, а не в 200 точках от неё.
Страница разбора собрана как читалка. Бейджи типа, сложности и направления, автор с рангом, лид, обложка, оглавление, полоса прогресса чтения, три режима плотности. На блоках кода есть «Копировать». Код остался тёмным в обеих темах намеренно: светлый терминал читается хуже, это решение я менять не буду. Ниже статьи «Связанное по теме» подбирает и разборы, и инструменты, и вакансии, а не только соседние темы раздела.
Одел «Что нового» и закладки
Раздел «Что нового» я долго не трогал, а им пользуются каждый день. Теперь все девять его страниц выглядят одинаково: новые сообщения, избранное, медиа, ресурсы, сообщения в профилях, лента активности. Строки списка стали карточками, вкладки собраны в одну панель, серая подложка ушла, активная вкладка больше не подсвечивается синим из палитры движка.
Закладки перестали быть свалкой ссылок: страница закладок собрана в том же языке, что витрины, а иконка закладки стоит прямо в шапке темы. Кнопка «Создать» на этих страницах теперь буквально тот же компонент, что на главной, а не его похожая копия. Мелочь, но именно из таких мелочей собирается ощущение одного продукта, а не десяти разных сайтов под одной шапкой.
Упростил публикацию
Публикация была отдельной болью. Чтобы выложить write-up, надо было угадать раздел, тип и правила, а угадав неправильно, получить перенос темы модератором. Я хочу, чтобы человек думал про содержание, а не про нашу таксономию.
Поэтому вход в публикацию один: кнопка «Создать» и плитки по типу материала. Форма открывается на весь экран, вложения кладутся сразу, поля для оформления и превью на месте. Формы правки разбора, гайда, инструмента и вакансии сделаны по одному образцу с этой формой, так что второй раз учиться интерфейсу не нужно.
Починил мобильную версию
Здесь было хуже всего, и я нашёл это поздно. Ниже 880 точек оставалась шапка движка: логотип нулевого размера, гамбургер белым по белому, ссылки «Вход» и «Регистрация» схлопнуты в ничто. Гость на телефоне видел пустую полосу и не понимал, куда нажимать.
Теперь на телефоне видно логотип, лупу и меню, а в шторке лежит полная навигация: переключатель Ленты и Форума, все витрины, Экосистема, переключатель темы. До этого в шторке было три ссылки движка, а тему на телефоне переключить было нельзя вообще.
Довёл светлую тему
Светлую тему я сознательно отложил, потому что дизайн строился тёмным. Потом на неё ушло три недели отдельной работы, и вот что там было по-настоящему плохо. Цветные ники групп давали контраст 1,66 к 1, то есть ник почти сливался с фоном; сейчас от 5,3 до 7,9. Плашки префиксов начинались от 1,05, сейчас все выше 4,98. Цитаты, спойлеры, таблицы, вложения, полоса реакций и форма ответа переведены на общие цвета темы, а не подкрашены по месту.
Переключатель стоит в левой колонке и запоминает выбор. Если приходишь впервые и в системе у тебя светлая тема, форум откроется светлым с первого кадра, без тёмной вспышки. Твой явный выбор всегда сильнее системного.
Переделал профиль, сообщения и мелочи
Профиль получил свою шапку, свои вкладки и панель «Информация». Кнопки действий стоят одной строкой справа, начиная с «Начать переписку», с одинаковыми радиусами и одинаковыми отступами. Шесть плиток статистики реагируют на курсор, до этого они выглядели кликабельными и молчали.
Личные сообщения переписаны целиком. Двухпанельный экран, переписка листается прокруткой вместо страниц и открывается на первом непрочитанном. Ответ пишется прямо в строке, а «Новое сообщение» открывается лёгкой формой поверх страницы, без прыжка на отдельный экран с полной панелью редактора.
Согласие на cookie стало компактной карточкой в правом нижнем углу: рамка тоньше, углы круглые, «Принять» с зелёным акцентом. Нижняя полоса больше не резервирует 75 точек и не съедает клики по нижней части экрана. Заодно я прошёл по интерфейсу за отзывчивостью: наведение на ссылки и кнопки стало плавным, у нажатия появилось своё состояние, фокус с клавиатуры видно зелёной рамкой на всех элементах. Если в системе отключены анимации, форум их тоже не показывает.
Что ещё не готово
Обещать «всё идеально» смысла нет, поэтому перечисляю прямо.
В Ленте три среза (Research, Deep Read, Signal) помечены «Скоро» и пока ничего не делают. «AI-выжимка» в разборе собирается из заголовков разделов статьи, а не пишется моделью, и на ней это честно написано. Каталог инструментов пока пустой, наполняем руками.
Часть страниц аккаунта и список участников остались в старой разметке, доберусь до них следующим шагом. Витрины показывают не все темы раздела: внутри есть потолок выборки, из-за него часть материалов в агрегаторы не попадает. Это следующий крупный пункт, он же самый неприятный. Иконка лупы в шапке пока не отправляет запрос, поиск работает по Enter.
Слово «Статья» до сих пор выглядит тремя разными карточками на трёх витринах, единый словарь бейджей я не свёл. И мобильную версию я проверял браузером на разных разрешениях, а не на живых телефонах: их у сообщества в тысячи раз больше, чем у меня, поэтому про мобильную мне важнее всего услышать.
Что мне нужно
Пиши в этой теме конкретно: страница, разрешение экрана, светлая или тёмная тема, что именно мешает. Такие сообщения я разбираю в тот же день, за последнюю неделю почти все правки пришли именно так, вплоть до жирности заголовков в левой колонке. «Всё плохо, верните как было» я тоже прочитаю, но починить по такому сообщению нечего.
Первыми в очереди стоят потолок выборки на витринах и остальные страницы аккаунта. Если в комментариях всплывёт что-то более болезненное, порядок поменяю. Переключатель стилей на месте и никуда не денется: codeby.net/misc/style.
Сергей
Последнее редактирование:
