Поделиться через


Основы Light-Aware пользовательских интерфейсов

Термин "пользовательский интерфейс с учетом света " относится к программе, которая использует данные датчика света для оптимизации содержимого, элементов управления и другой графики для оптимального взаимодействия с пользователем во многих условиях освещения, от темноты до прямых солнечных лучей. Возможно, наиболее важными оптимизациями являются удобочитаемость, удобочитаемость и взаимодействие с прямым солнечным светом, так как экраны обычно не работают хорошо в этих условиях. В этом разделе мы сосредоточимся на трех свойствах пользовательского интерфейса: масштаб, контрастность и цвет. Эти свойства можно изменить, чтобы оптимизировать визуальное взаимодействие с пользователем.

Масштабирование и яркость

Как правило, более крупные объекты легче видеть. Если компьютер находится в неблагоприятных условиях освещения (например, под прямым солнечным светом), увеличение размера содержимого может помочь улучшить удобочитаемость и интерактивность этого содержимого.

На следующих фотографиях ноутбук сравнивается с прямым солнечным светом с типичными уровнями яркости экрана и масштаба с ноутбуком в одинаковых условиях освещения с учетом освещения пользовательского интерфейса. На первой фотографии показан дисплей, равный 40 % яркости с нормальным уровнем масштаба. На второй фотографии показан дисплей с 100% яркостью с увеличенным уровнем масштаба.

дисплей ноутбука с яркостью 40 % с обычными уровнями масштабирования дисплей ноутбука на 100 % яркость с увеличенными уровнями масштабирования

Изменяя размер шрифта

Если увеличить размер шрифта, используемого для отображения текста, текст становится более разборчивым в неблагоприятных условиях освещения. Стиль шрифта, лицо шрифта и другие характеристики также могут быть различными, чтобы оптимизировать удобочитаемость и удобочитаемость. Например, шрифты без засечек обычно проще читать, чем шрифты засечек.

Шрифт sans serif по сравнению со шрифтом serif

Масштабирование содержимого

Если программа реализует масштабирование, его можно использовать для масштабирования содержимого. Увеличение увеличивает читаемость при уменьшении масштаба, что позволяет программе отображать больше содержимого.

Изменение свойств отрисовки векторной графики

Если программа отрисовывает векторные графические примитивы (например, линии, круги и т. д.), характеристики отрисовки можно изменить для оптимизации удобочитаемости. Например, если программа отрисовывает прямоугольники, ширина линий, используемых для отрисовки прямоугольников, может быть масштабирована (шире для внешних помещений и более узкими для помещений), чтобы оптимизировать внешний вид и удобочитаемость векторного графического содержимого.

Контраст

При использовании ЖК-экранов в условиях яркого освещения общая контрастность экрана снижается. Когда экран залит светом (например, от солнца), восприятие пользователем темных областей на экране уменьшается. Как правило, это делает важным повысить контрастность содержимого и пользовательского интерфейса при ярком освещении. Может быть желательно использовать монохромную цветовую схему, чтобы обеспечить максимальную контрастность в этих условиях освещения. Другой способ увеличить контрастность заключается в замене содержимого с низкой контрастностью (например, в режиме аэрофотоснимки в программе сопоставления) элементами с высокой контрастностью (например, режимом черно-на-белой уличной векторной графики).

Цвет

Цвета, которые программа использует для отображения своего содержимого, могут существенно повлиять на общее взаимодействие с пользователем и удобочитаемость отображаемого содержимого. Изменяя цветовую контрастность на основе внешнего освещения, вы можете сделать содержимое более удобочитаемым в неблагоприятных условиях освещения, таких как яркий внешний свет или темный внутренний свет.

Одним из способов повышения контрастности цветов является насыщенность цвета. Другой способ — использование дополнительных цветов вместо смежных цветов для повышения удобочитаемости. Дополнительные цвета — это пары цветов, которые имеют противоположный оттенок, например синий и желтый. В следующем параллельном примере показано, как использование дополнительных цветов может помочь улучшить цветовую контрастность.

пример влияния цвета текста на удобочитаемость.