|
|
|
||||
| Найдено 453 совета и 313 комментариев |
|
|
||||||
|
Тренируюсь улучшать таблицы… Илья Бирман: Обязательно ли, чтобы количество словенцев в Италии или сербов вообще было показано прямо в таблице или это можно вынести в примечание?… А вот хорошая анимированная гифка с процессом чистки таблицы: http://darkhorseanalytics.com/…/uploads/2014/03/ClearOffTheTableMd.gif (http://darkhorseanalytics.com/blog/ Парадокс улучшений, в том что на итоговую таблицу невозможно смотреть… Редакторов сейчас учат, перестраивая таблицы, обязательно заполнять пустые строки с помощью тире, во избежание непонимания материала читателем… |
||||||
|
|
||||||
|
Часто меня просят нарисовать в админку новую страницу с кликабельной таблицей-списком… Илья Бирман: Вообще непонятно, зачем вам подчёркивать, что таблица продолжается, если там больше ничего нет?… |
||||||
|
||||||
|
Меня заинтересовали ваши разборы таблиц про футбол… Константин Мозговой: При беглом взгляде на таблицу видно, что синих линий больше… Я бы сделал таблицу, а в освободившееся место добавил предыдущие матчи тех же команд, так можно будет проследить историю взаимоотношения между этими командами… Николай, таблица и правда получилась аккуратная… |
||||||
|
|
||||||
|
Одной из особенностей таблиц является то, что их минимальная ширина далеко не всегда зависит от указанной в ЦСС… Артём Поликарпов: Я не знаю, какая задача перед вами стоит, но предположу, что если исходное поведение таблиц вас не устраивает, возможно, вам вообще стоит отказаться от таблиц, так как Но по таблице проще ориентироваться (все выведенные атрибуты нужны в повседневной работе), и её свойства «делать колонки» в этом случае очень удобны… Пока не знаю другого простого способа, кроме таблицы, как в резиновой вёрстке равномерно увеличивать расстояние между блоками… Однажды таблицы помогли мне правильно растянуть слоган неизвестной длины ровно по логотипу
http://artpolikarpov.ru/html/ |
||||||
|
||||||
|
Как можно улучшить вид этой таблицы?… Константин Мозговой: Такие числа, как и круги, позволяют охватить таблицу взглядом и понять, кто чаще играет в основе, кто выходит на замены, кто редко играет, а кто пришёл в клуб только в сезоне 2020/21 и сразу играет полные матчи… Читатель намного сильнее устанет от чисел, потому что таблица заставляет самостоятельно делать выводы… Хотя тут уже зависит от условий, в которых таблица будет потом существовать… К сожалению, кто страдает от астигматизма и частичной цветовой слепоты, не сможет комфортно изучить эту таблицу… |
||||||
|
|
||||||
|
Если к верху, то у однострочных заголовков будет очень большое расстояние между заголовком и началом таблицы… Илья Бирман: Желание объединить выбор сортировки с шапкой таблицы понятно, но иногда лучше понять, какие варианты сортировки действительно полезны, вынести их в отдельный элемент и хорошо подписать… А в таких таблицах частенько есть порядок сортировок… В таблице достаточно места, чтобы сделать заголовки активными… |
||||||
|
|
||||||
|
Илья Бирман: Горизонтальные линии также могут быть полезны в таблицах с очень сложной структурой, когда другие, более спокойные и информативные способы отделения строк (отступ; прографка; возможно, нумерация) уже исчерпаны… Я согласен, что линейки в таблицах — последнее средство выразительности, когда все остальные уже исчерпаны… При всех недостатках, в чересполосице действительно есть смысл, когда мы говорим об очень широких таблицах (около 10 колонок на 17 дюймов экрана)… |
||||||
|
Илья, на работе проектируем торговые терминалы с огромными таблицами в десятки колонок… Илья Бирман: Если вы придумаете, как интерфейс будет решать основные задачи трейдеров, то умная пагинация в таблицах вам и не понадобится, потому что трейдерам вообще не придётся ничего листать… |
||||||
|
|
||||||
|
А. Г.: Однако самая часто встречающаяся ошибка в оформлении таблиц, в том числе и на наших курсах,— чрезмерные расстояния между колонками… Предполагаю, что серый цвет во второй таблице появляется только при использовании прицела… Вторая таблица («шахматка») в экранном интерфейсе — нонсенс… Также победителей чемпионата принято выделять в таблице… |
||||||
|
|
||||||
|
А. Г.: В исходной таблице явный провал в ночное время… Иначе по такой таблице не выжить… После обеда на сайте можно показывать таблицу, в которой продукты сгруппированы по времени окончания приема… |
||||||
|
|
||||||
|
А. Г.: Они установятся автоматически в значения из таблицы или их требуется выставить вручную?… Если отойти от темы таблицы: на всей одежде могли бы быть универсальные Можно пробовать изменять исходную таблицу, но реальное улучшение возможно только при тесном взаимодействии с механикой… Было бы круто вместо таблицы поставлять с машинкой брошюру про то, как что стирать… |
||||||
|
|
||||||
|
Илья Бирман: Это ещё можно было бы простить в таблице, где заголовки — формальность и данные говорят сами за себя… Обычно цифры в таблице выравнивают по правому краю, чтобы разряды были ровно друг под другом… |
||||||
|
|
||||||
|
Смотрите, вот одна ячейка вашей таблицы… |
||||||
|
|
||||||
|
А. Г.: Вот только мне кажется, стоит зеркально отразить таблицу… Буквы в столбцах должны находиться не в алфавитном порядке, а по мере уменьшения оптической плотности (и увеличения предположительно необходимой величины кернинга), в левой части таблицы для правой стороны буквы, в правой — для левой… Во время разработки шрифта в таблице могли бы появиться конкретные значения… |
||||||
|
|
||||||
|
Артем, как вы посоветуете упростить таблицы такого рода?… А. Г.: Для удобства чтения я бы первую таблицу вытянул по вертикали, а вторую, наоборот — в одну полоску… Во второй таблице, предложенной Артемом, заголовки колонок «просрочек» и «баланс» |
||||||
|
|
||||||
|
Посмотрел А. Г.: Но поскольку мы не знаем настоящей функции приведенной вами таблицы (принятие решения о покупке, эксплуатация, ремонт), рассуждать об идеале сложно… Такие таблицы нужны не пользователю, а мастеру Таблицы характеристик такой продукции нужны, прежде всего, разработчикам аппаратуры, которым необходимо выбрать нужный компонент из представленных на рынке… |
||||||
|
|
||||||
|
Илья Бирман: Но вся каша в таблицах — следствие бредового и непостижимого подхода… Уважаемый тёзка, вы очень даже зря отказались от использования зебры в длинных таблицах… |
||||||
|
|
||||||
|
А. Г.: Ну и, наконец, гораздо лучше ссылаться на таблицу по номеру страницы и ее расположению в тексте, чем по номеру… Сокращать в таблицах вообще нужно активно, а канцеляризмы типа «влияние на степень» не красят и обычный текст… Если таблица для неподготовленных читателей, то хорошо бы затенение и структуру продублировать картинками или рисунками… |
||||||
|
||||||
|
В работе над каталогом столкнулся с составлением таблиц, которые занимают достаточно много места, но, как мне кажется, не очень информативные… Михаил Нозик: P. S. А может быть, тут нужна вовсе не таблица, а какая‑нибудь визуализация или матрица… Крышки в таблице повторяют ширины лотков, им не нужна таблица… |
||||||
|
|
||||||
|
А. Г.: Но нам этого и не надо: добавим жежешных человечков — их будет мало, но они разделят таблицу на две части слева и справа… Показывать такие цифры будет не с руки ни в одном из вариантов таблицы… Таблицу сделали близкую к той, что предлагал Анатолий Карасов… |
||||||
|
|
||||||
|
Это типовая таблица сезонных расценок для курортного отеля… А. Г.: Начать со структуры таблицы — чем определяется порядок строк в таблице?… Это ж для сайта, поэтому я бы переделал таблицу в card layout, и уже в каждой карточке показал бы лёгкий планчик комнаты с инфой о ценах и прочих деталях… Если организовать сортировку по типу номеров (однокомнатный, двухкомнатный), то вдобавок таблица автоматически отсортируется по количеству мест и площади… |
||||||
|
|
||||||
|
Илья Бирман: Нормальное название таблицы (у вас 99% слов не несли вообще никакого смысла: «предлагает своим абонентам тарифные планы», «варьируется в ценовой категории», ну что это такое?)… Таблица простая, единицы спокойно удерживаются в голове, будучи единожды прочитаны с заголовка… Помимо этого, в обоих вариантах две полосы серого текста мешают сравнить тарифы в таблице… В этой таблице так поставлены фразы «Нет ускорения» и «Нет бонуса», что хочется поставить между ними тире… |
||||||
|
|
||||||
|
Обожаю таблицы!… |
||||||
|
|
||||||
|
Затесавшаяся между долларами строчка с количеством пользователей говорит о том, что с таблицей что‑то не то по смыслу и её надо вообще как‑то иначе организовать, но я не знаю, что это и зачем, поэтому думайте сами… |
||||||
|
|
||||||
|
Уважаемые советчики, у меня к вам такой вопрос: почему заголовки таблиц принято выделять жирнее, чем содержание?… Илья Бирман: Как тоненькая линейка под ними — ни для чего не нужна, но зато сразу даёт понять: это таблица… Вариант C работает пока таблица небольшая… Ведь главная цель таблицы — показать именно плохие фильмы, а рассказать о плохих режиссерах и других деталях — второстепенная… |
||||||
|
|
||||||
|
Илья Бирман: По идее эту таблицу нужно просто убрать… В двадцатом веке все года одинаково значимы, и если у вас нет авторитетных источников, которые выделяли бы указанные вами года (насколько вообще корректно сравнивать Оруэлла и ВОВ — отдельный вопрос), ваша таблица просто не имеет права на существование в энциклопедии… |
||||||
|
|
||||||
|
А. Г.: Чтобы пояснить таблицу новичку, напишите сверху: «номер модификации указан только при отличии»… А на мой взгляд, здесь достаточно вывести логичную понятную таблицу… |
||||||
|
||||||
|
Илья Бирман: Не объединяют, потому что нужно, чтобы каждая колонка такой таблицы имела смысл сама по себе… Поделюсь своим мнением как такие автоматические таблицы лучше устраивать… |
||||||
|
|
||||||
|
А. Г.: Ваш первый вариант — пример бессмысленного использования модульной сетки. Выравнивание надписей про домашний бизнес и частичную занятость разрушает логику первых двух строчек. А между тем, логическое разнесение поможет ориентироваться — через пять минут на сайте пользователь станет искать… Из очевидного: - во втором варианте зелёный пунктир в таблице выглядит так же, как и подчёркивание ссылок в правой колонке, хотя строки ссылками не являются; - блоки в различных колонках не обязаны быть выровнены относительно друг друга, иначе вам придется подгонять содержимое под размер блоков; - подсказку надо всё же ставить возле заголовка («затраты на запуск»), а не значения («70 000 $»); - номер варианта в верхнем правом углу выглядит как часть дизайна:) Оба варианта таблицы выглядят достаточно «повествовательно»… |
||||||
|
|
||||||
|
Подскажите, как правильно делать шапку у таблицы в данном случае?… Илья Бирман: Здравствуйте! Сначала уберём всё лишнее и вынесем единицу измерения в заголовок: Теперь можно и подвигать то, что осталось: Ой, ещё повторы остались, вот, так лучше: Вроде бы в заголовке можно оставить просто «Стоимость ремонта подвески, ₷». И «диагностику подвески» заменить на просто «… Вы возразите, что тут сработает правило внешнего/внутреннего, но если мы повесим табличку в вашем первом варианте и во втором в автосервисе, то увидим, что над второй проводят в 2 раза больше времени и идут к мастеру… Есть подозрение, что таблица не нужна… Мне кажется, вам удалось определить одно из скрытых назначений таблицы — развлечь посетителя… |
||||||
|
|
||||||
|
Как вам вёрстка таблицы с результатом шахматного турнира?… Константин Мозговой: Дима! Главную проблему я вижу в том, что сложно понять, кто с кем играл. Приходится соотносить цифры в первой строчке с позициями игроков. Чтобы это исправить, предлагаю продублировать ники игроков вверху. Заодно я избавился от линеек и сверстал всё немного компактнее: pikabu.ru… |
||||||
|
|
||||||
|
Подскажите, как лучше сверстать эту таблицу?… Илья Бирман: Двигаю и рассуждаю вслух (с 0:24): В итоге получилось так… |
||||||
|
||||||
|
Как правильно писать единицы измерения в интерфейсе с табличным представлением информации?… Илья Бирман: Заодно не смог удержаться и переделал таблицу (процесс тоже в видосе)… |
||||||
|
|
||||||
|
А. Г.: Тарифы без ограничения по скорости с ограничением по объему трафика, в гривнах Тариф Стоимость в месяц В том числе абон. плата / предопл. трафик Стоимость 1 МБ трафика Стартовый 15,00 10,00 / 5,00 в течение суток0,22 14.00..15.000,05 Ночной 18,00 12,00 / 6,00 03.00..07.000,01 07.00..08.000,03 08.00… Смысловой перенос в заголовках таблиц в данном случае особенно хорошо работает на их читаемость… Люблю, когда в таких таблицах подсвечиваются строки (выбор становится более тактильным)… |
||||||
|
|
||||||
|
Таблица показывает зависимость продолжительности зарядки аккумуляторов от их типа и «объема»… А. Г.: Думаю, можно избавиться от повтора аббревиатуры NiMH и поставить среднее тире в диапазонах — текст ведь на английском. Charging time of nickel metal hydride (NiMH) batteries depending on capacity: mAhhours AAA650–75012–14 80015 AA1300–150010–12 1850–210014–16… Но не могу утверждать, что Предлагаю использовать таблицу Артема и добавить иллюстрацию батарей… |
||||||
|
|
||||||
|
Илья Бирман: Денис, думаю, стоит убрать вертикальные надписи, перестать писать рубли бледным, сократить названия процедур («Уборка салона пылесосом» → «Пылесос»), и всё будет вполне пристойно. Однако сам по себе В плюсе — избегание частокола из знаков рубля, сохранение возможности поразрядного сопоставления сумм в строках, визуально более «легкая» таблица… А таблица тарифов такая сложная и запутанная, напоминает таблицы тарифов операторов сотовой связи… |
||||||
|
|
||||||
|
А. Г.: Простого способа выровнять текст в ячейке по запятой всё ещё нет. В ХТМЛ 4 такое поведение предусмотрено — в спецификации выравнивание по произвольному символу в столбце задаётся с помощью атрибутов align и char у тега col: Но в большинстве браузеров это не работает до сих пор. А в ХТМЛ 5 align и… Таблицу по всем цифрам формировать с десятичными знаками… |
||||||
|
|
||||||
|
Таблицы задаются тегом , шапка таблицы — тегом (table header), содержимое — тегом (table body)… |
||||||
|
|
||||||
|
Например, то что находится в заголовке таблицы, относится ко всей таблице, то что в заголовке группы — ко всем строкам группы, то что в боковике, то есть в первой колонке строки — ко всей строке… |
||||||
|
Если при сокращении теряется смысл, потерю можно восполнить в заголовке таблицы («Себестоимость и средняя реализационная цена продуктов растениеводства») или сопроводительном тексте («Цена рассчитана исходя из…»)… |
||||||
|
|
||||||
|
Менеджер просит растянуть верхнюю таблицу, чтоб выровнять по нижней, чтоб взгляд не скакал и чтоб не было пустоты слева и справа… Илья Бирман: Если менеджеру не нравится, что таблицы разной ширины, можно нарисовать пару линеечек… |
||||||
|
|
||||||
|
Илья Бирман: Надо всё наоборот: сайт научить нормально тянуться, а таблицу сделать фиксированного размера исходя из её данных… Мне кажется проблемы в дизайне таблицы могут быть решены подбором информативных названий столбцов и сокращением ширины столбца с названиями команд… |
||||||
|
Сам я верстал ещё тэйблами под IE 5.5, а нынешние разработчики «рисуют» таблицы кучей скриптов, часто не могут правильно рассчитать ширину колонки в зависимости от контента… Василий Половнёв: Самым серьёзным изменением стало появление мобильных устройств: таблицы как‑то нужно адаптировать к узким экранам… |
||||||
|
|
||||||
|
Все издания мира публикуют таблицы с рейтингами Олимпиады — 2024… Таня Мисютина: Для них публикуют итоговые таблицы медального зачёта… |
||||||
|
; +0,2 Евгений не только не смешал в кучу «вышку» и «премьерку», но и показал таблицы для обеих; +0,2 разобрался, почему в условии была картинка в формате 16:9, и сделал правильную, 4:3; +0,1 названия команд написал в столбик, а не строку; +0,1 показал, что бывают региональные спонсоры и генеральные… |
||||||
|
|
||||||
|
Кажется, в вашем случае эффективнее будет перевернуть таблицу, чтобы сами изделия стали строками, а их параметры — столбцами… |
||||||
|
|
||||||
|
Подскажите пожалуйста, в каком месте таблицы лучше расположить кнопку редактирования карточки сотрудника и почему?… Михаил Нозик: Так лучше, потому что таблица становится менее шумной, а кликабельный элемент — крупнее, по нему проще попасть… |
||||||
|
|
||||||
|
Достижения в вашей таблице обезличены: автору не важно, какие статьи публиковали студенты и какие завоёвывали награды, каждое достижение — очко в общую копилку… |
||||||
|
В работе над каталогом столкнулся с составлением таблиц, которые занимают достаточно много места, но, как мне кажется, не очень информативные… Михаил Нозик: В комментариях к первой части совета предлагали заменить таблицу диаграммой и инфографикой… Исходная таблица, при всей её неказистости, это решает… Они открывают таблицу, находят нужные параметры и копируют данные из столбца «Наименование», который был в исходной таблице… Будь это электронный формат, то таблица, поиск по ней и наименования пригодились бы, конечно… |
||||||
|
|
||||||
|
А в варианте вашего начальника, наоборот, в самом начале написано, что нас ждёт в таблице, и потом вся таблица уже понятна без дополнительных пояснений… |
||||||
|
|
||||||
|
Рост числа собственных предприятий довольно неубедительный, следовательно, в таблице достаточно одной строки… |
||||||
|
|
||||||
|
В одном из них присутствует табличка, которую я вам прислал… Илья Бирман: Теперь на таблицу можно и издалека посмотреть, чтобы увидеть структуру, и вблизи, чтобы прочесть отдельные фразы… Без объяснения таблица не имеет ни малейшего смысла… |
||||||
|
|
||||||
|
Илья, хочу узнать ваше мнение о том, какой из вариантов отображения таблицы результатов футбольных матчей более удобен на сайте… Илья Бирман: На ваших картинках чёрный прямоугольник разрывает строку и выглядит слишком навязчиво. Его хочется задвинуть Разбивка по колонкам, характерная для таблиц, удобна, когда нужно сравнить показатели строк друг с другом… |
||||||
|
|
||||||
|
А. Г.: Я бы поборолся за лаконичность… Энтер — сохранить цену и перейти к редактированию следующей в цены в таблице… |
||||||
|
Сегодня отвечаю на ваши вопросы о том, где уместно бионическое форматирование текста, как улучшить вёрстку таблицы и подходит ли для подбора цветов правило 60‑30‑10… |
||||||
|
|
||||||
|
В качестве первой пробы
я решил усовершенствовать таблицу стоимости трафика в зависимости от времени суток… А. Г.: Станислав, все здорово. Я бы визуально отделил элементы интерфейса от иллюстрации, а также выделил непосредственный ответ на вопрос — 68 рублей. Временную ось стоит продублировать — кто знает, куда захочется пойти взгляду? См. также совет о Надо избавляться от лишних контролов, таблица на 4 строки намного лучше в данном случае, чем «калькулятор»… Тогда все эти «иезуитские» диаграммы, калькуляторы и таблицы окажутся не нужны… |
||||||
|
|
||||||
|
Подскажите, пожалуйста, как можно более удачно переделать таблицу… Илья Бирман: Привет! А зачем вы разорвали заголовок на два предложения, написав одно из них бледно‑серым? И зачем лозунг про больше‑больше, неужели только чтобы слово «страниц» подсветить? Кажется, это слишком тяжёлая артиллерия. Страницы я бы подписал явно. Обойтись без рублей можно, но с ними лучше, потому… Хоть отдельной строчкой под таблицей… |
||||||
|
|
||||||
|
Илья Бирман: Вот уж не знаю, зависит от сайта. Но вот так — поопрятнее… Есть смысл сделать таблицу ещё проще… Мильчин советует так поступать с таблицами, чтобы внутри ячеек оставались только значения… |
||||||
|
Сегодня отвечаю на ваши вопросы о том, как улучшить таблицу с расписанием аудиторий, нужен ли бумажный дневник современному школьнику и как быть с висячими предлогами и союзами, когда верстаешь имейлы… |
||||||
|
|
||||||
|
Очень печалит то, как выделяются наследуемые значения в Variant Attributes
таблице… А. Г.: С редактированием таблицы я бы поступил так… Они отображаются таблицей, при клике по цене появляется поле редактирование, а затем она сохраняется без перегрузки страницы (ajax)… Не будет ли подсветка строки при наведении восприниматься как обычное (порой) выделение строки для удобного считывания длинных рядов в таблицах (не имеющих линеек)… |
||||||
|
|
||||||
|
Сверху — схема базы из пяти таблиц с указанием ссылок… Илья Бирман: А уж если для открывайте поля связанной таблицы, как если бы это была иерархия… |
||||||
|
|
||||||
|
Это таблица из пока что незавершённой курсовой по технологии производства автомобилей и тракторов… Илья Бирман: Вслед за числами люди выравнивают по правому краю и заголовки колонок с числами, и таблица разваливается… Сплошь и рядом встречается в таблицах технических характеристик… |
||||||
|
|
||||||
|
Я предложил Алексею
избавиться от экселевских рамок в таблице… А. Г.: Если Алексей посетит наш трехдневный практический курс 5, 6 и 8 ноября, то в части, посвященной информационному дизайну, мы расскажем ему о тонкостях дизайна таблиц и постараемся убедить в ненужности рамок… Я не дизайнер, но Мои соображения — неудобно воспринимать структуру таблицы
I. Доход 1.Приход 1.1 приход утром 345 123 435 1.2 приход вечером 345 123 435 1.3 приход вечером 345 123 435 2.Уход 2.1 приход утром 345 123 435 2.2 приход вечером 345 123 435 2.3 приход вечером 345 123 435
И вот от этого нужно плясать, |
||||||
|
|
||||||
|
А. Г.: Я бы убрал повторы названия собственной команды из таблицы и сократил даты… В таблице необходима разделительная черта, отделяющая предстоящие и прошедшие игры, по которым известен счет… Думаю, что на этот случай нужно сделать версию «для печати», где будет отображаться полная информация о таблице — и полное название «Расписание… команды Динамо… в Суперлиге А и Евролиге… сезона 2007/08», и названия двух команд, и счет, и даже графу «Лучшие игроки» и еще схожую информацию… И спасибо всем, кто ответил и даже создал свои таблицы!… |
||||||
|
|
||||||
|
Почти уговорила заказчика, что текст без таблицы будет читаться лучше… А. Г.: Вы, наверное, имеете в виду, что таблица без прографки будет читаться лучше… Сваи, отличающиеся только типом армирования (последняя цифра в группе), имеют одни и те же показатели в таблице… В таблице меня смущают одинаковые строки, различающиеся только наименованием изделия… Обратимся к приведённой им таблице: 1) Возможно, шрифт у заголовка и у наименования немного различается, возможно, существует почти невидимый моему глазу отступ наименования вправо, но на мой взгляд, заголовок и наименования выглядят равновесными, особенно это заметно на второй группе… |
||||||
|
Илья в канале в Телеграме в качестве примера нарушения дизайнерских правил привёл таблицы с чересполосицей… Илья Бирман: А если без чересполосицы таблица «разваливается», и становится трудно читать строки, значит она плохо свёрстана — несите её сюда, починим… Например, если в силу формата необходимо набрать таблицу очень плотно, |
||||||
|
|
||||||
|
А может и саму таблицу можно улучшить?… А. Г.: переместить примечание о курсиве в начало таблицы — там оно нужнее… Артём, убрав таблицу, вы проиграли в скорости обзора оглавления… Если действия достаточно массовые, вроде предлагаемого изменения всех сразу навигационных таблиц, то консенсус неплохо бы сначала установить обсуждением… |
||||||
|
|
||||||
|
А данную таблицу очень желательно видеть целиком, чтобы можно было оценить успеваемость конкретного студента… Илья Бирман: также таблицы на Биатлонтайме… Сама задача велит сделать эту таблицу интерактивной… Таблица рискует стать и широкой и непонятной одновременно… |
||||||
|
|
||||||
|
Лучшим вариантом мне видится обычная таблица, но желательно все это представить в виде графиков… Илья Бирман: Таблица, конечно, совсем не помогает тут понять, что важно людям, графики удобнее… |
||||||
|
|
||||||
|
Но вот с отображением табличных данных, где каждую колонку (а их например шесть) нужно показать, понятно не всё… А. Г.: Это рабочее решение, но механически «адаптированную» таблицу стоит проверить по смыслу и довести до ума… Собственно, во многих местах таблицы можно избежать… А как верстать такие адаптированные таблицы, доведённые до ума?… По ссылке три примера адаптивной верстки таблиц: скрыть несколько колонок, зафиксировать колонку с горизонтальной прокруткой остальной таблицы, перестроить таблицу плашками:
https://elvery.net/demo/ |
||||||
|
|
||||||
|
Ещё боковик таблицы хочется выровнять по левому краю, но так он противоречит предыдущим строкам экрана… |
||||||
|
|
||||||
|
А. Г.: Кроме того, последний вариант лишен экспрессии предыдущей таблицы, напоминающей голоса представителей разных народов… Не означает ли это что журнал заведомо предупредил нас о том что таблица создана для беглого взгляда по ней и осознания того что ксенофобия опутала весь мир (отсюда и экзотические народы)… Артур, идея ввести в таблицу цвет безусловно интересна, но и здесь мы сталкиваемся с определенными трудностями… Табличный подход дает нам свободу в группировке и сортировке, он более предсказуем и управляем… |
||||||
|
|
||||||
|
В контексте заголовка таблицы числа воспринимаются, скорее, как некая степень излечения… |
||||||
|
|
||||||
|
А. Г.: Тексты в таблицах стоит ровнять влево и по верху… Не показан способ сортировки данных в таблице… Кстати, сразу станет видно, нужна ли сортировка по колонкам таблицы… |
||||||
|
|
||||||
|
Я бы перевернул таблицу, убрал бы ничего не значащую разноцветность, разбил бы её по часам и явно показал бы полуторачасовой перерыв в середине дня… |
||||||
|
|
||||||
|
Помогите пожалуйста оформить таблицу для сотрудников компании, которые не разбираются в законодательстве… Илья Бирман: Ну вот: Все рамки не нужны. Номер по порядку не нужен. Повторение словосочетания «персональные данные» сто раз не нужно. Колонка «примечание» не нужна. А вот раздельные колонки для разных категорий лиц как раз нужны. И в результате всё вдвое крупнее… |
||||||
|
|
||||||
|
А. Г.: Или сдвинуть туда заголовок таблицы, придав ему дополнительную функцию… Нумеровать таблицу в тексте надо… |
||||||
|
|
||||||
|
Возможно ли улучшение этой таблицы с учетом того,
что планируется добавить для некоторых людей адреса электронной почты (по одному на человека) и показывать код города
для посетителей не из домашнего региона… А. Г.: Мне нравится идея избыточности: полезно иметь перед глазами два способа поиска информации, по отделам и алфавиту. В бумажном справочнике это могли бы быть два списка на двух сторонах разворота, на экране — переключатель вида… Наверное, вы правы, Степан: у меня же в таблице есть отступы… |
||||||
|
|
||||||
|
В текущем примере (см. скриншот) не устраивает повторение данных, одни и те же таблицы (справа) дублируются по три раза… А. Г.: Неясно, по какому принципу вы причислили мобильный телефон к расходам на ЖКХ, но исключили городской, а также телевидение и интернет. Следом возникает вопрос, как учитывать все остальные расходы, регулярные и незапланированные. Мне кажется, к большому сожалению, ваша табличка обречена на неуспех… Сама же таблица представляет информацию уже постфактум, а значит, после ввода данных придётся мучительно вспоминать, что именно послужило причиной увеличения расходов воды в этом месяце… Огромное спасибо за развёрнутый ответ, что касается этой таблички, то её, в первую очередь, разрабатывал для личных нужд, отсюда и некоторые особенности, как отсутствие упоминания о затратах на городской телефон — у меня его просто нет, дома — Skype, во всех остальных местах — мобильник… Реальные расходы по ЖКХ надо считать так, как удобнее,— Excel или бумажка подходят, только ваша табличка уж больно раздута… |
||||||
|
|
||||||
|
До этого программа представляла собой эксель-таблицу без интерфейса, где наглядность отсутствовала как класс… А. Г.: Подход понятен, но есть сомнения, что рабочий интервал времени выбран правильно. Оперирует ли регистратор тремя месяцами? Перебледнили шрифт в главном элементе. Уберите разрядку. Лучше переставить в логотип. Слишком много слов. Шапку минимум в три раза уже. Наверное, понадобится группировка… |
||||||
|
|
||||||
|
Если я правильно понял, серые строки в вашем дизайне играют роль своеобразных разделителей таблицы… |
||||||
|
|
||||||
|
Поэтому используйте формат сравнительной таблицы или делайте акцент на дополнительных вкусностях… |
||||||
|
|
||||||
|
Илья Бирман: Смотрите в предыдущих сериях: улучшение верхней листалки и упрощение строк таблицы… Вариант, присланный изначально Александром Богатюком, хорош был тем, что во главе угла ставил название упражнения — было легко найти нужное в таблице, сейчас это сделать сложнее… |
||||||
|
|
||||||
|
Тема вёрстки элементов таблицы спортивных результатов поднималась не раз, я прочитал ответ на каждую, на до конца свою задачу решить не смог… Таня Мисютина: Например, так: Или так, если хочется сохранить вертикальный формат… |
||||||
|
|
||||||
|
А. Г.: Кроме того, профессор утверждает, что числа в таблицах работают гораздо лучше, чем абстрактные понятия и обозначения… Конечно, это не будет читаться как таблица данных, а только как мониторинг проблемных зон, но я так понимаю, именно об этом и идет речь – С первого взгляда привлечь внимание к проблемным подразделениям… Я бы решил вопрос сортировками по столбцам в обычной таблице (тогда мониторящий сам определит, что ему нужно в первую очередь мониторить)… Если задача — «с первого взгляда привлечь внимание к проблемным подразделениям», то, кажется, лучше всего будет написать: «Проблемные подразделения — это департамент кройки и шитья и отдел сбора макулатуры» |
||||||
|
|
||||||
|
А. Г.: Полоски заранее нанесены в таблицу, что создаёт общий шум… Меня всегда немного раздражала такая гирлянда, особенно в больших таблицах… Глаз отлично цепляется за сгруппированные ячейки, и это не мешает воспринимать таблицу целиком… Кирилл Латинский, в вашей таблице непонятно, как цифры читать, по горизонтали или по вертикали… Даже если забыть про выдуманный мной пример с очень длинной таблицей, это просто неудобно: сконцентрированно держать руку с зажатой мышью на строке, чтобы ничего не потерять… |
||||||
|
|
||||||
|
Диаграмму изучать интереснее, чем простую таблицу… |
||||||
|
|
||||||
|
Михаил Нозик: Линеечки и плашки — декорации, Смущает, что акцент сейчас на крупном заголовке, а не на данных в таблице… |
||||||
|
|
||||||
|
Илья Бирман: Я по фану залил вашу таблицу в ЧатГПТ и попросил его… Потерялась идентификация своих и общих расходов, которые в изначальной таблице были различимы… |
||||||
|
|
||||||
|
А. Г.: Двухколоночная таблица, в издательской терминологии — вывод, страдает отсутствием визуальной структуры… На мой взгляд, между таблицой и графиком отсутствует связь… |
||||||
|
|
||||||
|
Сделано с учетом того, что в таблице не появится более 15 кинотеатров… А. Г.: Действительно, хаотично. Выравнивать по минутам, на мой взгляд, ни к чему. Чтобы внести минимальную структуру, просто сгруппируйте сеансы… |
||||||
|
|
||||||
|
А. Г.: Для раскрытия группы используйте плюсик модифицированный имени Димы Плотникова, а все общие действия спрячьте продублируйте на отдельной странице за ссылкой. Кроме того, для выбора объекта действий у вас вроде бы есть чекбоксы. Да — и хорошо бы для идентификации группы использовать Очевидно, что набор данных и действий у группы и ее членов различны, поэтому показать их в одной таблице не получится… |
||||||
|
|
||||||
|
А. Г.: заметку Ильи Бирмана о сортировке таблиц… А в контексте таблицы, где «вправо» — это именно «вправо», а не «вперед», наклон будет сбивать с толку, как ни крути… Открытие самого старого файла — Открыть таблицу… Я проводил опрос среди программистов (!): из 11 человек только один понял правильно, как будет отсортирована колонка таблицы Explorer.exe, глядя на этот значок… В таблице стрелочка неактуальна точно, поскольку теряется смысл самой пиктограммы… |
||||||
|
|
||||||
|
А. Г.: Делать код мелким в таблице — странная идея… Как только произнесёте вслух: таблица телефонных номеров — сразу станет понятно, что нужно делать… Однако… Сценарий пользования таблицей мне представляется таким: — Машка, позвони в Тюмень, чё они нам оригиналы не шлют, а потом отправь факс в Иркутск, — орёт Ленка… Михаил, таблицы используется ещё и для структурирования и поиска по ключу (полю таблицы)… |
||||||
|
|
||||||
|
Задача стояла такая: показать, что в таблицах можно обойтись без сетки… А. Г.: Это неплохая работа. Надо с прописной. Заголовки колонок здесь легко выровнять. Верхняя половина бланка используется бездарно. Невозможно пользоваться: слишком растянуто в высоту и не видны отдельные дни. См. словографики в совете о представлении данных о нарушениях в работе департаментов… Началась она, как я и говорил, на Делфимастере — http://www.delphimaster.net/view.php?folder=62&file= |
||||||
|
|
||||||
|
Как бы вы сделали эту таблицу?… А. Г.: Вадим, у меня идея. Я предлагаю уважаемым советчикам конкурс. Нужно предложить решение поставленной Вадимом задачи. В решении важно учесть телевизионный формат, общий сценарий шоу и интересы спонсоров. В жюри дизайнеры бюро — я, Илья Бирман и Александр Кан. Ответы принимаются в комментариях до… Всё это не нужно телезрителю (нам ведь надо показывать эту таблицу крупным планом при зачитывании оценок)… Я бы сделал таблицу с оценками так… Ориентацию таблицы менять нельзя… |
||||||
|
|
||||||
|
Вот Аркадий Эммануилович пишет, что в таблице должны быть приведены данные за одинаковые периоды времени… Илья Бирман: — Петька, приборы! — Восемьдесят восемь! — Что «восемьдесят восемь»? — А что «приборы»? Не знаю, получилось ли разобраться у вас, Роман, но у меня разобраться с представленными у вас данными не получилось. Переключаясь между заданием и вашим ответом, я так и не понял, в чём вы измеряете крупность… Замечу, что участников рынка я расположил в алфавитном порядке, а не по значимости, как в исходной таблице, не случайно… Роман, Илья — таблица с исходными данными ввела вас в заблуждение… |
||||||
|
||||||
|
Делал всё в Ворде 2010 обычной таблицей… Илья Бирман: Сергей! Один из приёмов при тасовке карт — вставить половинки колоды друг в друга: У вас задача противоположная: энтропию нужно уменьшить. Берём в руки и . Вынимаем недели друг из друга: Убираем чересполосицу и выравниваем время с названием: Номер аудитории обычно важнее, чем фамилия… Я для себя составлял такую таблицу — заготовку распечатывал из Экселя, а пустые клетки заполнял вручную… Естественно, деликатная разлиновка таблицы (если не страдать |
||||||
|
|
||||||
|
Таблица с чересполосицей слишком сложная и нечитаемая… |
||||||
|
|
||||||
|
Илья Бирман: Давайте пока посмотрим на саму таблицу… Весь этот горький катаклизм, который я здесь наблюдаю… © Выскажу страшное предположение: возможно, некоторые понятные вещи (типа таблиц), используемые в определённых условиях (после приседаний со штангой на плечах, например) и должны оставаться понятными и легко различаемыми?… |
||||||
|
||||||
|
Как исправить табличку?… Илья Бирман: Тут не технозависимость, а бухгалтерозависимость какая‑то. Сальдо, сторно? Нет, не слышал. При этом даже вооружившись словарём тут не разберёшься. Среди услуг встречаются такие интересные услуги как два «плюса» и «минус». В графе «Начисления — отрицательные начисления. Как это может быть вообще?… Эту бы таблицу взять и переформатировать по образцу банковской выписки… |
||||||
|
|
||||||
|
Зачем визуализировать убывание, если продукты уже расставлены по порядку? Percentage of Internet‑enabled PCsAdobe Flash Player98.3Java 86.9 Microsoft Windows Media Player 83.2 Apple QuickTime Player 66.9 RealOne Player 55.3 Adobe Shockwave Player52.3SVG 9.6 … |
||||||
|
|
||||||
|
А. Г.: На диаграмме не очень эффективно используются два измерения экрана. Модель автомобиля закодирована не только иконкой, но и положением в списке по вертикали. Ничто не мешает «упаковать» вашу одномерную диаграмму в строчки: Расширенный поиск лучше при этом превратить в уточняющий фильтр справа от… Для подробного сравнения нескольких показателей на сайте предусмотрена специальная таблица… |
||||||
|
|
||||||
|
Разные оттенки серого наводят на мысли о псевдоспектре, которого на самом деле нет. Предлагаю подсвечивать только сами временные диапазоны и заодно избавиться от неоднозначности в прочтении времени суток. Думаю, дальнейшие улучшения предложат уважаемые советчики… |
||||||
|
|
||||||
|
А. Г.: Из быстрых улучшений: вынести вопросы в отдельный список, показав максимум информации, включая ответы, избавиться от непонятных или ненужных иконок и добавить полнотекстовый поиск по всем рубрикам. Остальное, я уверен, подскажут уважаемые советчики. Я, со своей стороны, готов исправить на эскизе… Например, в картинках по ссылке можно видеть чекбоксы в таблице, как и у автора вопроса… Нажали «Ввод» – значит вопрос закончен, вводите ответы в трех столбчатую таблицу… |
||||||
|
|
||||||
|
Вообще, этот элемент — развитие идеи выпадающего списка, поэтому подтверждающие и отменяющие кнопки не нужны. Во всех выпадающих календарях меня смущает дискретность перемещения во времени. Можно видеть либо июнь, либо июль. Если ваша мысль находится на границе месяцев, такой календарь вам не… |
||||||
|
|
||||||
|
Табличное построение, рамки, контуры, пухлые стили, огромное количество активных элементов-
ссылок (разделы, ники, сообщения, темы, элементы управления и т. п.)… А. Г.: Олдскульные форумы — это апофеоз последовательной параноидальности в интерфейсе. Ну, в натуре, че два |
||||||
|
|
||||||
|
Вот так, например… |
||||||
|
|
||||||
|
А. Г.: Маршрут воспринимается плохо. Думаю, мало кто летает туда и обратно в один день. Это выглядит, как линейный список со специально подсвеченныи элементами. ? Лучше «каждую среду» Вопрос возникает гораздо раньше, чем на него дается ответ. Должно быть наоборот. Транзитные рейсы по средам. Везде местное… Я бы вместо таблицы изобразил бы схему прямо на карте… |
||||||
|
|
||||||
|
А. Г.: Если бы количество комнат изменялось не по вертикали, а по горизонтали, можно было бы не только изучать зависимость стоимости метра от количества комнат, но и сравнивать стоимость одного метра в аналогичных квартирах разных районов: Стрелочки слева слишком бледные и оторванные, а справа … Но тут есть одна сложность: из постановки задачи неясно, кто будет пользоваться таблицей, а значит и функциональность ее непонятна… Да, совсем забыл упомянуть, что в шапке таблицы есть обозначение единиц измерения (тыс. руб./кв… Т. к. районы на реальной таблице приведены не в соответствии с административными, а так, как их называют и различают жители нашего города, то они уже понимают, о чем идет речь, и лишь уточняют свои данные в соответствии с информером… И еще… Меня смущает наличие «голых» стрелок в вашей таблице, т. е. получается, что цены либо растут, либо падают, без вариантов… |
||||||
|
|
||||||
|
А. Г.: Кстати, с тем, кто пожелает описать и обосновать в письме все сделанные здесь изменения, мы будем рады обсудить трудоустройство… Тогда можно будет уйти от таблицы и, например, выключить текст по центру… |
||||||
|
|
||||||
|
Поскольку у нас с вами, судя по всему, одна |
||||||
|
|
||||||
|
Приятный дневник для детей богатых родителей с чувством прекрасного. Только, кажется, не хватает субботы… |
||||||
|
|
||||||
|
Да, «было» — шедевр. К оригинальной диаграмме даже есть разъяснительная приписка: «короче значит быстрее» В варианте «стало» читателю предлагается сравнить столбики процессоров Интел и G4, хотя по условиям наша цель — сравнить версии программного обеспечения на каждой отдельно взятой платформе… |
||||||
|
|
||||||
|
Черный фон — слишком эффектный прием для представления научной и |
||||||
|
|
||||||
|
А. Г.: За пять минут я не разобрался, так что, вероятно, они правы. Ознакомьтесь с другими советами о тарифах: С таким расписанием и изощряться не надо, даже таблица не очень нужна — и так прекрасно все понятно… Самое поразительное, что я смог разобраться во всей этой каше только по первой табличке (которая называется «было»)… Интернет столько может стоить только, если вместо проводов или вайфая используются негры, стоящие через каждые 50 метров, и кричащие трафик друг другу побитно |
||||||
|
|
||||||
|
А. Г.: Самое невнятное в этой иллюстрации — произвольные искажения времени. Длинный спад среднего числа абортов в Челябинской области на самом деле занимает меньше половины общего периода. После восстановления масштаба времени я бы применил те же приемы, что и в совете о графике выплат страховых компаний… Мне кажется, что таблица с внутренними кривыми лучше бы отразила результат, притом в абсолютных значениях количества абортов
http://www.edwardtufte.com/bboard/ |
||||||
|
|
||||||
|
А. Г.: Я исхожу из предположения, что расписание нужнее всего начинающим, которые выбирают себе удобную группу. В этом случае задача — сравнить расписание групп и соотнести его с представлением о собственной рабочей неделе… Артем, покажите вашу таблицу простому смертному и спросите через 20 секунд, какие преподаватели ведут во вторник?… Вариант Артема подходит только для одной категории, как он и сказал,— «новичков», но если спроектировать всю таблицу по этому принципу, получится очень громоздко… Если вашим принципом построить всю таблицу и ее параметры, то это выйдет целый А4, да еще и альбомно… Обычно, учебные расписания составляются так, чтобы один преподаватель вел одну группу, поэтому основного педагога (если его можно выделить) стоит указывать рядом с названием группы, а в самой таблице указать лишь второстепенных преподавателей… |
||||||
|
|
||||||
|
Сложно давать рекомендации, не зная, что на уме у вашего начальства. Если они настаивают на включении каждого издания, можно предположить, что их интересуют успехи каждого участника. Вероятно, в таком случае правильнее отсортировать список еженедельников по аудитории (конечно же, не в алфавитном… |
||||||
|
|
||||||
|
Ой, я бы, наверно, действовал |
||||||
|
А. Г.: «Говорю, читаю и пишу на английском, французском и испанском»… Саша, проблема «свободы» обычно возникает с четвёртым навыком — восприятия на слух, который у автора вопроса не попал в таблицу… |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
А. Г.: Как насчет вот такого интерфейса? ПН, СР, ПТ: 0800 0830 0900 0930 1000 1100 1200 1400 1500 1600 1800 1830 1900 1930 2000 ВТ, ЧТ: 0800 0830 0900 0930 1000 1100 1200 1400 1600 1800 1830 1900 1930 2000 СБ, ВС: 0830 0900 0930 1000 1100 1200 1400 1600 1800 1830 1900 1930 2000 Дело в том… Мне кажется, что для большей наглядности и уменьшения количества кликов, стоит развернуть таблицу, превратив строки в столбцы, и справа подписать к каждому дню танец… |
||||||
|
|
||||||
|
А. Г.: Хуже всего, что раздраженным сотрудникам на выдаче приходится сотню раз в день отвечать на одинаковые вопросы растерянных покупателей. И хотя не виноваты ни те, ни другие, идиотами себя чувствуют именно покупатели. На примере любого из экранов видно, что совершены все грехи: Разрушены смысловые… Что еще испортить: Еще «предложение о порче» из наблюдений за живой природой: можно каждые |
||||||
|
|
||||||
|
А. Г.: Лично мне приятнее смотреть на настоящую карту, чем на ее модненькую схематичную интерпретацию. Предлагаю убрать тире между флагами, увеличить интерлиньяж, уменьшить количество цветов в тексте, а также расположить описания стадионов вокруг карты: А после Евро сделали шикарную по наглядности таблицу результатов: http://www.marca.com/eurocopa2008/calendario.html… Проблема с идентификацией страны, на мой взгляд, решается с помощью итоговых статистических таблиц — там все рядом: и флаги, и названия… Обычно в официальных и неофициальных таблицах эта задача решается путем присвоения каждому матчу порядкового номера и указания для полу- и |
||||||
|
|
||||||
|
Я не вижу ничего плохого в том, чтобы дополнительно помечать доброе время суток. А вот структурно разделять непрерывное время, как сделано в вашем дизайне, на мой взгляд, слишком самонадеянно и субъективно. Это так же мешает, как разделение на месяцы в бумажных и электронных календарях. Эта… |
||||||
|
|
||||||
|
Задача решена, и это главное. Хорошо если вы попутно решили технические вопросы. Как добавляется новая неделя? Как забронировать переговорную для встречи через две недели? Повторяющиеся элементы можно закрепить наверху окна с помощью команды Window → Freeze Panes… |
||||||
|
|
||||||
|
У меня нет ЖЖ, чтобы судить о том, какой статистики там не хватает. Но думаю, что пользователям, у которых нет большой движухи, хватит компактного текстового представления. Вот, к примеру, как мог бы выглядеть текстовый «баланс френдов»… |
||||||
|
|
||||||
|
А. Г.: Так почему не использовать обе полезные колонки? Ещё у вас одна небольшая листалочка содержит все возможные проблемы: маленькие области нажатия, непонятная навигация (вперёд на вторую или на пятую?), малозначимые ‹‹ элементы ›› по краям. Смотрите также советы об упрощении листалки и об… А если сделать число, показывающее хосты, плаващим элементом, то можно использовать обе строки для вывода дополнительной информации и сократить высоту строк таблицы, если они кажутся великоватыми… |
||||||
|
|
||||||
|
А. Г.: Вкратце: повысить информативность названия заказа, перенести ссылки с номеров на названия запчастей; избавиться в меню от Производитель (или список производителей) указан в заголовке заказа всегда для удобства, а вот в таблице его стоит указывать, если в заказе несколько разных брендов… А почему бы нам в таблице не вынести в заголовки колонки «шт.»… |
||||||
|
|
||||||
|
Их, например, можно показать в табличном виде… А. Г.: Да, Михаил, один раз я попытался. Потом пошёл в офис, где мне порекомендовали безлимитный тариф. Теперь всё хорошо, но каждый месяц итоговая сумма оплаты в |
||||||
|
|
||||||
|
Пока кинотеатров и фильмов не очень много, вполне хорошая выбиралочка. Почему не вся неделя? А я бы еще сделал |
||||||
|
|
||||||
|
На похожий вопрос я отвечал год назад в совете о сайте турфирмы. К этому я бы |
||||||
|
|
||||||
|
Конвертер валют, близкий к идеальному, находится на Газете.ру: В основе — идея полезной избыточности. Вместо того, чтобы заставлять человека соображать, в какую сторону конвертировать, покажем ему результаты сразу всех вычислений — во все стороны во всех валютах. Принцип избыточности в совете о… |
||||||
|
|
||||||
|
Если я правильно понял, речь об этом списке туров. Вы сделали первый шаг и сгруппировали туры по темам. Посмотрим на верхнюю часть: Дни недели оторваны от дат. Сориентироваться сложно, почему бы не помочь читателю: Сразу становится видно, что механическая сортировка по дням недели привела у… |
||||||
|
|
||||||
|
В целом справились. Несколько мелочей: |
||||||
|
|
||||||
|
А. Г.: Ваше расписание некомпактно. Если выровнять весь текст влево и по верху ячеек, получится избавиться от линеек. Не помешает систематизировать и уменьшить ширину ячеек, ввести понятные сокращения. Так выглядит фрагмент сделанного нами варианта расписания учебных занятий в МГИМО: А так — переделанное… Таблица должна быть таблицей!… |
||||||
|
|
||||||
|
А. Г.: Продолжаем эксперименты над маршрутками. Моя версия… Эта табличка одноразовая — пользователь находит свой маршрут и узнаёт, стоит его ждать или нет… Достаточно отделить их друг от друга в одной таблице, например, при помощи ясной цветовой индикации… |
||||||
|
|
||||||
|
Дмитрий, я бы написал: «Несколько регионов России перешли на один часовой пояс ближе к Москве: Самарская область и Удмуртия теперь живут по Московскому времени, Кемеровская область — по Омскому (МСК+3), а Камчатка и Чукотка — по Магаданскому (МСК+8)». Забавно, кстати, что в постановлениях… |
||||||
|
|
||||||
|
Мне понравились идея асимметричности и попытка записать интервалы кратко (хотя и неудачная). Улучшить, конечно, можно. Прописные буквы ухудшают читаемость. Лишняя строка Ужасающий набор: гуляющие горизонтали, слипшиеся строки, пляшущий кегль, английские кавычки инопланетных размеров. Не писали бы… |
||||||
|
|
||||||
|
Любая визуализация должна быть подчинена аналитической задаче или жизненному сценарию, для которого создаётся. Подобный формат хорошо подходит для |
||||||
|
|
||||||
|
Эта картинка производит неплохое впечатление визуальным контрастом значений. Но это впечатление недостаточное, потому что значения различаются сильнее, чем мы это воспринимаем по кружочкам. Сравните два кружочка и скажите, во сколько раз один больше другого: Правильный ответ 7,5: А эти два? … |
||||||
|
|
||||||
|
А. Г.: Всегда рад… В табличке на Яндекс.Авто показана не общая динамика изменения цен со временем, а наглядно изображено, во сколько раз новые автомобили дороже старых… Константин, у вас получилась нормальная таблица… |
||||||
|
|
||||||
|
У меня такая версия (везде ставить настоящие флаги было лень): По мере того, как результаты матчей становятся известными, они выравниваются так, чтобы |
||||||
|
|
||||||
|
Илья Бирман: Сергей! Переворот, фотки и сегодня — это правильно, но в остальном Подобная таблица позволяет им скорректировать даты приезда и приехать не 15 марта, а например |
||||||
|
|
||||||
|
Рекомендации: отказаться от Мириада — он ужасен в кириллице; избавиться от набора прописными в названиях фильмов и сериалов — первого врага читаемости; выделить время, просто уменьшив шрифт — плашка под колонкой станет ненужной; добавить отступы между передачами вместо увеличения интерлиньяжа … |
||||||
|
|
||||||
|
Изначально список начинался как небольшая табличка, но теперь количество Илья Бирман: Андрей! Классно, что ваша компания растёт такими темпами. Что касается сайта, то город можно определять автоматически: Если в городе несколько |
||||||
|
|
||||||
|
А. Г.: Сначала — уменьшить вертикальный масштаб: Убрать красный и зелёный цвета — жёлтая плашка сама делит зону графика на три части: Убрать все виды сетки, вертикальную ось (числа есть на графике), отказаться от вертикального текста, использовать человеческий шрифт: Вот почти всё. Добавить динамичности … Я перебивал оценки из его таблицы к себе в таблицу и запутался — где какой семестр, какой курс?… |
||||||
|
|
||||||
|
Если это |
||||||
|
|
||||||
|
Илья Бирман: Сергей! Проблема вашей схемы — в излишней замусоренности. Вы показываете и карту, и расписание, но при этом недостаточно хорошо разделяете визуальные слои. И как же вы так водоёмы не подписали? В своём расписании поезда №13 я применил приём параллельного изложения: Здесь есть три истории… Считаю, такой прием хоть В таблицах, где только время, например… |
||||||
|
|
||||||
|
Я бы сделал компактнее и не провоцировал бы сравнение несравнимых величин… |
||||||
|
|
||||||
|
Если выкинуть легенду, правый флаг, серенькость, тире и www, прыгающие цифры, а потом взять лучшее из всех ваших вариантов, получится так: Кажется, это отвечает на все три четыре ваших вопроса |
||||||
|
|
||||||
|
Ваше расписание сложно вычленить глазом между грудой заголовков с одной стороны и списком людей с другой. Три разношёрстных вступительных этажа смотрятся кашей. Похожий вид заголовков и цифр в тексте вызывает путаницу — не видно начала дня. Зал указан то на одном, то на другом уровне иерархии… |
||||||
|
|
||||||
|
Для начала я убрал бы повторы, лишние цвета и акценты: А затем подумал бы, как инвестор сравнивает объекты. Возможно, окажется лучше визуализировать диапазоны стоимости: И делаю вам замечание за плохую рыбу |
||||||
|
|
||||||
|
В каждой строке у вас по две внешне похожих ссылки. Пока человек занят поиском нужного шлюза, лучше не отвлекать его сразу и выбором нужного действия. Грубо и не совсем научно говоря, в списке из ста пятидесяти строк по две ссылки в каждой есть двести девяносто девять возможностей ошибиться. Кроме… |
||||||
|
|
||||||
|
Саша! Чем бы вы не объясняли наличие списка, и как бы много сортов у вас не было, на сайте пиццерии |
||||||
|
|
||||||
|
Честно говоря, я не уверен, что понимаю, что такое «наглядность» в данном случае. Можно города на карте расположить, гербы подрисовать. Чтобы повысить информативность, ответьте на вопросы, которые приходят в голову в связи с этой диаграммой: в каком порядке расположены города и почему? долю кого… |
||||||
|
|
||||||
|
А. Г.: На печати я бы сделал так: Но на дворе графические интерфейсы… Такой контрол не даст просто распечатать таблицу размеров, а городить отдельную версию для печати — лишние сущности вводить… |
||||||
|
|
||||||
|
Какой, по твоему мнению, вариант лучше — табличкой или календарём?… Илья Бирман: Я за календарь. Возможно, после его доработки напильником и клиент его предпочтёт: Всегда начинайте с варианта, при котором не понадобятся рамки и отделяющие линии. Не выкидывайте пустые недели как ни в чём не бывало: в Перми кто‑нибудь обязательно не заметит даты и придёт 5 ноября. Сжимать… Зачем сокращать названия месяцев в таблице?… |
||||||
|
|
||||||
|
Илья Бирман: Сергей! Признаюсь, я совсем не понял ваше расписание даже несмотря на то, что оно содержит инструкцию по собственной расшифровке. В оригинальном я не понял только, почему 205к выделен красным и что значит «см. расписание». Гипотеза о том, что красность означает выходной, опровергается текстом про… Почему не дать полную таблицу? http://soiduplaan.tallinn.ee/#bus/1a/ |
||||||
|
|
||||||
|
Алина! Я думаю, что оба варианта имеют право на жизнь и при этом у обоих есть недостатки. В вашем варианте лучше выражена предметная область, но плохо дружат пропорции элементов и поля. Вертикальные поля существенно больше горизонтальных в то время как надписи стремятся вытянуться в длину… |
||||||
|
|
||||||
|
Михаил Нозик: Надя! В разном количестве строк нет ничего страшного, модульность не страдает. Хуже то, что цена и кнопка покупки одного товара может связаться с товаром ниже. Чтобы этого не произошло, рекомендую уменьшить количество элементов и не отрывать кнопку от названия: Было Стало Чтобы усилить чувство… Совсем простой вариант — верстать таблицей… Регулярную таблицу легче считывать… |
||||||
|
|
||||||
|
Если обязательно нужно выбрать из этих, я бы взял правый, потому что у левого бесяче висят отточия из пустоты. Если можно починить хотя бы их, то левый вариант становится чуть предпочтительнее: А если можно вообще убрать отточия и пододвинуть значения к названиям, становится вообще нормально… |
||||||
|
когда переводы выносятся в отдельную табличку с id, owner_key, lang_id, string, text, где owner_key — сгенерированный ключ (например, MD5) для связи основной таблицы с таблицей переводов;
когда для каждой таблицы делается отдельная таблица с переводами и owner_key — это id основной таблицы;
когда таблица переводов имеет вид id, ru, en, de, …;
или тупо все поля в основной таблице дополняются полями переводов. … Коля Митин: Но мы не можем просто добавить pageId в нашу таблицу, потому что один и тот же текст может использоваться на нескольких страницах… |
||||||
|
|
||||||
|
Раньше на его месте висела таблица, и прочитать на ней Михаил Нозик: Не знаю, как выглядела таблица до переделки, но подозреваю, что она не пыталась делать ничего, кроме как донести информацию… |
||||||
|
||||||
|
Пыталась это сделать с помощью цвета и стрелок, но, как мне кажется, это только добавило таблице тяжеловесности… Илья Бирман: Для вдохновения обязательно посмотрите таблицы хода гонки на Биатлонтайме… Не лучше ли сделать график вместо таблицы?… |
||||||
|
||||||
|
Обозначил все данные в таблицу… Константин Мозговой: Предлагаю зайти с другой стороны и не дробить таблицу, а наоборот сгруппировать её части, чтобы она стала компактнее и легче воспринималась… После этого я собрал таблицу с заказом… |
||||||
|
|
||||||
|
Я разрабатываю приложение для Айпада, у меня есть таблица с товарами и набор действий, которые с ними можно произвести… Илья Бирман: Если вы всё же используете таблицу, то функциональнее конструкция как в почте — треть экрана слева занимает таблица, а остальную часть — уже открытый выбранный пункт… |
||||||
|
Никто не хочет описывать дизайнеру задачу нормально, говорят: «нарисуй тут таблицу с табами и чекбоксами»… Илья Бирман: вам надо быть изобретательным: если вы и предлагаете решения, выходящие за пределы поставленной задачи, надо убедиться, что они упростят, а не усложнят жизнь всем вокруг: разработчикам, поддержке, отделу продаж: «Смотри, вот я нарисовал таблицу с табами и чекбоксами, как ты просил, можно внедрять… |
||||||
|
|
||||||
|
Ведь превалирующее большинство А. Г.: Инфоскроллер полезен для длинных страниц с разнообразным материалом: таблицами, иллюстрациями, подзаголовками, как например, обсуждение инфографики Эсквайра… В принципе, если сайт сделан по принципу отделения содержимого от представления, и автор не допустил логических ошибок в HTML, то можно было бы разобрать и сам код, отображая на полосе прокрутки картинки, параграфы, таблицы, информативные иллюстрации и так далее… |
||||||
|
||||||
|
Вы советуете избавляться от линеек в таблицах… Илья Бирман: В Гугле — не таблица, а интерфейс для создания и заполнения таблиц… |
||||||
|
|
||||||
|
Второй показывает количество столбцов таблицы, не влезших в экран… Илья Бирман: Ещё лучше — переверстать таблицу под мобилу, чтобы влезала… В таком узком формате таблице сложно быть информативной, сопоставление и сравнение данных тоже будут сложными… Собрал ссылки на советы, что делать с таблицами на мобильном:
https://bureau.ru/soviet/selected/ |
||||||
|
|
||||||
|
Такой вопрос: у клиента часто бывают подобные таблицы, где и в заголовке и в левом столбце очень много текста, а сами значения — из нескольких символов… Илья Бирман: А если они реально такие, то, возможно, за ними есть какая‑то логика, которую таблица скрывает, и хорошо бы раскрыть… Несмотря на транспонирование, новая таблица считывается хуже… |
||||||
|
|
||||||
|
Как часто это бывает, клиент сам набросал макет таблицы для своего сайта и отдал дизайнерам «поправить»… Илья Бирман: В таблицах появлись огромные дыры… А мне сразу капс в глаза бросился, и вообще вариант заказчика намного чище и опрятнее выглядит, максимум просят небольшого увеличения интерлиньяжа таблицы «Параметры лота» и «Краткое описание», да название лота с ценой у Юры выразительнее, а в остальном рискую предположить, что заказчик таки прав… |
||||||
|
|
||||||
|
Я предложил вместо таблицы ( Илья Бирман: Если от них избавиться, то читаемость возникнет автоматически, при этом ничего не мешает раскрасить таблицу фирменными цветами… |
||||||
|
|
||||||
|
И должны ли заканчиваться точкой предложения в ячейках таблицы?… А. Г.: Что неудивительно, ведь заголовок называет содержание текста, подпись — содержание иллюстрации, ячейка в таблице — конкретную запись данных… |
||||||
|
||||||
|
Как бы вы предложили переверстать таблицу, чтобы она стала более понятной?… Илья Бирман: Я просто убрал всякие бессмысленные приёмы типа рамочек, попыток равномерно «забить» этажи квартирами и необъяснимого ничем деления таблицы на двухколоночную и одноколоночную части… Как отметить этот момент в таблице?… Ты подходишь к таблице, уже зная номер, и цель — уточнить этаж… Иначе при первом взгляде на таблицу невольно попадаешь на 9 этаж… |
||||||
|
|
||||||
|
Данный «попап» — таблица спряжений глагола… Илья Бирман: О точке зрения юзабилити ничего не знаю, но чтобы было удобнее, нужно убрать переключалку и показать таблицу целиком, как это делает, например, french.about.com… |
||||||
|
|
||||||
|
Хотелось бы от вас услышать как вы подходите к созданию обычной текстовой страницы, в чем плюсы и минусы моего / вашего подхода, добавляете ли вы таблицу и т. д. … Илья Бирман: ру были определены стили заголовков четырёх уровней, простых абзацев, имён авторов, тегов, дат, цитат, трёх видов списков, таблиц с возможностью группировки строк и даже некоторых элементов форм с учётом подсветки при некорректном заполнении… В одном проекте понадобилась таблица с иконками… |
||||||
|
|
||||||
|
Помимо формальных характеристик («диаграмма», «таблица», «сайт», «предмет») советы помечаются идеями, которые в них излагаются… |
||||||
|
|
||||||
|
При выборе нескольких показателей (в данном случае заголовки этих показателей — страны, продукт, баланс, но могут быть и другие) ниже автоматически строится таблица… Илья Бирман: Поскольку вы не показали саму таблицу, и о том, как эти штуки ей управляют, остаётся только догадываться, предложить вам конкретное решение мне будет трудно… |
||||||
|
Без глаголов действия мы рискуем скатиться в описание таблицы; их наличие гарантирует, что мы описываем именно процессы… |
||||||
|
|
||||||
|
По умолчанию все значения в таблице выравниваются по верху и по левому краю… |
||||||
|
Но верстальщики нашли разные способы преодолеть это техническое ограничение и стали использовать таблицы и свойство , чтобы делать многоколоночные шаблоны страниц… |
||||||
|
|
||||||
|
Вот кусочек таблицы синтаксиса интерфейса, которую мы разбираем на курсе… |
||||||
|
Исходя из этой таблицы, каждое правило в таблице стилей будет иметь свою специфичность, например… |
||||||
|
ЦРМ — это база клиентов, но не в таблице, а в электронной картотеке с фотографией, телефонами и адресами, историей звонков и встреч, отчётом о продажах… |
||||||
|
*В некоторых почтовых программах письма показываются таблицей из имени, темы письма и других параметров… |
||||||
|
Если разработчик в начале проекта подумает о бизнесовой части задачи, попросит у вас существующие файлы с клиентами и сделками, а затем зальёт их в новую базу данных — проблема не случится: разработчик увидит несоответствие и сразу создаст в БД таблицы для контактных лиц… |
||||||
|
В последнем случае обратите внимание — крутится только содержимое таблицы, а заголовки залипают для удобства чтения… |
||||||
|
Объект — представление строки из таблицы в виде класса со свойствами, соответсвующими её полям… |
||||||
|
|
||||||
|
Модульная вёрстка, сетка и обычные таблицы используют одновременно эффект обрамления и эффект близости, но совсем по‑другому… |
||||||
|
|
||||||
|
Обычно это делали таблицей в Excel и, наверное, комбинированной столбчатой диаграммой… А. Г.: Лично меня разбиение на возрастные группы не сбило с толку ни на секунду. Мне кажется, оно делают визуализацию более обозримой и управляемой. При этом глаз без труда считывает общую форму пирамиды, если это нужно. Точные числа в данном случае не нужны. Но ваши гистограммы полностью «обесчислены»… |
||||||
|
|
||||||
|
Никаких абстрактных преимуществ у дивов, таблиц и других тегов друг перед другом нет… |
||||||
|
Это не говоря о том, что в таблице даже нигде не сказано, какая система принята на сайте… |
||||||
|
|
||||||
|
На этом принципе построены все таблицы проверки зрения: расстояние между вертикалями буквы Ш на десятой строке ≈1,5 мм… |
||||||
|
Дважды нажав на плюсик справа в верхней строке таблицы, добавьте две колонки… |
||||||
|
|
||||||
|
Таня Мисютина: Я собрала в одной таблице данные о переходах, которые касаются топовых лиг (в топовую лигу, из топовой лиги, или между топовыми лигами), и у меня получилась таблица на 16 столбцов и 2,5 тыс… Первый вариант получился не слишком информативным, там даже меньше данных, чем на исходной диаграмме и в таблице — ровно 24 числа… |
||||||
|
Без глаголов действия мы просто описываем таблицу и не получаем никакой дополнительной пользы… |
||||||
|
|
||||||
|
Даже если игнорировать защитный фоновый рисунок, схема и таблицы завалены ненужным графическим мусором… |
||||||
|
|
||||||
|
«Логотип» — нечто между «текстом» и «символом», «таблица» — между «числом» и «текстом»… |
||||||
|
Таблицы, круговые и столбиковые диаграммы, двумерные графики и картограммы знакомы и понятны всем… |
||||||
|
|
||||||
|
Это и не таблица — только первую строчку из восьми получится расшифровать с помощью шапки… |
||||||
|
|
||||||
|
Илья Бирман: Перед тем, как улучшать визуализацию, лучше подумать о сценарии, в котором эта таблица используется… Никаких заумных таблиц там не видел… Встречается такая таблица постоянно в Московской области… И большая таблица цен: в пригород — десятка, по Киеву — 4 гривны… |
||||||
|
Чтобы раскладывать элементы по странице, есть пять методов: позиционирование, флоаты, таблицы, флексбоксы и гриды… |
||||||
|
Если это текст в печатной таблице, нужно оценить, при каком размере пробела читателю будет удобно сопоставлять числа в столбике… |
||||||
|
В этой задаче мы пойдём сложным путём и представим, что в наших отделениях огромное количество посетителей и талонов, и что мы можем запрашивать только сводные предрасчитанные таблицы… |
||||||
|
Визуализация нужна, чтобы зрителю не приходилось продираться через исходные таблицы, но без ссылок на источники графики оказываются в «вакууме неправдоподобности»… |
||||||
|
Каждому абстрактному объекту из таблицы или базы данных мы ставим в соответствие визуальный атом на экране… |
||||||
|
|
||||||
|
Как правило, нет смысла растягивать таблицы — колонки, наоборот, стоит максимально сближать… |
||||||
|
|
||||||
|
Очень не хватает числовых данных по дням — в виде таблицы и дополнительных отметок на графике… |
||||||
|
|
||||||
|
Мне кажется, кроме пунктиров и чересполосицы в вашем интерфейсе есть более принципиальные проблемы: нерациональная компоновка таблицы, батарея из командных элементов, отсутствие наглядности… |
||||||
|
|
||||||
|
Усложняем:
чем меньше места это все будет занимать, тем лучше (не сильно ведь важная колонка);
не хочется менять цвет текста/фона строк таблицы, это порой используется для других целей (неважные/нередактируемые ячейки,
подсветка измененных, зебра и т. п.)
чекбоксы подошли бы, но они обычно уже заняты для групповых операций (перемещение, удаление и т. п.) … А. Г.: Вы затронули мою любимую проблему настенного выключателя, у которого индикатор показыват то ли состояние, то ли команду: Переключатель на Айфоне — интерфейсный позор. Если его «починить», он бесполезно разрастется: Подобный переключатель хорош, когда нужно действительно показать два состояния… |
||||||
|
|
||||||
|
А. Г.: Шапка таблицы не должна выглядеть как кнопка… Оформление шапки таблицы почти не отличается от оформления строк этой же таблицы, что также несколько сбивает с толку… Что касается шапки, то заголовки по сути кнопками и являются: упорядочивают список по соответствующему параметру (как в винде в режиме таблицы)… |
||||||
|
Мне кажется логичным, чтобы при выделении текста и переключении раскладки все символы перекодировались из одной таблицы символов в другую, но этого не происходит… А. Г.: Алексей! Боюсь, в данном случае вы не правы. Предлагаемый вами переключатель раскладки станет модальным по отношению к состоянию поля ввода. То есть в некоторых случаях будет работать совершенно безопасно, в некоторых — изменять информацию. Простой пример: я выделил фразу «Простой пример», но… |
||||||
|
Никто не любит открывать электронные таблицы в браузере… |
||||||
|
|
||||||
|
В |
||||||
|
|
||||||
|
Правда, из таблицы не совсем понятно, в каких единицах выражены значения, если учесть, что KZT есть в самом списке валют… |
||||||
|
|
||||||
|
А. Г.: Меня больше смущает традиционно топорная википедийная вёрстка таблицы… Не все названия заявок требуют полного их написания в этой таблице, можно их затенять, как на прикреплённом изображении… Когда нужно провести |
||||||
|
Они такие тексты сразу пролистывают до первой таблицы… |
||||||
|
Я проверил таблицы совместимости и решил оставить только два формата… |
||||||
|
|
||||||
|
Артём Поликарпов: Когда автоматическое распределение пустого пространства между колонками неравной длины действительно необходимо, я использую таблицы… Немного переделал стили Артёма, чтобы расстояние менялось кроссбраузерно и без таблиц… |
||||||
|
|
||||||
|
Таблицы в прошлом, |
||||||
|
|
||||||
|
Таблицы Менделеева из неё не получилось… |
||||||
|
А. Г.: Человечество изобрело таблицы… Выносить за скобку можно и в строке, если нет места для таблицы: Лимонад… 300 / 500 / 1000 мл … 100 / 150 / 250 р… А он знал правило, когда набирал таблицу?… |
||||||
|
|
||||||
|
Запирающиеся шкафчики в супермаркете, кресла в кинотеатре, подъезды многоквартирного дома, ячейки таблицы, квадратные фотографии в интерфейсах — неотличимы, унылы и оставляют нас в сомнениях… |
||||||
|
|
||||||
|
Чтобы читатель не утомлялся от однообразия, дизайнеры чередуют на экранной странице спокойные текстовые слои, насыщенные иллюстрации, вдумчивые таблицы и цитаты из отзывов… |
||||||
|
Таблицы изобретены для вынесения за скобку повторяющихся частей текста… |
||||||
|
|
||||||
|
Через много лет после прочтения книг Тафти я до сих пор помню, в какой части книги и в каком углу страницы искать некоторые таблицы или графики… |
||||||
|
Так автор видит, сколько текста ложится на полосу, что с чем соседствует, где нужны иллюстрации, куда приходятся таблицы, насколько сбалансированными получаются главы… |
||||||
|
|
||||||
|
Решил использовать таймлайн вместо таблицы… Илья Бирман: Вертикальный таймлайн, события на котором расположены по разные стороны от стержня — дурацкий формат, никак не помогающий осмыслить историю. Вам даже приходится объяснять про Говорина во вступительном тексте, потому что иначе никто не заметит. Направим время слева направо: Губернаторы Иркутской… |
||||||
|
|
||||||
|
Решил использовать таймлайн вместо таблицы… Михаил Нозик: Илья Бирман нарисовал новую диаграмму: Губернаторы Иркутской области Первая часть Вторая часть В комментариях к совету Ильи выяснилось, что ширина ограничена 940 пикселями. Кроме того, в перерисованной диаграмме есть проблемы: губернаторы Есиповский и Ерощенко стоят так близко друг к другу… |
||||||
|
сайт, как у Эпла — серый, плоский, лаконичныйСкопировать сайт Эпла и объявить себя автором Нарисовать логотип в стиле таблицы элементов МенделееваПрисвоить авторство логотипа «Сколкова» Сконструировать корпус телефона из поликарбоната, как у НокииЗапатентовать корпус и попытаться засудить Нокию… |
||||||
|
|
||||||
|
Инфоскроллер символически представляет в полосе прокрутки весь документ — видны текст, заголовки, рисунки, таблицы… |
||||||
|
|
||||||
|
Запирающиеся шкафчики в супермаркете, кресла в кинотеатре, подъезды многоквартирного дома, ячейки таблицы, квадратные фотографии в интерфейсах — неотличимы, унылы и оставляют нас в сомнениях… |
||||||
|
Текст, таблицы, формы и картинки — ХТМЛ‑элементы… |
||||||
|
Это инструмент для раскладки и выравнивания элементов, более управляемый, чем флоаты и таблицы… |
||||||
|
На фоне современных браузеров там прошлый век и чёрная магия: таблицы, инлайновые стили и теги font… Руст Кулматов: Почтовых клиентов много, и у каждого из них свой уровень поддержки ЦСС, зачастую довольно низкий. |
||||||
|
|
||||||
|
Макеты раздаточного материала, документы с выступлений, таблицы с расчётами, скриншоты презентаций… |
||||||
|
|
||||||
|
Вот кусок таблицы синтаксиса из книги «Пользовательский интерфейс»… |
||||||
|
Проблема в том, что Илья Синельников: «При дискуссиях члены команды упорно не принимают мои предложения по пользовательскому интерфейсу, вёрстке, контенту». Андрей, ай фил ёр пейн. Проблема в том, что вы до конца не понимаете, как в проекте принимаются решения, чего от вас ждут и в каком виде. Ожидания не совпадают с реальностью… |
||||||
|
||||||
|
По некоторым показателям можно перейти в детальную информацию в виде таблицы и скачать эксель… Илья Бирман: Ваш интерфейс выглядит так: Всё абсолютно одинаковое и на одинаковом расстоянии друг от друга. А хочется как‑то так: Вообще, 1110 − 200 ≠ 424860, так что смысла я всё равно не понял, это просто образ вам… |
||||||
|
|
||||||
|
Новые темы: мобильная вёрстка, таблицы, шрифт в тексте, айдентике, на бумаге и на улице, сочетание шрифтов, их поиск и хранение… |
||||||
|
Редактор должен видеть, где кончается страница, как в нее ложатся перечни и таблицы, нет ли висячих строк… |
||||||
|
|
||||||
|
В меню из вопроса беда не с картинками, а с вёрсткой таблицы… |
||||||
|
ПлохоХорошоПереносить каждый блочный элемент, пункт списка или элемент таблицы на новую строку и выделять дочерние элементы отступамиИспользовать двойные кавычки в значениях атрибутовПлохоХорошоИспользовать короткие формы записи правил, где это возможноПлохоХорошоНе писать единицы измерения у… |
||||||
|
|
||||||
|
Список из сложных составных пунктов потребует введения колонок или даже таблицы… |
||||||
|
При чёткой центровке линий — плюс размывается; ставить со смещением от центра — заметно относительно круга; делать круг нечётным — может не вписаться в набор близко стоящих иконок (к примеру, блок команд при наведении на строку таблицы); делать ширину линий 2 пикселя — визуально слишком жирно… Сергей Чикин: Варвара! В любом наборе иконок полезно оставлять лишний пиксель‑два по границам рабочей области. Туда будут торчать визуально лёгкие выносные элементы отдельных иконок. Иконки Ту‑ту. Рабочая область 28×28 пикселей, но все иконки стараются уместиться в 24×24. Для торчащих рельсов осталось два… |
||||||
|
В таком же промежуточном статусе и таблицы — иногда они заслуживают вынесенного положения иллюстрации, иногда скромно стоят в текстовой полосе, как внутритекстовые примеры… |
||||||
|
|
||||||
|
С этим вообще никакой проблемы нет; разные значения — нормально для таблицы… |
||||||
|
Минус табличной вёрстки в том, что это в каком‑то смысле ребус: читателю придётся сопоставлять строки и столбцы таблицы и самостоятельно делать выводы… |
||||||
|
Вёрстка сайтов для дизайнеров, редакторов и руководителей» вышли три новые главы: «Текст», «Иллюстрации» и «Таблицы»… |
||||||
|
|
||||||
|
Также кавычки были бы нужны, если бы названия стояли внутри сплошного текста, а не таблицы… |
||||||
|
|
||||||
|
С этой точки зрения есть смысл адаптировать не страницы, а их элементы: каким‑то предсказуемым способом у вас адаптируется меню, картинки, текст с примечаниями на полях, таблицы, и так далее — в зависимости от того, какие элементы у вас вообще на сайте есть… |
||||||
|
Пусть это будет отражено в табличке, а скриншот этой таблицы появится в визуальной части публикации… |
||||||
|
Чекбокс может управлять группой дочерних чекбоксов (в заголовке таблицы; при древовидном выборе)… |
||||||
|
Сегодня отвечаю на ваши вопросы о том, где взять интересные проекты, если их нет на работе, в каких случаях уместны таблицы, а когда стоит рассмотреть другое решение и почему на сайте, задизайненном в бюро, слиплись заглавные буквы… |
||||||
|
Это продвинутый цифровой органайзер информации, как Гугль‑таблицы или Эксель, но мощнее… |
||||||
|
|
||||||
|
Поэтому поставить фамилию вперёд в таблице не преступление, но не стоит делать этого без причины… |
||||||
|
|
||||||
|
А. Г.: Так устроены, например, переименование файлов и интерфейс электронных таблиц: поле ввода появляется там, где щелкнули мышью… Это, с одной стороны, будет видным названием для группы товаров, а с другой, немного разорвет монотонность таблицы, что здесь явно напрягает глаз… 1. Для таблицы предлагалось регистрировать заказ просто при введении числа в ячейку количества, однако при этом пользователям не хватало обратной связи от интерфейса… |
||||||
|
|
||||||
|
Достаточно выбрать А. Г.: Михаил, в вашем интерфейсе есть всё что нужно, и по картинке кажется, что им можно пользоваться. Но я бы предпочёл «свернуть» вашу структуру для простоты и лёгкости: Минус: синее у вас не кликабельно, а кликабельное — не синее… Можно сделать, чтобы подходящие социотипы показывались ниже после заполнения первой таблицы — индивидуальных признаков… |
||||||
|
|
||||||
|
А. Г.: Поэтому при повышении плотности расписания я бы предложил перейти к двум таблицам или к переключалке в интерфейсе… Чтобы не было сплитов и путаницы с цветами не легче сразу разбить на две таблицы и вместе с легендой сделать вкладками?… |
||||||
|
|
||||||
|
Таня Мисютина: В компактной таблице видна полная картина, даже если записей много… В компактной таблице видна полная картина, даже если записей много» — не можем себе это позволить, так как, например, в блоге Яндекса уже почти 1000 записей… |
||||||
|
|
||||||
|
В таблице ниже я привёл примеры психологических и геометрических эффектов, как самых интересных продуктовым, интерфейсным, графическим и промышленным дизайнерам… |
||||||
|
||||||
|
Изобразив их точками на карте, мы проявили картину, которую невозможно увидеть, изучая таблицу с исходными данными, картину, которую ни один человек не видел своими глазами… |
||||||
|
Таня Мисютина: В ней — самой по себе — нет ничего необычного, в похожих таблицах часто публикуют результаты разных забегов… Дело ведь не в информативности, наглядности и прочем, а в том, что эта визуализация рассказывает многогранную историю там, где раньше марафонцы довольствовались сухими таблицами с финишным результатом… |
||||||
|
|
||||||
|
Журнальный разворот (размер страницы — А5; кегль основного текста — 9 пунктов; кегль текста в таблице — 7 пунктов;
в уже напечатанном
журнале читается легко и приятно)… А. Г.: Думаю, ваш календарь прекрасно справляется со своей задачей. Но раз уж вы спросили: Смущают несколько бессистемные отступы |
||||||
|
В интерфейсе: как улучшить «чересполосицу» в экранных таблицах?… |
||||||
|
|
||||||
|
В ИЕ 6 и 7 этот способ работает только с настоящей таблицей… |
||||||
|
|
||||||
|
Таблица в данном случае работает плохо: слишком много деталей, за которыми не видно общей картины… |
||||||
|
|
||||||
|
При этом чтобы в наборе таблиц числа выравнивались по разрядам, даже в пропорциональных шрифтах цифры принято делать одного размера — моноширинными… |
||||||
|
Табличные цифры идеальны для таблиц — при большом количестве чисел искать нужное число удобнее, когда все цифры стоят в ряд друг под другом… |
||||||
|
Но чаще всего внутри таблиц ищут числа, поэтому эту задачу можно решить моноширинными цифрами внутри немоноширинного, то есть пропорционального шрифта… |
||||||
|
Полоски заранее нанесены в таблицу, что создаёт общий шум… |
||||||
|
Иллюстрируйте их примерами, диалогами, таблицами, схемами, рассказами, ситуациями из жизни… |
||||||
|
Например, мы составляем таблицу: типовые предметы, которые нужны в отпуск; сколько они весят; сколько они стоят за границей; сколько стоит провезти эту вещь в самолете, доплатив за перевес… |
||||||
|
Коля! Твоё утверждение неверно. Под человека подстраиваются только дизайнерские приёмы, основанные на психологических эффектах: гештальта, ожидания, выбора и отношения, привычек и вознаграждения. Другие приёмы проектирования подстраиваются под законы физики, химии, геометрии, оптики. Чтобы успевать… |
||||||
|
Всем дизайнерам известны режимы наложения слоёв в графических редакторах — multiply, overlay, screen и другие. Режимы наложения позволяют смешивать содержимое слоев разными способами. Аналогичный функционал есть и в ЦСС. Режимы наложения поддерживаются большинством популярных браузеров, но с… |
||||||
|
Если хотите сравнить сложные технические приборы по характеристикам, вам поможет таблица… |
||||||
|
Для мониторинга диверсий в опенсорсе есть обновляемая таблица «Техдирского клуба»… |
||||||
|
|
||||||
|
Захотелось улучшить табло с расписанием поездов… Илья Бирман: У вас получилось лучше, чем было, но можно ещё лучше: Кажется, настоящий экран всё‑таки не квадратный, а прямоугольный. Я поменял местами время и направление, потому что это позволяет поставить одно ближе к другому. А это, в свою очередь, позволяет плотнее собрать строчки и избавиться от линеек. Со… Глаголы в заголовке таблицы как будто бы не очень, потому что в списке есть и уже прибывшие поезда… |
||||||
|
|
||||||
|
Тогда чё толку в таблице, если она даже на одном уровне о чём‑то говорит, а о чём‑то — нет?… |
||||||
|
Совет о таблице олимпийских медалей… |
||||||
|
Но таблица почему‑то не сформировалась… |
||||||
|
|
||||||
|
возможностях современной компьютерной верстки только лень и инертность авторов, редакторов и верстальщиков могут оправдать живосечение логически связанного материала, разнесение по разным разделам текста, примечаний, иллюстраций и таблиц, а затем создание бюрократической системы индексации и ссылок… |
||||||
|
|
||||||
|
Сейчас пишу дипломную работу, где без таблиц, графиков и т. д. не обойтись… А. Г.: Предполагается, что задача формулируется именно так: «сопоставить годовые показатели нескольких компаний». Чтобы увидеть общую картину, совмещение многих кривых, скорее всего, очень хорошо и полезно. Это, вероятно, как раз тот случай, когда применение псевдокривых оправдано — соединительные линии… Они слишком велики и слишком сильно привлекают к себе внимание, хотя, как я понимаю, нас больше интересуют не конкретные цифры (тогда надо было оформлять данные в виде таблицы), а динамика изменений, то есть сами кривые… |
||||||
|
|
||||||
|
Слева флажками выбираются поля, которые будут отображаться в таблице результатов, справа формируются поисковые условия… А. Г.: Даже для вашей модели поиска интерфейс выглядит слишком сложно. Я предпочел бы принять решение уже после запуска. И почему элемент имеет гипертекстовый вид? #&*@!!! Воспринимается как заголовок к стоящему ниже списку, хотя в списке не только условия, но и формат результатов. Сам список вообще не… |
||||||
|
|
||||||
|
Это облегчит чтение с экрана, работу с документами, электронными таблицами, схемами и картами… |
||||||
|
|
||||||
|
Двойные ссылки в списках и таблицах всегда неоднозначны… |
||||||
|
|
||||||
|
То что у вас в таблице — это нонсенс… |
||||||
|
|
||||||
|
Простая таблица с процентом выполнения по каждой стадии… Илья Бирман: Например, такой (это Бейскемп)… |
||||||
|
|
||||||
|
Попытался переделать данную таблицу, вот что вышло… А. Г.: Посмотрите, как метод УВЛ одним движением улучшает ваш дизайн: На экране отдельного сотрудника, будь то всплывающее окно или целая страница, я бы добавил переключалку на других сотрудников… |
||||||
|
|
||||||
|
Это таблица для расчёта стоимости такси: смотришь пункт отправки и пункт назначения (по горизонтали и вертикали перечислены районы города и близлежащие населённые пункты), на перекрестье получается цена… Илья Бирман: Илья, на сайте можно сделать, например, так… Пользуясь тем, что таблица почти всюду симметрична, можно убрать половину чисел (например, все, что ниже главной диагонали, идущей из левого верхнего угла в правый нижней)… Если таблица для простых пользователей, а не для менеджеров, принимающих звонки, мне кажется нужно начать с выкидывания названий районов и составления формы для поиска по улицам (можно сделать форму с подсказками, как в поисковиках)… Это не та табличка, которая у телефонистки перед глазами висит, ну или она больше инфы в голове держит, чем отображено в таблице… |
||||||
|
|
||||||
|
Имеется таблица с текущими проектами, в которой каждой строкой отображается отдельный проект… Илья Бирман: Приветствую! Этапы нужно расположить вдоль горизонтальной оси (в вашем дизайне даже непонятно, по строкам их читать или по столбцам). Для этого нужно выиграть место. Смешаем комки и уберём всё лишнее: Не нужно выделять текущий этап красной рамкой, показывать отсутствующие этапы, рисовать кучу… |
||||||
|
Так скажите, пожалуйста, кому захочется иметь дело с компанией, которая балансирует на грани рентабельности и честно подтверждает это таблицами расходов?… |
||||||
|
|
||||||
|
Чтобы избежать громоздких таблиц с наших вокзалов, я взяла за основу графический приём европейцев… А. Г.: Екатерина! Такие расписания нужны диспетчерам железной дороги, чтобы охватить взглядом пересечения машрутов во всех направлениях и даже, вероятно, проложить карандашом альтернативные дорожки для опаздывающих или дополнительных поездов. Для спешащих на поезд пассажиров такие схемы непривычны и не… |
||||||
|
Например, даже при указании модификатора u, русские буквы не входят в \w, поэтому их надо указывать явно |
||||||
|
Проставьте всем банерам, дивам и колонкам таблиц ширину и, если нужно, высоту… |
||||||
|
В таблицах, чтобы уменьшить шум… |
||||||
|
|
||||||
|
В таблице формируются кластеры: чем крепче связь, тем ближе друг к другу оказываются объекты… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Пока слушаешь одно объявление в аэропорту, можно прочитать всю таблицу вылетов и прилётов… |
||||||
|
|
||||||
|
Илья Бирман: А, там же ещё целая таблица снизу… Илья в хорошем настроении писал ответ |
||||||
|
|
||||||
|
Зелёный градиент таблице снизу, конечно же, ни к чему… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Илья Бирман: При редактировании сверху появляется тулбар с выбором стилей текста, настройки изображения или управления таблицей, в зависимости от редактируемого объекта… Как оказалось, ключевое значение в удобстве управления играет не интерфейс, а понятная структура данных из которых состоит сайт: база данных (включая имена таблиц и полей), структура каталогов, правила именования и размещения файлов, а также умозрительное понимание настроения сайта… Например, сделать таблицу, где в левой колонке которой будет текст на русском языке, а в колонках справа — переводы на другие языки… Вся необходимая информация о редактируемой таблице считывается из БД автоматически, а затем представляется не в виде «сухих» данных, а красиво и понятно… Как тогда отобразить таблицу цен для редактирования?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Логарифмическа шкала показывает конкретные значения, но не даёт представления о соотношении объёмов. Использовать её опасно: читатель не обратит внимания на подписи и решит, что экспорт в разные страны отличается незначительно. Поэтому доведём до ума второй вариант. Целое в данном случае равно… |
||||||
|
|
||||||
|
Вы показываете изменения файлов кривыми, а изменение строк — секторами. Итого у вас получается 5 графиков, наложенных друг на друга: добавлено/изменено/удалено файлов, добавлено/удалено строк. Я предлагаю пойти другим путём: отложить по вертикали строки кода, сгруппированные по файлам. Каждый… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
|
||||||
|
Хотите узнать всё о таблицах, графиках, диаграммах, картах, схемах, спектрах, инфографике и инфограммах?… |
||||||
|
Привести полную таблицу тарифов, дать калькулятор доходности… |
||||||
|
|
||||||
|
Мы уделим внимание конструкции макетов из базовых деталей: заголовков, текста, иллюстраций, таблиц и элементов интерфейса… |
||||||
|
|
||||||
|
Первой колонкой разумно сделать время: это важнейшее измерение на транспорте и по нему упорядочена таблица… |
||||||
|
|
||||||
|
Он говорит о том, что эта таблица содержит два уровня информации… Илья Бирман: В книгах «Наглядное отображение количественной информации» (The Visual Display of Quantitative Information, с. 140) и «Представление информации» (Envisioning Information, с. 46) Эдвард Тафти приводит |
||||||
|
Выравнивание по верху универсально для колонок обычного текста, таблиц и иллюстраций… |
||||||
|
А вертикальное выравнивание по центру в таблице точно является ошибкой… |
||||||
|
А. Г.: Евгения! Станьте первым архитектором в истории, кто честно признается клиенту, что навигация не в его компетенции. Сделать хоть |
||||||
|
На худой конец создайте в «Ворде» или |
||||||
|
Объявление «Не курите в лифте», табличка «Учёт», таблица Менделеева и портрет Пушкина в школе, расписание автобусов, карта метро, объявление о курсах английского в офисе — всё это плакаты… |
||||||
|
|
||||||
|
Представление (англ. view) — в базах данных виртуальная таблица, именованный запрос… |
||||||
|
Да, конечно, это бывают документы многостраничные, со скриншотами, диаграммами, таблицами и графиками, которые требуют хотя бы общих знаний и хотя бы полчаса времени… А. Г.: Наталья! Вашу проблему не решить каким‑то одним способом. Нужно создать такую систему, при которой менеджер по‑настоящему отвечает за отношения с клиентом и принимает на себя последствия своих ошибок. Причём я не имею в виду какие‑то штрафы — достаточно факта, что ты подвёл клиента. Но для этого… |
||||||
|
|
||||||
|
Повторяющийся месяц в колонке дат в таблице… |
||||||
|
|
||||||
|
Чтобы страница не разваливалась и не утомляла, нужно следить за отношениями главного с второстепенным и чередовать слои: большое и маленькое, светлое и тёмное, текст и иллюстрация, таблица и крупная цитата… |
||||||
|
|
||||||
|
на «поточных» текстовых страницах, состоящих не из модулей, а из элементов в свободном линейном порядке: подзаголовков, списков, таблиц и иллюстраций… |
||||||
|
|
||||||
|
Такую таблицу скучно листать, все проекты на одно лицо… |
||||||
|
Толстые рамки в таблице могут помешать чтению… |
||||||
|
Отображать участников компактно с фотографиями подробной таблицей… |
||||||
|
А. Г.: Но в таблице лучше всегда использовать пробелы, чтобы тысячи выравнивались независимо от размерности чисел… Например: 5825,01 — в основном тексте, 5 825,01 — в таблице… |
||||||
|
Вы можете встроить в него «ПТ Санс» для заголовков, «ПТ Сериф» для основного текста и «ПТ Моно» для таблиц… |
||||||
|
В шаблоне совета 1400 строк на ПХП и самописном шаблонизаторе, парсинг ХТМЛ на регулярных выражениях и три варианта вёрстки текста совета на таблицах… |
||||||
|
В итоге к моменту сдачи дизайн вроде бы готов, но у главреда есть эксель‑таблица с двумя сотнями замечаний… |
||||||
|
|
||||||
|
И если картинки хотя бы можно пропорционально увеличивать и уменьшать, то с текстом и таблицами вообще неясно, что делать… |
||||||
|
|
||||||
|
Напишите, по каким запросам вы будете рекламироваться, оцените бюджет по каждому запросу, спрогнозируйте количество переходов, напишите объявления — в таблицах Гугля… |
||||||
|
|
||||||
|
В работе Саши Юдашкина мне нравится интересная модульность, эстетика таблиц и схем, умение работать с форматом… |
||||||
|
Ошибкой будет делать информативный плакат с кучей мелких деталей, условий и таблиц, даже если они полезные… |
||||||
|
||||||
|
Обычно в таких случаях надо просто убрать график и сделать таблицу, но здесь даже это не поможет… |
||||||
|
Можно представить полезное действие в таблице… |
||||||
|
Полезное действие в статье может исполнять сравнительная таблица, хорошая схема или иллюстрация, хороший текстовый пример или диалог… |
||||||
|
В конце я покажу, как в моей книге работают интерактивные тесты и указатель шаблонов вёрстки, который мы шутливо называем «таблицей Менделеева»… |
||||||
|
Что делать: санкции — таблица с возможными вариантами санкций за отмену занятий… |
||||||
|
Например, у , , таблиц и многих других элементов всегда бывают установлены какие‑то отступы… |
||||||
|
Писать месяц числом можно в таблицах и подписях к документу — там, где они нужны не для чтения, а как формальность… |
||||||
|
Почему таблица времён не работает?… |
||||||
|
||||||
|
Илья Бирман: Для адекватной передачи и нормального восприятия этой информации подойдёт вводный текст и таблица с результатами… А вот из таблицы всех этих выводов не сделать… В таблице же нет чёткого первого впечатления, приходится всё равно пробежаться по всем столбцам… Таблица — это больше для обработки данных… |
||||||
|
Если нужно сохранить оригинал изображения, а не его кропнутую или изменённую версию, переключитесь во вкладку Inspect, включите свойста элемента таблицей и кликните по имени файла… |
||||||
|
Чем‑то похоже на : если задать его таблице, она не станет растягиваться на всю доступную ширину, а займёт ровно столько, сколько нужно её содержимому… |
||||||
|
|
||||||
|
Как бы вы это передизайнили, чтобы в этом было возможно разобраться и сделать Илья Бирман: Первое, что бросается в глаза — бесконечные рамки и пёстрые цвета. Думаю, уважаемым советчикам уже давно понятно, что от этого мы предложим избавляться. Но дальше возникает вопрос о сценарии использования этого сайта. Если я правильно понял, я должен указать своё отношение к каждому вопросу с… |
||||||
|
Например, экселька или таблица в «Ворде»?… |
||||||
|
|
||||||
|
Пару советов назад я обещал продолжить разбираться с таблицей лотков для проводов, но сначала хочу вслед за Ильёй Бирманом поговорить о выравнивании висячего заголовка относительно текста… |
||||||
|
Обычно кнопки скачивания располагаются для:
разного рода информации в виде таблиц, текстовых блоков, чтобы использовать когда нет интернета в полях в разных форматах;
изображений;
в редких местах целиком страницу, а не отдельный ее блок — тут… Максим Ильяхов: Если это внутренняя система, которой люди будут пользоваться постоянно, то может быть как угодно. Сформулируйте общее правило и применяйте его последовательно. Так как люди постоянно взаимодействуют с системой, они быстро привыкнут. Пока что все предложенные слова примерно одинаковые, вопрос в едва… |
||||||
|
На входе эти данные представляли собой таблицу из 30 листов в экселе, в которой специально обученные люди искали аномалии внесения и снятия наличных… |
||||||
|
Мы описываем картину, внутри которой живут все срезы, зафиксированные в таблицах и базах данных, и эти срезы становятся понятными частями целого… |
||||||
|
|
||||||
|
В таблице характеристик есть такая говорящая строчка… |
||||||
|
Иногда реальность данных проникает на визуализацию в буквальном смысле. Как на этой визуализации «Горячей сотни Биллборда»: «Горячая сотня Биллборда», 1958…2016. The PuddingПерейдя по ссылке, можно послушать 60‑е, 70‑е, 80‑е, 90‑е, 2000‑е и 2010‑е: треки сменяют друг друга и звучат тем дольше… |
||||||
|
Мы уже видели, как реальность данных «прорастает» на особенные визуализации. Теперь я расскажу, как её применять при создании аналитических дашбордов. Кейс, который мы рассмотрим, целиком придуманый и во многом упрощённый, данные я сгенерировала случайным образом, специально заложив туда некоторые… |
||||||
|
Следующий шаг алгоритма Δλ: выделить частицу данных. Вспомним примеры, которые мы рассмотрели ранее, на них большая картина как бы складывалась из отдельных деталей. Тектонические разломы проявлялись за скоплениями отдельных точек‑землетрясений: Землетрясения с 1898 года. Джон Нельсон, IDV… |
||||||
|
В прошлый раз мы познакомились с концептуальным смыслом частицы данных. Сегодня я дам формальное определение и расскажу как искать частицу данных. Частица данных — это сущность с таким набором свойств, из которых складываются все верхнеуровневые параметры данных. Обратите внимание, что частица… |
||||||
|
|
||||||
|
И возникает очень большой вопрос в табличном представлении данных - там однозначно воспринимается, что данные на начало часа - это данные за прошедший час, а они за следующий… Таня Мисютина: Юлия, добрый день! Давайте рассуждать. Нас сбивает с толку, что время изображено непрерывной осью, а значения посчитаны по дискретным отрезкам (03…04, 04…05, 05…06 и т. д. ) Концептуально, самым правильным вариантом здесь будет использовать редуцированные столбики без заливки: Согласитесь, в… |
||||||
|
Мы разобрали ещё один шаг алгоритма Δλ и важное понятие — частица данных. По традиции, подведём итоги. Что такое частица данных?Частица данных — это сущность с таким набором свойств, из которых складываются все верхнеуровневые параметры данных. По сути своей частица данных является единицей смысла… |
||||||
|
Время от времени делюсь здесь своими любимыми примерами и рассказываю, чем они хороши. Вот, например, большое исследование причин задержек в нью‑йоркском метро из 2018 года: How 2 M.T. A. Decisions Pushed the Subway Into Crisis. New York TimesНа первый взгляд, «очень интересно, но ничего непонятно»… |
||||||
|
В предыдущих советах я описала первые два шага алгоритма Δλ. Давайте их вспомним. Шаг 1. Описать реальность данных. Дополнительно: примеры, разбор бизнес‑кейса, резюме. Теперь пришло время перенести данные на экран. Для этого мы поставим в соответствие частице данных какой‑нибудь примитивный… |
||||||
|
Поделюсь ещё одним примером, который мне на днях показал Рома Бунин. Пример очень понравился, не могу молчать :‑) Это визуализация лицами Чернова социально‑значимых параметров, таких как доля населения за чертой бедности, распространённость высшего образования, процент безработицы и кол‑во взрослых… |
||||||
|
Привет, Каролина! Артём уже ответил на ваш вопрос и поделился опытом. Возможно, мой опыт тоже окажется полезным и дополнит картину. Моей старшей дочке через пару недель исполняется десять лет, младшей сейчас шесть с половиной. Совмещать роли специалиста и мамы — это самая сложная из всех задач, что… |
||||||
|
Разберём понятие «визуального атома» на уже знакомых нам примерах. Напомню, что визуальный атом — это воплощение частицы данных на экране, а именно точка, столбик, иконка или другой объект, который за счёт своих графических свойств передаёт свойства частицы данных. В примере с землетрясениями… |
||||||
|
15 января завершилась киноэпоха, умер Дэвид Линч. Этот совет я посвящаю ему. В фильмах Дэвида Линча существуют параллельные миры: парадоксальные, загадочные, многослойные, ссылающиеся на самих себя. Притягательные, пугающие и, в то же время, бескомпромиссно уютные. Об этих мирах пишут диссертации и… |
||||||
|
Существует не так много графических примитивов, которые подходят для использования в качестве визуальных атомов — это точка, круг, столбик или прямоугольник, фигура, отрезок, линия, текстовый символ, изображение. ТочкиТочка — это самый «фундаментальный» атом и самый простой. Он подходит для… |
||||||
|
Поговорим о столбике с точки зрения визуального атома. Столбик передаёт те же два параметра, что и круг, за счёт своего цвета и площади. Но если для круга площадь растёт равномерно в двух измерениях, то при работе со столбиком мы можем выбирать, как именно использовать площадь: сохранив ширину… |
||||||
|
В хоккейном мире кипят страсти вокруг приближающегося рекорда Александра Овечкина. Главная интрига в том, сумеет ли Овечкин добраться до 894 шайб уже в этом сезоне, догнать и, возможно, обогнать Уэйна Грецки, который установил свой мировой рекорд в 1999 году. Я начала с того, что проиллюстрировала… |
||||||
|
Рассмотрим примеры, где визуальный атом имеет более сложную формы, чем точка, круг и столбик. ФигурыПервой степенью усложнения будет геометрическая фигура, которая помимо цвета и размера может передать свойство своей формой. Правда, примеры, где геометрические фигуры применимы без потери… |
||||||
|
Давайте поговорим о том, как качественная визуализация расширяет кругозор и подталкивает наш мозг к тому, чтобы задавать вопросы и искать на них ответы — на примере знаменитой португальской карты, планисферы Кантино, созданной в 1502 году. Планисфера Кантино. Библиотека дома д'Эсте, Модена, Италия… |
||||||
|
В недавнем совете я приводила классический график из книги Тафти, на котором показано соотношение массы мозга и массы тела различных существ. Вместо точек на графике используются изображения животных: Beautiful Evidence, стр. 121. Edward TufteЛюбопытная деталь на графике — это корона на голове… |
||||||
|
Завершая тему визуальных атомов, рассмотрим «протяженные» графические примитивы — отрезки и линии, которые используются редко, но в подходящих для них ситуациях бывают незаменимы. Отрезок по сути своей — это две точки, соединённые прямой линией. На визуализации он чаще всего показывает либо связь… |
||||||
|
В сегодняшнем совете поговорим о линиях на графиках. Начну с того, что линия на визуализации — это не всегда визуальный атом. Например, линейные таймлайны показывают тренды линиями, но за каждой линией стоит совокупность точек‑измерений. Diary of a Food Tracker. New York TimesThe Rise of Long‑Term… |
||||||
|
На прошлом шаге мы перенесли данные на экран и каждому экземпляру частицы данных поставили в соответствие графический примитив (точку, фигуру, изображение или линию), визуальные свойства которого задаются свойствами частицы данных. Таким образом мы материализовали наши данные на экране, превратили… |
||||||
|
Время от времени делюсь своими любимыми или просто классными примерами и рассказываю, чем они хороши. Недавно Яндекс выпустил исследование на стыке литературы и метеорологии: «Как писали о погоде в русской литературе». В статье несколько интерактивных форматов, которые с разных сторон раскрывают… |
||||||
|
Сегодня отвечаю на ваши вопросы о том, с чего медику начать путь в дизайне, какие направления в дизайне будут востребованы в будущем, есть ли в бюро таблица дизайнерских специальностей, какие есть альтернативы селекту в навигации, как выбрать поведение шапки сайта… |
||||||
|
В следующих заметках я покажу, как комбинируя способы упорядочивания объектов на осях из предыдущего совета, сконструировать самые полезные и часто используемые форматы визуализации — столбиковую диаграмму, линейный график, хитмап, график разброса и карту. А попутно у нас получатся ещё кое‑какие… |
||||||
|
|
||||||
|
Для совместимости с КПК, на мой взгляд, будет грамотным использовать не таблицы, а дивы, что, при отключении CSS и/или недостатке пространства, приведет к «распаданию» формы и отображению ее, как во втором примере… Большой интерлиньяж, конечно, немного улучшит ситуацию, но всё равно в этом варианте присутствует некая «табличность» — приходится сконцентрированно преодолевать взглядом пустое пространство между подписью и полем ввода, даже если это пространство мало… |
||||||
|
|
||||||
|
Я вот, наоборот, всегда путаю таблички на дверях таулета, когда девочка в юбке, а мальчик в «перевернутом треугольнике»… |
||||||
|
|
||||||
|
Здесь основные категории и их подкатегории представлены в табличном виде, чего делать нельзя,
так как увеличение числа подкатегорий в Тогда сами пункты можно разместить в таблице… |
||||||
|
|
||||||
|
Удивительный первоначальный интерфейс — много прошло времени, прежде чем я понял, что «создать, найти, …» — это подпункты user'а :) Однако от него можно взять и хорошее: разложение подпунктов по ячейкам таблицы 2×2, вот что у меня получилось… |
||||||
|
|
||||||
|
Когда я увидел эту таблицу, то первая мысль была « Я проверил таблицу изменений на Яндексе — суммы сходятся… |
||||||
|
|
||||||
|
Мне кажется, удобнее представить данные в виде таблицы… |
||||||
|
|
||||||
|
Истина обнаруживается при поиске в Яндекс.Картинках по словам из шапки таблицы… |
||||||
|
|
||||||
|
На самом деле, все не так сложно — несколько стандартных шагов, которые делает менеджер с калькулятором и таблицей комплектующих к руках… |
||||||
|
|
||||||
|
Показать варианты ответа и кнопку «Далее» сразу, кто спешит, догадается (7) Если тест позиционируется как несложный и расслабляющий, то нафиг таблицу результатов… |
||||||
|
|
||||||
|
Цифры в таблице надо бы выровнять по правому краю, чтобы разряды были на одной вертикали, так нагляднее и легче сравнивать значения… Так таблицы растягивать нельзя… |
||||||
|
|
||||||
|
Обычная таблица ничуть не хуже справиться с поставленной задачей, но трудозатраты будут меньше в разы… Сергей, ваша справедливо перевернутая таблица пригодится на сайте в качестве версии для печати… Читая таблицу, человек может попросту не воспринять то, что общая стоимость складывается из нескольких чисел… Просто потому, что это сильно снижает нагрузку на пользователя: чтобы воспользоваться таблицей, ему вообще ничего не надо делать… |
||||||
|
|
||||||
|
Я бы сделал расписание в виде таблицы с возможностью переключения с привычного для преподавателей вида «числитель/знаменатель» на два человеческих расписания: для четных и нечетных недель для всего потока и для отдельных групп… |
||||||
|
|
||||||
|
Для верстки таких данных логично использовать таблицу (можно без линий сетки), к которой наиболее близок вариант оглавления из ГОСТа… |
||||||
|
|
||||||
|
Таблицу на первой |
||||||
|
|
||||||
|
Ну и так далее, в общем, заставить биллинг писать человеку на человеческом языке, без таблиц, списков, иконок и графиков… |
||||||
|
|
||||||
|
На главной странице, соответственно, хотелось бы сразу увидеть максимум информации — грубо говоря, положенную набок таблицу о десяти строках (по одной на бренд), уходящую далеко вправо, возможно с цветовым кодированием, раскрывающим дополнительные связи (модели из одной «весовой категории», скажем)… |
||||||
|
|
||||||
|
Можно сделать групповое выделение квартир в заданном районе и формирование таблицы ниже под картой с этими квартирами… |
||||||
|
|
||||||
|
Таблица и страница пляшут… Вот ссылка на сводную таблицу: http://www.jsfmatrix.net Интересно узнать мнение Артема и советчиков по поводу подобных библиотек… |
||||||
|
Или сделал первое, что пришло в голову на главной странице — нажал «стрелку вправо». (Интересно, много людей сделали иначе? :) И еще, угловые стрелки «по возрастанию» / «по убыванию» в таблице результатов поиска странно смотрятся — контурные и при этом с кернингом, особенно в сочетании с обилием наклонных штрихов в соседних словах (максимум, минимум)… |
||||||
|
|
||||||
|
Потому что внедрение WYSIWYG в бэкэнд (админку) — половинчатое решение, даже если и стили «подцепляются» родные для сайта — потому что важен контекст, и тот же цвет подобрать будет трудновато, не видя исходной страницы, и вечные проблемы с вставкой |
||||||
|
|
||||||
|
А в таблицах и расписаниях двоеточие и тире мы не используем для уменьшения шума… |
||||||
|
|
||||||
|
Это позволит сэкономить много места и внести большую наглядность, если расположить товары в таблице… |
||||||
|
|
||||||
|
Или делать по принципу корзины, не увольняя сотрудника, а перенося его в отдельную таблицу например, и по истечению определенного срока она бы сама удаляла свое содержимое… |
||||||
|
|
||||||
|
Три первые диаграммы можно сделать и таблицей… |
||||||
|
|
||||||
|
А. Г.: Ярослав! Спасибо за развёрнутые обоснованные тезисы. Я считаю, что электронная книга должна быть именно такой, как вы говорите. Пожалуй, я бы ещё хотел, чтобы книга открывалась на том же месте, на котором я её закрыл. Не думаю, что печатная версия должна выглядеть точно как экранная, хотя бы из… А как же быть с книгами, которые содержат ссылки, сноски, картинки, таблицы, сноски с таблиц?… |
||||||
|
|
||||||
|
Строки таблицы должны легко читаться даже без названий колонок в вашем случае… |
||||||
|
|
||||||
|
Карта — это лучший вариант, но те данные, что приведены в таблице, нельзя показать на одной карте Саратова… |
||||||
|
|
||||||
|
Не вижу смысла биться за равную высоту ячеек в таблице… |
||||||
|
А. Г.: По неформальным оценкам разных веб‑разработчиков, подавляющую часть времени на проект составляет программирование пользовательского интерфейса. Не видя перед собой экранов, разработчики будут двигаться в потёмках. Опытные разработчики сами требуют экраны, чтобы не делать работу дважды. Слово «… Я рекомендую хранить сущности и связи между ними в БД в разных таблицах… |
||||||
|
|
||||||
|
А. Г.: Александр! Вероятно, вы потратили на эту работу много времени. Я не хочу показаться вам неделикатным, но я считаю результат катастрофическим. Я не могу помочь вам другим советом, кроме как обратиться к дизайнерам интерфейса. Ваш сайт должен продавать билеты. У продавцов есть понятие «воронка продаж… А при её срабатывании добавляйте соответствующую пометку в фильтр над таблицей… Для этой цели удобен был бы график или таблица цен на заданное направление, на месяц сразу, например… |
||||||
|
|
||||||
|
Карту, конечно, надо только в форме поиска показывать (по желанию), а результаты на карте не следует показывать ни в коем случае, — их надо таблицей с возможностью сортировки… |
||||||
|
А. Г.: В обычном тексте мне милее вариант Германия — Англия 4:1. В компактной табличке неплохо бы смотрелась симметричная конструкция Германия 4:1 Англия… Женя, ваш вариант можно использовать в |
||||||
|
|
||||||
|
Лучше артикул товара, его цвет и количество — то, что покупатель собственно указывает — расположить ближе друг к другу, в самое начало таблицы… |
||||||
|
|
||||||
|
Решил, что длиннющая таблица (в прайсе около 180 позиций) не самый лучший вариант… |
||||||
|
|
||||||
|
Если в правой колонке ряд значений, и их расположение неслучайно — сделайте таблицу… |
||||||
|
|
||||||
|
Внешняя граница таблицы нужна была для вырезания из бумаги: как правило, расписание распечатывалось по |
||||||
|
Илья Бирман: Дмитрий! На свете есть много хороших дизайнеров, которые немного умеют программировать, но у них получается что‑нибудь глючное и тормозное. Проходят годы, они научаются писать более качественный код, осваивают работу с базой данных, в общем растут. Но всё равно их навыков не хватает, чтобы… Там стянули кнопочку, сям позаимствовали оформление таблицы, ещё |
||||||
|
|
||||||
|
Но в таблице встречаются диапазоны с двумя отрицательными значениями (–6…–3 °С)… |
||||||
|
|
||||||
|
Поиграйте с размерами и цветами текста, выравниванием блоков, сделайте контрастный заголовок таблицы… |
||||||
|
|
||||||
|
В таблице, например, может выстроиться батарея из вторых нулей… |
||||||
|
|
||||||
|
Принцип |
||||||
|
|
||||||
|
Павел, представьте себе таблицу с абсолютными числами, а не с процентами… |
||||||
|
|
||||||
|
Если штук по |
||||||
|
|
||||||
|
Можно еще воспользоваться таблицей, в ней вертикальное выравнивание по умолчанию расположит всё посередине… В таблице с |
||||||
|
Пусть коряво, пусть в таблицах — как угодно, но они долны продемонстрировать предполагаемый рабочий вид… |
||||||
|
Если я отвечаю, что технически лучше в одном,— мне возражают, что тогда с этим файлом будет сложно работать верстальщику; гораздо удобнее, когда шрифты в одной таблице стилей, рамки — в другой, позиционирование — в пятой, и так далее… |
||||||
|
Максим Ильяхов: В русском языке разряды отбиваются тонким пробелом: 12 000; 11 999,99. В английском — запятой: 12,000; 11,999.99… Пользователю может потребоваться скопировать цифры для переноса в таблицу (калькулятор, |
||||||
|
|
||||||
|
в таблице значений пометить классами те ячейки, которые можно изменять; 2… |
||||||
|
Артём Поликарпов: Александр! Сомневаюсь. По крайней мере, я бы точно провалился на вашем собеседовании. Радиальный градиент от левого верхнего края, множественная внутренняя тень, локальный скрол фона, транзишны, анимации, компасовские миксины и функции — за всем этим я всегда иду в поисковую систему. Мне кажется… Ну ладно бы адаптивную «резину» в блокноте попросили сверстать, но таблицу…?… |
||||||
|
|
||||||
|
Обычно в таблицах я ненавижу лишние линии, но здесь нужно помочь увидеть все сеансы в определённое время… Должно быть несколько таблиц… И таблиц, конечно же, две: одна для тех, кто хочет посмотреть конкретный кинотеатр, и вторая тем, кого интересует определённый фильм… |
||||||
|
|
||||||
|
Потому что это не предложение в сплошном тексте, а надпись — как заголовок, подпись под картинкой или название таблицы… |
||||||
|
|
||||||
|
Если слева от блока с текстом имеется другой блок или ячейка таблицы, например http://vesna.yandex.ru 2… |
||||||
|
||||||
|
Возможно, кнопка слева завершит |
||||||
|
|
||||||
|
А. Г.: Типографы веками искали закономерности и связи между элементами набора: буквами и апрошами, строками и интерлиньяжем, полосой набора и полями. Каждое открытие складывалось в бесконечную копилку правил: прописные нужно разрежать, строчные нельзя разрежать, вертикальные штрихи строчных и прописных… Внезапно стало всё понятно с хронической, физически ощущаемой нелепостью виндовых интерфейсов: они же, по сути, просто таблицы разных размеров и конфигураций… |
||||||
|
|
||||||
|
Допустим, состояние таблицы на момент начала редактирования: Понедельник, Вторник, Среда: 9–20 Четверг: выходной Пятница: 11–18 Суббота, воскресенье: выходной Тогда при попытке установить в четверг время работы, автоматически будут заполнены суббота и воскресенье и их нужно будет не забыть стереть… |
||||||
|
|
||||||
|
На фото — информационное табло главного железнодорожного вокзала Праги, первое на пути пассажира, приехавшего на метро, автобусе или вошедшего в вокзал со стороны основной автопарковки… |
||||||
|
Не понравилась табличка с сортами… |
||||||
|
А. Г.: Дизайнер — это человек, который придумал и воплотил в жизнь инструмент исполнения желаний других людей. Иногда дизайнер решает свою проблему. Не дизайнерПервобытный человек, убивший соперника подвернувшимся камнем ДизайнерОн же, насадивший камень на палку Не дизайнерСантехник, починивший… В таблице я подчёркивал разницу между исполнением желаний и инструментом исполнения желаний… |
||||||
|
|
||||||
|
Проще говоря, если меню — не просто таблица с названиями, а такой вот |
||||||
|
Это хорошо, так как у оптовиков зачастую есть сложные условия выбора товара, а скаченная таблица не перезагружается и быстро открывается… |
||||||
|
В контексте таблиц отбивать тысячи кажется логичным, но в одиночку, когда крупная цифра на пол экрана, число 5 000 ₽ выглядит рассыпанным… |
||||||
|
|
||||||
|
Аня Данилова: Никита! Не существует ни одного правила в шрифтах и типографике, которое нельзя поставить под сомнение в какой‑либо конкретной ситуации. Шрифт — это набор глифов, которые должны воспроизводиться неограниченное количество раз, поэтому при создании шрифта нужно стремиться к тому, что он будет… У Эпла для шрифта Сан Франциско тоже есть аналогичная таблица трекинга… |
||||||
|
|
||||||
|
Василий Половнёв: Я не Аня, но попробую ответить. В ЦСС отвечает за «жирность» начертания. Задается в числах от 100 до 900: font‑weight100 Бюросансlight Бюросайнlight font‑weight200 Бюросансlight Бюросайнlight font‑weight300 Бюросансlight Бюросайнlight font‑weight400 Бюросансregular Бюросайнregular font‑weight500 … Ещё была попытка записывать насыщенность и курсив 2 цифрами, но для этого надо было в голове представлять таблицу, где одна цифра — строка, вторая — столбец… |
||||||
|
Максим Ильяхов: Максим, я не могу говорить о «Т—Ж», потому что не работаю в этом издании с 2019 года. Как там сейчас — не знаю. Могу поделиться нынешним опытом в журнале «Код». Сеошник помогает нам в трёх задачах: убедиться, что сайт работает без явных технических ошибок с точки зрения поисковиков; предложить… Если проблему читателя решает таблица, схема или видеоролик, для SEO это даже ещё лучше: от такого контента роботы только добреют… |
||||||
|
|
||||||
|
Илья Бирман: Отвечаю с 0:16… В нём, помимо самой схемы, есть неземной красоты (то есть совершенно нечитаемые) таблицы с остановками каждого маршрута… |
||||||
|
||||||
|
Константин Мозговой: Анастасия! Не вижу проблем покрасить в красный кнопку и ошибки в формах. Возможно, во время написания вопроса вы обратили внимание на интерфейс его отправки в советы. В нём кнопка и ошибки красные, но кнопка дисейблится при появлении ошибок. То же самое встречается и в других интерфейсах на сайте… Идите от контекста — если это таблица, то подкрашенные ошибки не сольются с интерфейсом… |
||||||
Константин Мозговой: Человек, который не смотрит футбол, не сможет понять, что зелёные и красные выделения в левой части таблицы означают проход команды в Лигу чемпионов или Лигу Европы и вылет в дивизион ниже…
Выделение зон еврокубков и вылета кажется слишком жирным для промежуточного состояния таблицы, ведь в следующем туре уже может всё поменяться…