Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 115
Вариант с вертикальным текстом всё равно плотнее (нет простыни справа). В принципе, более-менее все читают наклонный текст, так что если совсем вертикальное не читается, можно и чуть голову повернуть.
Вариант с вертикальными заголовками не плотнее, он занимает столько же места по ширине, что и вариант с горизонтальными заголовками. Вариант с вертикальными заголовками как раз таки не плотнее, поскольку сдвинуться ячейкам мешают заголовки в три строки. Вы можете взять эти два варианта:
Вертикальные заголовки — ширина 825px
Горизонтальные заголовки — ширина 825px
И открыть их на соседних вкладках и сравнить, Вот их уменьшенные копии рядом:
Вертикальные заголовки — ширина 825px
Горизонтальные заголовки — ширина 825px
И открыть их на соседних вкладках и сравнить, Вот их уменьшенные копии рядом:
Проведите вертикальную линию через середину вашей картинки, и оцените плотность по правой половине. Amarao же сказал — проблема в свободной поверхности, в «простыни» (левого верхнего угла, кстати, тоже касается). Отсюда и визуальное ощущение низкой плотности.
Лично моё решение — аббревиатуры и сокращения. С подсказкой при наведении курсора (причём не обязательно на заголовок, лучше на весь столбец распространить сие действие).
Если же решили добавить цвет, то не лучше ли красить шрифт? В плане юзабилити. Мы ведь все пишем код в редакторе, где раскрашен в основном шрифт, а не фон, правда? Тогда не будет этих не слишком аккуратно выглядящих пересечений одним цветом других.
Лично моё решение — аббревиатуры и сокращения. С подсказкой при наведении курсора (причём не обязательно на заголовок, лучше на весь столбец распространить сие действие).
Если же решили добавить цвет, то не лучше ли красить шрифт? В плане юзабилити. Мы ведь все пишем код в редакторе, где раскрашен в основном шрифт, а не фон, правда? Тогда не будет этих не слишком аккуратно выглядящих пересечений одним цветом других.
P. S. По поводу философского вопроса «кто прав». Хороший, плохой… Добрый, злой… Прав тот, у кого ружьё. В данном случае ружьё — у работодателя. Задача была не на юзабилити, а на код. Надо было молча кодить. Извините, если вдруг обидел. Но представьте только ситуацию — приняли вас на работу; куча менеджеров проекта месяц обсуждали макет; директор поставил подпись; а тут вы, программист — «да ну нафик, это неудобно». Такая компания на рынке просто не выживет. Имеете на всё своё мнение — имейте свою компанию. Нанимаетесь в чужую — делайте что сказали. Всё просто.
Нет, рац-предложение толкнуть можно. Но потом. Когда работа уже сделана. И когда ваш менеджер в хорошем настроении. И даже тогда не вздумайте настаивать. Увы, таково положение «раба на галерах».
Нет, рац-предложение толкнуть можно. Но потом. Когда работа уже сделана. И когда ваш менеджер в хорошем настроении. И даже тогда не вздумайте настаивать. Увы, таково положение «раба на галерах».
Для метро лучше табло, где большими буквами выводится название приближающейся станции, можно еще слева и справа частично название предыдущей и следующей. Только не с таким размером зерна, как у бегущих строк внутри вагона.
Есть ещё вариант вертикальных заголовков
Е в в к з
с а е а а
т р р л г
ь и т ь о
а и н л
е н - ы о
щ т х в
ё к
о
в
Вертикальные заголовки, при своих относительных минусах, однозначно лучше.
В варианте автора, во-первых, не сразу понятно что к чему относится, сложнее отследить соответствие заголовка и колонки с данными.
Во-вторых, это решение неуниверсально — рано или поздно (я гарантию даю) вылезет таблица, где так сделать не получится, потому что что-то куда-то тупо не влезет — и придется переделывать верстку и бэкэнд.
В-третьих, этот вариант сам по себе менее чист в реализации. То ли на бэке, то ли на фронте нужно разбирать данные и раскладывать их по стопкам — то есть наделять модель и вьюху лишними знаниями друг о друге.
В-четвертых, цветовое кодирование… тут целый букет — нет, букетище! потенциальных проблем.
В целом эта попытка решая одну проблему создает целую кучу новых.
Я бы оставил таблице вертикальную шапку (тем более, в задании четко сказано, что решение уже принято), добавив опционально всплывающий хинт с горизонтальным текстом по наведению курсора.
В варианте автора, во-первых, не сразу понятно что к чему относится, сложнее отследить соответствие заголовка и колонки с данными.
Во-вторых, это решение неуниверсально — рано или поздно (я гарантию даю) вылезет таблица, где так сделать не получится, потому что что-то куда-то тупо не влезет — и придется переделывать верстку и бэкэнд.
В-третьих, этот вариант сам по себе менее чист в реализации. То ли на бэке, то ли на фронте нужно разбирать данные и раскладывать их по стопкам — то есть наделять модель и вьюху лишними знаниями друг о друге.
В-четвертых, цветовое кодирование… тут целый букет — нет, букетище! потенциальных проблем.
В целом эта попытка решая одну проблему создает целую кучу новых.
Я бы оставил таблице вертикальную шапку (тем более, в задании четко сказано, что решение уже принято), добавив опционально всплывающий хинт с горизонтальным текстом по наведению курсора.
ответ:
а)
б)
в) Как программировать такие загловки:
г) можно без цветового кодирования, как это сделать показал пользователь salas
а)
б)
в) Как программировать такие загловки:
Так на то они и программисты, чтобы придумать как решить такую задачу, чтобы людям было удобно, мне кажется, что можно обойтись двумя вложенными циклами для вывода таких заголовков.
Насчет пустоты, которая справа, иногда бывают столбцы, которые носят название из одного слова, и может там контент будет как раз «длинный», так этот стобец — как раз для них
г) можно без цветового кодирования, как это сделать показал пользователь salas
Вариант без цветового кодирования и для печати
Главная ошибка в рассуждениях тут:
Неудобно. И это главное.
Вместо последовательного перечисления заголовков предлагается безумная двумерно-ступенчатая структура, где глаз должен двигаться замысловатым зюгзагом, где клетки имеют множество пересечений, где трудно быстро понять что к чему.
А многочисленные технические вопросы идут уже как дополнение.
Так на то они и программисты, чтобы придумать как решить такую задачу, чтобы людям было удобно
Неудобно. И это главное.
Вместо последовательного перечисления заголовков предлагается безумная двумерно-ступенчатая структура, где глаз должен двигаться замысловатым зюгзагом, где клетки имеют множество пересечений, где трудно быстро понять что к чему.
А многочисленные технические вопросы идут уже как дополнение.
Голосовалка у автора почему-то не сработала, но у меня «свой вариант».
Проблема в том, что таблицу с таким количеством столбцов воспринимать тяжело именно из-за их количества, а не только потому, что заголовки длинные и/или вертикальные.
Поэтому надо что-то придумывать: фильтрацию, сортировку, управление видимостью/порядком столбцов, в особо запущенных случаях — графики и сводные таблицы.
Проблема в том, что таблицу с таким количеством столбцов воспринимать тяжело именно из-за их количества, а не только потому, что заголовки длинные и/или вертикальные.
Поэтому надо что-то придумывать: фильтрацию, сортировку, управление видимостью/порядком столбцов, в особо запущенных случаях — графики и сводные таблицы.
Надо годы поставить в заголовки колонок.
Обсуждаемые заголовки, соответственно, в начало строк таблицы.
Обсуждаемые заголовки, соответственно, в начало строк таблицы.
я не спец по верстке, но ситуация, как в старом анекдоте: «раз сказали грузить люминий, значить люминий»
К чему это: работодатель хочет видеть то, что хочет. Как говорится в этом случае: инициатива наказуема. Но с другой стороны, раз предложил свой вариант, даже вполне оригинальный, то это должен быть только плюс.
На мой взгляд, да и я всегда стараюсь так поступать: представляю два варианта, один то что требуется от А до Я,
далее в комментах или отдельным патчем всегда поясняю, да данный блок/алгоритм/кусок кода можно улучшить.
К чему это: работодатель хочет видеть то, что хочет. Как говорится в этом случае: инициатива наказуема. Но с другой стороны, раз предложил свой вариант, даже вполне оригинальный, то это должен быть только плюс.
На мой взгляд, да и я всегда стараюсь так поступать: представляю два варианта, один то что требуется от А до Я,
далее в комментах или отдельным патчем всегда поясняю, да данный блок/алгоритм/кусок кода можно улучшить.
Прежде всего нужно выяснить, кто будет смотреть такую таблицу и зачем. Мы видим года в строках и некие параметры в столбцах. Таблица нужна для того, чтобы сравнивать значения по столбцам и по строкам. Очень разумно сравнивать построчно как изменялась продукция сельского хозяйства. Но какой смысл (читай — кто и зачем будет) сравнивать индекс потребительских цен и инвестиции в основной капитал в 2005 году? Даже если вдруг понадобится сравнивать 2-3 показателя, это лучше делать в отдельной таблице, где они стоят в смежных столбцах.
Короче говоря, и вертикальные надписи, и полосатый велосипед автора — это кривые решения кривой задачи. А вот горизонтальная схема линии метро — это кривое (у Лебедева тоже) решение правильной задачи. Размести схему вертикально и проблема вертикальных надписей исчезает. Негде повесить вертикальную? Это уже другая проблема, и её проще лечить.
Короче говоря, и вертикальные надписи, и полосатый велосипед автора — это кривые решения кривой задачи. А вот горизонтальная схема линии метро — это кривое (у Лебедева тоже) решение правильной задачи. Размести схему вертикально и проблема вертикальных надписей исчезает. Негде повесить вертикальную? Это уже другая проблема, и её проще лечить.
Ну и самое простое — сделать параметры в строках, а даты в столбцах. И показывать каждый N-й год, если их много.
смотрите этот комментарий:
А если годы с 1930 по 2015, то есть 85 колонок? а так закрепил шапку, а содержимое сделал прокручиваемым
Посыл верный, вывод — нет. Сравниваются числовые данные всегда именно по колонке, а не по строке. Так что решение сделать годы строками правильное.
Вакансия-то как звучит? Верстальщик или как-то по-другому?
Тогда, конечно, автор не прав. Нефиг лезть со своими советами, делай вертикальные надписи для ИЕ6- и не жужжи. Верстальщик, вобщем.
Вот именно — искать решение для задачи без данных это как-то странно. А если там всего 2 столбца? А если там их 200? Если целью тестовой задачи было выяснить как соискатель знает особенности браузеров и умеет их применять на практике, то и задачу надо было ставить «как кроссбраузерно вывести надпись вертикально?». А если целью тестовой задачи было выяснить как соискатель ищет решения кривой задачи, как преобразовывает исходные данные, то тут уже кучу вариантов предложили.
С другой стороны, вполне вероятна ситуация, когда задачей является намеренное запутывание пользователя. Какой-нибудь гигантский отчёт для какого-нибудь сбербанка (вот откуда ие6, осталось понять откуда опера 9.5), который тем лучше чем менее понятен. Там да, геометрия форм важнее смысла букв, и вертикальные надписи уместны.
Со Сбером мимо: Internet Explorer 8.0,
Opera 17.0, но в 12 пока работает.
Opera 17.0, но в 12 пока работает.
Вакансия не Верстальщик, вакансия Разработчик интерфейсов.
При дальтонизме, для горизонтальных заголовков, вы идете вверх по линии, до того, как она упрется в заголовок.
Вы можете сделать могохромным это изображение и посмотреть как это будет выглядеть, можете цвета поменять на примерно одинаковые, все равно — идете вверх по линии, можно, также, закрепить шапку, а содержимое сделал прокручиваемым.
При дальтонизме, для горизонтальных заголовков, вы идете вверх по линии, до того, как она упрется в заголовок.
Вы можете сделать могохромным это изображение и посмотреть как это будет выглядеть, можете цвета поменять на примерно одинаковые, все равно — идете вверх по линии, можно, также, закрепить шапку, а содержимое сделал прокручиваемым.
Я дальтоник, из этого набора с трудом различаю верхние два цвета. Кажется, конкретно на этот раз дальтонизм проблем не добавляет — оставшаяся часть конструкции, исполненная в легко различимых цветах, кажется столь же нечитаемой. И вертикальный текст не лучше. В метро — лучше: там слова каждый день одни и те же, поэтому можно и вертикально. По той же причине в спортивной газете можно вообще спокойно печатать турнирную таблицу с заголовками «И В Н П ±».
Вам не нужно различать цвета, просто идите вверх по линии, пока она не упрется в заголовок.
Кажется, я понял, что не так. Покрашенные целиком заголовки мешают (по крайней мере, мне) идти по линии, заставляют задействовать сознание примерно в той же степени, как вертикальный текст. Попробовал улучшить Ваш вариант — имхо, получилось, хотя сначала думал, что такие таблицы вообще никакая вёрстка не спасёт:
картинки
Да, да, так хорошо. А можете покрасить в 2-3 примено одинаковых цвета, а остальные оставить почти как есть, то есть, как Вы видите?
В смысле, сделать совсем одинаковыми те цвета, которые я вижу как почти одинаковые?
Ещё пробовал оставить просто два чередующихся цвета, но четыре, кажется, лучше, даже если некоторые из них одинаковые. Но для этой таблицы и монохромный вариант нормально работает, это уже тонкости для таблиц высотой во весь экран.
Ещё пробовал оставить просто два чередующихся цвета, но четыре, кажется, лучше, даже если некоторые из них одинаковые. Но для этой таблицы и монохромный вариант нормально работает, это уже тонкости для таблиц высотой во весь экран.
Да, сделать так, как Вы видите, Вы уже сделали, это первый вариант, я, правда не думал, что у Вас зеленый в желтый превращается, думал синий с зеленым одинаковые и еще немного желтый.
Первый вариант, отлично смотрится, а background можно сделать через striped, он сейчас так и сделан, только вертикально, я так его и думал расположить — горизонтально, а потом забыл. А для старых браузеров, картинку туда такую подгружать и все.
Спасибо, мое мнение: для дальтоников приемлемо
Первый вариант, отлично смотрится, а background можно сделать через striped, он сейчас так и сделан, только вертикально, я так его и думал расположить — горизонтально, а потом забыл. А для старых браузеров, картинку туда такую подгружать и все.
Спасибо, мое мнение: для дальтоников приемлемо
Стоит, наверно, уточнить, что дальтоники бывают разные, и мой вариант — не самый редкий, но и не самый распространённый. Чаще встречаются проблемы с зелёными колбочками, чем с красными — по идее, в таком случае жёлтый может склеиться не только с зелёным, но и с красным. Существует наука о правильных оттенках — не изучал в деталях, но, боюсь, её применимость в любом случае ограничена общей для фронтенда проблемой: у этих пользователей разные устройства с разными настройками!
Кстати, возможно, Вы замечали, что в современных светофорах цвета довольно сильно отличаются от советских — насколько я понимаю, это не просто так. По крайней мере, я новые вижу без проблем.
Кстати, возможно, Вы замечали, что в современных светофорах цвета довольно сильно отличаются от советских — насколько я понимаю, это не просто так. По крайней мере, я новые вижу без проблем.
А почему лесенка снизу вверх, а не сверху вниз? Неудобно же просматривать шапку. Можно вас попросить перерисовать, если есть возможность? Очень интересно посмотреть, вдруг когда-нибудь пригодится.
Я Вам могу дать исходник. Можете делать что хотите, спасибо за проявленный интерес.
все варианты для меня не user-friendly :)
надо смотреть, как/для чего используются данные в таблице.
если просто посмотреть — сделать сокращения или пронумеровать столбцы и отдельно сделать легенду для заголовков.
если посмотреть динамику или сравнить — то чарт нарисовать с линиями.
я бы сделал чарт :)
надо смотреть, как/для чего используются данные в таблице.
если просто посмотреть — сделать сокращения или пронумеровать столбцы и отдельно сделать легенду для заголовков.
если посмотреть динамику или сравнить — то чарт нарисовать с линиями.
я бы сделал чарт :)
Может это такая хитрая проверка? Если человек делает буквально то, что требуется, то он типичный верстальщик («начальника сказал — я сделяль»). А если человек придумывает какое-нибудь другое решение проблемы, то он достоин звания «разработчик интерфейсов».
Ваш вариант с цветными сносками — просто отличный
Использование цвета как основного носителя информации о чем-либо (в данном случае — для сопоставления данных и подписей) — категорически плохая идея. В градациях серого или, еще хуже, у людей с нарушениями восприятия цвета всё будет печально.
Далее — цветовые (контрастные серые при выводе в монохроме, что еще хуже) полосы пересекающие текст подписей (особенно нижнего ряда, по 4 штуки!) это вообще жесть. Общая читабельность текста из-за такой визуальной «нарезки» подписей — ниже плинтуса.
Для формирования такого мега-заголовка (в html) нужен совсем нетривиальный код, вставка, добавление перемещение колонок — реальная попоболь. Даже просто понять «потом» где в коде данные от нужного заголовка или где заголовок от нужных данных — оооой…
Визуальный порядок следования подписей нарушен. Да. Определить где подпись от конкретного столбца — можно. Но, просто попробуйте выписать названия столбцов по порядку (как вариант — пронумеровать столбцы — это чуть проще) — сразу поймете о чем я.
В общем, типичный «дизайнерский подход». Главное — чтобы было красиво. Ага.
Далее — цветовые (контрастные серые при выводе в монохроме, что еще хуже) полосы пересекающие текст подписей (особенно нижнего ряда, по 4 штуки!) это вообще жесть. Общая читабельность текста из-за такой визуальной «нарезки» подписей — ниже плинтуса.
Для формирования такого мега-заголовка (в html) нужен совсем нетривиальный код, вставка, добавление перемещение колонок — реальная попоболь. Даже просто понять «потом» где в коде данные от нужного заголовка или где заголовок от нужных данных — оооой…
Визуальный порядок следования подписей нарушен. Да. Определить где подпись от конкретного столбца — можно. Но, просто попробуйте выписать названия столбцов по порядку (как вариант — пронумеровать столбцы — это чуть проще) — сразу поймете о чем я.
В общем, типичный «дизайнерский подход». Главное — чтобы было красиво. Ага.
И, да, еще потерял, справа от последней колонки данных остается дофига много свободного места. И тем больше — чем длиннее подпись к последней колонке (ну или очень длинно у любой предыдущей).
Т.е. «масштабируемость» решения (применимость к другому набору данных/подписей) — тоже никакая
Т.е. «масштабируемость» решения (применимость к другому набору данных/подписей) — тоже никакая
На это я уже тоже отвечал: смотрите этот комментарий:
Вот о масштабируемости я с Вами могу поспорить, вот когда в одной таблице заголовки, то вертикально написаны, то горизонтально, вот это действительно не удобно.
Кстати а Вы что предлагаете?
Вариант с вертикальными заголовками не плотнее, он занимает столько же места по ширине, что и вариант с горизонтальными заголовками. Вариант с вертикальными заголовками как раз таки не плотнее, поскольку сдвинуться ячейкам мешают заголовки в три строки. Вы можете взять эти два варианта:
Вертикальные заголовки — ширина 825px
Горизонтальные заголовки — ширина 825px
И открыть их на соседних вкладках и сравнить, Вот их уменьшенные копии рядом:
Вот о масштабируемости я с Вами могу поспорить, вот когда в одной таблице заголовки, то вертикально написаны, то горизонтально, вот это действительно не удобно.
Кстати а Вы что предлагаете?
Вариант с вертикальными заголовками не плотнее, он занимает столько же места по ширине, что и вариант с горизонтальными заголовками.
Места — в смысле ширны таблицы — столько же. Но вот свободное место распределено по разному. В первом варианте — равномерно и нормально читается. Во втором — у вас справа огромное белое поле, а в колонках данных паддинги зажаты. Еще слева-вверху пусто. Это тоже следствие самого принципа.
Я не дизайнер. Я смею предположить, что Вы — не верстальщик. Код как раз таки тривиальный и работает под Netscape 4.7 от 2000 года (можно сделать, если подумать), потому что это colspan и rowspan, эти аттрибуты знает любой верстальщик.
Я не верстальщик, я ведущий инженер-программист. И я говорил не про html код, а про код формирующий html, прочтите внимательно.
Нормальным «foreach($columns as $column){}» для вывода тут ни разу не обойтись. От слова совсем.
Вам под каждую новую таблицу придется или писать новый код, или втыкать заголовок статикой (и править руками для каждого нового случая, для любой перестановки колонок, изменения подписей и т.п.)
Хуже того, для многоязычной системы внешний у вас вообще все будет «ползти» самым непредсказуемым образом (длина переводов на разных языках разная, и даже соотношение между длинами будет меняться). Также будет беда при сильно разной длине как данных, так и подписей (там вообще все плохо — сами попробуйте)
Разумеется, я не обсуждаю вопрос школьного сайта со статическими html страницами-же написанными в блокноте на одном языке…
Пронумеруем номера столбцов:
Я имел ввиду — пронумеровать подписи колонок. Расставьте там номер. Что будет? Будет пила причем снизу вверх что для Русского не характерно, мы таки не китайцы. Можно, наверное поменять и сверху-вниз, один черт — пила, будут возвраты вверх.
Там, ниже, критикуют, «чего мол доколебался до юного гения». Да, как-бы, мне жалко как программистов, которые рискнут это сделать не в «образцовой» статике, а в реальном коде, с переменным числом столбцов, меняющимися подписями, переводами и т.п. Так и пользователей, попытающихся скопировать, например, такую табличку в Еxcel (ага, ага, ваши полоски при этом — того… пропадут, и понять куда какая колонка относится — станет совсем легко, да)
Понимаете в чем засада? Оценивая любое такое новшество / предложение хороший программист должен в первую очередь думать «а что тут может пойти не так?
Это не попытка докопаться. А попытка спрогнозировать дальнейший жизненный цикл изобретения.
Черт. Длинно. Предложения „а как бы вы“ ниже напишу отдельно.
Так на то они и программисты, чтобы придумать как решить такую задачу, чтобы людям было удобно, мне кажется, что можно обойтись двумя вложенными циклами для вывода таких заголовков.
Насчет пустоты, которая справа, иногда бывают столбцы, которые носят название из одного слова, и может там контент будет как раз «длинный», так этот стобец — как раз для них.
Расставьте подписи номеров в первой строке, пусть это будет строка относящаяся к заголовку, как я уже показывал:
Нужен реальный пример, дайте реальный пример из реальной жизни, и я постараюсь показать Вам, как это можно сделать.
Насчет пустоты, которая справа, иногда бывают столбцы, которые носят название из одного слова, и может там контент будет как раз «длинный», так этот стобец — как раз для них.
Расставьте подписи номеров в первой строке, пусть это будет строка относящаяся к заголовку, как я уже показывал:
Нужен реальный пример, дайте реальный пример из реальной жизни, и я постараюсь показать Вам, как это можно сделать.
Нужен реальный пример, дайте реальный пример из реальной жизни, и я постараюсь показать Вам, как это можно сделать.
Вот, не дам я вам примера. Ни в одном проекте у меня такого нет, чтобы подписи не лезли горизонтально.
Приведенных мной мер по оптимизации всегда хватало.
Есть еще один «трюк» — специфичный, потому не упомянул в общем списке — использование «раскрывающихся» строк. Когда в таблице видны основные данные, а по клике на строку — открываются детали с бОльшим числом колонок. Тут нюанс в том, что это применимо когда «дополнительные» данные не требуют визуального сравнения между строками, а нужны для уточнения.
Пример:
А еще есть «многоэтажные» строки (привет 1С). Это когда каждая строка разбита на две и более подстроки. Подписи, в шапке, повторяют эту структуру. Ааа… Щас сделаю, короче картинку. На словах сложно. Вот:
В общем, этот ваш «полосатый
Продолжение на тему Кстати а Вы что предлагаете?
Во первых — используем возможности html — применение сокращений + хинт + сноска на расшифровку. Хинт как по ховеру, так и по тапу (помним про тачи). Клик на сноску — показ балуна с расшифровой — дабы не скролить и не угонять фокус внимания.
Во вторых — нужно заняться оптимизацией самих исходных данных. Рассмотреть, нельзя ли сократить длинные подписи. Оценить длину данных в колонках.
В третьих — данная таблица отлично транспонируется (меняем колонки на строки и наоборот). Обратите внимание — длина «2014г» практически равна цифрам. И число колонок и столбцов почти равно тоже. Да, не всегда это применимо. Но конкретно тут — сработает отлично. Вообще, это относится к п.2 (оптимизация данных) — но выделил отдельно, ввиду важности. Почему-то забывают про этот метод часто.
В четвертых — вспоминаем правила оформления таблиц для научных работ. Все ужеукрадено изобретено до нас. Группировка, вынос общих частей, нумерованные столбцы с расшифровкой и т.д.
(цельнотянуто отсюда чутка порезал выделив актуальное для нашего случая — по ссылке посмотрите целиком)
Во первых — используем возможности html — применение сокращений + хинт + сноска на расшифровку. Хинт как по ховеру, так и по тапу (помним про тачи). Клик на сноску — показ балуна с расшифровой — дабы не скролить и не угонять фокус внимания.
Во вторых — нужно заняться оптимизацией самих исходных данных. Рассмотреть, нельзя ли сократить длинные подписи. Оценить длину данных в колонках.
В третьих — данная таблица отлично транспонируется (меняем колонки на строки и наоборот). Обратите внимание — длина «2014г» практически равна цифрам. И число колонок и столбцов почти равно тоже. Да, не всегда это применимо. Но конкретно тут — сработает отлично. Вообще, это относится к п.2 (оптимизация данных) — но выделил отдельно, ввиду важности. Почему-то забывают про этот метод часто.
В четвертых — вспоминаем правила оформления таблиц для научных работ. Все уже
Головка состоит из слова или короткого предложения, описывающего содержание столбца. При необходимости в нее помещают принятые единицы измерения через запятую после слова или предложения, описывающего содержание столбца.
Иногда нет необходимости приводить в головке описательные сведения; в подобных случаях в ней размещают единицы измерения.
В головках столбцов символы, обозначающие переменные величины, следует применять с осторожностью, если сами переменные не названы. Читатель, ознакомившись с названием таблицы и сопровождающим его примечанием, должен сразу же понять, что обозначает символ. Следует, в частности, избегать применения символов “N” и “n” без разъяснения. Вместо этого следует писать “Число больных” или “Больные (n)”.
Поскольку ширина страницы (полосы) ограничена, в головках столбцов следует широко использовать аббревиатуры и символы. В то же время следует иметь в виду, что сокращения слов (например, забол., б-ные, дн., средн., продолжит., положит. и т.п.) недопустимы; в данном случае слова пишутся целиком. Все аббревиатуры и символы, которые использованы в таблицах, должны быть расшифрованы в примечаниях к ней. Если такие аббревиатуры встречаются в таблицах, расположенных на одной и той же полосе или на развороте, их достаточно расшифровать только в первой из таблиц.
Для экономии места на полосе общие элементы расположенных рядом столбцов можно объединить в блок; при этом элементы головки, общие для каждого из столбцов, становятся головкой блока.
Если используется блок, то каждый входящий в него столбец должен иметь собственную головку (подзаголовок).
Единицы измерения располагают в головке столбцов, если они относятся только к одному них. Если единицы измерения — элемент, общий для двух столбцов или более, их следует вынести в головку блока. При этом единицы указывают через запятую после названия головки (подзаголовка).
Следует стремиться использовать не более двух уровней подзаголовков.
Если блок объединяет данные, помещенные во всех столбцах таблицы, в нем нет необходимости; его роль переходит к названию таблицы.
В блок никогда не входит столбец боковика.
(цельнотянуто отсюда чутка порезал выделив актуальное для нашего случая — по ссылке посмотрите целиком)
Вот мы и используем возможности html, таблица с colspan и rowspan
насчет транспонирования, я уже отвечал, смотрите этот комментарий:
нужно заняться оптимизацией данных — абсолютно согласен, так и сделаю, устроюсь разработчиком интерфейсов, мне дадут какую-нибудь таблицу, а я и скажу — что Вы мне тут подбрасываете, нужно оптимизировать данные и сразу перейду на вакансию по проектировке БД.
Скажите, а почему Вы пользуетесь интернетом вообще? Ведь книжки читать именно Вам намного приятнее, не так ли? Наверное потому что удобно.
насчет транспонирования, я уже отвечал, смотрите этот комментарий:
А если годы с 1930 по 2015, то есть 85 колонок? а так закрепил шапку, а содержимое сделал прокручиваемым
нужно заняться оптимизацией данных — абсолютно согласен, так и сделаю, устроюсь разработчиком интерфейсов, мне дадут какую-нибудь таблицу, а я и скажу — что Вы мне тут подбрасываете, нужно оптимизировать данные и сразу перейду на вакансию по проектировке БД.
Скажите, а почему Вы пользуетесь интернетом вообще? Ведь книжки читать именно Вам намного приятнее, не так ли? Наверное потому что удобно.
Скажите, а почему Вы пользуетесь интернетом вообще? Ведь книжки читать именно Вам намного приятнее, не так ли? Наверное потому что удобно.
Уважаемый, не надо переходить на личности и, хм, абстракции к теме статьи слабо относящиеся. Право слово, оно того не стоит.
Я видел ваш коммент про транспонирование. Но и вы могли бы обратить внимание на акцент «данная таблица» и «выделил отдельно, ввиду важности». Я постарался конкретно указать почему в данном случае этот метод применим и хорош.
К слову, крутить можно и по горизонтали. Иногда это даже лучше. Скорее даже изредка. Но такие случае в практике мне встречались. Чаще всего это применимо — когда присутствует временная шкала. Она хорошо воспринимается по горизонтали.
нужно заняться оптимизацией данных — абсолютно согласен, так и сделаю, устроюсь разработчиком интерфейсов, мне дадут какую-нибудь таблицу, а я и скажу — что Вы мне тут подбрасываете, нужно оптимизировать данные и сразу перейду на вакансию по проектировке БД.
Хм. Вообще-то взаимодействие между фронтэнд и бэкэнд разработчиками должно быть всегда. Равно как и с постановщиками задач и заказчиком. И, если вы видите явный косяк в данных — вы не просто можете, а должны принять меры к его устранению.
И, да, не всегда получится. Могут и «послать». Но, позиция «я не я, корова не моя», «это не моя проблема — сказали копать отсюда и до обеда — я и копаю» это не есть гут.
А я не перехожу на личности, я как мне теперь кажется, констатирую факт.
Лучше крутить по горизонтали, когда например это аудио данные, но можно колесико мышки покрутить и в нормальном аудио редакторе весь длинный wav файл уместится на экране. Кстати вот идея: крутишь колесико мышки и длинная по горизонтали таблица сжимается и остаются только начала слов, затем подводишь мышку к тому столбцу, который тебя интересует, крутишь колесико мышки обратно и таблица расжимается. удобно? или sarcasm> Вы мышкой без колесика пользуетесь</sarcasm
взаимодействие должно быть между фронтэнд и бэкенд разработчикаи, согласен
Лучше крутить по горизонтали, когда например это аудио данные, но можно колесико мышки покрутить и в нормальном аудио редакторе весь длинный wav файл уместится на экране. Кстати вот идея: крутишь колесико мышки и длинная по горизонтали таблица сжимается и остаются только начала слов, затем подводишь мышку к тому столбцу, который тебя интересует, крутишь колесико мышки обратно и таблица расжимается. удобно? или sarcasm> Вы мышкой без колесика пользуетесь</sarcasm
взаимодействие должно быть между фронтэнд и бэкенд разработчикаи, согласен
Кстати вот идея: крутишь колесико мышки и длинная по горизонтали таблица сжимается и остаются только начала слов, затем подводишь мышку к тому столбцу, который тебя интересует, крутишь колесико мышки обратно и таблица расжимается. удобно? или sarcasm> Вы мышкой без колесика пользуетесь</sarcasm
<sarcasm Ну и правда, куда мне с моим убогим безколесным планшетом до вашего ээээ… Хм.., колесного айфона?/sarcasm>
Вообще-то именно поэтому я продолжаю с Вами дискуссию. Вы никак не хотите остановиться на 5 минут и подумать «а что в моей замечательной идее может пойти не так?»
Поймите, критический взгляд на вещи — это основа образа мышления хорошего программиста.
Ибо хороший программист тратит только 20% времени на код который делает то что надо и 80% времени тратит на код — который не позволит пользователю выстрелить себе в ногу ни при каких условиях.
Сегодня я не программист
Если в моей замечательной идее что-то пойдет не так, то я придумаю, как можно сделать так, чтобы проблеммы превратить в преимущества.
Если планшет, пальцами расдвигайте, сдвигайте, если он может, я думаю он может.
Если в моей замечательной идее что-то пойдет не так, то я придумаю, как можно сделать так, чтобы проблеммы превратить в преимущества.
Если планшет, пальцами расдвигайте, сдвигайте, если он может, я думаю он может.
Да я как-бы более чем намекал уже…
А вот про «пальцами расдвигайте, сдвигайте» это вам надо немного почитать про touch events. Если коротко — сейчас это нереализуемо. Т.к. мультитач события пока поддерживаются… не очень. А «сдвигать — раздвигать» перехватываются самим браузером. Есть способы это блокировать. Но, там, опять-же, проблемы совместимости.
В общем — можно — но сложно. Но! Главное не нужно так делать.
Потому что вы забыли, что пользователю еще надо догадаться что у вас есть такая фишка — навести курсор на колонку — покрутить колесо (ну или «пораздвигать» для тач-устройств)
Так что с точки зрения практического применения — вариант сделать сокращение + сноску оформленную как ссылка и обрабатывать тап/клик на ячейку является лучшим. Поясню почему.
Можно (и это проще всего) сделать просто обработку тапа/клика на саму ячейку заголовка. По клику — заменять на полный текст или показывать балун или выводить пояснение выше/ниже — масса вариантов.
Но! Тут есть засада из-за которой и появляется "+ сноску оформленную как ссылка " — засада в том, что на десктопе у вас есть ховер, и есть курсор, меняющийся при ховере. И есть высокая вероятность, что юзер хотя-бы и случайно протащит курсор по заголовкам и увидит что там что-то есть интерактивное.
А вот на таче — юзер как-то должен догадаться что надо ткнуть на заголовок.
Вот, чтобы ему такую догадку дать — мы и ставим вот такую 1 сноску, оформленную как ссылка.
Тут уже у пользователя с большой долей вероятности возникнет желание в нее потыкать — и он увидит вашу красоту с расшифровкой колонки (как бы она ни выглядела).
Хинт как по ховеру, так и по тапу (помним про тачи)
А вот про «пальцами расдвигайте, сдвигайте» это вам надо немного почитать про touch events. Если коротко — сейчас это нереализуемо. Т.к. мультитач события пока поддерживаются… не очень. А «сдвигать — раздвигать» перехватываются самим браузером. Есть способы это блокировать. Но, там, опять-же, проблемы совместимости.
В общем — можно — но сложно. Но! Главное не нужно так делать.
Потому что вы забыли, что пользователю еще надо догадаться что у вас есть такая фишка — навести курсор на колонку — покрутить колесо (ну или «пораздвигать» для тач-устройств)
Так что с точки зрения практического применения — вариант сделать сокращение + сноску оформленную как ссылка и обрабатывать тап/клик на ячейку является лучшим. Поясню почему.
Можно (и это проще всего) сделать просто обработку тапа/клика на саму ячейку заголовка. По клику — заменять на полный текст или показывать балун или выводить пояснение выше/ниже — масса вариантов.
Но! Тут есть засада из-за которой и появляется "+ сноску оформленную как ссылка " — засада в том, что на десктопе у вас есть ховер, и есть курсор, меняющийся при ховере. И есть высокая вероятность, что юзер хотя-бы и случайно протащит курсор по заголовкам и увидит что там что-то есть интерактивное.
А вот на таче — юзер как-то должен догадаться что надо ткнуть на заголовок.
Вот, чтобы ему такую догадку дать — мы и ставим вот такую 1 сноску, оформленную как ссылка.
Тут уже у пользователя с большой долей вероятности возникнет желание в нее потыкать — и он увидит вашу красоту с расшифровкой колонки (как бы она ни выглядела).
А вот про «пальцами расдвигайте, сдвигайте» это вам надо немного почитать про touch events. Если коротко — сейчас это нереализуемо. Т.к. мультитач события пока поддерживаются… не очень. А «сдвигать — раздвигать» перехватываются самим браузером. Есть способы это блокировать. Но, там, опять-же, проблемы совместимости.
В общем — можно — но сложно. Но! Главное не нужно так делать.
Так Вы не сделали, поэтому и нет. Вот сделаете — будет. Сделайте пожалуйста Сергей. Я понимаю, что это не Ваша специализация, но может у Вас есть знакомые, которые смогут это сделать? или Вы сами. А то люди мучаются.
В третьих — данная таблица отлично транспонируется
Транспонировать эту таблицу соблазнительно (выигрываем пространство), но неверно.
Потому что сравнение числовых данных всегда идет по колонке, а не по строке. Очевидно же, что намного более полезно следить за динакимкой каждого показателя по годам, чем сравнивать ввп с запрлатой.
Плюс количество параметров обычно более-менее постоянно, а годов может быть очень много (мне кажется, задача подразумевает некую универсальность, а не верстку одной отдельно взятой таблицы).
Насчет монохромных экранов и дальтоников, я уже отвечал смотрите этот комментарий:
Я не дизайнер. Я смею предположить, что Вы — не верстальщик. Код как раз таки тривиальный и работает под Netscape 4.7 от 2000 года (можно сделать, если подумать), потому что это colspan и rowspan, эти аттрибуты знает любой верстальщик.
Пронумеруем номера столбцов:
Главное, чтобы было удобно. А что не красиво, так это дизайнеры цвета подберут пастельные и толщину линий или бордера или еще что придумают.
При дальтонизме, для горизонтальных заголовков, вы идете вверх по линии, до того, как она упрется в заголовок.
Вы можете сделать могохромным это изображение и посмотреть как это будет выглядеть, можете цвета поменять на примерно одинаковые, все равно — идете вверх по линии, можно, также, закрепить шапку, а содержимое сделал прокручиваемым.
Я не дизайнер. Я смею предположить, что Вы — не верстальщик. Код как раз таки тривиальный и работает под Netscape 4.7 от 2000 года (можно сделать, если подумать), потому что это colspan и rowspan, эти аттрибуты знает любой верстальщик.
Пронумеруем номера столбцов:
Главное, чтобы было удобно. А что не красиво, так это дизайнеры цвета подберут пастельные и толщину линий или бордера или еще что придумают.
Люди, вы уже _достали_ прикапываться к человеку по всякой ерунде. Прямо как наши чиновники или полицейские, чесслово.
Я такого оригинального и удобного решения никогда не видел. Поэтому я ещё раз повторю — это гениально, просто, удобно, за этим будущее.
Вертикальные заголовки — жесть. Даже если речь идёт о какой-то напечатанной на небольшой бумажке таблице, вертеть неудобно. Мне приходилось и приходится работать с большим количеством таблиц (от английских мануалов разных фирм до перечней и ТЗ постсоветских НИИ) — подписей столбцов в вертикальной ориентации стараются избегать ВСЕ. Потому что они — говно.
P.S. Замечательная идея автора будет работать даже в случае чёрно-белой печати — достаточно сделать эти сноски светло-серыми.
Я такого оригинального и удобного решения никогда не видел. Поэтому я ещё раз повторю — это гениально, просто, удобно, за этим будущее.
Вертикальные заголовки — жесть. Даже если речь идёт о какой-то напечатанной на небольшой бумажке таблице, вертеть неудобно. Мне приходилось и приходится работать с большим количеством таблиц (от английских мануалов разных фирм до перечней и ТЗ постсоветских НИИ) — подписей столбцов в вертикальной ориентации стараются избегать ВСЕ. Потому что они — говно.
P.S. Замечательная идея автора будет работать даже в случае чёрно-белой печати — достаточно сделать эти сноски светло-серыми.
Честно говоря предложение не удобное. Удобные решения уже давно придуманы.
Мои варианты:
Первый:
Видео много элементов: screencast.com/t/S16Xvs6n8gGq
Второй:
Собственно, в зависимости от ситуации можно менять верстку.
Верстается 1 раз, потом юзается как плагин/компонент/что пожелаете.
Мои варианты:
Первый:
Видео много элементов: screencast.com/t/S16Xvs6n8gGq
Второй:
Собственно, в зависимости от ситуации можно менять верстку.
Верстается 1 раз, потом юзается как плагин/компонент/что пожелаете.
Кстати, очень рекомендую использовать различные данные.
Когда они одинаковые — вид совершенно далек от реального.
Когда они одинаковые — вид совершенно далек от реального.
По первому я уже написал, что удобнее не проматывать таблицу, а уменьшать ее, читайте этот комментарий
А если много столбцов, как я уже писал в этом комментарии:
Второе решение отличное, я к нему пришел в первом варианте который отслал в Яндекс, но не захотел возиться с бордерами
вот цитата из текста, который я отслал в яндекс:
Лучше крутить по горизонтали, когда например это аудио данные, но можно колесико мышки покрутить и в нормальном аудио редакторе весь длинный wav файл уместится на экране. Кстати вот идея: крутишь колесико мышки и длинная по горизонтали таблица сжимается и остаются только начала слов, затем подводишь мышку к тому столбцу, который тебя интересует, крутишь колесико мышки обратно и таблица расжимается.
А если много столбцов, как я уже писал в этом комментарии:
А если годы с 1930 по 2015, то есть 85 колонок? а так закрепил шапку, а содержимое сделал прокручиваемым
Второе решение отличное, я к нему пришел в первом варианте который отслал в Яндекс, но не захотел возиться с бордерами
вот цитата из текста, который я отслал в яндекс:
Вертикально расположенный текст трудно читать, так как вольно или невольно читающий его поворачивает голову на бок, чтобы прочесть заголовок, затем ему приходится перестраиваться и поворачивать голову в нормальное положение, чтобы прочесть содержимое ячеек таблицы, текст в которых расположен горизонтально. предлагаемое решение: по этой ссылке: postimg.org/image/odu6jf6fn или по этой: picpaste.com/pics/df7e95ff4a17faf5cc9975fb86ed6c89.1449642834.png
Эта таблица сверстана вручную и с помощью html-online.com/editor
Было бы еще не плохо выделить подтаблицы бордерами, но я не могу найти подходящий WYSIWYG редактор для этого, а делать это вручную достаточно утомительно.
1) Про сжатие — честно не понял что имеется ввиду. Даже если заголовки убрать, то места же все равно хватать не будет, разве не так?
2) На оба решения ушло 20 минут, с учетом того что данные я руками перепечатал и вспоминал как условным форматированием пользоваться :-) Правда это не конечная вёрстка, а набросок.
3) Таблица в комментарии — заголовки выглядят как группировка, а не как поля. Не очевидно. Ещё мешанина то нуль, то прочерк.
4) WYSIWYG — эксель вполне подходит для такого рода прототипов.
2) На оба решения ушло 20 минут, с учетом того что данные я руками перепечатал и вспоминал как условным форматированием пользоваться :-) Правда это не конечная вёрстка, а набросок.
3) Таблица в комментарии — заголовки выглядят как группировка, а не как поля. Не очевидно. Ещё мешанина то нуль, то прочерк.
4) WYSIWYG — эксель вполне подходит для такого рода прототипов.
Имеется ввиду, что когда Вы крутите колесико мышки, то таблица по горизонтали сжимается до размеров родительского элемента, в котором она живет, хорошо, до размеров окна, чтобы было проще понять, а когда вы наводите курсор мыши на интересующую Вас ячейку, а значит и столбец и крутите его (колесо мышки обратно), то она расжимается в этом месте. Поставьте Cool Edit Pro 2 или Audition возьмите любой mp3 файл и покрутите колесиком на любом месте осцилограммы этого расжатого mp3 файла — Вы поймете о чем я говорю.
Эксель подходит, но сделайте это в HTML, нет можно сделать в HTML, но что я на должность разработчика интерфейсов в Яндекс, для WEB буду присылать скрин экселя? А в ручную бордеры прописывать было достаточно утомительно.
Эксель подходит, но сделайте это в HTML, нет можно сделать в HTML, но что я на должность разработчика интерфейсов в Яндекс, для WEB буду присылать скрин экселя? А в ручную бордеры прописывать было достаточно утомительно.
Вот этот вид таблицы самый правильный. Непонятно, почему автор поста сделал сплошные пересечения заголовков. Ведь достаточно было поменять порядок заголовков (не лево-низ -> право-верх, а лево-верх -> право-низ), и все сразу становится на свои места.
Но на этой ветке (Арбатско-Покровской) не так много станций, как на Серпуховско-Тимирязевскаой (серой), к тому же кегль шрифта меньше, а значит надписи меньше, и я, например, не смогу прочесть их сидя на сиденье, так как у меня плохое зрение. Здесь они уже повернули текст не на 60° как во втором случае, а на 45°.Мне кажется вы немного лукавите.
Во-первых, всего на 4 станции больше. Не могу сказать, что такое прям кардинальное отличие. Тем более на лебедевском решении места осталось ещё очень много.
Во-вторых, не согласен, что у Лебедева читается хуже. У меня тоже зрение ни к чёрту, но я вижу что у вас сфографировано с одинакового ракурса, а значит я могу судить прямо по этим фото. И благодаря совокупности контраста (верхнее фото сильно рябит из-за латинских названий), межбуквенного расстояния, а также использования строчных вместо прописных, второе фото читается значительно лучше. Особенно, если слегка раскачиваться в чтении как это бывает в метро — при этом на вехрних фото степень «рябления» повышается до совсем критичной.
Я понимаю, что на хабре принято опускать студию Лебедева. Но всё ж считаю, что конкретно это решение по шрифту на этих картах — очень хорошее, и даёт значительный прирост читабельности.
По метро пара вариантов.
Первый: можно размещать не горизонтальный, а вертикальный элемент. Сразу выглядит читабельнее:
И второй, исходящий из примера ранее:
Конечно же это концепт, набросок. Я вполне вижу косяки из него следующие, но, вероятно, их можно было бы доработать.
Первый: можно размещать не горизонтальный, а вертикальный элемент. Сразу выглядит читабельнее:
И второй, исходящий из примера ранее:
Конечно же это концепт, набросок. Я вполне вижу косяки из него следующие, но, вероятно, их можно было бы доработать.
Первый — то что приходит в голову здравомыслящему человеку, но что скажут конструкторы поезда, потом если человек стоит около дверей, а там стоит толпа, то ничего не будет видно, тем, кто стоит уже за ним, особенно если поезд едет ближе от цента дальше полянки.
Второй, я хотел сделать, о, оказывается даже сделал
, но мама сказала, что она не понимает какая станция идет за какой станцией и её это сильно путает. то есть многие используют этот индикатор, не только как индикатор, а для того чтобы посмотреть через сколько станций выходить, а в этом случаее такой вариант не удобен
Второй, я хотел сделать, о, оказывается даже сделал
, но мама сказала, что она не понимает какая станция идет за какой станцией и её это сильно путает. то есть многие используют этот индикатор, не только как индикатор, а для того чтобы посмотреть через сколько станций выходить, а в этом случаее такой вариант не удобен
Вертикальные контролы в поездах я видел где-то точно :-)
Так что не знаю что там скажут конструкторы, но было достаточно удобно.
Если не ошибаюсь, в Индии часть контролов были именно такие. С учетом того, что карта была довольно большой — ориентироваться было удобно.
Что бы знать сколько остановок — светодиоды можно заменить, быть может, на дисплеи с цифрой.
Так что не знаю что там скажут конструкторы, но было достаточно удобно.
Если не ошибаюсь, в Индии часть контролов были именно такие. С учетом того, что карта была довольно большой — ориентироваться было удобно.
Что бы знать сколько остановок — светодиоды можно заменить, быть может, на дисплеи с цифрой.
А на каком уровне от пола, они были расположены? или там двухэтажные поезда? По-моему в Индии много народа, нет? Есть у Вас какая-нибудь похожая фотография?
Может просто заменить на дисплей все индикаторы и все? решение проблемы, если разработчик интерфейса этого дисплея понимает, что он делает и сам ездит в этих поездах, и когда видит, что что-то не так, выпускает обновление прошивки этого дисплея.
Может просто заменить на дисплей все индикаторы и все? решение проблемы, если разработчик интерфейса этого дисплея понимает, что он делает и сам ездит в этих поездах, и когда видит, что что-то не так, выпускает обновление прошивки этого дисплея.
Есть одна, но на ней, нет такого контрола: vk.com/photo1466715_291101860
Вот как справа нарисована карта — так же он и располагался, примерно. Возможно с подобным наложением карты, не помню уже точно.
Не двухэтажные.
Народа в метро не так много. Точнее, на входе вроде много, но в поездах всегда нормально было.
Тут нужно все требования узнавать, что бы ясно было — наверняка есть какие-то скрытые камни.
Вот как справа нарисована карта — так же он и располагался, примерно. Возможно с подобным наложением карты, не помню уже точно.
Не двухэтажные.
Народа в метро не так много. Точнее, на входе вроде много, но в поездах всегда нормально было.
Тут нужно все требования узнавать, что бы ясно было — наверняка есть какие-то скрытые камни.
Где-то я этот концепт уже видел. :)
На самом деле, не совсем — одно дело наслаивать Ленинград на Варшаву, и совсем другое — Чертановскую на Севастопольскую. Только перпендикулярные надписи, только хардкор. А вертикальный вариант всем хорош, кроме одного: в час пик как минимум нижнюю половину видно не будет.
На самом деле, не совсем — одно дело наслаивать Ленинград на Варшаву, и совсем другое — Чертановскую на Севастопольскую. Только перпендикулярные надписи, только хардкор. А вертикальный вариант всем хорош, кроме одного: в час пик как минимум нижнюю половину видно не будет.
Длинные вертикальные строки относительно хорошо читаются, в отличие от коротких вертикальных. А цветные линии и блоки (на мой взгляд) создают визуальное нагромождение и мешают быстрому восприятию.
Я уже отвечал на похожий комментарий:
Кстати пользователь salas уже предложил более удачное решение
Главное, чтобы было удобно. А что не красиво, так это дизайнеры цвета подберут пастельные и толщину линий или бордера или еще что придумают.
Кстати пользователь salas уже предложил более удачное решение
По обоим опросникам воздержался, т.к. голову на бок наклоняю, но никаких напряжений не ощущаю, с наклонными вариантами (60 и 45 градусов) восприятие у меня хуже. Ровно как и с заголовками-сносками (предложенными вами как решение). Наверное частое посещения библиотеки в детстве сыграло свою роль. Но там раздражало, что на некоторых книгах надпись повёрнута не на 90 градусов, а на -90 (или 270, кому как угодно), особенно когда они чередуются.
Горизонтальный лучше, но ещё лучше будет если название первой колонки (или первой с длинным названием) будет в первой строке шапки, второй — во второй и т.д., а не первой в последней, второй в предпоследнией…
.
В комментариях правильно предложили нумерацию столбцов, правда до конца мысль не довели. А ведь это давно известный прием для такого типа таблиц. Еще в стародавние времена сокращали до цифр названия столбцов и делали сноску.
1. Вертикальный заголовок. Даже если писать по-китайски — в столбик по слогам, это читается плохо.
Вер-
ти-
каль-
ный
За-
го-
ло-
вок
С поворотом на 60 градусов куда лучше.
2. Решение предложенное в посте. Выскажу свое сугубо личное мнение. По долгу службы, я много работал с традиционно оформленными таблицами, если вижу такое перекрытие — это сразу сигнал, что информация относится к 2 и более столбцам под перекрывающим заголовком. А цветные линии, на которые надо оказывается смотреть, по-моему, только сбивают с толку. Я конечно догадался, для чего они, но не с первого взгляда. А что будет если таблица будет распечатана на черно-белом принтере?
3. Если заказчик хочет вертикальный заголовок, ему все же нужно дать вертикальный заголовок, и показать прототип другого решения, пояснив, чем оно лучше.
Вер-
ти-
каль-
ный
За-
го-
ло-
вок
С поворотом на 60 градусов куда лучше.
2. Решение предложенное в посте. Выскажу свое сугубо личное мнение. По долгу службы, я много работал с традиционно оформленными таблицами, если вижу такое перекрытие — это сразу сигнал, что информация относится к 2 и более столбцам под перекрывающим заголовком. А цветные линии, на которые надо оказывается смотреть, по-моему, только сбивают с толку. Я конечно догадался, для чего они, но не с первого взгляда. А что будет если таблица будет распечатана на черно-белом принтере?
3. Если заказчик хочет вертикальный заголовок, ему все же нужно дать вертикальный заголовок, и показать прототип другого решения, пояснив, чем оно лучше.
Реально надо просто поменять столбцы и строки местами, как показали в комментах выше. А вообще лучше выбрать другой вид отображения данных, графики будут нагляднее таблиц.
Я уже отвечал на подобный комментарий:
А если годы с 1930 по 2015, то есть 85 колонок? а так закрепил шапку, а содержимое сделал прокручиваемым.
Покажите, пожалуйста, если у Вас есть время, как можно наглядно представить эту информацию в виде графиков, если у Вас 85 колонок и изменения показателей не плавное, а резкое — например:
Инввестиции в основной капитал, млрд. рублей
23.4
87.9
14.7
129.1
42.7
63.9
11.4
38.6
112.7
А если годы с 1930 по 2015, то есть 85 колонок? а так закрепил шапку, а содержимое сделал прокручиваемым.
Покажите, пожалуйста, если у Вас есть время, как можно наглядно представить эту информацию в виде графиков, если у Вас 85 колонок и изменения показателей не плавное, а резкое — например:
Инввестиции в основной капитал, млрд. рублей
23.4
87.9
14.7
129.1
42.7
63.9
11.4
38.6
112.7
Если промежуток в 85 лет, то вообще не ясно, как таблица может помочь сравнивать эти цифры. Если оставлять таблицу, то в голову сразу приходит объединить промежутки в 5 или 10 лет. Тут еще вопрос, какую задачу должна решать эта таблица. Редко когда надо знать конкретную цифру, конкретной величины в определенных год. Обычно важно сравнение изменений за период времени. Это можно сделать или линейными графиками или барчартами.
Попробую найти время проиллюстрировать.
А вообще советую посмотреть работы и советы Лаборатории данных, хорошо визуализируют. Ну и в советах Бюро Горбунова очень много есть о разных таблицах.
Попробую найти время проиллюстрировать.
А вообще советую посмотреть работы и советы Лаборатории данных, хорошо визуализируют. Ну и в советах Бюро Горбунова очень много есть о разных таблицах.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Вертикальные заголовки: кто прав?