Разработка стиля фокуса | Кодементор

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

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

Я хочу задокументировать свои исследования и выводы в этой статье. Я надеюсь, что это поможет вам:

1. Поймите проблемы со стилем фокуса по умолчанию
2. Подарите вам немного вдохновения создавайте собственные стили фокусировки

Давайте начнем с обсуждения плюсов и минусов стандартных стилей фокуса браузера.

Плюсы и минусы по умолчанию

Плюсы

Стиль фокусировки по умолчанию великолепен, потому что мы знакомы с этим. Когда мы видим синее кольцо вокруг чего-то, мы знаем, что оно в фокусе.

Примечание. Поскольку стиль фокусировки по умолчанию представляет собой кольцо вокруг содержимого, я буду использовать термины «кольцо фокусировки» и «стиль фокусировки» как синонимы.

Это также здорово, потому что вам не нужно писать код чтобы создать удобное кольцо фокусировки.

Минусы

Вот основная проблема. Стиль фокуса по умолчанию отличается в разных браузерах. Они непоследовательны.

• Safari: синий сплошной контур
• Firefox: тонкий пунктирный контур
• Chrome: синий размытый контур
  

Вот вторая большая проблема. Фокусу по умолчанию не хватает контраста в определенных ситуациях.

Тонкий пунктирный контур Firefox не контрастирует на страницах с белым фоном.. Контуры почти не видно. К счастью, Firefox меняет контур с черного на белый на темном фоне. Контраст в порядке.

Синим контурам Safari и Chrome не хватает контраста на страницах с темным фоном.. Контраст будет еще хуже, если вы использовали синий фон.

Третья проблема. Размытие кольца фокусировки в Chrome делает элемент не сфокусированным.

Кольцо фокусировки предназначено для привлечения внимания к сфокусированному элементу. Если вы размоете кольцо фокусировки, вы потеряете фокус. Зачем вам привлекать внимание к элементу, но в то же время отвлекать внимание? Это не имеет смысла. Ты говоришь мне сосредоточиться или нет?

Четвертая проблема. Это больше дизайнерская вещь. Когда вы думаете о брендинге, вы хотите, чтобы у пользователей был постоянный опыт на вашем сайте (насколько это возможно). Не имеет значения, используют ли они Safari, Chrome или Firefox.

Фокус — это маленькая часть всего опыта. У нас есть инструменты, чтобы убедиться, что фокус остается согласованным в разных браузерах. Это совсем не сложно!

Если вы «просто используете значение по умолчанию», означает ли это, что фокусировка — это второстепенная задача в процессе проектирования?

Фокус вдохновения

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

CSS-трюки

CSS Tricks использовали кольцо фокусировки по умолчанию для каждого элемента.

Есть крошечное дополнение к ссылкам. Если вы сосредоточитесь на ссылках, они получат цветовой градиент. Мне нравится эта обработка цветового градиента. Это приносит массу индивидуальности на сайт.

Тем не менее, кнопки не получают никакой специальной обработки. Если вы фокусируетесь на кнопках, вы видите только стиль фокуса по умолчанию. Кроме того, кольцо фокусировки нечетко видно на темном фоне.

Хотя к биркам относились по-особому. Когда я сосредоточился на теге статьи, передо мной выскочила белая рамка. Я ясно вижу этот элемент по сравнению с другими.

Разрушительный журнал

Smashing Magazine использует темно-красный контур вместо стандартного. Мне было приятно смотреть. Контрастность достаточно велика для большинства ссылок.

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

Темно-красный контур не привлек моего внимания, когда я нажимал кнопку на красном фоне. color изменение с синего на красный было недостаточно, чтобы привлечь мое внимание.

В глубине души я, возможно, ожидал изменения в расположении кнопки. background-color. Независимо от моих ожиданий, я не понял, когда кнопка получила фокус.

Твиттер

Твиттер использовал комбинацию стилей для фокусировки. Они использовали:

1. Кольцо фокусировки по умолчанию для большинства элементов
2. Подчеркивание (без кольца фокусировки) для текстовых ссылок
3. Изменения фона и контура кнопок
   

Вот что я думаю.

1. Кольцо фокусировки по умолчанию не имеет достаточной контрастности
2. Подчеркнутые ссылки (без кольца фокусировки) не привлекают внимания. Мне пришлось искать то, на чем я сосредоточился.
3. Мне нравятся стили фокуса для кнопок. Небольшая разница в цветах фона придавала каждому действию индивидуальность.

На боковой панели Twitter выделял каждый пункт меню яркой рамкой (подозреваю, что с outline) и изменение background-color. Эти изменения были видны и привлекли мое внимание.

Однако стиль фокуса на кнопке «Твитнуть» не был таким очевидным, поскольку контур был светлым. Ему не хватает контраста по сравнению с яркими кнопками. background-color.

Слабый

Фокус Slack выглядит хорошо. Они ввели (крошечную) темно-синюю рамку плюс (более крупный) светло-голубой оттенок вокруг сфокусированных элементов.

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

(Хотя я использовал здесь слово «граница», я подозреваю, что он создан с box-shadow).

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

Формы ВТФ

Крис Койер указал на Формы ВТФ по Марк Отто во время моего исследования. Кольцо фокусировки для WTF Forms выглядит довольно хорошо! Он состоит из двух частей:

1. Белая рамка
2. И сплошная синяя окантовка

(Опять же, несмотря на то, что я использовал слово «граница», на самом деле она создана с box-shadow).

Мой собственный сайт

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

Оказывается, я не уделил должного внимания ссылкам на своем собственном сайте. Изменение цвета было недостаточно, чтобы сразу привлечь мое внимание. Хотя было бы достаточно, если бы я добавил кольцо фокусировки!

Тем не менее, я хорошо поработал над навигацией. Розовая рамка и анимация привлекли внимание к сфокусированному элементу. 🎉.

Что я выучил

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

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

1. Создание контура (с контуром, box-shadow, границами и т. д.).
2. Анимации с движением (если есть)
3. Изменение цвета фона (если есть)
4. Изменение цвета текста (если есть)

Контуры лучше, потому что они создают наибольший контраст.

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

Изменения в background-color иногда может быть достаточно. Это связано с тем, что изменение происходит на относительно большой площади поверхности.

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

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