Como desenhar um conjunto de botões de hierarquia e parecer menos ofensivo do que é?


17

Estou tentando criar um conjunto de botões que pode ser usado para percorrer dados hierárquicos e está parecendo uma suástica. Não sei como corrigi-lo.

insira a descrição da imagem aqui

Na imagem acima, se "Painel" foi selecionado e você pressionou o botão superior, selecione "AnimatedPanel". Se você clicou no botão esquerdo, ele selecionaria "Script". Se você clicou no botão direito, nada mudaria, pois o painel é o último item da lista. Se você selecionar o botão inferior, "EventHandler" será selecionado.

O conjunto de botões fica à esquerda do rótulo. O rótulo e o botão serão mostrados quando um item for selecionado. Por exemplo, em uma página da web, pode haver uma lista de itens de menu verticais ou horizontais. O conjunto de botões e o rótulo ficam acima do menu selecionado. Então pressionar "in" selecionaria o primeiro item do menu. Selecionar "esquerda" ou "direita" se moveria pelos itens de menu. Espero que faça sentido.

Alguma sugestão de como tornar isso menos o que quer que seja?

Mais detalhes para @PremierBromanov:
Do jeito que eu tenho agora, tenho 3 rótulos todos seguidos, como "Up" "L" "R" "Panel".

insira a descrição da imagem aqui

Estou usando os termos "para cima", "esquerda" e "direita", mas "para cima" é realmente "sair da linha atual e voltar para a linha anterior". Esses termos baseiam-se livremente em como são exibidos em um layout horizontal (embora na vertical isso não faça mais sentido).

Em XML, eles usam termos como nó de ramificação e nós de folha. Uma ramificação possui ou pode ter nós de folha. Os dados hierárquicos também usam os termos nó pai e nós filhos. Nesse caso, você tem ancestrais e descendentes. Você também tem irmãos. Eles são nós filhos que compartilham o mesmo pai.

Portanto, no último caso, você pode ter pai, irmão anterior, próximo irmão e descendentes do nó filho atual. Você também pode ter Filial pai, esquerda anterior, próxima folha. Nesse caso, se uma folha tiver folhas, seria um galho. Portanto, ramo pai, folha ou ramo anterior, folha ou ramo seguinte e folhas do ramo atual.


1
Tente usar duas setas diagonais.
Paolo Gibellini

7
Curiosidade: uma suástica voltada para a esquerda é realmente um símbolo de paz no hinduísmo e está sendo prontamente usada em mapas para representar os locais de culto. Uma suástica voltada para a direita é um símbolo do mal, mas ainda não é ofensiva no hinduísmo.
John Dvorak

3
Ambas as suásticas foram usadas como sinais de boa sorte na cultura ocidental a partir do início do século XX ( wiki ). Até que alguém apareceu e meio que arruinou as coisas.
Vincent

Você já tentou criar um sistema simples de seta para a esquerda e para cima? Pode fazer mais sentido visualmente à medida que você percorre a estrutura do arquivo e seria mais um "+" e não uma suástica. Para cima e para baixo seria movido de "Painel" para "script" e a esquerda e a direita sairiam e entrariam, respectivamente.
Premier Bromanov 11/11/2015

1
Não é uma suástica, faltam duas pernas, acho que você não deveria se preocupar com isso, apenas um nazista vai descobrir isso, li o título da sua pergunta e depois dei uma olhada no seu conjunto de botões e eu não recebi a "ofensiva" (eu pensei que você queria dizer que era muito feio: P não é), eu tive que ler sua pergunta para saber o que você quis dizer com "ofensiva", pela maneira como eu estudei a Segunda Guerra Mundial há 10 anos, mesmo assim, eu não poderia detectar a suástica
Kyle

Respostas:


32

Seu conceito de flecha e para o qual você planeja usá-lo parece apropriado. E pelo que posso ver, acho que você não tem muito espaço para ícones.

Talvez o que possa ajudá-lo seja simplesmente usar flechas mais grossas e curvas para ocultar o efeito que você não gosta.

Abaixo está um exemplo rápido:

Pode ser necessário ajustar as setas de acordo com sua preferência e clareza quando em tamanho pequeno. É o mesmo conceito que o seu, mas setas diferentes.

exemplo setas em escala de cinza

exemplo em escala de cinza grande

As setas também podem ter cores diferentes:

exemplo setas azuis

exemplo seta azul grande


2
Acho que as setas curvas funcionam bem, mesmo sem alterar as cores. Boa ideia +1
Aistis 11/11/2015

Em tamanhos pequenos, pode até ser preferível tornar as setas curvas da mesma cor que as retas.
Trintathreeforty

1

Você pode considerar uma abordagem mais simples e "plana", usando botões que percorrem a lista de cima para baixo, independentemente da profundidade da hierarquia, e oferecendo uma maneira de o usuário ajustar a velocidade da travessia, por exemplo, quatro botões :

  • [mais rápido]
  • [acima]
  • [baixa]
  • [desce mais rápido]

"para cima" e "para baixo" passariam item a item e os botões "mais rápidos" passariam de pasta em pasta.


Por que não Up foldere Down folder. E como eles devem ser desenhados, conforme solicitado na pergunta?
Mensch

Eu tentaria Up Folder : chevron duplo apontando para cima. Para cima : chevron único para cima. Abaixo : divisa única apontando para baixo. Pasta para baixo : duplo chevron 'baixo'.
Matt Smith

Boa ideia. Dentro e fora. Então, estou supondo algo como ^ << >> \ / onde "^" e "\ /" estão centralizados acima e abaixo do "<< >>".
1,21 gigawatts

Sim, é como o conhecido padrão de design de paginação, apenas vertical.
Matt Smith
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.