Visual Design Hierarquia

Question

Eu tenho uma hierarquia de categorias, onde uma categoria pode ter um único pai (e você pode ter vários níveis de crianças.)

Estou investigando maneiras de exibir essas informações para o usuário e parece que um layout básico árvore de baunilha é a forma mais intuitiva para ir. Mas eu estou querendo saber se alguém pode sugerir outras abordagens.

Os requisitos seria,

1) demonstram claramente para o usuário mãe / filho relacionamentos da lista 2) permitir ao utilizador facilmente mover itens (quer por arrastar e soltar ou algum outro método) 3) Supondo que você tinha dados hierárquicos que tinham vários pais, como é que essa mudança sua escolha?

Obrigado a todos! - Kevin

Answer 1

Seu controle básico árvore tem sido um grande sucesso para mostrar relações hierárquicas. É relativamente fácil de aprender para novatos e agora é o padrão de fato para hierarquias. É muito apropriado para a edição de relações, especialmente com drag and drop. É talvez a única escolha viável quando a profundidade hierárquica varia arbitrariamente por objeto (ou seja, para qualquer objeto na árvore, pode haver filhos, netos, bisnetos e assim por diante para um número indefinido de “gerações”. ).

A principal alternativa para árvore é uma janela com mestre-detalhe painéis. Neste projeto, um painel contém objetos pai e outro contém objetos filho. A seleção de um objeto pai preenche o painel de criança com seus filhos. Você pode ter painéis grand-criança e painéis de grande-grand-filho conforme necessário, mas mestres detalhes geralmente funcionam melhor quando há um pequeno número fixo de camadas para a hierarquia. Usuários editar as relações entre pais e filhos através de arrastar-e-soltar e recortar / copiar e colar de objetos filho dentro ou entre janelas, semelhante ao uso de um controle de árvore.

mestre-detalhes são geralmente melhores do que as árvores para os seguintes casos:

• Você precisa mostrar várias propriedades ou atributos com cada objeto. Por exemplo, para um dado objeto de projeto, você quer lista não só o número do funcionário para cada membro da equipe, mas também os seus respectivos nomes, Roles, Títulos, divisões e fotografias. Com um mestre-detalhe, cada painel pode ser definido como uma tabela ou formulário que lhe permite mostrar muito sobre cada objeto. controles de árvore muitas vezes recorrem a ineficiente e confuso Propriedades diálogos para alcançar este objetivo.

• Você precisa crianças Subdivide. Por exemplo, para um dado objeto de projeto, você quer manter seus Membros da equipe separada de seus etapas do projeto. Com um mestre-detalhe, você pode ter dois ou mais painéis filho de um painel único pai, com um painel listando os membros da equipe e um listando as etapas. É estranho para manter objetos filho não relacionados separar com um controle de árvore.

• Você tem muitos-para-muitos relações, onde cada criança pode ter vários pais, bem como cada um dos pais ter vários filhos. Por exemplo, dizer que cada projeto tem vários empregados (como Membros da equipe), mas cada empregado pode trabalhar em vários projetos. Você pode ter uma janela com projetos no painel de pais e membros da equipa no painel da criança, ou Empregados no painel pai e atribuições do projeto no painel de criança, ou você pode ter ambas as janelas. controles de árvore pode confundir os usuários quando há muitos-para-muitos relações porque os usuários não espere a mesma criança estar sob mais de um pai.

Answer 2

TreeGX é uma maneira doce para exibir dados hierárquicos de uma forma diferente da árvore padrão - ligação é aqui .

Eu uso o componente dos resultados de pesquisa atuais e enquanto ela não é livre vale a pena o dinheiro se você quer apresentar algo único.

Answer 3

Você pode colocar um pouco de design visual estilo fluxograma para torná-lo mais atraente. Quão longe você quer ir é totalmente até você. Isso irá ajudá-lo com vários pais.

Answer 4

A sua questão trata seu problema de projeto como se fosse uma coisa abstrata. Infelizmente, não é assim tão simples! - Se ao menos houvesse uma solução perfeita

UI design é altamente contextualizada. Você tem que pensar sobre o grupo de usuários (ou seja, suas necessidades, objetivos e expectativas) e o tipo de atividade que você está tentando apoio (ou seja, o que exatamente é o usuário fazer quando navegam esta árvore? Qual é o seu objetivo? Eles estão indo para uso seu aplicativo diariamente ou uma vez por ano? etc). O que funciona em seu contexto pode não funcionar bem em outro lugar.

As pessoas estão sempre desapontados quando disse "Vai construir um protótipo rápido e testá-lo em uma amostra de seus usuários finais" . Trata-se de mais trabalho e fora da zona de conforto de um desenvolvedor typcial. No entanto, é a única maneira de ter certeza de que sua interface é certo para o seu contexto.