Неполное руководство по передовым методам работы с интерфейсом

На самом деле эта статья должна называться «Руководство по улучшению веб-интерфейса пользователя».

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

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

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

Хороший дизайн пользовательского опыта — результат совместных усилий всех звеньев продукта.

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

1. Узнайте, как мелкие детали влияют на взаимодействие с пользователем
2. Узнайте, как улучшить взаимодействие с пользователями ваших страниц с минимальными изменениями в разработке.
3. Узнайте о некоторых замечательных деталях дизайна взаимодействия
4. Понимать основные функции доступности и что означает доступность страницы
5. Изучите основные способы улучшения доступности страницы

отображение страницы

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

общее расположение

Давайте сначала рассмотрим некоторые вопросы, связанные с макетом.

Для большинства проектов на стороне ПК первое, что нам нужно рассмотреть, — это самый внешний пакет. Предположим, что.g-app-wrapper.

<div class="g-app-wrapper">
    <!-- 内部内容 -->
</div>

Во-первых, для.g-app-wrapper, есть несколько моментов, которые мы должны выяснить перед разработкой проекта:

1. Является ли элемент полноэкранным макетом или макетом с фиксированной шириной?
2. Какой должна быть минимальная ширина для полноэкранного макета?

Для макетов с фиксированной шириной удобнее, если предположить, что фиксированная ширина1200px,Так:

.g-app-wrapper {
    width: 1200px;
    margin: 0 auto;
}

использоватьmargin: 0 autoРеализует горизонтальное центрирование макета. когда ширина экрана больше1200px, оставьте пустыми с обеих сторон, разумеется, ширина экрана меньше1200pxПри появлении полосы прокрутки убедитесь, что внутреннее содержимое не загромождено.

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

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

<div class="g-app-wrapper">
    <div class="g-sidebar"></div>
    <div class="g-main"></div>
</div>

.g-app-wrapper {
    display: flex;
    min-width: 1200px;
}
.g-sidebar {
    flex-basis: 250px;
    margin-right: 10px;
}
.g-main {
    flex-grow: 1;
}

Воспользуйтесь преимуществами гибкого макетаflex-grow: 1,Позволять.mainРасширьте и сузьте, чтобы заполнить оставшееся пространство, используйтеmin-widthГарантируется минимальная ширина всего контейнера.

Конечно, это самая основная адаптивная верстка. Для современных макетов мы должны рассмотреть как можно больше сценариев. Делать:

нижний колонтитул

Следующая ситуация также очень распространена.

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

Взгляните на эффект:

Ну, если вы можете использовать flex для этого требования, используйтеjustify-content: space-betweenЭто может быть решено очень хорошо, так же, как использоватьmargin-top: autoТакже очень легко сделать:

<div class="g-container">
    <div class="g-real-box">
        ...
    </div>
    <div class="g-footer"></div>
</div>

.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}

Codepen Demo -- sticky footer by flex margin auto

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

Обработка динамического содержимого — очень длинный текст

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

Но учли ли мы, что текст будет сверхдлинным? Будет ли он заворачиваться или заворачиваться, если он слишком длинный?

дляоднострочный текст, используйте пропуск одной строки:

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Конечно, в настоящее время длямногострочный текстСупер длинный опущен, и совместимость уже очень хорошая:

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Работа с динамическим содержимым — защита границ

Для некоторого динамического контента мы часто используемmin/max-widthилиmin/max-heightРазумное управление высотой и шириной контейнера.

Есть также некоторые детали, которые следует учитывать при их использовании.

Например, часто используютmin-widthМинимальная ширина кнопок управления:

.btn {
    ...
    min-width: 120px;
}

Когда содержимое относительно небольшое, это нормально, но когда содержимое относительно длинное, возникают проблемы. использовалmin-widthНо это не учитывает слишком длинную кнопку:

Здесь вам нужно сотрудничать с padding вместе:

.btn {
    ...
    min-width: 88px;
    padding: 0 16px
}

заниматьMin and Max Width/Height in CSSОчень хорошая картинка посередине, как парафраз:

0 Отображение содержимого

Это также место, которое часто упускают из виду.

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

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

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

Разным ситуациям могут соответствовать разные страницы результатов 0 с разными инструкциями по эксплуатации.

Например, сетевое исключение:

Или действительно 0 результат:

Для дизайна страницы 0 результатов вы можете подробно прочитать эту статью:Как оформить пустую страницу для товара?

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

Связанные с изображением

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

Установите высоту и ширину изображения одновременно

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

Соответствующий макет:

<ul class="g-container">
    <li>
        <img src="http://placehold.it/150x100">
        <p>图片描述</p>
    </li>
</ul>

ul li img {
    width: 150px;
}

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

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

ul li img {
    width: 150px;
    height: 100px;
}

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

object-fit

Конечно, будут проблемы и с ограничением по высоте и ширине, например, картинка растянута, что очень некрасиво:

В это время мы можем использоватьobject-fit, который указывает, как содержимое заменяемого элемента (то есть изображение) должно соответствовать высоте и ширине его родительского контейнера.

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}

использоватьobject-fit: cover, чтобы содержимое изображения заполнило все поле содержимого элемента, сохраняя его соотношение сторон.

object-fitСуществует также соответствующее свойствоobject-position, который управляет положением изображения в поле его содержимого. (похожий наbackground-position), м по умолчаниюobject-position: 50% 50%, если вы не хотите, чтобы изображение располагалось по центру, вы можете использовать его для изменения фактического положения изображения.

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    object-position: 50% 100%;
}

так,object-position: 100% 50%Указывает, что изображения отображаются снизу. Вот хорошая демонстрация, которая поможет вам понятьobject-position.

CodePen Demo -- Object position

Рассмотрим screen dpr -- отзывчивые изображения

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

На мобильных устройствах или некоторых экранах ПК с высоким разрешением (Apple MAC Book) dpr экрана может быть больше 1. В настоящее время нам также может потребоваться рассмотреть возможность использования нескольких изображений для адаптации к различным экранам dpr.

Точно,<img>теги снабжены соответствующими атрибутамиsrcsetДавай сделаем это.

<img src='photo@1x.png'
   srcset='photo@1x.png 1x,
           photo@2x.png 2x,
           photo@3x.png 3x' 
/>

Конечно, это старый способ письма,srcsetДобавлен новый дескриптор ширины w, который необходимо сопоставитьsizesиспользуются вместе, поэтому лучше написать это так:

<img 
        src = "photo.png" 
        sizes = “(min-width: 600px) 600px, 300px" 
        srcset = “photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>

использоватьsrcset, мы можем предоставить наиболее подходящие изображения для различных экранов dpr.

В приведенном выше есть некоторые понятия, dpr, srcset картинки, атрибут размеров, если вы не знаете многого, вы можете двигатьсяОбзор основ интерфейса

картинка отсутствует

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

Есть много способов справиться с этим. Лучший способ разобраться с этим — в моей недавней статье г-на Чжан Синьсюя.Рекомендации по обработке стилей CSS после сбоя загрузки изображениябыли свидетелями. Вот краткое описание:

1. Сбой загрузки изображения, триггер<img>элементальonerrorсобытие, загрузить не удалось<img>Элемент добавляет класс стиля
2. Преимущество новых классов стилей, с<img>Псевдоэлемент элемента, при отображении карты дна по умолчанию, так же может отображаться вместе<img>элементальaltИнформация

<img src="test.png" alt="图片描述" onerror="this.classList.add('error');">

img.error {
    position: relative;
    display: inline-block;
}

img.error::before {
    content: "";
    /** 定位代码 **/
    background: url(error-default.png);
}

img.error::after {
    content: attr(alt);
    /** 定位代码 **/
}

Мы используем псевдоэлементыbefore, загрузить карту ошибок по умолчанию, использовать псевдоэлементыafter, показывая картинкуaltИнформация:

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

Демонстрация CodePen — обработка изображений

Оптимизация дизайна взаимодействия

Следующая большая часть касается деталей некоторых взаимодействий. Для дизайна взаимодействия есть еще несколько общих рекомендаций:

• Не заставляй меня думать
• В соответствии с привычками и ожиданиями пользователей
• Простота в эксплуатации
• сделать соответствующие напоминания
• Не заставляйте пользователей

Переходы и анимация

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

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

оптимизация прокрутки

Прокрутка также является очень важной частью работы с веб-страницей. Посмотрите, что можно оптимизировать:

Плавная прокрутка: используйтеscroll-behavior: smoothсделать прокрутку плавной

использоватьscroll-behavior: smooth, что позволяет полосе прокрутки плавно прокручиваться, а не резко прыгать. Чтобы увидеть эффект, предположим следующую структуру:

<div class="g-container">
  <nav>
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
  </nav>
  <div class="scrolling-box">
    <section id="1">First section</section>
    <section id="2">Second section</section>
    <section id="3">Third section</section>
  </div>
</div>

Не используйтеscroll-behavior: smooth, является переключателем с резким прыжком:

добавить прокручиваемый контейнерscroll-behavior: smooth, чтобы добиться плавной прокрутки:

{
    scroll-behavior: smooth;
}

использоватьscroll-snap-typeОптимизировать эффект прокрутки

sroll-snap-typeЕго можно рассматривать как основной стиль атрибута в новой спецификации прокрутки.

scroll-snap-typeСвойство : определяет, как строго применяется точка привязки в контейнере прокрутки.

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

См. простой пример:

Конечно,scroll-snap-typeЕсть много вариантов использования, и есть много моментов, которые можно контролировать и оптимизировать. Из-за нехватки места мы не можем расширять их по одному. Более подробное использование смотрите в другой моей статье --Оптимизируйте прокрутку с помощью sroll-snap-type

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

Эта оптимизация может быть немного сложной для понимания. Требуется знание оптимизации рендеринга CSS.

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

Как это понимать, одним из факторов, запускающих создание графического слоя для элемента, является:

• У элемента есть родственный элемент с меньшим z-индексом, который содержит составной слой.

Согласно вышеизложенному, когда мы оптимизируем производительность прокрутки, нам нужно обратить внимание на два момента:

1. Воспользуйтесь ускорением графического процессора, чтобы улучшить производительность прокрутки, создав отдельный GraphicsLayer.
2. Если нет проблем с производительностью при самой прокрутке, вам не нужен отдельный GraphicsLayer, и вы также должны обратить внимание на уровень контейнера прокрутки, чтобы избежать слияния с другими элементами, которые создали GraphicsLayer, потому что уровень слишком высок. Пассивное создание графического слоя, который влияет на общую производительность рендеринга страницы.

Если вы все еще немного смущены этим, вы можете прочитать эту статью -Хитрости CSS-анимации и детали, о которых вы не знали

Оптимизация взаимодействия с кликом

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

Оптимизируйте жесты — разные приложения в разных сценарияхcursor

Для разного контента лучше давать разныеcursorДля стилизации CSS изначально предоставляет широкий спектр часто используемых жестов.

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

Прежде всего, для кнопки будет как минимум 3 разных курсора, кликабельные и некликабельные, ожидающие:

{
    cursor: pointer;    // 可点击
    cursor: not-allowed;    // 不可点击
    cursor: wait;    // loading
}

Кроме того, есть несколько общих.Для некоторых вводных полей ввода используйтеcursor: text, для использования класса Tipscursor: help, увеличить и уменьшитьzoom-in,zoom-outтак далее:

Некоторые часто используемые простые столбцы за столбцом:

• Кнопки кликабельны:cursor: pointer
• Кнопки запрещено нажимать:cursor: not-allowed
• Дождитесь загрузки статуса:cursor: wait
• Поле ввода: курсор: текст;
• Средство просмотра изображений может увеличивать и уменьшать масштаб:cursor: zoom-in/ zoom-out
• Подсказка: курсор: помощь;

Конечно, фактическоеcursorТакже поддерживает очень широкий спектрMDNИли ознакомьтесь с полным списком в этой демо-версии CodePen ниже:

CodePen Demo -- Cursor Demo

Оптимизация области клика — псевдоэлементы расширяют область клика

Кнопки — очень важная часть нашего веб-дизайна, и дизайн кнопок также тесно связан с пользовательским интерфейсом.

Рассмотрим такую ​​сцену, когда в трясущейся машине или при управлении экраном одной рукой иногда нельзя нажать кнопку.

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

Итак, в настоящее время есть ли способ увеличить его точку доступа без изменения исходного размера кнопки?

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

.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

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

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

Быстрая оптимизация выбора --user-select: all

Операционная система или браузер обычно предоставляют некоторые функции для быстрого выделения текста, см. следующую схему:

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

использоватьuser-select: all, вы можете обернуть содержимое, которое нужно выбрать один раз, и пользователю нужно будет щелкнуть только один раз, чтобы выбрать часть информации:

.g-select-all {
    user-select: all
}

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

CodePen -- выбор пользователя: все примеры

Проверить оптимизацию стиля --::selection

Конечно, если вы хотите пойти дальше, CSS также предоставляет::selectionПсевдокласс, который может управлять стилем выделенного текста (только управлениеcolor, background, text-shadow), чтобы еще больше усилить эффект.

CodePen -- user-select: all && ::selection управляет стилем выбора

Добавить отключить выбор --user-select: none

При быстром отборе есть и его противоположность — запрещенный отбор.

Для некоторых кнопок, которые могут использоваться часто, могут возникнуть следующие неловкие ситуации:

• Быстрый щелчок по текстовой кнопке, вызывающий быстрый выбор браузера двойным щелчком, приводит к выделению текста:

• Быстрый щелчок кнопки перелистывания страниц запускает быстрый выбор браузера двойным щелчком:

Для этого сценария нам нужно сделать невыбираемые элементы невыбираемыми, чего можно быстро добиться с помощью CSS:

{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

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

Оптимизация прыжков

На данном этапе широко используется Single Page Application (Одностраничное приложение), популярны такие фреймворки, как Vue и React. Тем не менее, некоторые распространенные методы записи также подвержены небольшим проблемам.

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

<template>
    ...
    <button @click="gotoDetail">
        Detail
    </button>
    ...
<template>
...
gotoDetail() {
    this.$router.push({
      name: 'xxxxx',
    });
}

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

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

Причина в том, что браузер читает<a>помеченhrefсвойства, чтобы показать что-то вродеОткрыть страницу в новой вкладкеДля этого варианта, для вышеупомянутого метода записи, браузер не может распознать, что это ссылка, по которой можно перейти. Простая схема выглядит следующим образом:

Поэтому для всех кнопок перехода маршрутизации рекомендуется использовать<a>теги и встроенныеhrefАтрибут, заполните адрес маршрутизации перехода. Фактически визуализированный DOM может выглядеть так:

<a href="/xx/detail">Detail</a>

Простота использования

Простота использования также является очень важной частью дизайна взаимодействия, и есть много вещей, которые можно сделать. Просто перечислите:

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

Сначала исследуй, потом говори

Это очень интересно, что значит сначала исследовать, а потом высказывать свое мнение? То есть мы не хотим заставлять пользователей что-то делать, например, входить в систему, как только они появляются.

Рассмотрим несколько примеров часто используемых веб-сайтов:

• Подобно Huya, Bilibili и другим видеосайтам, вы можете сначала посмотреть видео, и вам будет предложено войти в систему только после определенного времени просмотра (войдите, чтобы насладиться Blu-ray)
• Веб-сайт электронной коммерции, необходимо войти в систему только после оплаты

вышесказанноеПростота использованияа такжеСначала исследуй, потом говорисодержание, частично из:Learn From What Leading Companies A/B Test, вы можете прочитать это хорошо.

оптимизация шрифтов

Выбор и использование шрифтов на самом деле очень специфичны.

Необходимо использовать определенные шрифты, если сайт не применяет их. Последняя спецификация рекомендует чаще использовать системные шрифты по умолчанию. то естьCSS Fonts Module Level 4 -- Generic font familiesдобавлено вfont-family: system-uiключевые слова.

font-family: system-uiСистемный шрифт по умолчанию в этой операционной системе может быть выбран автоматически.

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

Чтобы привести два примера, определение шрифта Tmall и определение шрифта Github:

• Торговый центр:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

Короче говоря, они обычно следуют этому основному принципу:

1. Попробуйте использовать системный шрифт по умолчанию

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

2. Учитывайте как китайский, так и западный языки, сначала западный, а затем китайский.

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

3. Принимая во внимание несколько операционных систем

Учитывайте несколько операционных систем при выборе шрифтов. Например, многие китайские шрифты в ОС MAC не предустановлены в Windows.Чтобы обеспечить удобство работы пользователей MAC, при определении китайских шрифтов сначала определите китайские шрифты пользователей MAC, а затем определите китайские шрифты пользователей Windows. ;

4. Учитывать старую операционную систему, заканчивая семейством шрифтов с засечками и без засечек

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

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

Доступность (A11Y)

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

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

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

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

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

цветовой контраст

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

что такое цветовой контраст

Вы когда-нибудь заботились об отображении содержимого страницы и о том, подходят ли используемые цвета? Могут ли слабовидящие и дальтоники нормально видеть контент? Правильное использование цвета полезно всегда, а не только для пользователей со слабым цветовым восприятием и дальтонизмом. При использовании мобильного телефона на открытом воздухе и при сильном солнечном свете его трудно увидеть, а высококонтрастный текст высокой четкости, соответствующий стандартам доступности, легче читать.

Вот концепция --цветовой контрастПроще говоря, описание — это разница в яркости между двумя цветами. Применительно к нашим страницам, в большинстве случаев это контрастная разница между цветом фона (background-color) и цветом контента (color).

Самая авторитетная спецификация доступности в Интернете ——WCAG AAВ спецификации указано, что весь важный контент должен иметь коэффициент цветовой контрастности 4,5: 1 или выше (3: 1 или выше для размеров шрифта более 18), чтобы считаться читаемым.

Взять картинку --Zhihu — 15 инструментов дизайна пользовательского интерфейса, которые помогут вам легко делать хорошую работу:

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

Инструменты для проверки цветового контраста

Chrome с самого начала поддерживает проверку цветового контраста элементов. Возьмем, к примеру, страницу, на которой я сейчас пишу.Github IssuesДве кнопки на странице редактирования:

Осматривая элемент, вы можете увидеть цветовой контраст двух кнопок соответственно:

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

Кроме того, в палитре цвета интерфейса Style элемента обзора можно изменить цвет, а также интуитивно можно увидеть текущий цветовой контраст:

фокус ответа

Точно так же Baidu, домашняя страница Google, по умолчанию, так что поле ввода ввода страницы имеет фокус:

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

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

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

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

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

Скриншот ниже полностью сделан с помощью клавиатуры:

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

Однако во многихreset.css, Часто можно увидеть такой код стиля CSS, чтобы унифицировать стиль, исключая фокусируемый элемент.:focusПсевдоклассы:

:focus {
    outline: 0;
}

Приводим код вышеописанной операции. Также добавьте этот код,Используйте клавиатуру полностью:

кроме как вinputВ поле есть подсказка курсора при использовании Tab для переключения фокуса наselectили кbutton, так как нет:focusstyle пользователь будет в полной растерянности, не зная, где сейчас находится фокус страницы.

Гарантия взаимодействия с пользователем без использования мыши, разумное использование:focus-visible

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

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

Исходя из этого, вСпецификация W3 CSS-селекторов-4, добавил очень интересно:focus-visibleПсевдокласс.

:focus-visible: этот селектор эффективно отображает различные формы фокуса в зависимости от способа ввода пользователя (мышь или клавиатура).

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

Взгляните на простую демонстрацию:

<button>Test 1</button>

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}

Щелкните мышкой:

Видно, что при щелчке мышью элемент:activeПсевдокласс, также активированный:focusПсевдокласс, не очень красивый. Но если установитьoutline: noneОпять же, это сильно ухудшит работу с клавиатурой. попробуй использовать:focus-visibleПреобразование псевдокласса:

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}
button:focus:not(:focus-visible) {
  outline: none;
}

Взгляните на эффект, нажмите на кнопку мышью и нажмите на кнопку с фокусом управления клавиатурой:

CodePen Demo -- :focus-visible example

Как видите, щелчок мышью не сработает.:foucs, только когда клавиатура управляет элементом в фокусе и использует Tab для переключения фокуса,outline: 2px solid redЭтот код вступит в силу.

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

Стоит отметить, что некоторые студенты зададутся вопросом, почему это используется здесь:notЭтот способ написать это вместо того, чтобы писать это напрямую:

button:focus {
  outline: unset;
}
button:focus-visible {
  outline: 2px solid red;
}

Для совместимости не поддерживается:focus-visibleбраузер, когда:focus-visibleНесовместимо, все равно нужно иметь:focusСуществование псевдоклассов.

Усовершенствованная семантика со спецификацией WAI-ARIA — нефокусируемые элементы, такие как div, имитируют фокусируемые элементы.

Есть еще один очень важный момент.

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

• использоватьdivмоделированиеbuttonэлемент
• использоватьulимитация выпадающего спискаselectтак далее

Сегодня это делают многие библиотеки компонентов, такие как element-ui и ant-design.

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

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

В двух словах, он предоставляет некоторые свойства, улучшающие семантику и поведение тегов:

• можно использоватьtabindexСвойства, которые управляют тем, может ли элемент быть сфокусирован, и если и где он участвует в последовательной навигации с помощью клавиатуры.
• можно использоватьroleАтрибуты для определения семантики и функций элементов, например использование<div id="saveChanges" tabindex="0" role="button">Save</div>имитировать кнопку
• Есть также многоaria-*Атрибуты, которые представляют атрибуты или состояния элементов, помогают нам в дальнейшем идентифицировать и реализовывать семантику элементов и оптимизировать безбарьерный опыт.

Используйте инструменты для просмотра семантики тегов

Давайте посмотрим, как страница Github определяет кнопку, взяв в качестве примера кнопку Edit на странице Github Issues:

В этом фрагменте четко описаны некоторые функции этой кнопки, связанные с доступностью, такие как контрастность цветового контраста, описание кнопки, т.е.Name, чтобы программы чтения с экрана могли видеть,Roleid — это атрибут этого элемента, который является кнопкой,Keyboard focusableУказывает, может ли он быть захвачен кнопкой Tab на клавиатуре.

Анализировать кнопки, смоделированные с элементами, не находящимися в фокусе

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

HTML-код:

<span class="ssc-breadcrumb-item-link"> Inbound </span>

В основном доступность равна 0, как кнопка, она не фокусируется, не может быть выбрана пользователями с клавиатуры, нет определенной семантики, цветовой контраст слишком низкий, и она может быть не видна слабовидящим пользователям. И, как кнопка, которая может перейти на страницу, она неaэтикетка, нетhrefАтрибуты.

Даже для навигации по хлебным крошкам мы не можем преобразовать его в<a>теги, тоже нужно сделатьсамый простойНекоторые обновления доступности:

<span role="button" aria-label="goto inbound page" tabindex="0" class="ssc-breadcrumb-item-link"> Inbound </span>

Не забудьте снова изменить цвета выше минимального цветового контраста и снова посмотрите:

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

A11Y библиотеки компонентов анализа

Наконец, в нашем более часто используемом Vue —element-ui, Реагировать-ant-designВ разделе давайте рассмотрим некоторые функции ant-design, связанные с улучшением доступности.

Взяв в качестве примера компонент Select, ant-design использует большое количество атрибутов WAI-ARIA, так что раскрывающийся список, имитируемый div, не только соответствует раскрывающемуся полю по производительности, но также соответствует раскрывающемуся списку. вниз поле с точки зрения семантики и поведения.Простой один пример:

Взгляните на часть DOM, которая использует div для имитации раскрывающегося списка:

Давайте посмотрим на интерактивный опыт:

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

Для контента, связанного с A11Y, длина и содержание очень велики.Эта статья не может расширяться по одной.Если вам интересно, вы можете прочитать следующие статьи:

• WAI-ARIA basics
• WAI-ARIA 1.1
• Фокус веб-управления в
• Доступность
• 71 пункт дизайна для улучшения взаимодействия с веб-пользователем
• Официальный аккаунт – команда разработчиков специальных возможностей

В заключение

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

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

наконец

На этом статья подходит к концу, надеюсь, она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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