Ne laissez pas l'intégration complexe ou les problèmes de chaîne d'approvisionnement ralentir votre mise sur le marché. Réservez une consultation gratuite avec l'équipe d'experts RJY pour un accompagnement sur mesure en conception et fabrication.
Lorsqu’un utilisateur s’approche d’un panneau de contrôle industriel, d’un thermostat intelligent ou d’un ventilateur médical, ses attentes ont déjà été façonnées par le smartphone qu’il a dans sa poche. Il s’attend à des animations fluides, un retour instantané et une disposition intuitive. Cependant, comme tout ingénieur embarqué ou concepteur UI/UX travaillant sur les marchés européens et nord-américains le sait, concevoir une interface utilisateur pour un écran tactile TFT embarqué est une discipline fondamentalement différente de la conception pour iOS ou Android. Écran tactile TFT Vous ne travaillez pas avec un processeur multicœur gigahertz et des gigaoctets de RAM. Vous travaillez souvent avec un microcontrôleur (MCU) STM32 ou NXP, une mémoire flash limitée et un espace colorimétrique RGB565. Si vous tentez de porter une interface web directement sur un écran tactile TFT, le résultat sera lent, peu réactif et visuellement dégradé.
Ce guide complet et hautement actionnable décompose les réalités techniques et la psychologie de conception nécessaires pour construire une interface utilisateur irréprochable et intuitive, spécifiquement adaptée au matériel des écrans tactiles TFT embarqués.
Avant d’ouvrir Figma, Adobe XD ou Sketch, vous devez comprendre les contraintes physiques et computationnelles de votre matériel. Une conception UI brillante est inutile si le MCU ne peut pas la rendre à 30 images par seconde (FPS).
MCU (Microcontrôleur) :.
Prend en charge le multi-touch et les balayages légers (comme un smartphone). Vous pouvez utiliser les gestes de pincement pour zoomer et de balayage pour faire défiler.
La loi de Fitts stipule que le temps nécessaire pour se déplacer rapidement vers une zone cible est fonction du rapport entre la distance à la cible et la largeur de la cible. Rendez vos boutons grands.
Mains nues (Consommateur/Maison intelligente) :.
2 mm à 3 mm d’espace mort entre les éléments interactifs. De plus, évitez de placer les boutons d’action critiques (comme « Arrêt d’urgence » ou « Formater le disque ») dans les coins extrêmes de l’écran tactile TFT. Les bords extrêmes des panneaux tactiles PCAP et résistifs standard sont souvent les zones les moins sensibles en raison du recouvrement de la lunette et du routage des capteurs. Placez les boutons critiques légèrement en retrait de la lunette. Un écran tactile TFT embarqué ne possède pas les rapports de contraste de niveau OLED d’un iPhone moderne. Vous devez concevoir votre palette de couleurs de manière défensive pour compenser les caractéristiques optiques du matériel.
De nombreux écrans TFT embarqués utilisent un format couleur 16 bits (RGB565) plutôt que 24 bits True Color (RGB888) pour économiser la RAM. Le RGB565 permet 65 536 couleurs.
Le problème :.
Évitez le texte à faible contraste :.
Évitez les polices fines et élégantes avec empattement. Elles sembleront pixellisées et dégradées sur un écran tactile TFT de résolution 1024×600.
Même avec une interface utilisateur bien optimisée, un écran tactile TFT piloté par un MCU peut prendre 100 à 300 millisecondes pour charger un nouvel écran ou traiter une commande complexe. Pour le cerveau humain, tout ce qui dépasse 100 ms est perçu comme un “ lag ”. Vous devez concevoir l’interface utilisateur pour masquer ce délai.
Lorsqu’un utilisateur appuie sur un bouton d’un smartphone, le moteur haptique vibre instantanément. Votre écran tactile TFT ne dispose probablement pas de moteur haptique. Par conséquent, vous devez fournir un retour instantané. visuel Retour instantané.
Si une transition doit prendre plus de 300 ms (par exemple, sauvegarder des données sur une carte SD ou récupérer des réseaux Wi-Fi), ne laissez pas l’écran figé. L’utilisateur pensera que l’appareil a planté et commencera à taper sur l’écran.
Dans les environnements industriels et professionnels, les utilisateurs effectuent des tâches, ils ne naviguent pas de manière décontractée. La charge cognitive nécessaire pour utiliser votre appareil doit être proche de zéro.
Un utilisateur doit pouvoir accéder à toute fonction critique en trois tapotements depuis l’écran d’accueil. N’enfouissez pas les commandes essentielles de la machine dans des menus profonds et imbriqués.
Contrairement à une application pour smartphone qui utilise des gestes de balayage pour revenir en arrière, une interface utilisateur TFT embarquée doit toujours comporter une barre de navigation persistante (généralement en haut ou en bas de l’écran).
Combler le fossé entre le fichier Figma du concepteur d’interface utilisateur et le code C++ de l’ingénieur embarqué est historiquement la partie la plus douloureuse du développement d’écrans tactiles TFT. Heureusement, les frameworks d’interface utilisateur modernes ont révolutionné ce flux de travail.
Si vous développez pour les marchés européens ou américains, vous devriez utiliser l’un des frameworks standard de l’industrie suivants :
Concevoir une interface utilisateur intuitive pour un écran tactile TFT est un exercice d’empathie technique. Vous devez comprendre les limites du matériel, en veillant à ne pas surcharger le MCU avec un superflu graphique inutile. Plus important encore, vous devez faire preuve d’empathie envers l’utilisateur final, qui peut utiliser votre appareil dans un environnement stressant, mal éclairé ou rapide.
En respectant strictement les cibles tactiles ergonomiques, en utilisant des principes de design plat pour masquer les contraintes matérielles et en fournissant un retour visuel instantané, vous élevez votre produit d’une simple machine fonctionnelle à un outil professionnel de qualité supérieure.
Q : Nous avons conçu une belle interface utilisateur, mais l’écran scintille violemment lors des transitions entre les pages. Comment résoudre ce problème ? A : C’est ce qu’on appelle le “ tearing ”. Cela se produit lorsque le MCU met à jour le tampon d’affichage alors que le contrôleur TFT est en train de dessiner l’écran. Vous devez implémenter ESP32 avec PSRAM), vous pouvez mettre en œuvre le. Cela nécessite de réserver suffisamment de RAM pour contenir deux tampons d’image complets. Le MCU dessine l’écran suivant entièrement dans le tampon d’arrière-plan, puis l’échange vers l’affichage actif uniquement pendant la période VSYNC (synchronisation verticale).
Q : Pouvons-nous utiliser des images PNG ou JPEG dans notre interface utilisateur embarquée ? A : Généralement, non. Le décodage de formats d’image compressés comme PNG ou JPEG nécessite une charge CPU massive et prend trop de temps sur un MCU. Les frameworks d’interface utilisateur (comme TouchGFX ou LVGL) convertiront vos PNG en tableaux C bruts (bitmaps) lors du processus de compilation. Le compromis est que les bitmaps bruts occupent beaucoup plus d’espace mémoire flash.
Q : Notre écran tactile PCAP enregistre des touches fantômes lorsque des gouttes d’eau le frappent. L’interface utilisateur peut-elle résoudre ce problème ? A : Le logiciel ne peut faire qu’un nombre limité de choses pour filtrer le bruit capacitif. Bien que vous puissiez implémenter des algorithmes de “ debounce ” dans votre code de contrôleur tactile pour ignorer les entrées ultra-rapides et erratiques, la véritable solution est matérielle. Vous devez régler le firmware du circuit intégré du contrôleur tactile (par exemple, Goodix, FocalTech) pour reconnaître la signature capacitive de l’eau par rapport à un doigt humain, ou passer à un écran tactile Résistif si l’appareil est constamment mouillé.
Q : Pourquoi mes polices personnalisées semblent-elles irrégulières et pixelisées sur l’écran TFT ? A : Les écrans TFT embarqués manquent de l’anti-aliasing avancé au niveau des sous-pixels présent dans les systèmes d’exploitation de bureau. Pour résoudre ce problème, assurez-vous que votre framework d’interface utilisateur est configuré pour générer des polices avec un anti-aliasing de 4 bits par pixel (4bpp). Cela lissera les bords en ajoutant des pixels semi-transparents autour des lettres. De plus, utilisez des polices sans-serif en gras, qui se rendent naturellement mieux sur les écrans à basse résolution.
Q : Comment concevoir pour les utilisateurs daltoniens dans un cadre industriel ? A : Ne vous fiez jamais uniquement à la couleur pour transmettre des informations critiques. Si un état de la machine passe en “ Erreur ”, ne vous contentez pas de faire passer un indicateur d’état du vert au rouge. Modifiez également la forme (par exemple, d’un cercle vert à un triangle rouge) et ajoutez un texte explicite (par exemple, “ DÉFAUT ”). Cela garantit la conformité ADA et assure la sécurité, quelle que soit l’acuité visuelle de l’utilisateur.
