Где можно посмотреть примеры красиво-удобно оформленных больших таблиц с данными?

Question

[Fyodor]

https://yadi.sk/i/aYLznmZbh9A6w во внутренней CRM такого типа таблица открывается в основном разделе.

Хочу web обертку для этих данных сделать, вот хотел бы взглянуть как по уму делают отображение большого типа данных так чтобы и читабельно и красиво?

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

Comments

[Михаил]

Хороший вопрос, про который редко думают, что бы не затерялся добавьте еще тег "типографика"))

[vis0r]

Вот ещё по таблицам нашёл
https://uxdesign.cc/design-better-data-tables-4ecc...

Answer 1

[vis0r]

Comments

[krasnblj]

Супер! А где можно посмотреть подобные советы, кроме блока darkhorseanalytics?

[Fyodor]

vis0r поддерживаю

[vis0r]

krasnblj: https://uxdesign.cc/design-better-data-tables-4ecc... ещё нашёл

Answer 2

[Михаил]

Классный вопрос)))Сама задача типографическая, а ныне также и RWD-шная.
Отличная гифка от vis0r вкратце показывает, что именно, и как делать.

Если же по полочкам, да по ссылочкам, то.
Прежде чем заниматься графдизайном таблиц, надо, если потребуется, переосмыслить их и привести информацию в понятному и простому виду: определить структуру информации, выбрать способ отображения, избавиться от всех повторов, есть много разных методов оптимизации таблиц — об этом лучше всех написано у Мильчина. Мильчин, — это советская школа еще, в универе по нему учили. Для вас конкретно: Глава 13. Таблицы и выводы. — Мильчин А., Чельцова Л. Справочник издателя и автора : редакционно-издательское оформление издания.

Типографический аспект верстки можно посмотреть в 15 главе "Типографика. шрифт, верстка, дизайн", Феличи Джеймс, или что говорит "Новая типографика", Я. Чихольд:



или "О Шрифте", Шпикерман:



вот оформление таблиц от Эдварда Тафти:



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

Еще стоит подумать об адаптивности таблиц: отправная точка, или посмотреть реализации в библиотеке паттернов Бреда Фроста, товарища в скафандре, автора подхода "Atomic Design".
P.S.
Только что наткнулся, на jQuery-плагин для таблиц: с адаптивностью! Плюс: сортировка, пагинация, настройка объема вывода строк и т.д.

Comments

[Fyodor]

Ух ты, как вы основательно подошли к ответу, спасибо.

[Михаил]

Федор: На здоровье, мне не жалко. Вы только добавьте тег типографика, что б не пропало, можно еще "верстка".

Answer 3

[Mokhirjon Naimov]

Посмотрите этот запрос может поможет...

Comments

[Fyodor]

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

Answer 4

[Pavel K]

Тут лучше отдать это дело дизайнеру и юзабелисту.
Например для чекбоксов слишком большие колонки,
несколько полей можно объединить в одно (например стоимость и валюта)
Можно например в одной эм "колонке" сделать несколько чекбоксов, например отмечена, безнал, заблокирована
т.е. сгруппировать.
И получится и не широкая и красивая табличка. Ещё можно чекбоксы иконками заменить.
Т.е. да же не табличка, а что-то типо списка.
В общем для творчества и удобочитаемости целый простор.

Comments

[Fyodor]

пока увы юзабелиста нет, хочу понять вообще "перспективу", если дело пойдет то обратимся к такому(найти бы его еще конечно)

[Михаил]

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