Интуитивный и удобный макет пользовательского интерфейса (GUI) для коммуникаторов и планшетных ПК

Вступление

Очень много существуют различных методологий и подходов к обеспечению удобства для пользователей при использовании того или иного интерфейса коммуникации человека с техническим устройством. Сейчас существует большое количество разнообразных коммуникационных интерфейсов: тактильные (кнопки/клавиатура, рычаги/джойстики/манипуляторы(«мышь» и т.п.), тач-скрины/-пады и т.д.) и не тактильные (основанные на жестах, акустические и т.д.). У всех них разное назначение и сферы применения.

В этой публикации мы поговорим о мобильных интерфейсах для навигации и работы с WEB-страницами и контентом. Также, постараемся вместе сделать что-то простое и интуитивно-понятное для большинства пользователей мобильных устройств, таких как коммуникаторы или планшеты с тач-скрин экранами (и/или аналогичными устройствами).

Условия использования и лицензия

Автор: xmoonlight
Лицензия: http://creativecommons.org/licenses/by-sa/4.0/
Доп. условия: При распространении/реализации/копировании/модификации в любом виде сохранять отображаемую текстовую подпись в правом нижнем углу макета (без кавычек): "©2013, xmoonlight" в удобном и легко читаемом для глаз виде без применения каких-либо дополнительных технических средств.

Макет

Описание макета (ландшафтный режим работы)

В левом верхнем углу находится джойстик, который выполняет роль клавиш курсора, обзора листа/scroll или движением виртуального курсора (например, стрелки). Работает как обычный виртуальный джойстик смещением центральной замкнутой области в одно из возможных направлений.

Под ним находится зона С — кнопка вспомогательной области. Она может отвечать за какие-либо редкие действия, связанные с работой джойстика или с навигацией (например: смена режима работы джойстика). Работать зона C может как кнопка, как триггер, или как циклический триггер (более 2-х состояний).

Справа: зоны A и B предназначены для работы в качестве командных кнопок совместно с джойстиком.
Основная зона «А» — например, может работать как левая кнопка «мыши».
Дополнительная зона «B» — например, может работать как правая кнопка «мыши».

Симметрично, по сторонам рабочей области страницы, находятся области со стрелками. Они могут выполняют различную роль: перелистывание страниц (прокрутка вниз на высоту видимой рабочей области страницы), перелистывание слайдов в презентации, выбор какого-либо пункта из popup-меню (например, для выбора нужного объекта, раздела или категории сайта).
В режиме редактирования текста — они выполняют роль движения текстового курсора влево и вправо.

Зоны X и Y служат для очень редких действий: вызов какого-либо меню, смену каких-либо режимов навигации и т.п.
Работать зоны X и Y могут как кнопки, как триггеры или как циклические триггеры (более 2-х состояний).
Также, в некоторых случаях, в этих зонах можно делать «вытяжные» меню.
Например, тянем вверх (drag-n-drop) — появляется в этой же колонке другое меню.
Влево и вправо — менее удобно, но допустимо в очень редких случаях, когда необходима работа с немалым количеством объектов/пунктов.

Строки состояния в этом макете умышленно нет. Т.к. все состояния удобнее хранить в стеке (как историю) и показывать через отдельное меню.

Не все колонки и внутренние элементы (зоны) должны обязательно отображаться.
Например, можно оставить: джойстик, зоны A и B, и вызов меню в зоне X. Остальное скрыть (слева: «стрелка влево» и зона C; справа: «стрелка вправо» и зона Y) и сделать так называемую «ленту» (или «бордюр») для вертикального перемещения (скроллинга) страницы за это свободное место (tap-n-drag). При этом останется все необходимое для работы на экране «под рукой».

Заключение

В следующим выпуске будет представлен макет с портретным режимом ориентации экрана.

---

PS: Хочу поздравить всех с наступающим Новым 2014 Годом и пожелать всем достижения поставленных целей.

Автор: xmoonlight

Источник