Поиск:

Прокручивающиеся меню

(назад к списку)

С сайта www.oranjewoud.nl

Задача

Пользователю надо выбрать картинку из набора картинок.

Условия

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

Решение

Покажите картинку в виде прокручивающегося меню

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

Почему

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

Еще примеры

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

На сайте www.graphpaper.com меню с прокруткой используется для выбора страниц из эскизного альбома.

На сайте Walt Disney Pictures такое же меню используется для выбора трейлера из коллекции:

Используют

www.graphpaper.com; www.heystranger.com; www.oranjewoud.nl; Walt Disney Pictures;

Другие шаблоны

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

(назад к списку)

Самые популярные статьи:

• Элементы разработки веб-сайтов
• Анализ популярных решений в web-дизайне
• Шаблонные решения для web-сайтов
• 10 главных ошибок веб-дизайна 2003 года
• К черту плохие броузеры