Редизайн svodd.ru

[iprst]

Все изменения в оформлении

Новый дизайн включается параметром feature=new_theme svodd.ru/?feature=new_theme #316

• На главную страницу выводятся комментарии в очерёдности их появления #311
• Записи оформлены метками «комментарий», «В–О», «сводд»
• Сортировка поисковых результатов по количеству комментариев #313
• Счётчик «пустых» вопросов на сайте #299
• Теперь Pagination использует только css, улучшение производительности
• Исправлен цвет ссылок при наведение в светлой теме, теперь всегда красный
• Исправлен цвет при наведении для pagination в светлой теме, всегда красный
• Изменен цвет иконок переключения темы, отображение в темной теме красным
• Убрать или перекрасить бордюр у карточек
• Изменить отступы и шрифты блока дополнительной информации
• Добавлена метка «ВОПРОС» #318
• Метка «комментарий» не публикуется под вопросами
• Изменить текст ссылки «посмотреть вопрос» на контекст
• Изменить блок с количеством комментариев к вопросу
• Иконка для количества комментариев
• Перенести метку из текстового блока в блок дополнительной информации
• Кнопка короткой ссылки на поддомене feed #46
• Нарисовать дизайны всех типов карточек, включая пока не существующие

[iprst]

Поиграно с пикселями #322 — слегда подвинуты отступы по высоте и изменён шрифт заголовка и подвала карточки.

Набросок варианта:

[audetv]

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

Примеры сущностей:
Комментарий ФКТ
Вопрос ФКТ
В—О ФКТ
Новость, событие, что то типа feed, но это может быть tass, ria и т.д.(?)
«Параграф» — фрагмент из книги
Дополнить…

Я так понимаю, что «ФКТ» в верхнем правом углу на эскизе, вместо ссылки ★ Источник ?

Кажется, у нас есть ограничение, что данные метки типа ФКТ, не могут быть очень длинными, т.е. это буквально одно, максимум два слова иначе при разрешения экран, отличных от десктоп, ближе к 578px, надо предусмотреть поведение такой метки, если она и остальные сущности в header в карточке не будут вмещаться в доступную ширину экрана.

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

Набросаю описание, список по сущностям блока в карточке:

1. На карточке должна быть ссылка на оригинал (комментарий, материал, новость и т.д.)

2. Номер вопроса, комментария существует только у сущностей с ФКТ и то не у всех. У параграфов, у новостей этого номера нет. Т.е. существует сценарий. когда этот номер не будет отображаться в правом верхнем углу.

3. Контекст — про контекст я описал здесь Изменен текст Посмотреть вопрос на Контекст #320 (comment)
   Коротко, это специальный блок-модуль. который воспроизводит всю часть или частично (параграфы книга) контента. Осуществляет прокрутку к фрагменту контекста. Выполняет функцию, как расширение контекста, для книги, так и копию материала, для удобства, например, если источник недоступен.

4. Дата публикации.

5. Имя пользователя, автор материала. (разделить?)
   На ФКТ удобно, что автор материала, это всегда пользователь, одно или два слова. Если сущность новость или книга, то видимо автора надо располагать в ином месте. А на месте, левый верхний угол карточки, будет только дата.

6. Метка (комментарии, вопрос, СВОДД, В-О и т.д.), Сейчас структурно находиться в теле карточки на последней строке после текста. На предлагаемом эскизе, метка располагается в нижней блоке карточки (footer).

7. Основная часть карточки (body) — текст записи.

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

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

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

• Ещё существует особая запись вида контекст(?), это обсуждение СВОДД, в карточке записи СВОДД есть ссылка на сообщение в телеграмм.

Пока так позже допишу ещё, это не все мысли.

[iprst]

Мы будем рассматривать задачу редизайна с условием, что карточка должна быть универсальной для любых сущностей?

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

[iprst]

Новость, событие, что то типа feed, но это может быть tass, ria и т.д.(?)
«Параграф» — фрагмент из книги
Дополнить…

Так точно, всё это тоже в типы карточек. Очень может быть, что в этот же список отправятся «новости геоматрицы» и «объекты геоматрицы» чтобы два раза за зайцами в лес не ходить. С минимальными изменениями, так сказать. Нужно учесть, что выдача визуально может иметь отличия, например названия ссылок (как есть ссылка на пост в телеге под комментариями сводд) или слово контекст в отдельных типах карточек может стать «развернуть» и тому подобное, главное, чтобы визуальный стиль позволял вставлять или убирать сущности в случае необходимости.

[iprst]

Сущности в карточках

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

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

Контекст — верхний правый угол

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

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

Это не только нужно, но и можно унифицировать. Вернуть все ссылки логики «контекст» в верхний правый угол карточки. Оформление текстом можно пока оставить как есть — где имеется номер записи, используем его, где номера нет, или имеет смысл его не использовать, пишем контекст или подобный термин (развернуть, посмотреть и тд), а за UI-UX-привычку будет отвечать расположение кнопки в карточке.

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

Источник — нижний правый угол

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

Метки — левая сторона карточки вверху

Метками у нас сейчас оформлены фильтры как внешних источников типа «мид», так и наших внутренних типа «сводд». Пока допустим, что такие метки расположены в нижнем углу слева.

Существует функционал «поиск по автору» в комментариях и вопросах фкт. Имя автора является фильтром. Имя автора записи расположено в верхнем правом углу карточки.

Подобную логику поведения можно установить для поиска по авторам в библиотеке. Имя автора книги расположено в нижнем левом углу карточки.

В библиотеке планируется реализация фильтра по названию книги. Название книги является фильтром. Название книги расположено в нижнем левом углу карточки рядом с автором.

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

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

Подобная логика может быть рассмотрена для меток «мид» в ленте — тогда все элементы ленты могут быть оформлены не как метки, а как авторы. Например: МИД — «Поздравления по такому-то случаю».

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

Сейчас его занимают метки фкт-сводд-мид и ссылка на телеграм. Если метки мид-мо убираем в «авторы» в верхний левый угол, то вероятно туда же можно перенести и метки фкт-сводд, вероятно переоформив их дизайн. Пусть это будет «автор / уточнение / обобщение», где автор (имя или наименование источника) и уточнение (книга или название записи) будут обязательными элементами, а обобщение факультативным: там, где есть обобщающая категория поиска, показываем метку, где её нет, не показываем.

Дополнительная информация — левая сторона карточки внизу

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

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

Факультатив: оформление подсказок

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

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

[audetv]

Существует функционал «поиск по автору» в комментариях и вопросах фкт. Имя автора является фильтром. Имя автора записи расположено в верхнем правом углу карточки.

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

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

Да, это представляется ,что будет удобно, надо будет реализовать и потестировать.

Подобная логика может быть рассмотрена для меток «мид» в ленте — тогда все элементы ленты могут быть оформлены не как метки, а как авторы. Например: МИД — «Поздравления по такому-то случаю».

Может быть, но у публикаций МИД почти всегда невероятно длинные заголовки, да большинство записей МИД, КРЕМЛЬ, МИНОБОРОНЫ имеют длинный заголовок. Т.е. наверху должно быть что-то иное — не заголовок, или обрезанный заголовок… но кажется это странно. И официальные наименования ведомств длинные: «Департамент информации и массовых коммуникаций Министерства обороны Российской Федерации». Возможно заголовки и наименования надо в тексте карточки размещать. А вот сокращения: ФКТ, ВПСССР, КОБ, МИД, МО, КРЕМЛЬ и др. ТАСС, РИА будет очень хорошо вписываться.

Буду пополнять… следующими комментариями.

[iprst]

у публикаций МИД почти всегда невероятно длинные заголовки, да большинство записей МИД, КРЕМЛЬ, МИНОБОРОНЫ имеют длинный заголовок …Возможно заголовки и наименования надо в тексте карточки размещать.

Сейчас в разделе feed в принципе нормально выглядит как заголовок в 2-3 строчки, то есть визуально это не будет ужасным и в редизайне. Наверное существуют исключения по количеству символов или резиновости блока, но концептуальных проблем вроде не видно.

[audetv]

В feed используется шрифт Inter https://fonts.google.com/specimen/Inter?icon.set=Material+Icons&query=Inter
Это просто факт, я его поставил, потому что предлагали в разных tutorials, выглядело нормально. Рекламировали…

License
These fonts are licensed under the Open Font License.

You can use them in your products & projects – print or digital, commercial or otherwise.