Lassen Sie nicht komplexe Integration oder Lieferkettenprobleme Ihre Markteinführung verzögern. Vereinbaren Sie eine kostenlose Beratung mit dem RJY-Expertenteam für maßgeschneiderte Design- und Fertigungsunterstützung.
Wenn ein Benutzer an ein industrielles Bedienfeld, einen intelligenten Thermostat oder ein medizinisches Beatmungsgerät tritt, wurde seine Erwartung bereits durch das Smartphone in seiner Tasche geprägt. Er erwartet flüssige Animationen, sofortiges Feedback und ein intuitives Layout. Wie jedoch jeder Embedded-Ingenieur oder UI/UX-Designer, der auf dem europäischen und nordamerikanischen Markt tätig ist, weiß, unterscheidet sich das Design einer Benutzeroberfläche für ein eingebettetes TFT-Touchdisplay grundlegend von dem Design für iOS oder Android.
Sie arbeiten nicht mit einem Multi-Core-Gigahertz-Prozessor und Gigabyte RAM. Sie arbeiten oft mit einem STM32- oder NXP-Mikrocontroller (MCU), begrenztem Flash-Speicher und einem RGB565-Farbraum. Wenn Sie versuchen, eine webbasierte Benutzeroberfläche direkt auf ein TFT-Touchdisplay zu portieren, wird das Ergebnis träge, reaktionslos und visuell fehlerhaft sein.
Dieser umfassende, hochgradig umsetzbare Leitfaden erläutert die technischen Realitäten und die Designpsychologie, die erforderlich sind, um eine fehlerfreie, intuitive Benutzeroberfläche zu erstellen, die speziell für eingebettete TFT-Touchdisplay-Hardware zugeschnitten ist.
Bevor Sie Figma, Adobe XD oder Sketch öffnen, müssen Sie die physischen und rechnerischen Einschränkungen Ihrer Hardware verstehen. Ein brillantes UI-Design ist nutzlos, wenn der MCU es nicht mit 30 Bildern pro Sekunde (FPS) rendern kann.
Die Art des in Ihr TFT-Touchdisplay integrierten Touchpanels bestimmt vollständig Ihr Interaktionsdesign:
In einem industriellen oder medizinischen Umfeld sind Benutzer oft gestresst, abgelenkt oder tragen persönliche Schutzausrüstung (PSA). Ihre Benutzeroberfläche muss das “Fat-Finger-Problem” berücksichtigen und ergonomischen Standards (wie ISO 9241-11 und ADA-Richtlinien) entsprechen.
Das Fitts’sche Gesetz besagt, dass die Zeit, die benötigt wird, um sich schnell zu einem Zielbereich zu bewegen, eine Funktion des Verhältnisses zwischen der Entfernung zum Ziel und der Breite des Ziels ist. Machen Sie Ihre Schaltflächen groß.
Packen Sie Schaltflächen nicht zu eng zusammen. Lassen Sie mindestens 2mm bis 3mm toten Raum zwischen interaktiven Elementen. Vermeiden Sie es außerdem, kritische Aktionsschaltflächen (wie “Not-Aus” oder “Laufwerk formatieren”) in den äußersten Ecken des TFT-Touchdisplays zu platzieren. Die äußersten Ränder von Standard-PCAP- und resistiven Touchpanels sind aufgrund der Blendenabdeckung und des Sensor-Routings oft die unempfindlichsten Bereiche. Platzieren Sie kritische Schaltflächen leicht versetzt von der Blende.
Ein eingebettetes TFT-Touchdisplay hat nicht die OLED-Kontrastverhältnisse eines modernen iPhones. Sie müssen Ihre Farbpalette defensiv gestalten, um die optischen Eigenschaften der Hardware zu kompensieren.
Viele eingebettete TFT-Displays verwenden ein 16-Bit-Farbformat (RGB565) anstelle von 24-Bit-Echtfarben (RGB888), um RAM zu sparen. RGB565 ermöglicht 65.536 Farben.
Wenn Ihr Gerät im Freien oder in einer hell beleuchteten Fabrikhalle verwendet wird, werden Blendungen subtile Farbunterschiede auswaschen.
Eingebettete Schriftarten sind in der Regel vorgerenderte Bitmaps, um Rechenleistung zu sparen.
Selbst bei einer gut optimierten Benutzeroberfläche kann ein MCU-gesteuertes TFT-Touchdisplay 100 bis 300 Millisekunden benötigen, um einen neuen Bildschirm zu laden oder einen komplexen Befehl zu verarbeiten. Für das menschliche Gehirn fühlt sich alles über 100 ms wie “Verzögerung” an. Sie müssen die Benutzeroberfläche so gestalten, dass diese Verzögerung maskiert wird.
Wenn ein Benutzer auf einem Smartphone eine Taste drückt, vibriert der haptische Motor sofort. Ihr TFT-Touchdisplay hat wahrscheinlich keinen haptischen Motor. Daher müssen Sie sofortiges Feedback bereitstellen. Hinweise Feedback.
Wenn ein Übergang länger als 300 ms dauert (z. B. Speichern von Daten auf einer SD-Karte oder Abrufen von Wi-Fi-Netzwerken), lassen Sie den Bildschirm nicht eingefroren. Der Benutzer denkt, das Gerät sei abgestürzt, und beginnt, auf den Bildschirm zu hämmern.
In industriellen und professionellen Umgebungen führen Benutzer Aufgaben aus, sie browsen nicht beiläufig. Die kognitive Belastung, die für die Bedienung Ihres Geräts erforderlich ist, muss nahezu null sein.
Ein Benutzer sollte jede kritische Funktion innerhalb von drei Tipps vom Startbildschirm aus erreichen können. Vergraben Sie keine wesentlichen Maschinensteuerungen in tiefen, verschachtelten Menüs.
Im Gegensatz zu einer Smartphone-App, die Wischgesten zum Zurückgehen verwendet, sollte eine eingebettete TFT-Benutzeroberfläche immer eine dauerhafte Navigationsleiste (normalerweise oben oder unten auf dem Bildschirm) aufweisen.
Die Überbrückung der Lücke zwischen der Figma-Datei des UI-Designers und dem C++-Code des Embedded-Ingenieurs ist historisch gesehen der schmerzhafteste Teil der TFT-Touchdisplay-Entwicklung. Glücklicherweise haben moderne GUI-Frameworks diesen Arbeitsablauf revolutioniert.
Wenn Sie für den europäischen oder US-amerikanischen Markt entwickeln, sollten Sie eines der folgenden branchenüblichen Frameworks verwenden:
Das Entwerfen einer intuitiven Benutzeroberfläche für ein TFT-Touchdisplay ist eine Übung in technischem Einfühlungsvermögen. Sie müssen sich in die Einschränkungen der Hardware hineinversetzen und sicherstellen, dass Sie den MCU nicht mit unnötigem grafischem Ballast überlasten. Noch wichtiger ist, dass Sie sich in den Endbenutzer hineinversetzen müssen, der Ihr Gerät möglicherweise in einer stressigen, schlecht beleuchteten oder schnelllebigen Umgebung bedient.
Durch die strikte Einhaltung ergonomischer Touch-Ziele, die Verwendung von Flat-Design-Prinzipien zur Maskierung von Hardware-Einschränkungen und die Bereitstellung sofortiger visueller Rückmeldungen heben Sie Ihr Produkt von einer bloßen funktionalen Maschine zu einem hochwertigen, professionellen Werkzeug.
F: Wir haben eine schöne Benutzeroberfläche entworfen, aber der Bildschirm flackert heftig, wenn wir zwischen Seiten wechseln. Wie beheben wir das? A: Dies wird als “Tearing” bezeichnet. Es tritt auf, wenn der MCU den Anzeigepuffer aktualisiert, während der TFT-Controller gerade dabei ist, den Bildschirm zu zeichnen. Sie müssen ESP32 mit PSRAM verwenden), können Sie. implementieren. Dies erfordert, dass genügend RAM reserviert wird, um zwei vollständige Framebuffer zu halten. Der MCU zeichnet den nächsten Bildschirm vollständig im Hintergrundpuffer und tauscht ihn dann nur während der VSYNC-Periode (Vertical Synchronization) gegen die aktive Anzeige aus.
F: Können wir PNG- oder JPEG-Bilder in unserer eingebetteten Benutzeroberfläche verwenden? A: Im Allgemeinen nein. Das Dekodieren komprimierter Bildformate wie PNG oder JPEG erfordert massive CPU-Overhead und dauert auf einem MCU zu lange. UI-Frameworks (wie TouchGFX oder LVGL) konvertieren Ihre PNGs während des Kompilierungsprozesses in rohe C-Arrays (Bitmaps). Der Nachteil ist, dass rohe Bitmaps deutlich mehr Flash-Speicherplatz belegen.
F: Unser PCAP-Touchscreen registriert Geisterberührungen, wenn Wassertropfen darauf fallen. Kann die Benutzeroberfläche das beheben? A: Software kann nur begrenzt kapazitives Rauschen herausfiltern. Während Sie “Entprell”-Algorithmen in Ihrem Touch-Controller-Code implementieren können, um ultraschnelle, unregelmäßige Eingaben zu ignorieren, liegt die wahre Lösung hardwarebasiert. Sie müssen die Firmware des Touch-Controller-ICs (z. B. Goodix, FocalTech) abstimmen, um die Kapazitätssignatur von Wasser im Vergleich zu einem menschlichen Finger zu erkennen, oder auf einen resistiven Touchscreen umsteigen, wenn das Gerät ständig nass ist.
F: Warum sehen meine benutzerdefinierten Schriftarten auf dem TFT-Display gezackt und pixelig aus? A: Eingebetteten TFTs fehlt die fortschrittliche Subpixel-Antialiasing, die in Desktop-Betriebssystemen zu finden ist. Um dies zu beheben, stellen Sie sicher, dass Ihr UI-Framework so eingestellt ist, dass es Schriftarten mit 4-Bit-pro-Pixel (4bpp) Antialiasing generiert.. Dies glättet die Kanten, indem halbtransparente Pixel um die Buchstaben herum hinzugefügt werden. Bleiben Sie außerdem bei fetten, serifenlosen Schriftarten, die auf Bildschirmen mit niedrigerer Auflösung von Natur aus besser dargestellt werden.
F: Wie entwerfen wir für farbenblinde Benutzer in einer industriellen Umgebung? A: Verlassen Sie sich niemals ausschließlich auf Farbe, um kritische Informationen zu übermitteln. Wenn ein Maschinenzustand auf “Fehler” wechselt, ändern Sie nicht einfach eine Statusanzeige von Grün auf Rot. Ändern Sie zusätzlich die Form (z. B. von einem grünen Kreis zu einem roten Dreieck) und fügen Sie expliziten Text hinzu (z. B. “STÖRUNG”). Dies gewährleistet die Einhaltung der ADA-Richtlinien und garantiert Sicherheit unabhängig von der Sehschärfe des Benutzers.
