Комментарии к старым наработкам по созданию сайта
Представленные макеты не являются эталоном с точки зрения дизайна и даже размещения информации, они приведены для того, чтобы сфокусировать внимание на аспектах, которые в них были удачно проработаны с логической точки зрения. Текущая страница сформирована без углубленного анализа предлагаемых в "Фигме" макетов.
Главная страница
Ссылка: https://stankin.bs18.ru/index.php.
Карусель с баннерами и редактируемым меню
Меню, заголовок и ссылки которого легко меняются контент-менеджером в зависимости от ситуации:
Необходимо учесть, что одновременно в вузе проходят несколько мероприятий, для которых размещаются баннеры на главной странице. Как обсуждали на встрече, необходимо подумать, нет ли возможности не только сделать "точки" навигации между слайдами (как на скриншоте выше), но также, чтобы можно было сразу увидеть названия мероприятий, которые представлены в карусели, с возможностью быстрого перехода на нужный слайд. При этом, при переходе на нужный слайд слайдшоу должно останавливаться, чтобы пользователь имел возможность рассмотреть слайд (можно реализовать в виде кнопки "Play"/"Pause").
Хотя на встрече 23 ноя 2023 предлагалось отказаться от традиционной карусели с баннерами, все же необходимо учитывать, что время от времени нам присылают баннеры из внешних организаций (например, из Министерства). Эти баннеры имеют размеры, подходящие под размещение именно в карусели на видном месте сайта.
Также имеется соображение, что вариант с баннером привычен как для сотрудников, так и для пользователей, и он показал свою эффективность для привлечения посетителей в нужные разделы сайта.
Два разреза для навигации по сайту
Первый разрез - кому адресована информация, второй разрез - разделы сайта (отражают базовые разделы сайта).
Панель действий с редактируемыми кнопками
Похоже по смыслу на меню в карусели, но логически отличается тем, что меню ссылается на контент, а в панели содержатся действия (заполнение формы, поиск, вход в систему и т.д. - см. скриншот).
Постоянные элементы панели действий:
- переключение языка
- спецверсия
- поиск
- вход
Настраиваемые кнопки (преднастроенные при сдаче сайта):
- Задать вопрос приемной комиссии
- Обращения граждан
На приведенном скриншоте "Приоритет2030" фигурирует в виде изображения. Необходимо подумать относительно реализации: будет ли это отдельная область под мини-баннеры или будет возможность прикреплять изображение в область кнопок.
Информационные блоки на главной
Перечень блоков страницы согласовывался в чате сотрудников. Для раздела "Полезное" не было принято решение относительно состава отображаемых сведений, необходимо обсудить с руководством вуза.
Кнопка "Наверх"
Должна присутствовать на всех страницах.
Карточки новостей
Должны включать счетчик просмотров.
Главное меню сайта
По горизонтали и вертикали дублируются два варианта навигации из верхнего меню (о двух вариантах навигации см. раздел выше). Дублируются кнопки действий из верхней панели сайта.
Страница новостей, мероприятий и объявлений
Ссылка: https://stankin.bs18.ru/news.php.
Новости, анонсы и объявления обладают сходным набором характеристик, поэтому было принято решение объединить их на одной странице. Вот как это выглядело в согласованном варианте макета (клик по заголовкам "НОВОСТИ", "МЕРОПРИЯТИЯ", "ОБЪЯВЛЕНИЯ" отображает карточки соответствующего типа):
Страница новостей, анонсов и мероприятий представляет собой урезанную версию страницы поиска. Хотя была мысль объединить эти страницы, все же требуется, чтобы имелась специальная страница под новости, анонсы и объявления, не отягощенная лишними фильтрами и элементами управления.
Раскрытый фильтр по тематике
Тематика фактически представлена группой заранее настроенных тегов.
Раскрытый фильтр по подразделениям
Подразделения берутся из структуры университета.
Раскрытый фильтр по датам
Для разных типов материалов дата имеет свой смысл:
- для новости это дата публикации (не системная дата создания элемента инфоблока, а из специального поля "Дата публикации");
- для мероприятия это дата начала мероприятия;
- для объявления это системная дата публикации элемента инфоблока.
Активные фильтры
В свернутом состоянии фильтров должно отображаться название фильтра и сводная информация о примененных фильтрах. Необходимо реализовать аналогично активным фильтрам раздела "Поиск по сайту".
Новость
Ссылка на страницу: https://stankin.bs18.ru/news-single.php.
Шапка
Должны отображаться: путь до страницы, заголовок, количество просмотров, дата.
Согласованный вариант:
Блок "Читайте также"
Данный блок должен присутствовать во всех видах материалов - мероприятиях, объявлениях и обычных страницах. Принцип группировки материалов - по тегам (тематикам).
В согласованном варианте блок размещен в нижней части страницы и включает материалы с теми же тегами. В блоке имеется фильтр для выбора отображаемых материалов (серые и синие кнопки на скриншоте), карточки организованы в виде карусели, одновременно отображается несколько карточек, в верхней части карточки подписан тип материала.
Список тегов
При клике на тег должна открываться страница расширенного поиска с соответствующим предустановленным тегом в поле "Тематика". Список тегов можно увидеть над блоком "Читайте также" в предыдущем разделе.
Поиск по сайту
Необходимо качественно проработать поиск по сайту. Согласована отдельная страница с результатами поиска, поиск производится посредством:
- текстового поиска по подстроке,
- фильтрации:
- по типу материала (мероприятия, объявления, новости, страницы и пр.),
- по тематике (теги),
- по подразделениям (структура),
- по дате.
На что обратить внимание: в результатах поиска представлены все типы материалов, они подписаны в верхней части карточки, подсвечиваются в панели фильтров красными буквами и могут изменяться с помощью фильтра по типу материала.
Согласованный вариант страницы поиска:
Активные фильтры
В свернутом состоянии фильтров должно отображаться название фильтра и сводная информация о примененных фильтрах:
Пример компонента, в котором качественно реализована возможность отображать метку поля и фильтры: https://quasar.dev/vue-components/select#the-display-value:
Кнопка сброса фильтра
Должна присутствовать единая кнопка сброса всех фильтров, как показано на скриншоте выше.
Переход из строки поиска
При текста в строке поиска, расположенной в верхней панели сайта, происходит переход к странице поиска, при этом введенная строка автоматически отображается в строке поиска и пользователю отображаются отфильтрованные материалы в соответствии с этой строкой поиска. Как указано в ТЗ, поиск должен производиться по частичному вхождению подстроки.
Страница контента
Ссылка на страницу: https://stankin.bs18.ru/text.php.
В текущем разделе приведен скриншот согласованной страницы с целью продемонстрировать элементы, которые должны быть редактируемы из стандартного WYSIWYG-редактора. По вопросу элементов на странице см. также блок "Читайте также", счетчик просмотров, список тегов в разделе новостей.
Пример согласованного набора блоков для использования в обычных страницах сайта:
Сущности из структуры университета
Необходимо проработать страницы:
- Департаментов, управлений, отделов, включая возможности отображения и скрытия на сайте в соответствии с ТЗ. Институты и кафедры являются частным случаем организационных единиц структуры университета.
- Основная информация
- Список сотрудников
- Документы
- Новости
- Мероприятия
- Объявления
- Карточки сотрудников.
Мобильное меню
Удачный вариант реализации мобильного меню можно увидеть на текущем сайте приемной комиссии (отображается только на мобильных устройствах). Нюансы:
- Интерактивная строка поиска по всем пунктам меню
- При раскрытии меню должно отображаться на активном разделе
Памятка по важным моментам
О чем не забыть:
- Дублирующее боковое меню раздела (обсуждалось на встрече 23 ноя 2023).
- Редактирование спецразделов и микроразметки в соответствии с требованиями Минобра (указывалось в ТЗ).
- Разное из основного ТЗ, о чем на текущей странице не было упомянуто.
Проработка следующим этапом
Список визуальных блоков (по подобию с лендингами): https://stankin.bs18.ru/blocks.php (по ссылке не полный перечень блоков).
Калькулятор ЕГЭ - урезанная версия списка направлений подготовки: https://stankin.bs18.ru/calc.php (может потребоваться согласование с ответственным секретарем приемной комиссии).
Списки поступающих: https://stankin.bs18.ru/lists.php. Обсуждался вариант отображения списка направлений подготовки с фильтрацией наподобие страницы поиска по сайту.
Необходимо учесть новое требование по размещению документов: Размещение нормативных документов, подписанных прикрепленной или открепленной подписью. Необходимо реализовать в виде стандартизированного компонента в форме таблицы, в которой будут перечисляться прикрепленные к данной странице документы. Не путать с документами, прикрепляемыми к подразделениям структуры университета.
Поля таблицы:
- Порядковый номер документа
- Наименование документа в виде ссылки на файл
- Ссылка на подпись (заполняется в случае, если подпись открепленная)