Правильные барабаны для выбора времени

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

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

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

    Внешний вид


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



    Чем правее на рисунке слой, тем выше он расположен.

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

    Цифровой ряд тоже заслуживает отдельного рассмотрения, так как он хитрый:



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

    Механика


    Чтобы барабаны было приятно крутить пальцами, они должны соблюдать законы физики. Поэтому если барабан подвинуть пальцем и отпустить — он должен остаться на месте (плавно отпружинив к ближайшей цифре). Если же барабан разогнать и отпустить — он продолжит крутиться по инерции, постепенно замедляясь из-за трения в оси.

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

    Кроме того, я предлагаю сделать «более сильные пружинки» на рисках кратных 5 минутам. Чтобы при прокрутке барабана на большие расстояния, он останавливался на них. Догда в большинстве случаев будет легче подгадать с какой силой его нужно толкнуть для выбора нужного времени. Если же нужно будет установить время с точностью до минуты — барабан легко подкрутить пальцем до нужного значения.

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

    Активная область


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


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

    Цикличность


    Я считаю, что барабаны нужно делать зацикленными. Т. е. чтобы, например, после 59-й минуты опять шла 0-я. Так будет легче выбирать нужное время и не придётся гонять барабан из стороны в сторону, когда, например, нужно из положения 55 минут, выбрать положение 5 минут.

    При этом важно чтобы если барабан крутится по инерции, то он останавливался в крайних положениях. Это на тот случай, если пользователь одним движением захочет перейти от 35 минут к 00 минут (значения 0, 15, 30 и 45 минут будут использоваться чаще остальных).

    Заключение


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

    UPD: Пока писал статью, забыл рассказать ещё об одной важной вещи. Рядом с барабаном нужно поместить небольшую кнопку с изображением клавиатуры, при клике на которую можно будет ввести цифры с неё. Иногда так удобнее.

    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 21

      +12
      Цвет у вас только неудачный — «хромированность» эта как-то не клёво.
        +1
        на мой взгляд в htc sense вполне красиво и удобно
        +13
        Фон у вас ужасный.
          +3
          Как вы утомили с этими «барабанами».

          На N9 (maemo/meego) настолько идеальный выбор времени, что я не вижу смысла дальше об этом думать:
            +22
            Пардон, не получилось.

            Вот:

              +1
              Интуитивно.
                0
                Мне тоже нравиться, но, есть слепое пятно, когда палец перекрывает окошко с цифрами.
                  0
                  В любом touch-интерфейсе есть слепые пятна.
                    +1
                    Время в цифровом виде (над циферблатом) синхронизировано с тем, что вы выставляете пальцем, так что проблем не возникает
                      +1
                      Незнаком конечно с таким выбором времени, но думаю что не обязательно держать палец на окошке с временем, можно же и рядом…
                    +1
                    А am pm как задаются?
                      0
                      1 круг по часам — 12 часов
                      2 полных круга — сутки
                        0
                        Если включено 24часовое время, то шарик на 24 часа.
                        +3
                        На мой взгляд, это гениально. Гениально потому что очень просто. Как будто пришел КЭП и показал это миру.
                          0
                          люди, вот забыли, что подводить время на часах было очень удобно, сняв крышку и двигая стрелки пальцами. Дизайнер — молодец.
                          0
                            +4
                            По количеству топиков на хабре про барабаны можно подумать, что каждый здесь не менее чем по 25 раз в день устанавливает себе будильник, причем каждый раз на новое время.
                              +1
                              Смежные цифры намного полезнее делать не полупрозрачными, а искажать по высоте, поскольку мы смотрим на них под углом.
                                +1
                                Правильные пацаны не копируют фон для рефлексов и отражений, а стирают особо отражающие части мягкой стёркой. :)

                                Ещё по какой-то причине ваши валики не отбрасывают тени…
                                  +2
                                  Я промолчал в предыдущей теме, но тут не могу сдержаться. Визуально ваши «правильные» барабаны — говно.
                                    +1
                                    Еще не хватает Якубовича и облака с текстом: «Будете вращать барабан или введёте время сразу?» Вот это будет идеально.

                                    Only users with full accounts can post comments. Log in, please.