Drupal для дизайнера - Модули расширяющие стандартный интерфейс Часть 2

18.12.2017

Введение

Для более полного понимания рекомендую прочесть предыдущую часть этой статьи - Drupal для дизайнера - Модули расширяющие стандартный интерфейс Часть 1. Минимум знаний для понимания этой статьи - базовое знание форм в HTML. 

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

Коротко о главном

Компактные формы (Модуль Compact Forms)

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

Модуль Compact Form предлагает еще одно интересное решение: подпись формы отображается внутри текстового поля, при попадании курсора внутрь формы подпись исчезает (событие Blur). 

Важным достоинством этого модуля является то, что он не портит структуру формы. Модуль использует JavaScript для переноса заголовка поля поверх самого поля. А это значит, что при отключенном JavaScript подпись отображается так, как обычно. Кроме того подпись помещена внутрь тега <label> что хорошо сказывается на индексации сайта. А также помогает читать формы людям с ограниченными возможностями. 

Обрезка изображения на стороне клиента

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

Существует целый ряд модулей, которые позволяют сделать обрезку изображений:  Image javascript crop,  EPSA Crop - Image Cropping, ImageField Focus. Функциональных отличий практически нет, но последний использует "умный" алгоритм для определения главного объекта на фотографии. 

Мне лично больше всех нравится Image javascript crop из-за более гибкой системы настроек. 

Продвинутые системные сообщения 

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

Модуль Better Messages позволяет выводить сообщения через jQuery UI - dialog или говоря простым языком через всплывающее окно. Такое системное сообщение трудно не заметить. Рекомендую. 

Как вариант можно использовать модуль Purr messages. Идея модуля та же самая, но сообщения выводятся не по центру экрана, а в стиле Apple сбоку. 

 Увеличение изображения при наведении - модуль cloud_zoom

Для фотографий предметов, которые не имеют отношения к дизайну сайта, лучше добавлять возможность развертывания фотографий. Я для этого использую модуль Colorbox (о нем я уже писал ранее). Но иногда нужно дать пользователю возможность рассмотреть какие-то мелкие детали на фотографии. В этом случае подойдет модуль Cloud Zoom.

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

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

Навигация на картах и схемах - модуль jq_maphilight

Подсветка либо любое иное выделение объектов на картах и схема очень важна для дружелюбности интерфейса. Используется модуль на основе HTML "карт" т.е. тега <map>. В двух словах это тег, который позволяет порезать одно изображение на фрагменты не в графическом редакторе, а средствами HTML. Кому интересно почитать подробнее что это за тег, гуглите: html tag map

Если Ваше изображение уже порезано, то не плодите сущностей. Используйте псевдокласс hover в css

Прокрутки - модули scroll to top, scrollTo и localscroll

Модуль Scroll to top полезен для "высоких" страниц. Если страница занимает более одно экрана на мониторе пользователя, то модуль отображает стрелку, при нажатии на которую экран прокручивается на верх страницы. Экран прокручивается медленно и красиво, средствами JavaScript, а не резко как в ссылках-якорях. 

Модули ScroolTo и LocalScroll - предназначены для плавной прокрутке к определенному элементу на странице. По сути эти два модуля улучшают функционал ссылок-якорей, они делают прокрутку страницы плавной. 

Сейчас стали модными одностраничные сайты - особый тип сайта-визитки, при которым все смысловые страницы разделена на "экраны" пользователя. Причем физически сайт состоит из одной страницы. Обычно это делается для того, чтобы сделать переход между страницами сайта - красивым.  Модули ScroolTo и LocalScroll используются в одностраничных сайтах почти всегда.

На момент написания статьи для drupal 6 используется модуль ScroolTo, а для Drupal 7 LocalScroll 

Плавающее меню и прочие плавающие блоки - модуль floating_block

Плавающие блоки используются на все тех же одностраничные сайтах. Меню либо другой блок закрепляется в одном месте страницы. И в независимости от того до какого место пользователь прокрутил экран. Блок остается на одном и том же месте. В примере меню закреплено внизу экрана:

Спасибо, что дочитали мою статью до конца! Всем добра!

Больше статей по теме