Стол
Используйте таблицу для отображения статических данных пользователям в удобном для сканирования формате.
Обратите внимание, что пользователи могут только просматривать (но не взаимодействовать) информацию в таблице. Если вы хотите, чтобы пользователи взаимодействовали, рассмотрите возможность использования списка .
Пример
Вот пример того, как выглядит таблица.
Требования
Этот визуальный компонент в настоящее время поддерживает настройку .
| Имя поля | Необходимый? | Ограничения/настройки |
|---|---|---|
| Название таблицы | Нет | Настраиваемое семейство шрифтов и цвет. Не более 1 строки (дополнительные символы будут обрезаны). Высота карточки сворачивается, если заголовок не указан. |
| Подзаголовок | Нет | Простой текст. Фиксированный шрифт, цвет и размер. Не более 1 строки (дополнительные символы будут обрезаны). Не будет отображаться без заголовка. Высота карточки сворачивается, если не указан подзаголовок. |
| Изображение переднего плана | Нет | Настраиваемая форма изображения (угловые или закругленные углы). |
| Карточный фон | Нет | Настраиваемое изображение или цвет. |
| Заголовок столбца | Да | Простой текст. Фиксированный шрифт, цвет и размер. Настраиваемое выравнивание текста для заголовка и содержимого (слева, справа или по центру). Настраиваемый приоритет столбцов (первые 3 гарантированно отображаются). Нет ограничения на количество символов, но меньшие поверхности могут обрезаться, а не заворачиваться. |
| Содержимое строки | Да | Простой текст. Фиксированный шрифт, цвет и размер. Настраиваемый приоритет строк (первые 3 гарантированно отображаются). Максимум 20 символов (дополнительные символы будут обрезаны). |
| Ссылка действия | Нет | разрешена 1 ссылка. Настраиваемый цвет ссылки. |
Интерактивность
- Карточка таблицы не имеет взаимодействия без ссылки действия — она только представляет информацию.
- После добавления ссылки действия пользователи могут коснуться ее, чтобы просмотреть веб-контент или перейти к диалоговому окну.
Руководство
Таблицы оптимизированы для отображения табличных данных (например, спортивного зачета, результатов выборов или перелетов). Стремитесь к трем-пяти столбцам и строкам; в зависимости от размера экрана будет отображаться как минимум три. Поэтому расставьте приоритеты в отношении самой важной информации в первых трех столбцах и строках.
Используйте таблицы для передачи статической информации, не требующей особых объяснений. Эта информация должна быть четкой и легко просматриваемой, избегая появления перегруженной электронной таблицы. Поэтому убедитесь, что ваши данные помечены четко и лаконично. Целью должно быть предоставление информации, а не помощь пользователям в выборе (для этого используйте список ).
Данные должны быть краткими, важными и простыми для понимания.
Ключевым моментом является соблюдение правильного баланса между деталями и лаконичностью. Предложите пользователю достаточно подробностей, чтобы они могли различать элементы таблицы, но не настолько, чтобы это было перегружено.
Делать.
Чтобы улучшить сканируемость, включайте в таблицу только полезную информацию. Если у вас есть дополнительные столбцы с интересными деталями, отдайте приоритет самой важной информации, чтобы она отображалась на всех поверхностях.
Не.
Отсутствие подробностей в этой таблице затрудняет определение того, какая команда выиграла каждую игру, а второстепенная информация (номер игры) помещается впереди, скрывая полезные детали, такие как столбец «Победа/поражение» и названия противоборствующих команд.
Сохраняйте суть сообщения в подсказках.
Даже когда визуальные эффекты дают лучший ответ, убедитесь, что подсказки по-прежнему напрямую относятся к запросу пользователя и продвигают разговор вперед.
Делать.
Подсказки должны 1) отвечать на вопрос пользователя и 2) стимулировать беседу с помощью вопроса.
Не.
Не предполагайте, что пользователь имеет немедленный доступ к экрану; подсказки всегда должны давать прямой ответ на вопрос пользователя. Кроме того, без сомнения, подсказки здесь не продвигают взаимодействие вперед.