В меню

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

Круговые меню хорошо работают с ускорением клавиатуры, особенно меню из четырех и восьми пунктов, с помощью клавиш курсора и цифровой клавиатуры . Цель круговых меню — обеспечить плавный и надежный стиль взаимодействия с помощью жестов для новичков и экспертов. ^{[ 1 ]} Кусочек может привести к другому круговому меню; выбор этого параметра может привести к центрированию указателя в новом меню.

меню Маркировочное ^{[ 2 ]} — это вариант этого метода, который делает меню менее чувствительным к изменению размера жестов. ^{[ 3 ]}

Круговые меню являются разновидностью контекстного меню и часто являются контекстно-зависимыми . ^{[ 4 ]} отображение различных опций в зависимости от того, на что указывал указатель при запросе меню.

История

Первое задокументированное радиальное меню приписывается системе под названием PIXIE, созданной в 1969 году. Некоторые университеты исследовали альтернативные визуальные макеты. ^{[ 5 ]}

В 1986 году Майк Галлахер и Дон Хопкинс вместе независимо друг от друга пришли к концепции контекстного меню, основанного на угле к началу координат, где точный угол и радиус можно было передать в качестве параметров команде, а щелчок мыши можно было использовать для запуска меню. элемент или подменю. ^{[ 6 ]}

Первое сравнение производительности с линейными меню было проведено в 1988 году и показало увеличение производительности на 15% за меньшее время и уменьшение ошибок выбора. ^{[ 7 ]}

В 1993 году в ролевой видеоигре Secret of Mana была представлена инновационная система радиальных меню на основе значков. ^{[ 8 ]} Его система кольцевого меню была принята в более поздних видеоиграх. ^{[ 9 ]}

Использование

Круговые меню представляют собой понятный жестовый интерфейс : они отображают пользователю несколько опций и предлагают выбрать одну из них.

Пользователи управляют меню, наблюдая за метками или значками, представленными в качестве опций, перемещая указатель в нужном направлении, а затем щелкая мышью, чтобы сделать выбор. Это действие называется «отметкой вперед» («мышь вперед» в случае мыши , «махать вперед» в случае датаперчатки ). ^{[ нужна ссылка ]}

Повторение действий и запоминание интерфейса еще больше упрощают работу пользователя. В меню «Пирог» используется способность организма запоминать движение и направление мышц , даже если разум забыл соответствующие символические обозначения. ^{[ 1 ]}

Сравнение с другими методами взаимодействия

В круговых меню выбор осуществляется быстрее и надежнее, чем в линейных, поскольку выбор зависит от направления, а не от расстояния. Круглые фрагменты меню имеют большой размер и расположены рядом с указателем для быстрого взаимодействия (см. закон Фиттса ). Опытные пользователи используют мышечную память , не заглядывая в меню при выборе из него. ^{[ 1 ]}^{[ 10 ]} Вложенные круговые меню могут эффективно предлагать множество опций, а некоторые круговые меню могут отображать линейные меню и объединять линейные и радиальные элементы в одном меню. ^{[ 11 ]} Круговые меню, как и любое всплывающее меню , отображаются только по запросу, что приводит к меньшему визуальному отвлечению и когнитивной нагрузке, чем панели инструментов и строки меню, которые отображаются всегда.

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

Круговые меню больше всего подходят для действий, запланированных людьми, и имеют логический выбор группировки. Линейные меню больше всего подходят для динамических, больших меню, которые имеют множество возможных опций без какой-либо логической группировки. ^{[ 1 ]} поскольку круговые меню могут отображать только ограниченное количество пунктов меню. Около 3-12 пунктов могут быть разумно размещены в радиальной компоновке, но дополнительные элементы, как правило, в первую очередь сводят на нет преимущества использования круговых меню. Это можно преодолеть с помощью соответствующих методов, которые позволяют объединять команды одним жестом через подменю. ^{[ 3 ]}^{[ 12 ]}

Однако использование методов взаимодействия , не основанных на указателях , оказалось проблематичным как для круговых, так и для линейных меню для загроможденной цифровой столешницы, где физические объекты могут перекрывать пункты меню. ^{[ 13 ]}

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

Известные реализации

Программное обеспечение

Круговое меню для Mac OS может запускать круговое меню для каждого активного приложения.
Android-браузер в Android
Autodesk Maya , a commercial 3D modelling program ^{[ 14 ]}
Blender — программа 3D-моделирования с открытым исходным кодом, которая в настоящее время имеет круговые меню в качестве дополнительной функции.
BumpTop , компьютерный рабочий стол, созданный для имитации бумажных файлов на реальном столе, который использует круговые меню, как и многие из его меню управления.
PowerAnimator — коммерческая программа 3D-моделирования, в которой использовались меню маркировки. ^{[ 15 ]}
Mozilla и Mozilla Firefox RadialContext Расширения ^{[ 16 ]}^{[ 17 ]} и легкие жесты ^{[ 18 ]}
Metisse и Unix Desktop Environment , оконные менеджеры для X Window System
modo — расширенный пакет моделирования полигонов и поверхностей с разделением.
SolidWorks — программа для 3D-моделирования.
Songza , музыкальная поисковая система и интернет-музыкальный автомат, использующий круговое меню в качестве основного режима взаимодействия, автор Аза Раскин
Quicksilver через плагин Constellation
Sugar , реализация графического интерфейса для «Один ноутбук на ребенка» проекта
OneNote Приложение для Windows 8 и Windows RT
Драйвер мыши Cherry для мыши Power Pad M-1000 дополнительно предлагает круглое контекстное меню.
Серия Samsung Galaxy Note , начиная с Note 3. ^{[ 19 ]}^{[ 20 ]}^{[ 21 ]}
RadialMenu, легкое бесплатное программное обеспечение для Windows, запрограммированное с помощью AutoHotkey.

Игры

Counter-Strike:GO — компьютерная игра-шутер от первого лица. Меню покупки представляет собой радиальное меню.
В видеоигре The Sims 2000 года круговые меню широко использовались для взаимодействия между игроками. Эти пироговые меню были в первую очередь разработаны Доном Хопкинсом . ^{[ 22 ]}
Видеоигра Grand Theft Auto V , для выбора оружия и радиостанции. ^{[ 23 ]}
Секрет маны ^{[ 24 ]} и его преемник Secret of Evermore (где меню использовалось для ускорения темпа боя) ^{[ 25 ]})
Проклятие острова обезьян , также называемое «глаголной монетой». ^{[ 26 ]}^{[ 27 ]}

См. также

Ссылки

^ Jump up to: ^а ^б ^с ^д Хопкинс, Дон (декабрь 1991 г.). «Разработка и реализация пирогового меню» . Журнал доктора Добба . Архивировано из оригинала 25 декабря 2009 г. Проверено 15 декабря 2009 г.
^ Гордон Куртенбах1 и Уильям Бакстон. «Обучение пользователей и производительность с помощью меню маркировки» . {{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
^ Jump up to: ^а ^б «Чрезвычайно эффективный выбор меню: маркировка меню для Flash Platform »блог – блог betriebsraum» .
^ Дон Хопкинс. «Динамические круговые меню» . Архивировано из оригинала 20 ноября 2009 г. Проверено 29 декабря 2009 г.
^ Горд Куртенбах (апрель 2004 г.). «Заметки по истории радиальных меню, круговых меню и меню-маркировок» .
^ Дон Хопкинс. «Предложение тета-меню и дизайн пирогового меню - май 1986 г.» . Архивировано из оригинала 11 июня 2011 г. Проверено 7 апреля 2010 г.
^ Каллахан, Джек; Хопкинс, Дон; Вайзер, Марк; Шнейдерман, Бен (1988). «Эмпирическое сравнение кругового и линейного меню». Материалы конференции ACM CHI по человеческому фактору в вычислительных системах. стр. 95–100. http://doi.acm.org/10.1145/57167.57182 .
^ Подземелья и рабочие столы: История компьютерных ролевых игр . ЦРК Пресс . 2008. с. 220. ИСБН 9781439865248 .
^ «Ретроспектива: Тайна маны» . Край . ООО «Фьючер» . 01.06.2014. Архивировано из оригинала 15 июля 2014 г. Проверено 20 августа 2014 г.
^ Шнейдерман, Бен ; Плезант, Кэтрин; Ботафого, Родриго; Хопкинс, Дон ; Вейланд, Уильям. «Проектирование, облегчающее просмотр веб-страниц: взгляд на браузер рабочей станции Hyperties» . Университет Мэриленда : Лаборатория взаимодействия человека и компьютера. Архивировано из оригинала 25 декабря 2009 г. Проверено 15 декабря 2009 г.
^ Хопкинс, Дон . «Криковые меню на Python/GTK/Cairo для OLPC Sugar» . Архивировано из оригинала 27 апреля 2007 г. Проверено 15 декабря 2009 г.
^ «www.markingmenus.org» . Архивировано из оригинала 28 марта 2010 г. Проверено 7 апреля 2010 г.
^ Лейтингер, Д; Халлер, М. (10–12 октября 2007 г.). «Улучшение взаимодействия с меню для загроможденных настольных систем с помощью меню, нарисованных пользователем». Горизонтальные интерактивные человеко-компьютерные системы, 2007. TABLETOP '07. Второй ежегодный международный семинар IEEE по . Ньюпорт, Род-Айленд. стр. 121–128. дои : 10.1109/TABLETOP.2007.24 . ISBN 978-0-7695-2013-1 .
^ Понимание 3-D анимации с использованием Maya Джона Эдгара Парка.
^ «Максимальный ПК, октябрь 1998 г.» . Октябрь 1998 года.
^ Джон Бреслин . «Повесть о двух атомах: AtomPub и интерфейс Atom» . newtechpost.com. ^{[ постоянная мертвая ссылка ]}
^ «АВУГН март 2003» . Март 2003 года.
^ Mozilla Firefox 4 (на немецком языке)
^ Грациано, Дэн. «Убедитесь, что вы правильно используете S Pen» . CNET .
^ «S Pen на Note 4 лучше, чем когда-либо: Feature Focus» . Администрация Андроида . 2 октября 2014 года. Архивировано из оригинала 19 января 2022 года . Проверено 19 января 2022 г.
^ Сотрудники GreenBot (14 августа 2015 г.). «4 новые примечательные особенности S n Galaxy Note 5» .
^ Хопкинс, Дон (07 июля 2018 г.). «The Sims, круговые меню, редактирование Edith и демонстрация визуального программирования SimAntics» . Medium.com . Архивировано из оригинала 19 декабря 2018 г. Проверено 18 декабря 2018 г.
^ Зейтц, Дэн (17 сентября 2013 г.). « Grand Theft Auto V — это совершенно новая игра» . Упрокс . Проверено 5 февраля 2015 г.
^ Кэмпбелл, Грег. «Тайна Маны — Ретрообзор» . РПГеймер. Архивировано из оригинала 18 января 2014 г. Проверено 24 декабря 2008 г.
^ «Огненное кольцо: как Secret of Mana усовершенствовала ролевой боевик» . videogamesarerad.com. Архивировано из оригинала 28 июля 2020 г. Проверено 29 февраля 2012 г.
^ «Обзор: непризнанный» . davidyat.es . 3 февраля 2019 г.
^ «Проклятие острова обезьян — прохождения для геймеров» . gamerwalkthroughs.com .

Уайзман, штат Невада; Лемке, Ху; Хайлз, Дж. О. «ПИКСИ: новый подход к графической человеко-машинной коммуникации». Материалы конференции CAD 1969 года в Саутгемптоне, публикация конференции IEEE 51 . п. 463.

Внешние ссылки

Плагин JavaScript/jQuery Radmenu , с открытым исходным кодом
Цветочное меню — это реализация меню маркировки для Qt.
Tcl/Tk — простая реализация на чистом Tcl/Tk.
Круговые меню в c2 wiki
Круговые меню для Qt
Круговые меню для пользовательского интерфейса OLPC Sugar на Python с модулями GTK, Cairo и Pango
Статья на Slashdot: Круговые меню в Mozilla
Компонент кругового меню Asymetrix [ToolBook], автор Паоло Тозолини . Исходный код: Piemenu.com Piemenu.com .
Python — круговые меню Python с открытым исходным кодом для пользовательского интерфейса GTK/Cairo/Pango/OLPC/Sugar, автор: Дон Хопкинс .
OpenLaszlo — круговые меню OpenLaszlo с открытым исходным кодом для Flash, автор: Дон Хопкинс.
JavaScript — круговые меню JavaScript с открытым исходным кодом для браузера Internet Explorer, автор: Дон Хопкинс.
Плагин JavaScript/jQuery Radmenu . Радиальные/круговые меню JavaScript с открытым исходным кодом для ВСЕХ браузеров, от Nirvana Tikku.
ActiveX — круговые меню ActiveX на C++ с открытым исходным кодом для браузера Internet Explorer, автор: Дон Хопкинс.
X11 — оконный менеджер «piewm» X11 с открытым исходным кодом и круговыми меню, созданный Доном Хопкинсом и поддерживаемый Рассом Нельсоном .
TCL/Tk — бесплатное программное обеспечение Pie Pie Menus для TCK/Tk, написанное в 1992 году для SimCity Доном Хопкинсом.
NeWS — бесплатное программное обеспечение круговых меню для NeWS 1.1, написанное в марте 1988 года Доном Хопкинсом.
X10 — бесплатное программное обеспечение круговых меню для оконного менеджера X10 «uwm», написанное в июне 1986 года Доном Хопкинсом.
Suntools — Бесплатное программное обеспечение Pie Menus для Suntools, написанное в январе 1987 года Марком Вайзером .
X10 — бесплатное программное обеспечение Theta-меню, прототип концептуального прототипа X10, написанный в июне 1986 года Доном Хопкинсом.
Статьи Дона Хопкинса о меню пирогов .
Circle Menus , by Greg Bronevetsky.
Вариант трехмерного кругового меню — кубическое меню. Архивировано 4 июля 2009 г. на Wayback Machine , автором conquex, с исходным кодом.
Компонент кругового меню Asymetrix [ToolBook], автор Паоло Тозолини . Исходный код: Piemenu.com Piemenu.com .
Круговые меню для Windows , Dr. Журнал Добба, ноябрь 1992 г., стр. 30–39, Карл Ролло.
Демонстрация пироговых меню на Java , Карл Ролло.
Круговое меню для libGDX, библиотеки с открытым исходным кодом для разработчиков игр Java. Возможна демонстрация .
Круговое меню WPF , автор Кристоф Менге.
Wheelnav.js — анимированный навигационный компонент JavaScript на основе Raphaël (библиотека JavaScript) (SVG/VML) от Softwaretailoring.net.
Аннотированная библиография ссылок на жесты, сенсорные экраны и перьевые вычисления .
RadialMenu , легкое бесплатное программное обеспечение для Windows, запрограммированное с помощью AutoHotkey.

[node98-1] Jump up to: ^а ^б ^с ^д Хопкинс, Дон (декабрь 1991 г.). «Разработка и реализация пирогового меню» . Журнал доктора Добба . Архивировано из оригинала 25 декабря 2009 г. Проверено 15 декабря 2009 г.

[2] Гордон Куртенбах1 и Уильям Бакстон. «Обучение пользователей и производительность с помощью меню маркировки» . {{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )

[efficient_marking_menus-3] Jump up to: ^а ^б «Чрезвычайно эффективный выбор меню: маркировка меню для Flash Platform »блог – блог betriebsraum» .

[4] Дон Хопкинс. «Динамические круговые меню» . Архивировано из оригинала 20 ноября 2009 г. Проверено 29 декабря 2009 г.

[5] Горд Куртенбах (апрель 2004 г.). «Заметки по истории радиальных меню, круговых меню и меню-маркировок» .

[6] Дон Хопкинс. «Предложение тета-меню и дизайн пирогового меню - май 1986 г.» . Архивировано из оригинала 11 июня 2011 г. Проверено 7 апреля 2010 г.

[7] Каллахан, Джек; Хопкинс, Дон; Вайзер, Марк; Шнейдерман, Бен (1988). «Эмпирическое сравнение кругового и линейного меню». Материалы конференции ACM CHI по человеческому фактору в вычислительных системах. стр. 95–100. http://doi.acm.org/10.1145/57167.57182 .

[8] Подземелья и рабочие столы: История компьютерных ролевых игр . ЦРК Пресс . 2008. с. 220. ИСБН 9781439865248 .

[EDGEretro-9] «Ретроспектива: Тайна маны» . Край . ООО «Фьючер» . 01.06.2014. Архивировано из оригинала 15 июля 2014 г. Проверено 20 августа 2014 г.

[10] Шнейдерман, Бен ; Плезант, Кэтрин; Ботафого, Родриго; Хопкинс, Дон ; Вейланд, Уильям. «Проектирование, облегчающее просмотр веб-страниц: взгляд на браузер рабочей станции Hyperties» . Университет Мэриленда : Лаборатория взаимодействия человека и компьютера. Архивировано из оригинала 25 декабря 2009 г. Проверено 15 декабря 2009 г.

[11] Хопкинс, Дон . «Криковые меню на Python/GTK/Cairo для OLPC Sugar» . Архивировано из оригинала 27 апреля 2007 г. Проверено 15 декабря 2009 г.

[12] «www.markingmenus.org» . Архивировано из оригинала 28 марта 2010 г. Проверено 7 апреля 2010 г.

[13] Лейтингер, Д; Халлер, М. (10–12 октября 2007 г.). «Улучшение взаимодействия с меню для загроможденных настольных систем с помощью меню, нарисованных пользователем». Горизонтальные интерактивные человеко-компьютерные системы, 2007. TABLETOP '07. Второй ежегодный международный семинар IEEE по . Ньюпорт, Род-Айленд. стр. 121–128. дои : 10.1109/TABLETOP.2007.24 . ISBN 978-0-7695-2013-1 .

[14] Понимание 3-D анимации с использованием Maya Джона Эдгара Парка.

[15] «Максимальный ПК, октябрь 1998 г.» . Октябрь 1998 года.

[16] Джон Бреслин . «Повесть о двух атомах: AtomPub и интерфейс Atom» . newtechpost.com. ^{[ постоянная мертвая ссылка ]}

[17] «АВУГН март 2003» . Март 2003 года.

[18] Mozilla Firefox 4 (на немецком языке)

[19] Грациано, Дэн. «Убедитесь, что вы правильно используете S Pen» . CNET .

[20] «S Pen на Note 4 лучше, чем когда-либо: Feature Focus» . Администрация Андроида . 2 октября 2014 года. Архивировано из оригинала 19 января 2022 года . Проверено 19 января 2022 г.

[21] Сотрудники GreenBot (14 августа 2015 г.). «4 новые примечательные особенности S n Galaxy Note 5» .

[22] Хопкинс, Дон (07 июля 2018 г.). «The Sims, круговые меню, редактирование Edith и демонстрация визуального программирования SimAntics» . Medium.com . Архивировано из оригинала 19 декабря 2018 г. Проверено 18 декабря 2018 г.

[Seitz-23] Зейтц, Дэн (17 сентября 2013 г.). « Grand Theft Auto V — это совершенно новая игра» . Упрокс . Проверено 5 февраля 2015 г.

[RPGamer-24] Кэмпбелл, Грег. «Тайна Маны — Ретрообзор» . РПГеймер. Архивировано из оригинала 18 января 2014 г. Проверено 24 декабря 2008 г.

[25] «Огненное кольцо: как Secret of Mana усовершенствовала ролевой боевик» . videogamesarerad.com. Архивировано из оригинала 28 июля 2020 г. Проверено 29 февраля 2012 г.

[26] «Обзор: непризнанный» . davidyat.es . 3 февраля 2019 г.

[27] «Проклятие острова обезьян — прохождения для геймеров» . gamerwalkthroughs.com .

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

[ 7 ]

[ 8 ]

[ 9 ]

[ 10 ]

[ 11 ]

[ 12 ]

[ 13 ]

[ 14 ]

[ 15 ]

[ 16 ]

[ 17 ]

[ 18 ]

[ 19 ]

[ 20 ]

[ 21 ]

[ 22 ]

[ 23 ]

[ 24 ]

[ 25 ]

[ 26 ]

[ 27 ]

v т и Графические элементы управления
Ввод команды	Регулировочная ручка Кнопка Контекстное меню Раскрывающийся список Кнопка гамбургера Меню В меню
Ввод-вывод данных	Флажок Выбор цвета Поле со списком Кнопка цикла Выбор даты Представление в виде сетки Тумблер Список Конструктор списков Радиокнопка Полоса прокрутки Поле поиска Слайдер Спиннер Текстовое поле
Информационный	Помощь с воздушным шаром Проекционный дисплей в компьютерах HUD в видеоиграх Икона Информационная панель Этикетка Загрузочный экран Индикатор прогресса Индикатор выполнения Заставка Троббер Боковая панель Строка состояния Тост Подсказка
Контейнеры	Аккордеон Вид в виде дерева Оформление на стороне клиента Виджет раскрытия информации Рамка/Набор полей Барное меню Панель Поповер Лента Вкладка Панель инструментов Окно Оформление окон Рабочая область
Навигационный	Адресная строка Хлебная навигация Гиперссылка Панель навигации Виртуальный рабочий стол
Специальные окна	Диалоговое окно оповещения Диалоговое окно Диалоговое окно файла Окно инспектора Модальное окно Окно палитры
Связанные понятия	Просмотрщик файлов Список элементов графического интерфейса пользователя Менеджер по макетам Смотри и чувствуй Наведение курсора мыши Прокрутка Набор инструментов для виджетов слабак Масштабируемый пользовательский интерфейс