Интервал/Сетка Система дизайна

Сохраняйте единый ритм макета при изменении контента и экранов.

Пунктов проверки: 7 · Групп: 2

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

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

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

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

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

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

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

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

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

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

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

Используйте общий набор расстояний

Отличайте расстояние внутри элемента от расстояния между разделами страницы.

ПРИМЕРЫ

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

Используйте общий набор расстояний

Ярлыки и поля ввода расположены близко; Две группы настроек имеют больший разрыв.

Интервал/Сетка Система дизайна

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

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

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

Используйте общий набор расстояний

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

Используйте общий набор расстояний

Найти чек-лист

Чек-листы не найдены