Недавно я написал о том, каким вижу будильник своей мечты для Андроида. Спасибо всем, кто предложил свою помощь с его воплощением. Если честно, я не ожидал что откликнется столько классных ребят и изначально не справился с организацией. Это моя вина что сейчас творится небольшой беспорядок. Но за эту неделю мы разберёмся с организационными вопросами и работа закипит. Ещё раз всем спасибо.
А сегодня я расскажу о то, как сделать качественный барабан выбора времени для этого приложения. Эти же принципы можно применить на любые другие барабаны-выбиралки.
Внешний вид
Для того, чтобы барабан хорошо выглядел, он должен быть многослойным и взаимодействовать с окружающим его миром. Вот его приблизительная структура:
Чем правее на рисунке слой, тем выше он расположен.
Оттенок цветового рефлекса должен зависеть от цвета окружающего фона. Грубо говоря, его можно определить сжав окружающий фон до размеров одного пикселя и посмотрев его цвет.
Цифровой ряд тоже заслуживает отдельного рассмотрения, так как он хитрый:
Каждая цифра состоит из трёх слоёв: блик, тень, и сама цифра. Слои смещены друг относительно друга на небольшую величину — это создаёт иллюзию вдавленности. Причём при движении цифры от середины барабана до его верхней части положение тени и блика плавно меняются, чтобы соответствовать освещению. Также при движении от центра цилиндра к его краям меняется прозрачность цифр.
Механика
Чтобы барабаны было приятно крутить пальцами, они должны соблюдать законы физики. Поэтому если барабан подвинуть пальцем и отпустить — он должен остаться на месте (плавно отпружинив к ближайшей цифре). Если же барабан разогнать и отпустить — он продолжит крутиться по инерции, постепенно замедляясь из-за трения в оси.
Ускорение замедления нужно подбирать экспериментально. Но одного энергичного движения пальцем должно хватить на один полный оборот.
Кроме того, я предлагаю сделать «более сильные пружинки» на рисках кратных 5 минутам. Чтобы при прокрутке барабана на большие расстояния, он останавливался на них. Догда в большинстве случаев будет легче подгадать с какой силой его нужно толкнуть для выбора нужного времени. Если же нужно будет установить время с точностью до минуты — барабан легко подкрутить пальцем до нужного значения.
Важно чтобы точка соприкосновения пальца с экраном и центральная точка барабана двигались с одной скоростью. Иначе будет очень неприятное ощущение рассинхронизации и иллюзия осязаемости барабана пропадёт.
Активная область
Барабан — достаточно крупный элемент интерфейса. Поэтому его активная область касания может соответствовать его визуальным размерам. Но можно её немного расширить вверх и вниз — так будет ещё легче попасть в барабан пальцем:
После того как палец коснулся барабана и начал его крутить, активная область элемента должна расшириться на весь экран устройства. Т. е. даже когда точка касания пальца пользователя уйдёт ниже, выше, левее или правее области барабана, последний всё равно должен продолжить крутиться. Иначе им будет очень неудобно пользоваться.
Цикличность
Я считаю, что барабаны нужно делать зацикленными. Т. е. чтобы, например, после 59-й минуты опять шла 0-я. Так будет легче выбирать нужное время и не придётся гонять барабан из стороны в сторону, когда, например, нужно из положения 55 минут, выбрать положение 5 минут.
При этом важно чтобы если барабан крутится по инерции, то он останавливался в крайних положениях. Это на тот случай, если пользователь одним движением захочет перейти от 35 минут к 00 минут (значения 0, 15, 30 и 45 минут будут использоваться чаще остальных).
Заключение
В этой статье мы рассмотрели как создать удобный барабан для выбора времени. Но если вы разрабатываете интерфейс для айОси, то лучше использовать стандартные барабаны. Если же вы хотите их доработать, то как минимум копируйте механику, чтобы ваши барабаны её повторяли. Иначе пользователю будет очень сложно к ним привыкнуть.
UPD: Пока писал статью, забыл рассказать ещё об одной важной вещи. Рядом с барабаном нужно поместить небольшую кнопку с изображением клавиатуры, при клике на которую можно будет ввести цифры с неё. Иногда так удобнее.
