https://kirillbelyaev.com/ru/blog/?go=tags/vyklyuchka-po-centru/ о подаче информации, айдентике, интерфейсах и жизненной среде Кирилл Беляев ru E2 (v3572; Aegea) Кирилл Беляев о подаче информации, айдентике, интерфейсах и жизненной среде https://kirillbelyaev.com/ru/blog/?go=all/remark-about-align-center/ https://kirillbelyaev.com/ru/blog/?go=all/remark-about-align-center/ Sat, 19 Sep 2015 09:18:30 +0300 Кирилл Беляев https://kirillbelyaev.com/ru/blog/?go=all/remark-about-align-center/ <p>Читая прошлую заметку, <a href="http://kirillbelyaev.com/all/align-center/">Роман не всё понял</a>. Дело, конечно, в слабом объяснении — мои формулировки ещё точить и точить. А пока они рыхлые, буду объяснять. Цитирую:</p> <blockquote> <p><b>Левый флаг применительно к одной строке шумит сильнее выравнивания по центру, потому что отступов у него тоже два (левое поле не забываем) и при этом они разные.</b></p> </blockquote> <p>У левого флага левого отступа нет. Есть отступы от краёв страницы до крайних элементов. Область страницы без отступов (полей) называют форматом. Пример одной строки в формате — однострочный заголовок.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/center-format@2x.png" width="550" height="275" alt="" /> </div> <p>Если на странице одна строка, не выровненная с другими элементами, выключка исчезает вовсе.</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/center-poster@2x.png" width="200" height="275" alt="" /> </div> <p>Формат — контекст выравнивания (флага, выключки). Элементы выравнивают относительно формата, а потом относительно друг друга (внутри формата). </p> <blockquote> <p><b>Посмотрите на кнопки.</b></p> </blockquote> <p>Кнопки слабо относятся к вёрстке — у них своя история. Они попали на экраны из физического мира уже готовым элементом. Кнопки не мыслят, как текст на плашке.</p> <p>Если предположить, что кнопка — отдельный формат, и применить к надписи левый флаг, кнопка сломается:</p> <div class="e2-text-picture"> <img src="https://kirillbelyaev.com/ru/blog/pictures/center-button@2x.png" width="135" height="30" alt="" /> </div> <p class="ps"> P. S. Спасибо Роману за комментарий.</p> https://kirillbelyaev.com/ru/blog/?go=all/align-center/ https://kirillbelyaev.com/ru/blog/?go=all/align-center/ Sun, 30 Aug 2015 11:33:04 +0300 Кирилл Беляев https://kirillbelyaev.com/ru/blog/?go=all/align-center/ <p>По умолчанию шумнее флагового набора (а флаг шумнее выключки по формату). Потому что у него на отступ больше:</p> <blockquote><p style="width: 200px">↦ Строка текста по центру ↤</p> <p style="width: 200px">И строка с флагом ↤</p> </blockquote><p>Читавшие <a href="http://www.edwardtufte.com/tufte/books_vdqi">Тафти</a>, знают, что отступ — это тоже информация. А дополнительный отступ бывает лишним.</p> <p>С увеличением числа строк, растёт и шум:</p> <blockquote><p style="text-align: center; width: 200px">↦ Текст с центральным ↤<br>↦ выравниванием ↤<br>↦ в несколько строк ↤<br>↦ шумит, как трактор ↤</p> <p style="width: 200px">Текст с флагом ↤<br>в несколько строк ↤<br>шумит в двое тише, ↤<br>как гибрид ↤</p> </blockquote><p>Шум — не единственный критерий качества дизайна. Поэтому центральное выравнивание не табуировано полностью.</p> <p>В интерфейсах с высокой информационной плотность от шумоизоляции зависит скорость освоения и взаимодействия. Поэтому для центрального выравнивания в таких продуктах должна быть супер-причина.</p> <p>Новичкам советую вообще не использовать в интерфейсах выравнивание по центру.</p>