Прозрачные интерфейсы

Как я выбирал прозрачность элементов интерфейса на примере видео плеера

Саша Тихонов
Дизайн-кабак

--

Пару лет назад Rutube решил поменяться. Новый сайт, новый подход. Соответственно и новый плеер. Как раз интерфейсом этого плеера я и занимался.

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

К тому же полупрозрачная плашка должна быть единой, чтобы уменьшить количество элементов интерфейса на экране. Например, ребята из Vimeo элементы управления раскидали на разделенные плашки, что не делает восприятие картинки проще.

Видео плеер Vimeo

Еще следует сделать эту плашку прилепленной к краям картинки (без отступов от краев), тогда это еще упростит восприятие.

Теперь, наконец-то, о прозрачности

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

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

Подборка изображения для проверки прозрачности

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

Пример прозрачности плашек

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

Подробнее о разработке дизайна плеера

--

--

Саша Тихонов
Дизайн-кабак

Воспитываю человека, руковожу компанией, играю в видео игры, учу немецкий и иногда путешествую · sashatikhonov.com