https://kirillbelyaev.com/ru/blog/?go=tags/kompaktnost/ о подаче информации, айдентике, интерфейсах и жизненной среде Кирилл Беляев ru E2 (v3572; Aegea) Кирилл Беляев о подаче информации, айдентике, интерфейсах и жизненной среде 614 https://kirillbelyaev.com/ru/blog/?go=all/sealing-columns-in-table/ Fri, 26 Jan 2018 13:19:31 +0300 Кирилл Беляев https://kirillbelyaev.com/ru/blog/?go=all/sealing-columns-in-table/ <p>Таблицы удобнее читать, когда столбцы стоят плотно и взгляд не перепрыгивает большие дыры, идя по строке. Второй плюс узких столбцов — их больше влезает в ширину экрана. Особенно это актуально в информационно насыщенных таблицах. Часто узкому содержанию мешают широкие заголовки, как в столбцах Е и F :</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/excel@2x.gif" width="512" height="384" alt="" /> <div class="e2-text-caption"><a href="https://www.cs.umd.edu/hcil/academics/courses/fall1999/cmsc838s/Project/wmk/paper/node13.html">Скриншот с сайта университета Мэриленда</a></div> </div> <p>Столбцы А...F за 1990-й. Год можно вынести на строку выше и не повторять шесть раз. Этого хватит, чтобы сузить столбцы, но если оставшиеся заголовки будут длиннее подойдёт следующий приём. Показывать буду на таком кусочке:</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/table-incompact@2x.png" width="323" height="215" alt="" /> </div> <p>Повторюсь: приём подойдет только для случаев, когда столбцы связаны по смыслу. Сначала собираю заголовки в один через запятую. И сбиваю содержание плотнее:</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/table-combined-columns@2x.png" width="155" height="235" alt="" /> </div> <p>Заголовки связаны со столбцами только порядковым положением. Такой связи бывает недостаточно. Поэтому усиливаю связь цветом. Достаточно одного не крайнего столбца на каждые три-четыре столбца. Красить лучше со смыслом, но можно и механически через один:</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/table-combined-color-columns@2x.png" width="370" height="235" alt="" /> </div> <p>Теперь нужно придумать, что делать с сортировкой. У исходной таблицы заголовки могли быть кликабельными. Теперь так не получится.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/table-sorting@2x.png" width="323" height="215" alt="" /> </div> <p>Добавляю линейку, отделяющую содержание от заголовка. Режу её на кусочки по ширине каждого столбца делаю повыше и превращаю в кнопки:</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/table-combined-columns-sorting@2x.png" width="585" height="252" alt="" /> </div> <p>Тестируйте перед внедрением.</p>