¿Cómo dibujar un conjunto de botones de jerarquía y parecer menos ofensivo de lo que es?


17

Estoy tratando de crear un conjunto de botones que pueda usarse para moverse a través de datos jerárquicos y se ve como una esvástica. No estoy seguro de cómo corregirlo.

ingrese la descripción de la imagen aquí

En la imagen de arriba si se seleccionó "Panel" y presiona el botón superior, seleccionaría "Panel animado". Si hace clic en el botón izquierdo, seleccionará "Script". Si hizo clic en el botón derecho, nada cambiaría, ya que el panel es el último elemento de la lista. Si selecciona el botón inferior, se seleccionaría "EventHandler".

El conjunto de botones se ubicará a la izquierda de la etiqueta. La etiqueta y el botón se mostrarán cuando se seleccione un elemento. Por ejemplo, en una página web puede haber una lista de elementos de menú verticales u horizontales. El botón configurado y la etiqueta se ubicarían sobre el menú seleccionado. Luego, presionando "in" seleccionaría el primer elemento del menú. Seleccionar "izquierda" o "derecha" se movería a través de los elementos del menú. Espero que tenga sentido.

¿Alguna sugerencia de cómo hacer que esto sea menos lo que sea?

Más detalles para @PremierBromanov:
De la forma en que lo tengo ahora, tengo 3 etiquetas seguidas, así como "Arriba" "L" "R" "Panel".

ingrese la descripción de la imagen aquí

Estoy usando los términos "arriba", "izquierda" y "derecha" pero "arriba" es realmente "salir de la fila actual y volver a la fila anterior". Esos términos se basan libremente en cómo se muestra en un diseño horizontal (aunque en vertical ya no tiene sentido).

En XML usan términos como nodo de rama y nodos de hoja. Una rama tiene o puede tener nodos hoja. Los datos jerárquicos también usan los términos nodo primario y nodos secundarios. En ese caso, tienes antepasados ​​y descendientes. También tienes hermanos. Son nodos secundarios que comparten el mismo padre.

Entonces, en el último caso, podría tener padre, hermano anterior, hermano siguiente y descendientes del nodo secundario actual. También podría tener Rama principal, anterior izquierda, siguiente hoja. En este caso, si una hoja tiene hojas, sería una rama. Entonces la rama principal, la hoja o rama anterior, la siguiente hoja o rama y las hojas de la rama actual.


1
Intenta usar dos flechas diagonales.
Paolo Gibellini

77
Dato curioso: una esvástica orientada hacia la izquierda es en realidad un símbolo de paz en el hinduismo y se usa fácilmente en los mapas para representar los lugares de culto. Una esvástica orientada hacia la derecha es un símbolo del mal, pero aún no es ofensivo en el hinduismo.
John Dvorak

3
Ambas esvásticas se han utilizado como signos de buena suerte en la cultura occidental desde principios del siglo XX ( wiki ). Hasta que alguien vino y arruinó un poco las cosas.
Vincent

¿Has intentado hacer un simple sistema de flecha derecha arriba hacia abajo? Podría tener más sentido visualmente a medida que recorre la estructura del archivo y sería más como un "+" y no una esvástica. Arriba y abajo se moverían del "Panel" al "guión" y la izquierda y la derecha saldrían y entrarían respectivamente.
Premier Bromanov

1
No es una esvástica, le faltan dos patas, no creo que deba preocuparse por eso, solo un nazi lo descubrirá, leí el título de su pregunta y luego eché un vistazo a su conjunto de botones y no entendí la "ofensiva" (pensé que querías decir que era demasiado fea: P no lo es), tuve que leer tu pregunta para saber qué querías decir con "ofensiva", por cierto, he estado estudiando WW2 durante 10 años, aun así, no pude detectar la esvástica
Kyle

Respuestas:


32

Su concepto de flecha y para qué planea usarlo parece apropiado. Y por lo que puedo ver, supongo que no tienes mucho espacio para los iconos de todos modos.

Quizás lo que podría ayudarte es simplemente usar flechas más gruesas y curvas para ocultar ese efecto que no te gusta.

A continuación se muestra un ejemplo rápido:

Es posible que deba ajustar las flechas a su preferencia y claridad cuando sea de tamaño pequeño. Es el mismo concepto que el tuyo, pero diferentes flechas.

ejemplo flechas en escala de grises

ejemplo en escala de grises grande

Las flechas también pueden ser de diferentes colores:

ejemplo flechas azules

ejemplo flecha azul grande


2
Creo que las flechas curvas funcionan bien incluso sin cambiar los colores. Buena idea +1
Aistis

En tamaños pequeños, incluso podría ser preferible hacer que las flechas curvas sean del mismo color que las rectas.
treinta

1

Puede considerar un enfoque más simple y "plano", usando botones que recorran la lista de arriba a abajo sin importar cuán profunda sea la jerarquía, y proporcionando una manera para que el usuario ajuste la velocidad del recorrido, por ejemplo, cuatro botones :

  • [arriba más rápido]
  • [arriba]
  • [abajo]
  • [abajo más rápido]

"arriba" y "abajo" atravesarían elemento por elemento, y los botones "más rápidos" recorrerían carpeta por carpeta.


¿Por qué no Up foldery Down folder? ¿Y cómo deberían dibujarlos como se les preguntó en la pregunta?
Mensch

Intentaría con Up Folder : doble chevron apuntando hacia arriba. Arriba : single 'up' chevron. Abajo : un solo galón apuntando hacia abajo. Carpeta hacia abajo : doble cheurón 'abajo'.
Matt Smith

Buena idea. Fuera y dentro. Así que supongo que algo así como, ^ << >> \ / donde "^" y "\ /" están centrados encima y debajo de "<< >>".
1.21 gigavatios

Sí, es como el conocido patrón de diseño de paginación, solo vertical.
Matt Smith
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.