Design slider: 110 Best Slider Design ideas

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

Необходимо ли точное значение?

Разрешение выбора очень конкретного значения часто не является необходимым или очень полезным для пользователя.

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

Чем шире или плотнее диапазон, выбираемый с помощью ползунка, тем сложнее выбрать точное значение . Приложение Delectable предлагает пользователям оценить вино по шкале от 6 до 10 с точностью до десятых долей. Мало того, что аномальная шкала сбивает с толку, так еще и выбор точного значения (например, 9,5 против 9,3) — настоящий моторный подвиг. Возможно, можно возразить, что пользователь не будет возражать против оценки вина на 9,3 вместо 9,5, поскольку значения находятся на одном уровне. Но тогда зачем возиться с десятыми долями оценки, а не использовать вместо этого более простую 5-балльную шкалу?

Подумайте о большом пальце

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

Чтобы оставаться видимыми во время использования, любые метки, описывающие ползунок или его текущее выбранное значение, должны отображаться рядом или над обоими задействованными большими пальцами: большим пальцем пользователя и большим пальцем ползунка (также известным как ручка или подъемник) .

Заключение

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

• Поделиться: 

Дизайн слайдера Шаблоны пользовательского интерфейса и примеры

Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство на нашем веб-сайте. Для получения дополнительной информации нажмите здесь. Понятно

Слайдеры могут быть интересным способом облегчить когнитивную нагрузку на странице. Но что делает слайдер хорошим? Узнайте в этом посте!

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

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

Но почему они так популярны? Конечно, это нечто большее, чем простой слайдер, который пользователи могут перетаскивать пальцем? В этом посте мы рассмотрим, как и когда использовать дизайн слайдера пользовательского интерфейса в вашем продукте для наилучшего взаимодействия с пользователем, с некоторыми реальными примерами. Мы также добавили несколько бесплатных наборов с дизайном слайдеров пользовательского интерфейса, которые вы можете использовать в своем инструменте прототипирования.

• Что такое ползунок в дизайне пользовательского интерфейса?
• Когда использовать слайдеры в пользовательском интерфейсе
• Рекомендации по дизайну слайдеров пользовательского интерфейса с примерами
• Дизайн мобильных слайдеров и веб-сайтов
• Наборы пользовательского интерфейса для дизайна слайдеров

Что такое слайдер в дизайне пользовательского интерфейса?

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

Ползунок пользовательского интерфейса помогает пользователям выбирать диапазон значений или настраивать такие параметры, как яркость или громкость, среди прочего. Они черпают вдохновение из типичного элемента управления воспроизведением видео, который можно увидеть на Youtube, Vimeo или Netflix, хотя они бывают разных стилей.

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

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

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

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

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

Когда использовать ползунки в пользовательском интерфейсе

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

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

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

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

Вот когда вам может понадобиться дизайн слайдера пользовательского интерфейса:

• При представлении множества вариантов
• Чтобы пользователи могли быстро изучить/ограничить множество параметров
• Когда значения не должны быть точными
• Для объяснения опций
• Для увеличения или уменьшения масштаба
• Для регулятора громкости
• Для регулировки яркости, контрастности и насыщенности/прозрачности
• Для поворота 3D-объекта
• При обходе набор опций

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

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

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

Рекомендации по дизайну ползунка пользовательского интерфейса с примерами

1. Предоставьте пользователю как можно больше деталей

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

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

2. Включите стрелки направления

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

Источник изображения: Dribbble

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

3. Тестируйте слайдеры на экранах разного размера

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

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

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

Однако, если конструкция вашего слайдера проста, например дискретный слайдер, то мы не можем не подчеркнуть важность его тестирования.

4. Используйте двухточечные ползунки для выбора диапазонов значений

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

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

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

5. Четко представляйте информацию

Blue Nile — известный интернет-магазин бриллиантов. Бренд гордится тем, что помогает клиентам по всему миру выбрать правильный камень и создать свои собственные идеальные украшения.

Нам нравится, что компания Blue Nile создала систему фильтрации с двухточечными ползунками, позволяющую пользователям быть чрезвычайно избирательными в результатах поиска, выбирая из диапазона цены, карата, огранки, цвета и т. д. Это также отличный пример использования альтернативного к типичному ручному управлению.

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

6. Используйте одноточечные ползунки для отображения количества

SkyScanner использует двухточечные ползунки пользовательского интерфейса, чтобы помочь пользователям сузить допустимое время отправления и прибытия отображаемых вариантов. Вдобавок ко всему, мы также обнаруживаем, что есть одноточечный ползунок, который определяет количество приемлемого времени, затрачиваемого на остановку. Еще один отличный пример использования слайдера для фильтрации результатов поиска!

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

7. Визуализация размеров продукта

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

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

8. Включите элементы управления «плюс» и «минус»

Lloyd’s — еще один банк, который умело использует ползунки, чтобы помочь пользователям визуализировать сложный вопрос.

Кредиты. Мы все знаем и боимся их, и многих из нас пугает сама идея кредита. Lloyd’s понимал, что ползунки могут помочь пользователям не только изучить границы и последствия кредита, но и визуализировать, что повлечет за собой такой кредит.

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

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

9. По возможности используйте отдельные ползунки

Дизайн пользовательского интерфейса Spotify заслужил как похвалу, так и критику, но нельзя отрицать, что их UX-дизайн раздвигает границы.

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

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

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

10. Разрешить пользователям вручную изменять значения

В New York Times есть калькулятор купли-продажи, который является одним из самых креативных и инновационных, которые мы видели на сегодняшний день, если быть честными.

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

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

11. Используйте много набивки для ручки

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

Источник изображения

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

12. Убедитесь, что гусеница заполнена

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

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

13. Добавьте микровзаимодействия, если возможно

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

Источник изображения: Dribbble

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

Однако дискретный слайдер, о котором мы говорили выше, дает немного больше свободы в этом отношении. Приведенный выше пример — это простой, но впечатляющий способ оживить слайдер, и в нем достаточно подробностей.

14. Выберите между вертикальным или горизонтальным

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

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

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

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

15. Добавление кнопок влево/вправо в трекер 360

Вращение трехмерного объекта на полные 360° в пространстве — это еще одно из множества практических применений, которые мы можем использовать для управления ползунком пользовательского интерфейса. В завтрашнем примере пользователь может вращать Peugeot слева направо с помощью ползунка.

Что делает этот ползунок особенно удобным для пользователя, так это символы направления «<>» на ручке, в дополнение к кнопкам «L» и «R» с обеих сторон. Последний помогает добавить контекст, но также служит способом ручной настройки ползунка.

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

Дизайн мобильных и веб-слайдеров

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

Здесь нужно учитывать две вещи: размер пальца пользователя и его влияние на взаимодействие с пользователем. В конечном счете, конструкции ползунков UII, которые управляются пальцем, должны оставлять достаточно места для свободного перемещения рукоятки ползунка.

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

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

Наборы пользовательского интерфейса для дизайна слайдера

Набор пользовательского интерфейса для веб- или мобильного каркасного моделирования

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

Комплект пользовательского интерфейса для веб- и мобильного каркасного моделирования содержит ползунки с предварительно настроенным взаимодействием, которое может сэкономить время и проложить путь к более детальному дизайну.

Начните создавать интерактивные прототипы уже сегодня! Неограниченное количество проектов.

Комплект пользовательского интерфейса для iOS

Комплект пользовательского интерфейса Justinmind для iOS помогает разработчикам создавать прототипы практически любого типа приложений для iOS. В комплекте есть все необходимое для создания приложения, отражающего классический стиль Apple, но при этом дающего достаточно возможностей для создания чего-то уникального. Комплект пользовательского интерфейса включает в себя 3 различных типа ползунков: ползунок размера текста, ползунок громкости и один классический простой ползунок. Все они включают базовое взаимодействие для быстрого запуска процесса проектирования.

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

Наконец, набор пользовательского интерфейса для материального дизайна Justinmind действует аналогично набору пользовательского интерфейса для iOS. Он охватывает все классические аспекты приложений для Android и предлагает ценный ресурс для любой команды дизайнеров.