Не позволяйте сложной интеграции или проблемам цепочки поставок замедлить ваш выход на рынок. Забронируйте бесплатную консультацию с экспертной командой RJY для получения индивидуальной поддержки в проектировании и производстве.
Когда пользователь подходит к промышленной панели управления, умному термостату или медицинскому вентилятору легких, его ожидания уже сформированы смартфоном в кармане. Он ожидает плавной анимации, мгновенной обратной связи и интуитивно понятного интерфейса. Однако, как знает любой инженер встраиваемых систем или UI/UX-дизайнер, работающий на европейском и североамериканском рынках, проектирование пользовательского интерфейса для встраиваемого TFT-сенсорного дисплея принципиально отличается от проектирования для iOS или Android.
Вы работаете не с многоядерным гигагерцовым процессором и гигабайтами оперативной памяти. Зачастую вы работаете с микроконтроллером (MCU) STM32 или NXP, ограниченной флэш-памятью и цветовым пространством RGB565. Если вы попытаетесь перенести веб-интерфейс напрямую на TFT-сенсорный дисплей, результат будет медленным, неотзывчивым и визуально нарушенным.
Это подробное, высокоэффективное руководство раскрывает инженерные реалии и психологию дизайна, необходимые для создания безупречного, интуитивно понятного пользовательского интерфейса, специально адаптированного для встраиваемого TFT-сенсорного дисплея.
Прежде чем открыть Figma, Adobe XD или Sketch, вы должны понять физические и вычислительные ограничения вашего оборудования. Блестящий дизайн UI бесполезен, если MCU не может отобразить его с частотой 30 кадров в секунду (FPS).
Тип сенсорной панели, интегрированной в ваш TFT-сенсорный дисплей, полностью определяет ваш дизайн взаимодействия:
В промышленных или медицинских условиях пользователи часто находятся в состоянии стресса, отвлечены или носят средства индивидуальной защиты (СИЗ). Ваш UI должен учитывать “проблему толстых пальцев” и соответствовать эргономическим стандартам (таким как ISO 9241-11 и рекомендации ADA).
Закон Фиттса гласит, что время, необходимое для быстрого перемещения к целевой области, является функцией отношения расстояния до цели к ширине цели. Делайте кнопки большими.
Не размещайте кнопки слишком плотно друг к другу. Оставляйте минимум 2 мм до 3 мм мертвого пространства между интерактивными элементами. Кроме того, избегайте размещения критически важных кнопок действий (таких как “Аварийная остановка” или “Форматировать диск”) в крайних углах TFT-сенсорного дисплея. Крайние края стандартных емкостных и резистивных сенсорных панелей часто являются наименее чувствительными областями из-за наложения рамки и разводки датчиков. Размещайте критические кнопки с небольшим отступом от рамки.
Встраиваемый TFT-сенсорный дисплей не имеет контрастности уровня OLED современного iPhone. Вы должны проектировать свою цветовую палитру с защитой, чтобы компенсировать оптические характеристики оборудования.
Многие встраиваемые TFT-дисплеи используют 16-битный цветовой формат (RGB565), а не 24-битный True Color (RGB888) для экономии оперативной памяти. RGB565 позволяет отображать 65 536 цветов.
Если ваше устройство используется на открытом воздухе или на ярко освещенном заводском цехе, блики смоют тонкие цветовые различия.
Встраиваемые шрифты обычно являются предварительно отрисованными растровыми изображениями для экономии вычислительной мощности.
Даже при хорошо оптимизированном пользовательском интерфейсе TFT-сенсорный дисплей на базе микроконтроллера может загружать новый экран или обрабатывать сложную команду от 100 до 300 миллисекунд. Для человеческого мозга все, что превышает 100 мс, ощущается как “задержка”. Вы должны спроектировать интерфейс так, чтобы скрыть эту задержку.
Когда пользователь нажимает кнопку на смартфоне, тактильный мотор мгновенно вибрирует. Ваш TFT-сенсорный дисплей, скорее всего, не имеет тактильного мотора. Поэтому вы должны обеспечить мгновенную обратную связь. В различных средах. Обратная связь.
Если переход занимает более 300 мс (например, сохранение данных на SD-карту или получение списка Wi-Fi-сетей), не оставляйте экран замороженным. Пользователь подумает, что устройство зависло, и начнет хаотично нажимать на экран.
В промышленных и профессиональных средах пользователи выполняют задачи, а не просматривают контент casually. Когнитивная нагрузка, необходимая для работы с вашим устройством, должна быть близка к нулю.
Пользователь должен иметь возможность добраться до любой критической функции в течение трех касаний с главного экрана. Не прячьте важные элементы управления машиной в глубоких вложенных меню.
В отличие от приложений для смартфонов, использующих жесты смахивания для возврата, встроенный TFT-интерфейс всегда должен иметь постоянную панель навигации (обычно в верхней или нижней части экрана).
Преодоление разрыва между Figma-файлом дизайнера интерфейса и C++ кодом инженера-встраиваемщика исторически является самой болезненной частью разработки TFT-сенсорных дисплеев. К счастью, современные GUI-фреймворки произвели революцию в этом рабочем процессе.
Если вы разрабатываете для европейского или американского рынков, вам следует использовать один из следующих отраслевых стандартных фреймворков:
Проектирование интуитивно понятного интерфейса для TFT-сенсорного дисплея — это упражнение в инженерной эмпатии. Вы должны сопереживать ограничениям оборудования, гарантируя, что не перегружаете микроконтроллер ненужным графическим балластом. Что еще более важно, вы должны сопереживать конечному пользователю, который может работать с вашим устройством в условиях высокого стресса, плохого освещения или быстрого темпа.
Строго придерживаясь эргономичных сенсорных целей, используя принципы плоского дизайна для маскировки аппаратных ограничений и обеспечивая мгновенную визуальную обратную связь, вы поднимаете свой продукт от простого функционального устройства до премиального профессионального инструмента.
Вопрос: Мы разработали красивый интерфейс, но экран сильно мерцает при переходе между страницами. Как это исправить? О: Это называется “разрыв” (tearing). Это происходит, когда микроконтроллер обновляет буфер дисплея в то время, как TFT-контроллер находится в процессе отрисовки экрана. Вы должны реализовать двойную буферизацию. Это требует выделения достаточного объема ОЗУ для хранения двух полных кадровых буферов. Микроконтроллер полностью отрисовывает следующий экран в фоновом буфере, а затем переключает его на активный дисплей только во время периода VSYNC (вертикальной синхронизации). Двойную буферизацию. двойную буферизацию. Это требует выделения достаточного объема ОЗУ для хранения двух полных кадровых буферов. Микроконтроллер полностью отрисовывает следующий экран в фоновом буфере, а затем переключает его на активный дисплей только во время периода VSYNC (вертикальной синхронизации).
Вопрос: Можем ли мы использовать изображения PNG или JPEG в нашем встраиваемом интерфейсе? О: В целом, нет. Декодирование сжатых форматов изображений, таких как PNG или JPEG, требует огромных затрат процессора и занимает слишком много времени на микроконтроллере. GUI-фреймворки (такие как TouchGFX или LVGL) конвертируют ваши PNG в сырые C-массивы (растровые изображения) в процессе компиляции. Плата за это — сырые растровые изображения занимают значительно больше места во флеш-памяти.
Вопрос: Наш PCAP-сенсорный экран регистрирует ложные касания при попадании капель воды. Может ли интерфейс исправить это? О: Программное обеспечение может сделать лишь ограниченное количество для фильтрации емкостных шумов. Хотя вы можете реализовать алгоритмы “подавления дребезга” в коде контроллера касаний для игнорирования сверхбыстрых, хаотичных вводов, истинное решение лежит на уровне аппаратного обеспечения. Вам нужно настроить прошивку IC контроллера касаний (например, Goodix, FocalTech) для распознавания сигнатуры емкости воды в отличие от человеческого пальца, или переключиться на резистивный сенсорный экран, если устройство постоянно находится во влажной среде.
Вопрос: Почему мои пользовательские шрифты выглядят неровными и пиксельными на TFT-дисплее? О: Встраиваемые TFT-дисплеи лишены продвинутого субпиксельного сглаживания, присутствующего в настольных операционных системах. Чтобы исправить это, убедитесь, что ваш GUI-фреймворк настроен на генерацию шрифтов с 4-битным на пиксель (4bpp) сглаживанием. Это сгладит края за счет добавления полупрозрачных пикселей вокруг букв. Кроме того, придерживайтесь жирных шрифтов без засечек, которые естественным образом лучше отображаются на экранах с низким разрешением. 4-битным на пиксель (4bpp) сглаживанием. Это сгладит края за счет добавления полупрозрачных пикселей вокруг букв. Кроме того, придерживайтесь жирных шрифтов без засечек, которые естественным образом лучше отображаются на экранах с низким разрешением.
Вопрос: Как спроектировать интерфейс для пользователей с дальтонизмом в промышленных условиях? О: Никогда не полагайтесь только на цвет для передачи критической информации. Если состояние машины меняется на “Ошибка”, не просто меняйте цвет индикатора статуса с зеленого на красный. Дополнительно измените форму (например, с зеленого круга на красный треугольник) и добавьте явный текст (например, “НЕИСПРАВНОСТЬ”). Это обеспечивает соответствие стандартам ADA и гарантирует безопасность независимо от остроты зрения пользователя.
