Типография Система дизайна

Создавайте четкую иерархию контента любого размера.

Пунктов проверки: 8 · Групп: 3

Содержание чек-листа

Прогресс проверки

Структура и значение

Сравните информацию и представление в контексте использования.

Используйте единую шкалу размера шрифтаОпределите уровни от заголовка до заголовка и избегайте добавления новых размеров для каждого экрана.Замените заголовки более длинным контентом и увеличьте размер шрифта на устройствах. Обеспечьте легкость чтения иерархии, вьетнамского акцента, межстрочного интервала и связанных действий, не обрезая контент.Пример Карточка имеет двухстрочный заголовок, описание и кнопку открытия; Когда буквы больше, бирка увеличивается в высоту, а не закрывает кнопку или не отсекает вьетнамский знак.Установить стиль по ролиРазличайте заголовки, содержимое, метки и подписи, чтобы выбирать стили в соответствии со значением.Гарнитура должна иметь имя, которое играет ту же роль, что и основной текст или метка; Изменения ролей необходимо обновлять синхронно, а не редактировать каждый экран.Проверьте вьетнамские шрифты и акцентыВыберите вес, создайте резервную копию шрифта и проверьте наличие акцентированного текста в случае сбоя загрузки шрифта.Проверьте длину букв, вьетнамские акценты и фактически загруженный вес; Резервные шрифты должны быть близкого размера, чтобы избежать скачков макета.

Взаимодействие и удобство использования

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

Отрегулируйте расстояние между буквамиУстановите подходящую высоту строки и расстояние между символами для заголовков и длинных текстов.Попробуйте использовать многострочный абзац, а не просто образец предложения. Слишком узкие строки затрудняют чтение, а большой интервал между буквами может испортить слова и знаки препинания небольшого размера.Сохраняйте текст читабельным при масштабированииПроверьте узкий экран и уровень масштабирования 200 %, чтобы избежать обрезки текста или перекрытия содержимого.При увеличении размера или масштаба шрифта кнопки и теги должны растягиваться в соответствии с содержимым; Избегайте фиксированной высоты, которая отсекает вторую линию.Сохраняйте контент достаточно контрастнымУбедитесь, что мелкий текст по-прежнему легко читается, и не используйте цвет как единственный индикатор значения.Проверьте также подтекст, заполнитель и статус отключения светлого/темного; Маленькие буквы на цветном фоне часто легко пропустить.

Завершите опыт

Проверьте детали, которые легко упустить при вводе проекта в эксплуатацию.

Определите минимальные размеры текста по ролиЗадокументируйте минимум читаемого основного текста, меток и подписей и объясните, когда необходим более крупный стиль вместо сжатия текста по размеру.Попробуйте реальный размер дисплея на устройстве; Текст в увеличенном изображении предварительного просмотра может скрыть проблемы с читаемостью в полном размере.Определите масштаб адаптивного типаДокументируйте, как заголовки и основной текст меняются в зависимости от ширины области просмотра, сохраняя при этом иерархию и избегая резких изменений размера.Если вы используете гибкие размеры шрифта, установите минимальный и максимальный пределы; Убедитесь, что длинная метка не сжата до одной строки.

Прогресс автоматически сохраняется в этом браузере.

РЕКОМЕНДАЦИИ

Как проверять

Проверьте иерархию, когда текст длинный и увеличенный

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

ПРИМЕРЫ

Примеры использования

Длинный заголовок в одном теге

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