Таблицы дизайн – Урок 6. Табличный макет сайта | табличная верстка сайта табличный макет сайта уроки html и css | Уроки MODx Evo

Содержание

Проектирование и дизайн лучших таблиц данных

Составляющие успешных таблиц данных дизайна пользовательского интерфейса

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

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

Фиксированный заголовок

Проектирование и дизайн лучших таблиц данных - Фиксированный заголовок

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

Горизонтальная прокрутка

Проектирование и дизайн лучших таблиц данных - Горизонтальная прокрутка

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

Возможность изменение ширины столбцов

Проектирование и дизайн лучших таблиц данных - Возможность изменение ширины столбцов

Изменение размера столбцов позволяет пользователям видеть сокращенные данные в полном объеме.

Стиль строк

Проектирование и дизайн лучших таблиц данных - Стиль строк

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

Плотность отображения

Проектирование и дизайн лучших таблиц данных - Плотность отображения

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

Визуальная сводка таблицы

Проектирование и дизайн лучших таблиц данных - Визуальная сводка таблицы

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

Разбивка на страницы

Проектирование и дизайн лучших таблиц данных - Разбивка на страницы

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

Действия при наведении курсора

Проектирование и дизайн лучших таблиц данных - Действия при наведении курсора

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

Редактирование в строке

Проектирование и дизайн лучших таблиц данных - Редактирование в строке

Редактирование в строке позволяет пользователю изменять данные без перехода на отдельную страницу.

Расширяемые строки

Проектирование и дизайн лучших таблиц данных - Расширяемые строки

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

Быстрый просмотр

Проектирование и дизайн лучших таблиц данных - Быстрый просмотр

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

Модальное окно

Проектирование и дизайн лучших таблиц данных - Модальное окно

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

Мультимодальные окна

Проектирование и дизайн лучших таблиц данных - Мультимодальные окна

Функция мультимодальных окон – мощное средство для активного использования пользователями множества различных действий или сравнения деталей разрозненных элементов.

Детали строки

Проектирование и дизайн лучших таблиц данных - Детали строки

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

Сортируемые столбцы

Проектирование и дизайн лучших таблиц данных - Сортируемые столбцы

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

Базовая фильтрация

Проектирование и дизайн лучших таблиц данных - Базовая фильтрация

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

Фильтрация столбцов

Проектирование и дизайн лучших таблиц данных - Фильтрация столбцов

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

Возможность поиска по столбцам

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

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

Добавление столбцов

Проектирование и дизайн лучших таблиц данных - Добавление столбцов

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

Возможность настраивать столбцы

Проектирование и дизайн лучших таблиц данных - Возможность настраивать столбцы

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

Зачем нужны таблицы

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

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

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

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

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

Найдите меня в Twitter и Dribbble.

дизайн таблиц в современном вебе

До рассвета блочной верстки в 10-11 годах таблицы были средством разметки сайта. Сейчас же таблицы появляются крайне редко, хоть и встречаются как средство верстки, но это скорее исключение. Таблицам теперь отведена подходящая роль — представление данных.

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

Общие правила для таблиц

Выравнивание данных в таблицах

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

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

Из вышесказанного следует и правило для заголовков — выравниваем по тому краю, что и представленные в колонке данные.

Пример форматирования чисел и текста в таблице

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

Пример выравнивания по центру в таблицах для тарифных сеток

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

Следуя этим четырем правилам, мы добиваемся чистоты вертикальных линий таблицы и управляем последовательностью чтения данных.

Шрифты и цифры

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

Для представления чисел лучше использовать линейные шрифты, вместо старого стиля. Смотрим на пример:

Цифры в шрифтах со старым начертанием и линейным

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

Если же говорить о пропорциональных и табличных цифрах, то тут разница не столь очевидна:

Пропорциональные и табличные цифры в шрифтах

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

Метки

Данные в таблице должны сопровождаться метками, которые выполняют сопроводительный контекст. Злоупотреблять метками не стоит и тут есть несколько вариантов их использования. Так, например, в «Гармонизированном тарифе США» метки используются в первых строках таблиц:

Пример меток в Гармонизированном тарифе США

Второй вариант более близкий для российского рынка и стран СНГ — указывать метки в заголовках таблиц.

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

Названия и заголовки

Краткость сестра таланта. Главная ценность таблиц — данные. Не стоит от них отвлекать внимание пользователей.

Графическое оформление

В таблицах должно быть как можно меньше графики, «чернил» и линий. Хорошей таблицей считается та, которая легко читается без вертикальных линий и цветовых акцентов. Для избавления от линий в вебе появился замечательный вид разметки — «зебра».

Пример отображения таблицы в виде Зебра

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

Использование фона в таблицах допустимо только для индикации разных групп значений. Лучше, если это будет опциональным решением, чем постоянным. Также фон следует использовать только тогда, когда невозможно употребить печатные графические элементы, такие как ✻, † или ▵. Максимально лучший вариант для таблиц — это монохромное представление.

Адаптивность таблиц

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

Ошибка вывода таблицы в мобильной версии сайта

Для представления простых таблиц Chris Coyier (основатель css-tricks.com) предлагает следующий вариант:

Вариант мобильной таблицы

При мобильном просмотре вытягивать данные таблицы в два столбца. Но тут присутствуют очевидные проблемы:

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

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

Вариант мобильной таблицы 2

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

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

В заключение

Любой UI/UX проектировщик обязан уделять большое внимание таблицам в проектах (если, конечно, в проекте присутствуют таблицы) и не забывать об адаптивности. На каждый тип таблицы должно быть свое представление, также необходимо учитывать, какие данные находятся в таблице. Таблицы могут быть скучными и не надо пытаться их развеселить — они важный элемент данных, за которыми пользователи идут на сайт.

Создавайте хорошие таблицы / Habr

Бедные таблицы. Ну что с ними не так?

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

Вот пример, который я называю таблицей всех таблиц: Гармонизированный тариф США, занимающий более чем 3550 страниц. В нём содержится описание каждого товара, который может быть импортирован в США, включая такие захватывающие позиции, как «Мужские и детские пальто, полупальто, накидки, куртки, анораки (включая лыжные костюмы), ветровки и подобные товары (включая утеплённые жилеты)».


Так что же такое полупальто?

Безграмотно спроектированная таблица выглядит уродливо. Дизайн — основа таблицы: когда он сделан правильно, сложные данные легко просматривать и сравнивать. Если дизайн некорректный, информация перестаёт быть понятной.

Давайте посмотрим, как делать правильно.


Следите за числами

Не все числа одинаковы. Я не имею в виду π (Пи) и ∞ (хотя упоминаю о них на вечеринках), а говорю об отображении цифр, разделяющихся на минускульные или маюскульные, и на пропорциональные или табличные.


Минускульные и маюскульные

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

Разница между пропорциональными и табличными цифрами не столь очевидна:


Пропорциональные и табличные цифры

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


Техническое замечание о табличных маюскульных цифрах

На этапе дизайна стоит убедиться, что используемые цифры вам подходят (табличное и маюскульное выравнивание обычно выключено по умолчанию). Продукты Adobe включают панель «opentype», при помощи которой цифрам задаётся правильная настройка. Чтобы включить соответствующее свойство в CSS, нужно разобраться в слегка запутанном синтаксисе. Как бы то ни было, несколько запросов к гуглу наставят вас на путь истинный.

Теперь плохие новости: табличные маюскульные цифры доступны не для всех шрифтовых гарнитур. Гарнитуры, которые их включают, обычно дороги. Есть несколько исключений: например, прекрасный Work Sans — бесплатный шрифт с табличными маюскульными цифрами.

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


Помните о выравнивании

Следуйте 3½ правилам:
1. Числовые данные выравниваются по правой стороне.
2. Текстовые данные выравниваются по левой стороне.
3. Заголовки выравниваются так же, как и их данные.
3½. Не используйте выравнивание по центру.


Список штатов США по историческому населению — Wikipedia

Числа читаются справа налево — при сравнении чисел мы сначала смотрим на единицы, потом на десятки, сотни и т.д. Это тот же способ, которым люди учат арифметику — начинают справа и двигаются влево, собирая и группируя цифры по ходу прочтения[1]. Следовательно, таблицы должны выравнивать числовые данные по правому краю.

Тексты (в русском языке) читаются слева направо. Тексты обычно сравнивают по алфавитному порядку: если две строчки начинаются с одной буквы, сравнивается следующая, и т. д. Попытка быстро пробежаться по тексту, не выровненному по левой стороне, крайне затруднительна.

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

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


Согласующиеся значащие цифры = хорошее выравнивание

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


Лаконичные, понятные подписи

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


Прогноз уровня воды при наводнении в Mississippi — NOAA


Заглавие

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


Единицы измерения

Самая частая подпись, используемая в таблицах — единицы измерения данных. Обычно её повторяют в каждой отдельной ячейке таблицы. Чтобы избежать повторения, достаточно включить подпись в первую строчку каждой колонки.


Заголовки

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


Как можно меньше чернил

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


Статистика бэттинга в Национальной Лиге 2016 — BaseballReference


Линейки

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

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

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


Фоны

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

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

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


Заключение

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


Дальнейшее чтение и материалы для вдохновения

FiveThirtyEight всегда был отличным источником вдохновения — для отображения числовых данных используется гарнитура Decima Mono, которая специально разработана для отображения больших наборов данных на малом пространстве.

Butterick’s Practical Typography — мой справочник по всем вопросам в типографике. Это тот тип ресурсов, на которые у вас куча ссылок — столько там полезных статей!

Ну и наконец, никакая статья по дизайну данных не будет полной без статьи Edward Tufte. Его письмо о дизайне просто незаменимо.



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



Оригинал: Design Better Data Tables, автор: Matthew Ström.

Перевод: aalexeev, редактура: Яна Крикливая, Чайка Чурсина.

Дизайн таблиц: лучшие практики | User House.

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

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

Закрепленный заголовок

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

Горизонтальная прокрутка

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

Столбцы с изменяемым размером

Изменение размеров столбцов позволяет пользователям полностью просматривать данные, которые не уместились.

Стиль строки

Чересполосица, разделители строк, отсутствие разделителей 

Стиль строки помогает пользователям сканировать данные. Уменьшение визуального шума за счет удаления границ строк или чередующихся строк хорошо работает для небольших массивов данных. Но при анализе больших массивов данных пользователи могут потерять контекст. Границы строк помогают пользователям не терять свое местоположение. Чередующиеся строки (также известные, как чересполосица) помогают пользователям сохранять свое местоположение при просмотре длинных горизонтальных строк данных. Хотя могут возникнуть проблемы с удобством их использования при небольшом количестве строк, из-за того, что пользователи могут придавать значение выделенным строкам.

Плотность отображения

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

Сводные данные в виде диаграмм и графиков

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

Разбиение на страницы

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

Действия, доступные при наведении

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

Редактирование по месту

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

Раскрывающиеся строки

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

Быстрый просмотр

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

Модальное окно

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

Мультимодальное окно

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

От строки к деталям

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

Сортировка в столбцах

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

Простая Фильтрация

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

Фильтрация по столбцам

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

Поиск в столбцах

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

Добавление столбцов

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

Настраиваемые столбцы

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

Почему таблицы имеют значение

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

Однако данные бессмысленны без возможности представить их и действовать на основе этих данных. У компаний, которые выживут в ближайшие 10 лет, будут не только превосходные данные, но и превосходный пользовательский опыт.

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

Поделиться в соцсетях

Подписаться на новые статьи, спам не шлем

Таблицы в Figma. Дизайн Data Grid одним компонентом / Habr

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

Существует три подхода к дизайну таблиц, чтобы создать data grid с гибкой архитектурой. В каждом из случаев используется либо row-компонент, либо column-компонент, либо cell-компонент. Каждый из случаев подробно рассмотрим ниже.

Зачем всё это?


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

Внутри большого командного проекта это единственный верный путь создавать новые data grid — через компонент. Это помогает генерировать больше вариантов и быстрее валидировать новые идеи.

Мои наблюдения показывают, что не все Figma-дизайнеры приучают себя работать с компонентами с самых ранних стадий нового проекта. Согласно недавнему опросу в Figma-чате чуть менее половины дизайнеров используют компоненты. Большая часть используют просто фреймы и copy-paste.

Но те, кому удалось переключить свой workflow на компонентный, скорее всего уже никогда не сделают шаг назад, потому что этот подход даёт больше гибкости и востребован среди организаций с собственным штатом дизайнеров. Хотите сохранить интерес к своей вакансии, если метите в крутую организацию, где уже работают в Figma — работайте с компонентами.

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

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

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken


Стили таблицы


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

Классика


Горизонтальные и вертикальные разделители хорошо заметны, заголовки выделены bold’ом и отделены фоном от ячеек с контентом. Эдакий Excel-style:

Контрастный заголовок


Разделители могут отсутствовать, либо могут быть только горизонтальными. Благодаря интенсивным заголовкам, такие data grid быстро разделяются взглядом, если их много на одном дашборде:

Материальная таблица


Data-first подход. Такие таблицы можно встретить в material design. Более интенсивный верхний разделитель и однопиксельные внутренние качественно разделяют данные:

Черезполосица


Эти таблицы прямиком из прошлого, но по сей день использование чередования серых и белых рядов часто встречается в современном UI:

Минимализм


Ничего, кроме данных! Это вполне обосновано на плотных десктопных интерфейсах, где на счету каждый пиксель:

Использование компонентов для создания таблицы


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

Row-компонент


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

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

Pros: высоту Row удобно регулировать. Идеально подходит для dashboard-проектов, в которых часто меняются горизонтальные состояния в проекте: onHover, onSelected, onFocus и так далее и специфика разработки требует частого переключения между ними:

Column-компонент


Впервые эта идея пришла мне в голову чуть более года назад и я реализовал её в поздних версиях Material Design System для Фигмы. Таблицу удобно было бы собирать из компонентов-колонок, внутри которой заранее предопределено и размножено N-количество рядов, а все лишние срезались бы за границей фрейма через опцию Clip Content. Тогда было бы достаточно потянуть фрейм вниз за нижнюю границу, чтобы показать больше дополнительных ячеек в колонке:

Cons: внутри компонента не удастся регулировать высоту каждой ячейки (горизонтальный шаг), так как иначе не получится реализовать «срезание лишнего».

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

Совет: можно держать три таких компонента с разным шагом: S-32px / M-48px / XL-64px, например, и в какой-то степени решить проблему плотности ячеек. Особенно полезно в случае создания и мобильных и десктопных темплейтов внутри одного проекта / team library.

Cell-компонент


Использование ячейки-компонента даёт максимальную гибкость в стилизации таблицы. Редко какой проект требует использования и Material-стиля, и классического для data grid. Но если вы фрилансер, который регулярно создает новые дашборды своим клиентам из собственной или коммерческой базы компонентов, то вам лучше начинать с ячейки, из которой вы вы будете кирпичик-за-кирпичиком создавать таблицы. Потом будет достаточно вложить четыре линии, прижать их по бокам ячейки, расставить constraints и генерировать новые стили.

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

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

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

Подробный состав такой супер-ячейки я рассмотрю в следующем выпуске.

Исходник с компонентами доступен тут.

Подписывайтесь на мой канал, там будут все анонсы! Особенно учитывая, что сейчас мы пилим собственную дизайн-систему для решения многих задач по дизайну и веб-разработке одним махом. Это компоненты в Figma-исходников и React/Angular NPM пакетов. С абсолютно идентичным дизайном, немного лучше чем у Google Material 🙂 Я регулярно публикую новые веселые картинки об этом продукте. Трансляцию о разработке ведём практически в прямом эфире.

Сейчас многие организации переводят свои дизайн-отделы на Figma. Возникает вопрос: разбираться самим как с нуля её создать из компонентов с правильной структурой, или взять одну из готовых под iOS, Android, Web или для десктопных приложений. Любую из Figma UI библиотек можно развернуть внутри организации и получить сотни качественных компонентов и темплейтов для создания Ваших будущих продуктов. Узнайте больше на setproduct.com

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

Дизайн таблиц данных | UX Guru

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

Например, вот, что я считаю матерью всех таблиц: «Гармонизированный тариф США», таблица, которая насчитывает более 3,550 страниц, и перечисляет каждый товар, который можно импортировать в США, включая такие вещи, как пальто, накидки для машин, накидки, плащи, куртки (включая лыжные куртки), ветровки и аналогичные изделия.

Гармонизированный тариф США

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

Итак, давайте попытаемся сделать всё так, как надо.

 

Знайте свои цифры

Не все цифры были созданы равными. Я не говорю о π и ∞; Я говорю о либо табличных цифрах, и цифрах в старом стиле, либо линейных и пропорциональных.

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

Цифры в старом и новом стиле

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

Разница между пропорциональными и табличными числами не так очевидна:

Разница между пропорциональными и табличными числами

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

 

Техническая заметка по использованию линейных чисел

В процессе проектирования вам нужно будет проделать кое-какую работу что бы убедиться, что вы используете правильные цифры (табличные линейные цифры – это не дефолтный вариант). В продуктах Adobe есть панель “opentype”, которую можно использовать для настройки вида цифр, а CSS предлагает немного сложный синтаксис для применения этой функции. Ну и кроме этого можно просто погуглить.

А теперь к плохим новостям: не во всех шрифтах доступны табличные линейные цифры. А те шрифты, в которых они доступны – дороговато стоят. Есть несколько исключений: Work Sans – отличный бесплатный шрифт с табличными линейными цифрами.

Если вы не можете найти подходящий шрифт с табличными линейными цифрами, то хорошей альтернативой будут моноширинные шрифты – хоть они и похожи на «исходный код», они всегда хорошо подходят для отображения цифр в таблицах. В дополнение, в новом системном шрифте Apple, San Francisco, есть отличные табличные линейные цифры, которые хорошо смотрятся в маленьком размере.

 

Выравнивание имеет значение

4 простых правила, которым нужно следовать:

  1. Цифровые данные должны быть выровнены по правому краю
  2. Текст должен быть выровнен по левому краю
  3. Заголовки должны быть выровнены по той же стороне, что и данные под ними
  4.  Не используйте выравнивание по центру
Временная шкала роста населения СШАВременная шкала роста населения США

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

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

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

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

 

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

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

Прогноз разлива реки МиссиссиппиПрогноз разлива реки Миссиссиппи

Название

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

 

Единицы измерения

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

 

Заголовки

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

 

Используйте как можно меньше «чернил»

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

Используйте как можно меньше «чернил»

Линии

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

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

 

Фон

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

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

 

В заключение

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

Перевод статьи Мэтью Стрёма

Источник: medium.com

Советы для хорошего дизайна таблиц — блог компании «Веб-Эталон»

03.12.2018

Цель таблицы — упростить представление данных, которые можно прочитать и усвоить.

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

Есть несколько правил, которые помогут правильно составить таблицу.

1. Ширина.

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

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

На сайте citilink.ru слишком большое расстояние между столбцами не очень удобно.
На сайте citilink.ru слишком большое расстояние между столбцами не очень удобно.

2. Ничего лишнего.

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

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

Это не значит, что надо исключить из таблицы все элементы дизайна. Хороший дизайн таблицы незаметен. Форма должна служить содержанию, а не наоборот.

Создатели сайта technopoint.ru упростили выбор товара, обозначив отличающиеся характеристики голубым цветом.
Создатели сайта technopoint.ru упростили выбор товара, обозначив отличающиеся характеристики голубым цветом.

3. Выравнивание.

  • Числа выравниваются по правой стороне.
  • Буквы выравниваются по левому краю.
  • У заголовков выравнивание такое же, как и у их данных.
  • Старайтесь не использовать выравнивание по центру.

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

Удобная таблица на сайте kinopoisk.ru помогает пользователю быстрее сравнивать данные за счет правильного выравнивания и цветов.
Удобная таблица на сайте kinopoisk.ru помогает пользователю быстрее сравнивать данные за счет правильного выравнивания и цветов. Несмотря на то, что характеристики при выборе телефона — важная информация, которую изучают многие покупатели, с таблицей на сайте kimovil.ru не стали заморачивались и получилось не очень удачно: столбцы не выровнены, анализировать данные неудобно.
Несмотря на то, что характеристики при выборе телефона — важная информация, которую изучают многие покупатели, с таблицей на сайте kimovil.ru не стали заморачивались и получилось не очень удачно: столбцы не выровнены, анализировать данные неудобно.

4. Фиксированный заголовок и горизонтальная прокрутка.

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

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

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

5. Границы.

Совсем не обязательно рисовать в таблице сетки и рамки. В книге «Ассиметричная типографика» Ян Чихольд пишет:

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

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

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

6. Шрифты.

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

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

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

7. Адаптация

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

  • Самый простой способ — сжатие шрифта или уменьшение кегеля. Без фанатизма, таблица должна легко читаться.
  • Горизонтальная прокрутка. Используя этот способ, дайте понять пользователю, что таблицу можно скроллить, добавив полосу прокрутки, например.
  • В мобильной версии таблицы на сайте nerudprivoz.ru есть горизонтальная прокрутка. С ее помощью таблица осталась читаемой, а полоса прокрутки внизу дает понять, что таблица показана не полностью.
    В мобильной версии таблицы на сайте nerudprivoz.ru есть горизонтальная прокрутка. С ее помощью таблица осталась читаемой, а полоса прокрутки внизу дает понять, что таблица показана не полностью.
  • Текст заголовков под наклоном. Такой способ идеален, если заголовки в таблице длинные, а данные в столбцах ограничиваются несколькими символами.
  • Используя наклонные заголовки, экономится место без потери качества
    Используя наклонные заголовки, экономится место без потери качества
  • Если таблица небольшая и не имеет сравнительных данных, можно изменить ее структуру и преобразовать информацию в списки.
 Имена и телефоны работников не обязательно делать таблицей. В этом случае лучше обойтись списком
Имена и телефоны работников не обязательно делать таблицей. В этом случае лучше обойтись списком

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


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *