Мобильная шаблон дизайна: Инвентаризация на основе дискретного Slider

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

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

Почему Ползунки

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

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

Типы Sliders

Слайдеры бывают двух типов: одноместные и двухместные.Холост ползунки лучше для ввода одного значения.Двойные ползунки отлично подходит для поиска в диапазоне значений .

Есть также два типа настроек: непрерывные и дискретные.Непрерывные корректировки для неопределенных значений в диапазоне, например, цены или температуры.Дискретная корректировки для заданных значений (например, размеров одежды).Оба одиночные ползунки и двойной ползунки можно взять любой вид настройки.Давайте посмотрим на некоторые примеры .

Zillow имеет клиенты используют две односпальные ползунки с плавной регулировкой для установки ценового диапазона .

01-zillo-app-slider-opt-500 1
Zillow приложение использует две односпальные ползунки, как с плавной регулировкой.( Просмотр большой version 2 )

Это приложение недвижимости Trulia использует два двойных ползунков с непрерывными корректировки:

02-trulia-app-slider-opt-500 3
Trulia приложение использует два двухъядерных регуляторы, с помощью непрерывных изменений.( Просмотр большой version 4 )

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

Дискретная регулировка различны.Они позволяют выбрать значения, но только в пределах заранее определенных (т.е. дискретная) с шагом.Грани, как размер обуви состоят из дискретных значений;В США и Западной Европе, обувь, как правило, увеличивается в полтора-размеров: 6, 6,5, 7 и так далее.Вы не можете купить обувь в размере 6,25, обеспечивая таким образом контроль для этого уровня точности не имело бы смысла .

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

03-dual-slider-opt-500 5
Это пример двойной слайдер с дискретными остановок перестройки.( Просмотр большой version 6 )

Экспериментальная Slider Patterns

Ползунки с гистограммы и ползунков на основе инвентаризация две большие экспериментальные образцы, которые являются вариациями на стандартный слайдер.Очень жаль, что они не являются более распространенными, поскольку они решают многие проблемы, которые ползунки могут вызвать для пользователей.Мы объяснить проблемы с регулярными ползунков в разделе «Внимание», ниже и подробно экспериментальное решение в разделе “Супер-слайдеров” (сразу после “Внимание”) .

Таким образом, на данный момент, Вы могли бы думать, “Ползунки великолепно звучат.Что недостатком “Рад, что вы спросили .

Caution

Даже самые лучшие образцы могут идти плохо.Как Харви Дента, некогда верного союзника Бэтмена и Готэм-Сити безупречно этического окружного прокурора, большинство вещей есть темная сторона.Там это скользкий путь между восторгом и ужасом, и так же, как в Two-Face персонажа, который Дент становится, ползунки могут быть полезны или ненависти.Все зависит откак они реализуются .

Вот как обойти проблемы слайдера и сохранить клиентов счастливыми .

Убедитесь, что разумные значения могут быть введены Easily

Kayak имеет непрерывный двойной слайдер для фильтрации цены на отели (смотрите скриншоты ниже).Чтобы получить отель в Лос-Анджелесе, что вы можете себе позволить на зарплату скромного мобильного UX консультант по дизайну, вы должны поставить колышки на самом верху друг с другом.Эта регулировка угодно, но точно.Для широких диапазонов, рассмотреть с помощью ползунка на основе инвентаризация, как описано в разделе “Супер-слайдеров” Coming Up .

04-kayak-app-slider-opt-500 7
Ползунок непрерывный цена не набрать разумную цену отеля в Лос-Анджелесе приложения каяка.( Просмотр большой version 8 )

Показать Range

Говоря о диапазоне, показывая фактический диапазон цен, доступных во всем семействе это отличная идея, как показано на скриншотах Kayak выше ($ 38 до $ 587), вместо произвольных чисел, например, $ 0 и макс.Ни Zillow, ни Trulia не показывают истинного максимума и минимума, связанного с их местным инвентаризации дома .

Представьте себе, насколько полезны эти ползунки бы, если бы они заявили с самого начала, что они составляли от $ 476 000 и $ 3234700.Показаны диапазон также помогает избежать мертвых зон, например, когда вы ищете дом в Сан-Франциско по цене ниже $ 476 000, которая позволила бы получить нулевой результат.Будьте в курсе о том, как фильтрация влияет кадастра;установить диапазон для общего сбора без применения фильтров лучше .

Не закрывайте Numbers

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

Выбираю слайдер с дискретной Positions

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

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

Непрерывные двойные ползунки и сделать его легко по-ограничить диапазон.Например, создавая непрерывный ползунок, который позволяет клиенту набрать цене $ 45,50 до $ 46,10 может дать нулевой результат и не будет обслуживать клиентов также.С другой стороны, ползунки с дискретными позиций (т.е. останавливается) гораздо легче настроить.Вероятность набора диапазон, который слишком мал также менее .

Супер-слайдеры Сохранить Day

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

Регулярный Slider

Ползунок можно использовать дискретные значения, расположенные в соответствии с инвентаризация.Этот тип ползуна обычно расположены в виде линейной модели, что означает, что на определенном расстоянии от оси движения на ползунка представляет равное абсолютное изменение значения.Например, на регуляторе пять положение, цена будет перейти от $ 0 до $ 100 в $ 20 шагом:

05-linear-price-slider-opt-500 9
Каждая метка на оси представляет равное абсолютное изменение стоимости слайдера линейной цен.( Просмотр большой version 10 )

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

Как пояснили в разделе “Внимание”, торговый клиентов для супергероя мысами может выбрать диапазон, для которого инвентаризация равна нулю — скажем, $ 40 до $ 60 — Не зная, что вся closetful мысов доступны в $ 62$ 65 Диапазон — буквальном смысле, На несколько долларов больше.(Извинения Клинт Иствуд и вестерны любителей во всем мире.)

Супер-Slider (с нулевым-Results Борьба гистограмма)

Это где слайдер с гистограммой (как показано ниже) полезно.Идея этой экспериментальной рисунком проста:От 50 до 100 пикселей выше слайдера с фиксированным положением является гистограмма, которая представляет кадастра в определенной части линейного ценовом диапазоне.Высокая планка представляет большого количества элементов, и пропорционально Перемычка представляет собой меньшее число элементов.Вот это .

06-linear-histogram-slider-opt-500 11
Линейный цена слайдер с гистограммой предоставляет больше информации.( Просмотр большой version Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.