web-dev-qa-db-fra.com

Sélecteur de couleurs dans les appareils tactiles

J'aimerais connaître les modèles de conception pour les sélecteurs de couleurs qui fonctionneraient bien sur les appareils tactiles, plus précisément sur les tablettes. Cela devrait être intuitif, c'est pour les personnes non expérimentées et spécialement pour enfants.

J'ai fait des recherches et trouvé également de bonnes réponses ici et ici, mais je ne suis pas satisfait de tout simplement parce que ceux basés sur des cercles ne sont pas assez simples - et ils ne sont pas très précis car je vais utiliser un doigt de ne pas choisir un pointeur de souris -, et ceux avec des valeurs prédéfinies n'offrent tout simplement pas une large gamme de couleurs.

Donc, pour résumer, je peux énumérer ces exigences:

  • simplicité, car il sera utilisé par des non-professionnels;
  • appareils tactiles uniquement;
  • taille de l'écran: tablettes;
  • grande gamme de couleurs.
2
Roberto

Comme il va être utilisé par des non-professionnels, je suggère d'utiliser des échantillons en premier lieu. C'est un excellent point de départ, offrant souvent un bon équilibre entre le choix et la convivialité pour une telle utilisation.

En deuxième niveau (uniquement pour les situations où les échantillons ne suffisent pas à l'utilisateur), vous pouvez en effet fournir un sélecteur de couleurs en option. Vous avez ici les options suivantes:

  • linéaire (séquentiel) - où chaque couleur est suivie d'une autre (vous contrôlez essentiellement la valeur de la teinte et devez ajouter un autre contrôleur pour la saturation et la luminosité). Celui-ci est le mose intuitif parmi ceux contrôlés par le curseur, à mon avis.

  • multi-facteur - avec des curseurs utilisés pour contrôler séparément différents facteurs de couleur, par ex. rouge, vert et bleu (ou CMJN, ou encore LAB plus complexe). Problème principal: difficile à comprendre pour les débutants.

  • bidimensionnel - qui a l'avantage sur ceux mentionnés précédemment, car sur un espace vous pouvez contrôler deux facteurs (teinte et saturation ou point noir), mais vous avez encore besoin d'un autre contrôle pour ajouter le troisième (par exemple, pas pour les appareils tactiles mais toujours pour communiquer l'idée: http://www.makeuseof.com/tag/raphaelcolorpicker-simple-color-picker/ ). Problème principal: réglage fin (résolution tactile).

Il y a aussi "le chemin du milieu" , où vous pouvez offrir aux utilisateurs quelque chose entre les échantillons et le sélecteur de couleurs, comme ici: http: // www.w3schools.com/tags/ref_colorpicker.asp

Pour les appareils tactiles, je suggérerais un aperçu en direct de la couleur sélectionnée quelque part au-dessus/à côté du doigt , afin qu'elle ne soit pas couverte par le bout des doigts.

Ci-dessous, vous pouvez trouver un sélecteur de couleurs dans Adobe Ideas, où vous en avez implémenté certains: au début, l'utilisateur n'affiche que les échantillons, puis, après avoir cliqué sur le > chevron, il peut accéder aux curseurs, RVB ou HSL (ne tenez pas compte de ce thème, il est utilisé pour une personnalisation supplémentaire) - et la couleur est affichée dans la zone "couleur" à gauche, donc l'utilisateur ne le fait pas couvrez-le avec la main.

enter image description here

3
Dominik Oslizlo