Шаблон дизайна пользовательского интерфейса для многоуровневой сетки
В настоящее время у меня есть требование для отображения связанных элементов в многоуровневой сетке. это прадедушка -> дедушка -> родитель -> ребенок
Например: Страна-> Штат-> Город-> Улица - это порядок отображения.
Предлагаемое решение состоит в том, чтобы отобразить все это в многоуровневой сетке (максимум 4 уровня).
Страна -> Штат -> Город -> Улица
Поскольку мне не нравится это решение с точки зрения удобства использования, я ищу шаблон проектирования пользовательского интерфейса, который разбивает отображение на логические единицы.
Спасибо
3 ответа
Если у вас есть объекты данных с двух разных уровней одной иерархии, вы можете:
Поместите каждый уровень в отдельное окно (или страницу, лайтбокс) и разрешите навигацию между ними. Я называю это детализацией.
Поместите каждый уровень в отдельную панель того же самого окна (или страницы), где фокусировка на объекте в верхней панели заполняет подчиненную панель. Я называю это master-detail (это включает каскадные списки и не должно быть перепутано с детализацией выше).
Поместите оба уровня в одну и ту же панель, сделав отступ для подчиненных объектов под каждым объектом более высокого уровня и обычно предоставляя элементы управления, позволяющие скрывать и отображать подчиненные объекты для каждого объекта более высокого уровня. Я называю это деревом.
Имея иерархию нескольких уровней, вы можете использовать любые их комбинации. Вот несколько рекомендаций по решению, как связать любые смежные уровни в иерархии.
Положите уровни в дереве, если
Количество уровней в иерархии произвольно варьируется в зависимости от каждого объекта данных (например, папок).
Пользователь будет регулярно сравнивать подчиненные объекты двух или более вышестоящих объектов, которые находятся рядом друг с другом в порядке сортировки (пользователь может затем развернуть дерево для обоих вышестоящих объектов, чтобы увидеть все подчиненные объекты сразу).
Поместите уровни в отношение "мастер-деталь", если:
Вы показываете более одного или двух атрибутов на объект (например, больше, чем просто имя), и каждый уровень имеет разные атрибуты.
Существует более одного класса подчиненных объектов для вышестоящих объектов.
Существует множество отношений, которые вы будете отображать.
Подробнее см. Иерархия Визуальный дизайн
Поместите уровни в детализацию, если:
Объем информации, отображаемой для каждого уровня, слишком велик, чтобы поместиться в одном окне разумного размера.
Задача диктует, что пользователь может переходить с одного уровня на другой, но пользователь не использует оба уровня одновременно (в общем, вы не должны заставлять пользователя перемещаться назад и вперед между окнами).
В любом случае вам понадобятся отдельные окна для различных задач высокого уровня. Это означает, что вы собираетесь предоставить средство для прямой навигации к подчиненному окну без "детализации" через верхнее окно
Обычно детализация имеет смысл, только если оба окна являются основными окнами (или страницами). Подчиненное окно не должно быть диалоговым окном, окном свойств или лайтбоксом. Если вам не хватает отображения в подчиненном окне, чтобы оправдать полноразмерное главное окно, тогда используйте master-detail. По сравнению с master-detail, диалоговое окно детализации:
Вносит несогласованность в сохранении изменений.
Создает режимы или неоднозначность в z-порядке (или, в случае лайтбоксов, неоднозначность функции кнопки "Назад").
Отсутствует выпадающее меню с его основными элементами управления для редактирования и отмены (в Linux и Windows).
Не поддерживает изменение размера окна (в Mac и Windows), чтобы обеспечить более гибкий просмотр содержимого.
Подробнее обо всем вышеперечисленном смотрите по http://www.zuschlogin.com/?p=31.
Обычный способ разобраться в этом может состоять в том, чтобы сделать это за 2 или более шагов с переходом между ними (т.е. переход на другую страницу или открытие модального диалога и т. Д.)
Таким образом, вы можете отобразить первую сетку / таблицу с 1, 2 или 3 уровнями вашей иерархии и навигационную ссылку для отображения оставшихся уровней во втором или последующих списках / таблицах.
Если вы ищете подтверждение некоторых установленных шаблонов, вы можете выбрать (или объединить) эти:
или же