Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

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

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

NEW YORK TIMES 1960

Этот макет карточки (реклама или новости) в газете располагается в прямоугольном контейнере и содержит заголовок, подзаголовок, резюме, изображение и так далее. В цифровом мире компонент карточки включает в себя почти такую же компоновку, но свои элементы. Кроме того, если мы добавим стили CSS к компоненту карточки, мы можем сделать его волшебным, как в Daily Prophet, газете в «Гарри Поттере».

Это последний компонент карточки, который я разработала. Вы можете посмотреть его на CodePen и поэкспериментировать с ним.

Давайте подробнее рассмотрим стили состояния компонента карточки.

1. Исследования дизайна

Прежде чем я приступаю к разработке дизайна, я следую этим 4 шагам:

Сбор информации → Анализ данных → Поиск закономерностей → Организация идей

В результате этого исследования я обнаружила 4 различных стиля состояния для компонента карточки:

Стили состояния карточки:

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

Только веб-сайт дизайна Google имеет все стили состояния. Например, когда пользователи кликают (активное состояние) на компонентах карточки, они могут видеть эффект взаимодействия пульсации. Хотя, на мой взгляд, это трудно заметить на светлом фоне или изображении.

Карточные компоненты CSS-Tricks и CodePen являются хорошими примерами в темной теме. Кроме того, когда пользователи наводят курсор на компонент карточки CodePen или выделяют его фокусом, отображается дополнительная информация, такая как сердечки, комментарии и представление. Мне очень нравится это!!!

Шаблоны: сгруппированные элементы и отдельные элементы

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

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

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

Примеры шаблонов

2. Wireframing

Некоторые карточки очень сложны, в одном прямоугольном контейнере может быть много элементов и много функций (действий): ссылка, мультимедиа, кнопка «сердечко», кнопка «поделиться» и т. д. Вот две вещи, которые я имею в виду, когда проектирую сложные компоненты:

В последнем проекте у меня была задача перепроектировать компонент карточки. Мне нужно было… добавить две функции в компонент карточки:

Кроме того, эта карточка включала иконку, медиа, заголовок и фишки. Следуя приведенным выше соображениям, я нарисовала три wireframe.

После обсуждения с клиентом мы решили выбрать третий вариант.

3. Прототипирование

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

Совет 1. Каждое действие имеет отдельный стиль состояния.

Для этого, во-первых, я разделила элементы на две группы по действию. Одна группа включала в себя все элементы, кроме кнопки «Добавить в корзину», и она открывала модальный компонент. Другая группа включала только кнопку «Добавить в корзину», чтобы добавить товар в корзину.

Совет 2. Повышение

Светлая тема повышения Material design

Темная тема повышения Material design

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

Повышение Material design

Пример кода — Светлая и темная темы — повышение

Совет 3. Измените цвета

Измените цвета для каждого состояния элементов.

Совет 4. Добавьте микро-взаимодействия к медиа (изображениям)

Применяйте различные анимации, такие как масштабирование, фильтр, эффект ряби или преобразования.

Совет 5. Добавьте функцию продолжительности и времени перехода

Это делает переход более плавным для смены состояния.

Совет 6. Оставьте синий цвет для стиля выделения фокусом

Из моего исследования UX я обнаружила, что синий цвет для стиля выделения фокусом был более заметным и более легко сканируемым, чем другие цвета. Это потому, что пользователи уже привыкли к синему контуру в качестве стиля выделения фокусом браузера по умолчанию. Поэтому не рекомендуется удалять эту схему (это также важно для доступности).

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

Давайте перейдем к этапу разработки.

4. Разработка

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

Как я упоминала выше, я разделила в HTML компоненты карточки на две группы.

CSS: 4 проблемы и решения

При разработке этого компонента карточки я столкнулась с 4 проблемами, перечисленными ниже, и нашла следующие решениями.

1. Проблема специфичности CSS для состояний

Проблема порядка состояний

Если вы в CSS опишите состояния в таком порядке, наведение → активное → фокус, стили активного состояния будут переписаны стилями фокуса. Это означает, что активное состояние также будет отображать стилями состояния фокуса из-за специфичности.

Решение

Решение порядка состояний

Активное состояние будет содержать стили фокуса. Поэтому нам нужно сбросить стили фокуса в активном состоянии.

Решение порядка состояний

Если вы используете SASS, вы можете создать заполнитель для стилей сброса и применить его там, где это требуется. Вы можете использовать @extend для ссылки на сброс заполнителя.

2. Проблема ширины границы

Можете ли вы определить, в чем проблема с компонентом карточки выше?

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

Решение

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

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

.c-card { border: rem(4) solid transparent; }

Посмотрите на это!!! Все так аккуратно сейчас.

3. Проблема стиля фокуса после события клика

Возможно, вы уже столкнулись с этой проблемой. После того, как пользователь нажмет кнопку или ссылку, будут отображены стили состояния фокуса. Кроме того, браузеры ведут себя по-разному с проблемой состояния фокуса. Например, Chrome по-прежнему отображает стиль состояния фокуса, когда вы нажимаете и ссылку, и кнопку, тогда как Safari сбрасывает стиль состояния фокуса.

Браузеры ведут себя по-разному относительно проблемы состояния фокуса

Не делайте ту же ошибку, что и я

Чтобы избежать этого, мы могли бы использовать метод JavaScript blur.

const removeFocus = [...document.querySelectorAll('.btn-click')];removeFocus.map(card => { card.addEventListener('click', function(e) { e.target.blur(); });
});

Однако использовать его не рекомендуется, поскольку .blur() теряет выделение фокусом для ссылки <a>. В то же время, кажется, что элемент <button> сохраняет выделение фокусом.

Кроме того, W3C говорит: Контент, который обычно выделяется фокусом, при доступе к нему с клавиатуры, может потерять выделение фокусом через скрипты. Это делается, когда дизайнер считает индикатор состояния выделения фокусом системы неаккуратным . Однако индикатор состояния выделения фокусом системы является важной частью доступности для пользователей клавиатуры..

Соображения

Хотя отсутствие стиля выделения фокусом при событии клика обеспечивает хороший визуальный эффект, настоятельно рекомендуется не удалять фокус с помощью .blur().

Когда мы думаем о поведении события click для ссылки и кнопки, визуальный эффект для фокуса не так важен, как рассмотрение доступности, потому что при этом также:

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

6. Заключение

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

Автор: nana Jeon

Источник: https://blog.prototypr.io

Редакция: Команда webformyself.