Здравствуйте, уважаемые читатели.
Это третья часть статьи в рамках серии «Интерфейс видеоплеера», в которой я буду описывать процесс создания дизайна на основе уже готового прототипа.
Как вы помните, в прошлой статье «Интерфейс видеоплеера: Прототип» я создавал грубый набросок дизайна будущего проигрывателя и продумывал его механику на основе плюсов и минусов уже существующих плееров от YouTube, Vimeo и RuTube.
Именно на основе данных полученных из предыдущих статей я и буду вести работу над дизайном.
Поехали.
Для начала необходимо решить несколько ключевых вопросов, на которые и будет опираться весь процесс создания дизайна.
Цветовая гамма
Сам проигрыватель не должен отвлекать от просмотра видео, поэтому стоит сразу отказаться от яркого дизайна.
Поскольку плеер должен смотреться одинаково хорошо как на основном сайте сервиса, так и на других сайтах, на которых будет проигрываться видео, то хотелось бы придерживаться нейтральных цветовых схем — оттенки черного или оттенки белого.
Я думаю, есть смысл попробовать дизайн в этих двух цветовых вариантах и выбрать лучший. Или же ничего не выбирать и оставить оба варианта на выбор пользователя.
Элементы управления
Второй вопрос, который необходимо решить: как именно будут показываться управляющие элементы видео. То, что при наведении — это точно. Однако как: просто поверх ролика или же уменьшать размер видео в пользу элементов управления?
Я решил применить первый вариант, поскольку он лишен недостатков второго — размер видео не уменьшается, и перед пользователем не маячит лишняя динамика.
Поскольку полосы с функциями будут показываться поверх видео, необходимо делать их небольшими, но не слишком. Я решил, что 40 пикселей для верхней полосы и 50 для нижней — вполне достаточно. Для сравнения — это больше, чем в YouTube и RuTube, но меньше Vimeo.
Поскольку минимальная высота видео составляет 360 пикселей, то 90 на время отобранных под функции пикселей не сильно отвлекут пользователя от просмотра.
Внешность
Основные элементы управления стоит рисовать слегка объемными, имитируя кнопки, для того, чтобы пользователь интуитивно знал, что на них можно (и нужно) нажимать.
При наведении стоит эти самые элементы подсвечивать (изменять основной цвет, возможно эффекты). Делается это для того, чтобы интерфейс показывал реакцию на действия пользователя. При этом стоит избегать аляповатости, чтобы не отвлекать пользователя, и по эстетическим причинам.
Для иконок стоит сделать несколько интуитивных образов, к которым пользователи уже привыкли:
- Проигрывание: треугольник, направленный в правую сторону.
- Пауза: две вертикальные линии.
- Остановка загрузки: квадрат.
- Заглушить и вернуть звук: обычный и зачеркнутый динамик.
- Уровень громкости: звуковые волны рядом с динамиком.
- Полноэкранный режим: квадрат с направленными в разные стороны стрелками.
- HD: закругленный прямоугольник с надписью HD полужирным курсивом.
- Код для установки на сайт: .
- Получение прямой ссылки: звенья цепи, устоявшаяся ассоциация со ссылкой.
Зная все эти данные, потратив от одного до нескольких часов (я потратил 3) мы получаем дизайн полностью отвечающий моментам перечисленным выше.
Как вы понимаете, понятие красоты весьма субъективно, поэтому всегда есть вероятность, что дизайн не понравится определенному проценту людей. Даже если дизайн выполнен профессионально и качественно — этого не избежать.
Лично мне получившийся результат по душе. А вам?
PS: Следующей статьей в рамках серии станет «Интерфейс видеоплеера: Работа над ошибками». Её выход планируется в четверг, 24-го Июня.
PPS: ошибки обязательно будут: некоторые я допустил намеренно, но будут и моменты, которые я упустил. Поэтому очень важна обратная связь от вас. Буду благодарен за конкретные комментарии.