{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Кирилл Беляев: заметки с тегом таблица", "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/tablica\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Ftablica%2Fjson%2F", "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "647", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/financial-model-table-copying\/", "title": "Копирование таблицы с финмоделью", "content_html": "

Разбирался с экономикой аэротрубы. Какой порог входа в бизнес, какой возврат на инвестиции, через сколько возвращаются инвестиции, какие главные расходы и риски.<\/p>\n

Нам дали экселевский файл, который помогает потенциальным клиентам примерить этот бизнес. Там пять вкладок, на которых ячейки ссылались друг на друга 773 раза без учёта ссылок на ссылки.<\/p>\n

\n $\"\"$ \n<\/div>\n

Как в таком разобраться? «Берёшь и разбираешься» — хороший ответ, но что делать непонятно. Можно посмотреть куда ведёт одна ячейка, потом вторая. С таким методом опасно что-то не понять и не заметить этого.<\/p>\n

Как разобраться не придумали. Но придумали, как добавить пользы — передизайнить таблицу, чтобы повысить читаемости, и перенести в Гугл-таблицы, чтобы упростить доступ и связываться с ней через АПИ.<\/p>\n

В итоге я сделал копию. Не копи-пейст, а повторил всё руками, убедившись, что цифры сходятся. Ну и как следствие — разобрался в работе модели.<\/p>\n

\n $\"\"$ \n<\/div>\n

Сергей Сурганов<\/a> писал, что перерисовывал скриншоты Фейсбука, чтобы разобраться, как они делают дизайн. В классе рисунка и живописи копирование мастеров — тоже один из методов.<\/p>\n

Похоже, копирование — универсальный способ познания.<\/p>\n", "date_published": "2018-05-22T14:41:27+03:00", "date_modified": "2018-05-22T14:41:22+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/power-cost-excel@2x.jpg", "_date_published_rfc2822": "Tue, 22 May 2018 14:41:27 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "647", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/power-cost-excel@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/power-cost-google-sheet@2x.jpg" ] } }, { "id": "638", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/subtitles-breaking-radio-buttons\/", "title": "Подзаголовки, ломающие переключатель", "content_html": "

Встретил в магазине такой переключатель:<\/p>\n

\n $\"\"$ \n<\/div>\n

С первого раза не осилил. Тут вроде нормальная структура: подзаголовок + радиокнопка для каждого элемента. Но выбрать пункт, не читая его подзаголовок, не получится. Выписал проблемы, чтобы понять что мешает.<\/p>\n

В тексте:<\/p>\n

пара «подзаголовок — лейбл к радиокнопке» в разных пунктах согласована по-разному (2-й лейбл вообще выглядит ошибкой, как будто не оттуда скопировали);<\/li>\n

в 1-м пункте повторяются «Самовывоз» и во 2-м — «Доставка», скорее всего, дубли навязывает структура.<\/li>\n<\/ul>\n

В вёрстке:<\/p>\n

подзаголовки ближе к предыдущим лейблам;<\/li>\n

подзаголовок предполагает, что пункты внутри него не связаны с пунктами внутри других подзаголовков, но тут это не соблюдается.<\/li>\n<\/ul>\n

Думаю последний пункт самый важный. Радиокнопки говорят, что это один переключатель, а подзаголовки разбивают переключатель на три. Из этого выходит, что починить текст, не трогая вёрстку, не выйдет.<\/p>\n

После перевёрстки повторы и рассогласованность ушли сами:<\/p>\n

Способ получения<\/b><\/td>\n

Стоимость<\/b><\/td>\n<\/tr>\n

Самовывоз<\/label><\/td>\n

Бесплатно<\/td>\n<\/tr>\n

Доставка в регионы РФ<\/label><\/td>\n

Сообщает оператор<\/td>\n<\/tr>\n

Доставка по Санкт-Петербургу<\/label><\/td>\n

300 рублей<\/td>\n<\/tr>\n<\/table>\n<\/div>\n", "date_published": "2018-05-11T12:40:31+03:00", "date_modified": "2018-05-14T12:42:10+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/delivery-selection@2x.png", "_date_published_rfc2822": "Fri, 11 May 2018 12:40:31 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "638", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/delivery-selection@2x.png" ] } }, { "id": "636", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/opening-hours-suggest\/", "title": "Предположение о часах работы", "content_html": "

На странице заведения Форсквер<\/a> показывает часы его работы. Если время не указано точно, сервис предполагает, опираясь на чекины. Я за такие штуки, потому что они добавляют пользы.<\/p>\n

\n $\"\"$ \n<\/div>\n

Проектируя похожие блоки, важно показывать, что это именно предположение и на основе всего оно сделано. С этим у Форсквера хорошо, но остальное в блоке подано слабо:<\/p>\n

Он контекстно меняет порядок дней недели, что мешает сформировать привычку.<\/li>\n
Не пушит, какой сегодня день недели, хотя это может помочь принять вспомнить, что сегодня сюда не нужно или ещё что-то в таком духе.<\/li>\n
Каждому часу добавляет мусорные «:00», хотя все данные округлены до полных часов.<\/li>\n

Отдельные приветы «Полудню» и диапазону «Сб — Вс».<\/li>\n<\/ol>\n

Делал бы так. Если данные точные, заголовок будет просто «Открыто до 19:00».<\/p>\n

Судя по чекинам, открыто<\/span>:<\/b><\/p>\n

\n\n\n\n\n\n\n\n
<\/td>\n Пн<\/td>\n 10...16<\/td>\n <\/td>\n <\/td>\n<\/tr>\n
<\/td>\n Вт<\/td>\n 11...15<\/td>\n 17...18<\/td>\n <\/td>\n<\/tr>\n
<\/td>\n Ср<\/td>\n 11...12<\/td>\n 14...18<\/td>\n <\/td>\n<\/tr>\n
<\/td>\n Чт<\/td>\n 11...13<\/td>\n 15...16<\/td>\n 18...19<\/td>\n<\/tr>\n
Сегодня<\/td>\n Пт<\/td>\n 11...19<\/span><\/td>\n <\/td>\n <\/td>\n<\/tr>\n
<\/td>\n Сб, Вс<\/td>\n 10...19<\/td>\n <\/td>\n <\/td>\n<\/tr>\n<\/table>\n<\/div>\n", "date_published": "2018-05-03T12:35:18+03:00", "date_modified": "2018-05-03T12:44:21+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/foursquare-suggest@2x.png", "_date_published_rfc2822": "Thu, 03 May 2018 12:35:18 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "636", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/foursquare-suggest@2x.png" ] } }, { "id": "614", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/sealing-columns-in-table\/", "title": "Уплотнение столбцов в таблице", "content_html": "
Таблицы удобнее читать, когда столбцы стоят плотно и взгляд не перепрыгивает большие дыры, идя по строке. Второй плюс узких столбцов — их больше влезает в ширину экрана. Особенно это актуально в информационно насыщенных таблицах. Часто узкому содержанию мешают широкие заголовки, как в столбцах Е и F :<\/p>\n
\n $\"\"$ \n
Скриншот с сайта университета Мэриленда<\/a><\/div>\n<\/div>\n
Столбцы А...F за 1990-й. Год можно вынести на строку выше и не повторять шесть раз. Этого хватит, чтобы сузить столбцы, но если оставшиеся заголовки будут длиннее подойдёт следующий приём. Показывать буду на таком кусочке:<\/p>\n
\n $\"\"$ \n<\/div>\n
Повторюсь: приём подойдет только для случаев, когда столбцы связаны по смыслу. Сначала собираю заголовки в один через запятую. И сбиваю содержание плотнее:<\/p>\n
\n $\"\"$ \n<\/div>\n
Заголовки связаны со столбцами только порядковым положением. Такой связи бывает недостаточно. Поэтому усиливаю связь цветом. Достаточно одного не крайнего столбца на каждые три-четыре столбца. Красить лучше со смыслом, но можно и механически через один:<\/p>\n
\n $\"\"$ \n<\/div>\n
Теперь нужно придумать, что делать с сортировкой. У исходной таблицы заголовки могли быть кликабельными. Теперь так не получится.<\/p>\n
\n $\"\"$ \n<\/div>\n
Добавляю линейку, отделяющую содержание от заголовка. Режу её на кусочки по ширине каждого столбца делаю повыше и превращаю в кнопки:<\/p>\n
\n $\"\"$ \n<\/div>\n
Тестируйте перед внедрением.<\/p>\n", "date_published": "2018-01-26T13:19:31+03:00", "date_modified": "2018-01-26T20:45:41+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/excel@2x.gif", "_date_published_rfc2822": "Fri, 26 Jan 2018 13:19:31 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "614", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/excel@2x.gif", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-incompact@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-columns@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-color-columns@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-sorting@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-columns-sorting@2x.png" ] } }, { "id": "610", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/cryptowatch\/", "title": "Криптовотч", "content_html": "
Смотрите, какой сайт с котировками криптовалют — cryptowat.ch<\/a><\/p>\n
\n $\"\"$ \n<\/div>\n
Терминальный минимализм такой. Я бы побился за меньшее число линеек — много шума от них:<\/p>\n
\n $\"\"$ \n<\/div>\n
В карточке ещё интереснее:<\/p>\n
\n $\"\"$ \n<\/div>\n
В стакане одинаковые цифры гасят прозрачностью. Когда отличие в разряде, подсвечиваются всё отличные цифры, а потом «счётчик» обнуляется и только подсвечиваются отличия от последнего «разрядного отличия» (вторые строки снизу и сверху):<\/p>\n
\n $\"\"$ \n<\/div>\n", "date_published": "2018-01-23T15:48:20+03:00", "date_modified": "2018-01-23T15:58:12+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/cryptowatch@2x.png", "_date_published_rfc2822": "Tue, 23 Jan 2018 15:48:20 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "610", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/cryptowatch@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/cryptowatch-redesign@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/cryptowatch-inside@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/cryptowatch-differences@2x.png" ] } }, { "id": "606", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/credits-table\/", "title": "Таблицы титрами", "content_html": "
Не верстайте так таблицы, потому что внешне это выглядят как текст с центральной выключкой и именно так начинает читаться. И только споткнувшись раз или два, читатель поймёт, что перед ним таблица:<\/p>\n
\n $\"\"$ \n<\/div>\n
Если очень хотите титры, раздвиньте колонки сильнее:<\/p>\n
\n $\"\"$ \n<\/div>\n
Когда первая колонка такая однородная по ширине, левые флаги ещё аккуратнее:<\/p>\n
\n $\"\"$ \n<\/div>\n", "date_published": "2018-01-18T15:59:16+03:00", "date_modified": "2018-01-18T19:43:20+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/credits-table@2x.png", "_date_published_rfc2822": "Thu, 18 Jan 2018 15:59:16 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "606", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/credits-table@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/credits-table-better@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/credits-table-best@2x.png" ] } }, { "id": "596", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/notes\/", "title": "Комментарии к сущностям в системах", "content_html": "
В системах бывают комментарии. Например в ЦРМ<\/a> у клиента или заказа. Стыдно признаваться, что не жаловал эти поля. Видел их так: чёткого назначения нет, используются раз в сто лет, не укладываются в формат, ломают таблицы.<\/p>\n
Крутой Анатолий Буров<\/a> показал другую сторону. Одно поле комментария расширяет функциональность системы, как несколько полей сразу. Люди могут писать в комментарии что угодно, любые данные, для которых нет полей. С хорошим поиском совсем сказка.<\/p>\n
А в таблице можно делать так:<\/p>\n
\n $\"\"$ \n<\/div>\n
Анатолий Буров добавляет<\/b>
\nКомментарии — это дешёвый способ сделать систему устойчивой к изменениям в окружающем мире.<\/p>\n
Когда мы выкатываем интерфейс, есть вероятность, что в ближайшие пару лет он будет работать в первозданном виде. При этом условия будут меняться: появятся новые сценарии и новая информация, которые сложно предусмотреть заранее (если б могли предусмотреть, предусмотрели бы :—)<\/p>\n
Поля для записей в свободной форме дают людям возможность и дальше использовать старую систему в новых условиях, не страдая от того, что она никак не дорабатывается. Они между собой договорятся, что и как туда записывать — ну, например, хэштегами, — а поиск не даст заблудиться.<\/p>\n
А когда разработчики-таки добавят в систему нужные поля, можно будет скриптом перенести хештеги из комментариев в соответствующие структуры. И всем будет счастье.<\/p>\n", "date_published": "2017-12-21T12:26:34+03:00", "date_modified": "2018-11-27T12:20:26+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/note@2x.png", "_date_published_rfc2822": "Thu, 21 Dec 2017 12:26:34 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "596", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/note@2x.png" ] } } ], "_e2_version": 3572, "_e2_ua_string": "E2 (v3572; Aegea)" }