UI-паттерн — делаем меню компактным

Статья описывает UI-паттерн компактного отображения множества кнопок действий.

Ниже приведено описание, досточно строгое чтобы было понятно и человеку и AI. Сначала даются понятия, затем общее описание, и есть видео-демо. Название s800s ничего не означает, но оно должно быть — пусть будет таким 🙂

Видео-демо:

разворачиваемая панель с кнопками ~ s800s

понятия

• COMPONENT: текущий компонент в целом

• TIMER: таймер обратного отсчёта длиной 20 секунд; сбрасывается каждый раз когда пользователь взаимодействует (нажатие, прокрутка) с COMPONENT и при каждой инициализации состояния STATE_2 и STATE_3; по истечении отсчёта COMPONENT автоматически переходит в состояние STATE_1; таймер запускается только в состояниях STATE_2 и STATE_3

• STATE_1: начальное состояние; в этом состоянии отображается только BTN_INI и L_AREA

• STATE_2:

  • отображается BTN_CLOSE на месте где до этого отображалась BTN_INI

  • отображается BTN_Q

  • отображается IN_AREA с кнопками BTN_IN_COMPACT внутри

• STATE_3: то же что STATE_2 только вместо BTN_IN_COMPACT отображаются BTN_IN_EXTRA

• BTN_INI: кнопка-иконка; при нажатии выполняется переход в STATE_2

• L_AREA: область для отображения BTN_IN_COMPACT последней нажатой BTN_IN; в виде BTN_IN_COMPACT; пока ещё нажатий не было это должна быть первая BTN_IN из списка этих BTN_IN

• BTN_CLOSE: кнопка-иконка; иконка в виде крестика; при нажатии выполняется переход в STATE_1

• BTN_IN: кнопка действия, отображающаяся в IN_AREA; при нажатии на BTN_IN выполняется переход в STATE_1

  • BTN_IN_COMPACT: кнопка отображается как кнопка-иконка

  • BTN_IN_EXTRA: кнопка отображается как кнопка-иконка плюс справа от неё отображается BTN_TEXT

• BTN_TEXT: поясняющий кнопку текст

• IN_AREA: скроллируемая по горизонтали область; она занимает всё доступное пространство по ширине (речь о пространстве за вычетом пространства под кнопками BTN_CLOSE и BTN_Q); если слева или справа есть контент который не виден, так как ушёл за видимую область, то должна отображаться стрелочка P_ARROW (просто индикатор), которая дает понять, что есть еще контент в скрытой области

• P_ARROW: стрелочка-индикатор переполнения видимой области IN_AREA

• BTN_Q: кнопка-иконка с иконкой в виде знака вопроса; при нажатии выполняется переход в STATE_3; при повторном нажатии выполняется переход в STATE_2

описание

• способ компактного отображения большого количества кнопок действия

• изначально это просто кнопка, по нажатию на которую отображаются дополнительные кнопки

• есть специальная кнопка (BTN_Q) чтобы не догадываться по иконке кнопки что она значит, то есть при нажатии на BTN_Q рядом с кнопками появляется поясняющий текст

• компонент автоматически (через время TIMER) либо вручную (по кнопке BTN_CLOSE) возвращается в компактный вид

• есть область под отображение последней использовавшейся кнопки (L_AREA), зачастую это удобно

• схематичный пример, вариант при изначальном расположении BTN_INI справа на экране

// STATE_1[пустое пространство] [L_AREA] [BTN_INI]// STATE_2[IN_AREA] [BTN_Q] [BTN_CLOSE]

заключение

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