Pull to refresh
0
Microsoft
Microsoft — мировой лидер в области ПО и ИТ-услуг

Улучшение элементов управления в Microsoft Edge на Chromium

Reading time 3 min
Views 4.9K
Original author: Microsoft
С тех пор, как мы начали работу над следующей версией Microsoft Edge, основанной на Chromium, мы исследовали способы модернизации элементов управления, чтобы обеспечить современный внешний вид, а также удобство сенсорного управления и доступность, которые наши пользователи ожидают от браузера сегодня.

В течение последних нескольких месяцев мы тесно сотрудничали с командой Google Chrome в этом проекте и рады поделиться обновленными элементами управления, которые будут доступны для сборок Microsoft Edge Insider или других браузеров на Chromium.



Более современный внешний вид


Эти изменения обеспечивает улучшенный внешний вид элементов управления и помогают обеспечить непрерывность дизайна и удобство работы с остальным браузером. Мы тесно сотрудничаем с командой разработчиков Google Chrome, чтобы найти баланс между нашими представлениями о дизайне, а также не забыть о современных реалиях. Все это позволит чувствовать себя как дома в различных браузерах на Chromium. Ниже приведено сравнение элементов управления по умолчанию в Chromium сегодня, по сравнению с обновленными элементами управления, над которыми мы работаем:
  Текущее Предстоящее
Радио
Флажок
Текст
Кнопки
Выбор
Пароль
Цвет
Счетчик
Прогресс
Диапазон
Дата
Время

Улучшенная сенсорная поддержка


Устройства Windows имеют широкий спектр форм-факторов и способов ввода, включая традиционные настольные и портативные ПК, устройства 2-в-1 и другие планшеты и перьевые устройства. Мы услышали ваши отзывы о том, как лучше работать с сенсорным вводом в наших ранних сборках Chromium Preview, и намеревались провести инвентаризацию элементов управления, чтобы определить возможности для улучшения сенсорного взаимодействия.



Хороший пример улучшений сенсорного ввода — ввод времени; В настоящее время Chromium предоставляет текстовый ввод, кнопку очистки и спиннер. Наше исследование показало, что при большом размере кончика пальца может быть сложно точно использовать маленькие элементы управления, которые расположены слишком близко друг к другу, поэтому рекомендуемый размер элемента управления 23×23 пикселя (13×13 DLU) является хорошим минимальным размером интерактивного элемента управления для любого устройства ввода. В отличие от этого, элементы управления вращением с разрешением 15×11 пикселей слишком малы для эффективного использования при касании.

Более доступные элементы управления


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

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

Затем мы провели интерактивные пользовательские исследования, чтобы определить лучший вариант по сравнению с текущим прямоугольником фокуса Chromium по умолчанию в качестве базовой модели. Мы обнаружили, что, хотя предпочтения были разными, один из вариантов был явным лидером по доступности. Мы выбрали этот вариант в качестве нового прямоугольника фокуса в Microsoft Edge, который вы можете увидеть ниже:



Кроме того, все эти элементы управления теперь поддерживают Windows High Contrast, что позволяет пользователю выделять конкретные цвета для улучшения визуального восприятия. Все сайты, использующие встроенные элементы управления, получат выгоду от этих обновленных элементов управления всякий раз, когда пользователь находится в режиме высокой контрастности, без каких-либо дополнительных действий веб-разработчиков. Тем не менее, веб-разработчики могут корректировать эти стили, если они хотят, используя новое свойство CSS forced-color-adjust и запрос prefers-contrast.



Мы также обновили нашу реализацию, чтобы обеспечить отличную поддержку клавиатуры для каждого элемента управления. Например, в новом цветовом вводе вы можете перемещаться по одному значению с помощью клавиш со стрелками; Если вы удерживаете клавишу Ctrl в Windows (клавиша Cmd в Mac), вы будете перемещаться на 10 значений, что позволяет быстро перемещаться по цветовой воронке.

Наконец, мы обновили сопоставления для элементов управления, чтобы они соответствовали спецификации сопоставлений API специальных возможностей HTML , чтобы обеспечить удобство для пользователей, использующих вспомогательные технологии (например, средства чтения с экрана).
Tags:
Hubs:
+16
Comments 20
Comments Comments 20

Articles

Information

Website
www.microsoft.com
Registered
Founded
Employees
Unknown
Location
США