it-swarm-es.com

El selector de color más fácil de usar

Estoy diseñando un sitio web y necesito permitir que el usuario cambie el color de algunos elementos. Tendré que implementar un selector de color. ¿Qué tipo de selector de color es el más fácil de usar y se ve mejor?

Tengo cuatro tipos diferentes hasta ahora, pero si tiene otro mejor, hágamelo saber.

Soy completamente flexible con la apariencia del diseño.

# 1: Selector de color cuadrado
enter image description here

# 2: Selector de color de la rueda de color
enter image description here

# 3: Rueda de color - Selector de color cuadrado
enter image description here

# 4: Rueda de color - Selector de color de triángulo
enter image description here

64
Steve

Usuarios básicos primero

Supongo que esta no es una aplicación de teoría del color. Si esto está destinado a admitir la selección rápida de colores con un subconjunto de usuarios avanzados, un selector/generador de paletas híbridas funcionará bien.

Hacer "fácil" fácil

Comience con un selector basado en paletas con muestras de tamaño razonable que simplifique el trabajo del usuario de hacer una selección rápida. Google ha hecho un buen trabajo con esto en Docs.

Simple color swatch chooser

Este diseño se beneficia de tres características clave:

  1. Una selección razonablemente amplia pero no abrumadora.

  2. Organización reflexiva de opciones.

    1. Escala de grises
    2. Colores brillantes
    3. Rango de valores de los colores brillantes.
  3. Una sección personalizable para usuarios avanzados.

Ese último punto acomoda a usuarios más particulares que están listos para esforzarse con sus controles para obtener la paleta que desean.

¡Un punto de contención ...

Para el registro, creo que los colores base de Google (la segunda fila de muestras) son inútiles. ¿Cuántos de estos realmente desearía en sus documentos sin modificación? Aquí hay una puñalada rápida sobre cómo cambiaría las selecciones de color base. Es sutil, pero creo que la diferencia es significativa en el uso.

A new set of base color swatches

Hacer "difícil" posible

No puede anticipar todos los colores posibles que un usuario desee, pero está en el camino correcto al tratar de admitirlos. El patrón familiar (una región en la que se puede hacer clic a un lado y un control deslizante al otro) puede tomar diferentes formas, para bien o para mal.

Google se equivoca.

El modelo de selector avanzado que eligieron carece de precisión sin mejorar la usabilidad. Al usar el "escenario" principal para matiz y saturación, las selecciones de color se limitan en columnas verticales estrechas. El valor por sí solo requiere muy poca precisión, pero reclama la propiedad total del control deslizante de grano fino.
Conclusión altamente científica: No me gusta.

Google's advanced color picker

Una mejor manera

Al dedicar el control deslizante al tono, los usuarios pueden obtener fácilmente el color general que buscan. El escenario principal está disponible para ajustar la saturación y el valor, creando fácilmente variaciones sutiles. Este ejemplo proviene de un complemento de selector de color OSX que he instalado en mis Mac (con alguna modificación).
Conclusión altamente científica: Mo betta.

Modified Antetype color picker for Mac OSX

Gracias a @ dberm22 por la observación perspicaz de que este modelo debe tener el selector de tono primero a la izquierda del escenario principal. Esto crea una progresión lógica desde la tarea amplia (encontrar el color), a la detallada (manipular el valor y la saturación), a la avanzada (ajustar o copiar los números).

Considere también dónde comienzan sus valores de color al ingresar al estado de creación. Algunos selectores comienzan con el valor y la saturación en 0 (negro), lo que da como resultado un control deslizante de tono que parece no tener impacto en la muestra. Comenzar con el valor y la saturación en algún lugar del cuadrante superior derecho es probable que esté más cerca de lo que el usuario quiere.

Recuerda el arduo trabajo del usuario

Independientemente de cómo formatee el control, asegúrese de almacenar colores personalizados para los usuarios que se toman el tiempo para generarlos. ¡Luego tendrán una biblioteca de muestras propia con el tiempo y amarán su producto aún más!

El crédito por la filosofía "fácil es fácil, difícil es posible" va para Larry Wall, creador del lenguaje de programación Perl.

85
plainclothes

No estoy seguro de que haya una respuesta objetiva a esta, porque dependerá demasiado de la demografía de sus clientes. ¡Aunque le daré a mi subjetivo dos centavos!

Si no son diseñadores gráficos o extremadamente expertos en tecnología, me gustaría buscar la solución más intuitiva, que para mí es la segunda . En mi opinión, los pensamientos de un usuario probablemente irían "Quiero un rojo, quizás oscuro", no "Quiero un color oscuro, quizás rojo", así que Colour > Shade funciona mejor para mí que Shade > Colour o cualquiera de los circulares en 3 o 4. Tenga en cuenta que esto se basa en un estilo de lectura de izquierda a derecha para que tenga sentido para el usuario y puede no funcionar en diseños de derecha a izquierda como lo encontraría en hebreo , por ejemplo.

Sin embargo, este razonamiento puede no ser cierto, especialmente si selecciona texto sobre un fondo blanco y debe elegir un color oscuro. Si es así, ¿tal vez voltear horizontalmente el primero?

Además, recomendaría tener una barra para ingresar códigos hexadecimales. Si sabe exactamente qué color desea, puede ser frustrante tener que deslizar un selector alrededor de un área grande cuando puede escribirlo. Algo así:

mockup

descargar fuente bmml - Wireframes creados con Balsamiq Mockups

La actualización del elemento gráfico actualiza el texto de inmediato, y viceversa. Esto también es más accesible para las personas que no pueden hacer clic y arrastrar fácilmente, o que tienen problemas con la visión.

28
A. Sim

Todos los selectores de color que enumera se basan en variaciones de las representaciones de color HSL/HSV (tono, saturación, claridad/valor). Por lo tanto, sus principales diferencias no están en la teoría del color, sino simplemente en la ubicación y la forma de los controles.

Dicho esto, el segundo selector de color en su lista tiene una desventaja importante en comparación con los demás: no tiene el eje de tono separado de los demás. Mientras que todas las otras interfaces le permiten elegir primero un tono específico y luego elegir un matices y sombras diferente de ese tono sin afectar el tono base, el segundo selector de color combina la saturación y los ejes de tono en la misma rueda de color, de modo que al hacer clic en la rueda se alterarán tanto la saturación como el tono.

Por lo tanto, tratar de teñir un color mientras se mantiene el tono se convierte en un ejercicio complicado de agudeza visual y coordinación mano-ojo-mouse. Dado que el teñido y el sombreado es algo muy común cuando se trabaja con colores y gráficos, esto podría ser muy frustrante.

El primer selector de color en su lista tiene tiene un eje de matiz separado, pero está comprimido en un espacio bastante pequeño, lo que dificulta elegir con precisión un específico deseado hue simplemente haciendo clic en el rango. Tampoco representa visualmente la naturaleza circular del eje de tono, introduciendo una discontinuidad arbitraria en la parte roja del espectro. Por lo tanto, lo calificaría como el segundo peor del lote.

Los últimos dos selectores de color son muy similares en apariencia y usabilidad. Personalmente, considero que el último es un poco más natural y elegante, ya que el espacio de tinte/sombra es fundamentalmente de naturaleza triangular (que consiste en combinaciones de tres tonos "puros": negro, blanco y el tono saturado puro). Dicho esto, no veo una diferencia de usabilidad práctica entre ellos.

Por lo tanto, personalmente clasificaría sus selectores de color en el siguiente orden: # 4 (mejor), # 3 (casi igual a # 4), # 1, # 2 (peor).


Finalmente, me gustaría señalar que todos los selectores de color que ha mostrado comparten un defecto común: dado que los modelos de color HSL/HSV son Se basan en reparametrizaciones simples del espacio de color RGB, que no es perceptivamente uniforme, cambiar el tono afecta la claridad percibida del color. (Puede ver esto fácilmente mirando las ruedas de colores: las partes azules se ven mucho mucho más oscuras que las partes verdes y amarillas.) Así, mientras que la mayoría De ellos, es más fácil elegir diferentes tonos y matices del mismo tono, lo contrario, cambiar el tono de un color mientras se mantiene la misma claridad y saturación percibida, es bastante difícil.

Por desgracia, no conozco ningún diseño de selector de color de uso común que evite este problema, y ​​hay algunas dificultades fundamentales involucradas: si usted p. comience eligiendo un color verde brillante, y luego intente cambiar el tono a, digamos, azul, encontrará que es no posible sin ningún tinte o sombrear el color: un monitor RGB normal simplemente no puede producir un azul saturado con el mismo brillo que un verde saturado, ni los espacios de color RGB estándar pueden representar uno. Por lo tanto, algún tipo de compromiso tendría que hacerse en tales casos.

19
Ilmari Karonen

@DavidGrinberg tiene un buen punto sobre la mayoría de los usuarios que no se preocupan por tener más de un pequeño número de colores para elegir. Sin embargo, puede atender tanto a ese grupo como a las personas que desean más opciones con una interfaz que admite una mejora progresiva.

Microsoft ha proporcionado uno con Windows durante muchos años. Tuve problemas para encontrar capturas de pantalla más nuevas en inglés; pero la apariencia es la misma al menos a través de W7. Para un diseño totalmente nuevo, probablemente reduciría el número total o los colores estándar y ocultaría la sección de colores personalizados en la versión pequeña a menos que el usuario ya haya definido al menos un color personalizado.

http://www.functionx.com/dlgboxes/color1.gif

enter image description here

Si el usuario puede seleccionar diferentes colores para diferentes elementos, considere darles una lista de paletas predefinidas para elegir, lo que reduce la interacción del usuario y la posibilidad de que la migraña induzca esquemas de color amarillo y morado

http://colorbrewer2.org/# ColorBrewer tiene una lista de paletas, en este caso específicamente para la visualización de datos, pero habrá otras por ahí si no son adecuadas

5
mgraham

Aquí hay dos ideas que no son propuestas completas, solo bocetos muy toscos.

mockup

descargar fuente bmml - Wireframes creados con Balsamiq Mockups

Maqueta izquierda

Una representación de tonalidad-saturación-luminosidad/brillo/valor/intensidad/... de un cubo de espacio de color RGB da como resultado (típicamente) un cilindro, un "hexalinder" (prisma/cilindro con base hexagonal), una bipirámide hexagonal o una esfera. Para ambos tipos de bases, un disco o un hexágono, las coordenadas simples pueden especificarse mediante una combinación de los ejes rojo-cian, verde-magenta y azul-amarillo. (Es un cubo aplanado.) Esto combina angular tono y la saturación radial. El brillo, la luminosidad o el valor, es decir, la altura, se especifica mediante el eje blanco-negro.

HSL cylinder

Maqueta derecha

Muchos recolectores HSB/HSL/HSV/HSI no hacen obvia la conexión entre la selección visual y los valores numéricos. Este boceto intenta mostrar una forma de cómo se puede lograr esto.

Recuerde que este es un widget de entrada, por lo que los valores de salida/exportación son una preocupación secundaria. Aún así, algunas personas querrán comenzar con un color del que conocen alguna representación numérica: para eso están las pestañas y las entradas numéricas, y pegar también funcionaría, por supuesto.

4
Crissov

Varias respuestas aquí proponen selectores con controles numéricos separados para RGB/HSL. Es bueno tener estos controles, pero no son muy visuales y requieren algún tipo de prueba y error para funcionar. A continuación se muestra una imagen con controles visuales + numéricos de modo dual para RGB/HSL representados a la derecha.

Cuando opera uno de los controles deslizantes, el gradiente en los otros debería cambiar. Esto proporciona seis dimensiones de soporte visual para cambiar el color, a diferencia de uno o dos en otros recolectores (los recolectores generalmente tienen tres dimensiones, pero solo una o dos de ellas están pintadas con el color que se está utilizando).

Puede incluirlos con cualquier otro tipo de selector, si el espacio lo permite, pero podría funcionar mejor con algún tipo de paleta y una lista de colores recientemente seleccionados.

Absolute Color Picker example
(fuente: eltima.com )

4
Eugene Ryabtsev

enter image description hereenter image description here

No está completo ya que carece de la capacidad de usar hexadecimal, ingrese los canales por separado y también para recordar los colores.

Tiene :

  • Rayas grandes para una mejor selección
  • Uno para matices
  • Uno para un gradiente hacia el gris, saturación variable
  • Uno para un gradiente entre blanco y negro, valor variable
  • Un gran campo para previsualizar
  • La opción de variar el color del trazo hacia el color de fondo
  • Un botón de reinicio a blanco y negro

Es bastante delgado, por lo que no es realmente un cuadro de diálogo de color sino una herramienta de selección de color.

2
TaW