лабиринт меню

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

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

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

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

Ссылки к изучению по теме:

Оригинал статьи опубликован на моём канале в Telegram: https://t.me/gleb_sexy/28