Шаблон дизайна пользовательского интерфейса для многоуровневой сетки - PullRequest
4 голосов
/ 27 октября 2009

В настоящее время у меня есть требование для отображения связанных элементов в многоуровневой сетке. это прадедушка -> прародитель-> родитель-> ребенок

Например: Страна-> Штат-> Город-> Улица - это порядок отображения.

Предлагаемое решение - отобразить все это в многоуровневой сетке (максимум 4 уровня).

Страна -> государство -> Город -> Улица

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

спасибо

Ответы [ 3 ]

8 голосов
/ 27 октября 2009

Если у вас есть объекты данных с двух разных уровней одной иерархии, вы можете:

  • Поместите каждый уровень в отдельное окно (или страницу, лайтбокс) и разрешите навигацию между ними. Я называю это детализация .

  • Поместите каждый уровень в отдельную панель того же самого окна (или страницы), где фокусировка на объекте в верхней панели заполняет подчиненную панель. Я называю это master-detail (это включает каскадные списки и не должно быть перепутано с детализацией выше).

  • Поместите оба уровня в одну и ту же панель, сделав отступ для подчиненных объектов под каждым объектом более высокого уровня и обычно предоставляя элементы управления, позволяющие скрывать и отображать подчиненные объекты для каждого объекта более высокого уровня. Я называю это деревом .

Имея иерархию нескольких уровней, вы можете использовать любые их комбинации. Вот несколько советов, как решить, как связать любые смежные уровни в иерархии.

Поместите уровни в дерево, если

  • Количество уровней в иерархии произвольно зависит от каждого объекта данных (например, папок).

  • Пользователь будет регулярно сравнивать подчиненные объекты двух или более вышестоящих объектов, расположенных рядом друг с другом в порядке сортировки (пользователь может затем развернуть дерево для обоих вышестоящих объектов, чтобы увидеть все подчиненные объекты сразу ).

Поместите уровни в отношение мастер-деталь, если:

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

  • Существует более одного класса подчиненных объектов для вышестоящих объектов.

  • Есть отношения многие ко многим, которые вы будете отображать.

Подробнее см. Иерархический визуальный дизайн

Поместите уровни в детализацию, если:

  • Объем информации, отображаемой для каждого уровня, слишком велик, чтобы поместиться в одном окне разумного размера.

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

  • Вам все равно понадобятся отдельные окна для различных задач высокого уровня. Это означает, что вы собираетесь предоставить средство для прямой навигации к подчиненному окну без «детализации» через верхнее окно

Обычно детализация имеет смысл, только если оба окна являются основными окнами (или страницами). Подчиненное окно не должно быть диалоговым окном, окном свойств или лайтбоксом. Если вам не хватает отображения в подчиненном окне, чтобы оправдать полноразмерное главное окно, используйте мастер-детали. По сравнению с master-detail, диалоговое окно детализации:

  • Вносит несогласованность в сохранении изменений.

  • Создает режимы или неоднозначность в z-порядке (или, в случае лайтбоксов, неоднозначность функции кнопки Назад).

  • Отсутствует выпадающее меню с основными элементами управления для редактирования и отмены (в Linux и Windows).

  • Не поддерживает изменение размера окна (в Mac и Windows) для обеспечения более гибкого просмотра содержимого.

Подробнее обо всем вышеперечисленном см. http://www.zuschlogin.com/?p=31.

2 голосов
/ 27 октября 2009

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

Таким образом, вы можете отобразить первую сетку / таблицу с 1, 2 или 3 уровнями вашей иерархии и навигационную ссылку для отображения оставшихся уровней во втором или последующих списках / таблицах.

Если вы ищете подтверждение некоторых установленных шаблонов, вы можете выбрать (или объединить) эти:

Master / Detail

Таблица дерева

или

Каскадные списки

0 голосов
/ 27 октября 2009

Tree? Как в Windows Explorer файловой системы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...