ВЕБ-мастерская «Web-Tut» - Как создать сложную веб-таблицу

Как создать сложную веб-таблицу

* * *

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

 

 

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

 

 

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

 

 

1. Систематизировать потребности

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

 

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

 

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

 

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

 

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

 

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

 

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

 

В одном из моих проектов мы использовали фреймворк Angular Material. К сожалению, угловые таблицы были слишком просты. Мы нашли библиотеку ag-Grid, которая поддерживала нашу функциональность, но имела одно ограничение. У него не было возможности расширять ряд и помещать в него дочерние ряды. Мы обнаружили эту проблему, прежде чем приложили какие-то усилия и скорректировали дизайн.

 

 

В ДВУХ СЛОВАХ

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

 

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

 

 

2. Go Atomic

 

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

 

 

ШРИФТЫ, ЦВЕТА, ИКОНКИ

 

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

 

 

КЛЕТКИ И АКСЕССУАРЫ

 

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

 

 

В одном из моих проектов у нас было восемь типов ячеек с собственным взаимодействием. Самыми простыми являются текстовые и числовые ячейки. В нашем случае было разрешено заполнять числовые ячейки нечисловым содержимым, таким как «N / A» (не применяется) и «N / C» (без контроля). Это была особенность домена. Выпадающие списки и средства выбора даты являются более сложными и имеют дочерние элементы. Наконец, у нас были ячейки таблицы, представляющие команды в строке.

 

 

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

 

 

СТРОКИ И ЗАГОЛОВКИ

 

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

 

 

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

 

 

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

 

 

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

 

 

Подстановочные знаки представляют собой сложную функцию, поскольку они зависят от привычек людей. Когда я разработал таблицы для технических специалистов, мы присвоили знак звездочки (*) неизвестному числу неизвестных символов. Для страховых аналитиков я выбрал традиционный символ SQL - знак процента (%) - потому что они к нему привыкли. Что касается выпадающего фильтра, он переключается между определенным количеством взаимоисключающих опций текста, чисел или числовых диапазонов.

 

 

КОЛОННЫ

 

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

 

 

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

 

 

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

 

 

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

 

 

В ДВУХ СЛОВАХ

 

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

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

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

 

 

КОНТЕЙНЕР И ОТЗЫВЧИВОСТЬ

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

Заключение

 

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

Опубликовано 13.02.2019 г.
Создание и продвижение сайтов в Ялте

Адрес

298612, Россия,

Республике Крым, г. Ялта,

ул. Весенняя, д. 6А, оф. 5

Контакты

Email: support@web-tut.ru

Телефон: +7 (978) 058-82-57