x
 
Артём
14 июля 2014

Расскажите, как работают элементы управления в вёрстке.



Элемент управления — базовый элемент экранной вёрстки.

Современные элементы интерфейса перешли на экран из бумажных анкет — прообраза интерактива с пользователем. Но если бланки и формы на бумаге — особый случай вёрстки, то пользовательский интерфейс на экране — основной жанр. Элементы управления участвуют в макетах наравне с заголовками, текстом, иллюстрациями и подписями.

Поэтому современный дизайнер использует не только знания о пользовательском интерфейсе, привычках и эргономике, но и типографические свойства элементов управления, чтобы строить из них лёгкие, прочные и читабельные конструкции. Здесь мы рассмотрим только эту «верстальную» сторону медали.

Элементы управления по форме в вёрстке делятся на точечные, линейные и прямоугольные.

Точечные элементы •

Компактные элементы интерфейса с выраженным центром внимания — пиктограмма, асинхронный индикатор прогресса, чекбокс:


Точечные элементы удобны в вёрстке. Они выигрышно смотрятся, если выделить им особое «якорное» положение:

В центре

В углу

Они легко пристраиваются к более важным элементам:

0


Но точка в вёрстке — плохой командный игрок, каждая старается перекричать другую:


Чтобы успокоить ряд пиктограмм на панели инструментов, приходится прибегать к радикальным мерам — строго унифицировать размеры, выверять порядок и ритм пятен и даже полностью отказываться от цвета:

Линейные элементы _

Большая часть элементов интерфейса — линейные, хорошо работающие в строке: переключатель, кнопка, поле ввода, ползунок, звёздочки рейтинга.

0


Строчные элементы умеют растягиваться по горизонтали в соответствии с текстовым содержанием. Даже если текст короткий, этим стоит пользоваться, чтобы упростить попадание мышью или пальцем:

0

Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит

А вот увеличиваться по вертикали для них неестественно. Линейные элементы экономичны и не выходят за пределы своей строки. Из них отлично складываются панели инструментов:

0

Размеры линейных элементов и их содержимое должны соответствовать окружению. На примере слева поле ввода несоразмерно мелкой подписи, а введённый текст зажат внутри поля без гигиенических отступов. Справа кегль подписи и содержания совпадают:

0


Обратите внимание, как на правом примере подпись, вводимый текст и рамка поля ввода сохраняют соотношения внутреннего и внешнего. Вокруг содержимого достаточный отступ, рамка поля «не влезает в интерлиньяж» строки. Но при этом расстояние от подписи «имя» до рамки поля больше этих внутренних полей.

Элементы управления должны находиться на достаточном удалении друг от друга, чтобы избегать ошибочных нажатий. Минимально допустимое расстояние между соседними элементами управления — примерно два пробела, между элементом и текстовой подписью — пробел:

0


При соседстве по вертикали действуют примерно такие же соотношения. Это, кстати, означает, что строчные контролы плохо встраиваются в сплошной наборный текст — они либо налезут друг на друга, либо раздвинут интерлиньяж текста.

Вариант точных типографических гайдлайнов для элементов управления:

0

Прямоугольные элементы

Текстовая область, интерактивная диаграмма, цветовая палитра, карта — эти элементы управления имеют прямоугольную форму:

0


Благодаря занимаемой площади такие элементы становятся самыми заметными якорными объектами. Их нужно «припарковать» на макете первыми, как иллюстрации.

Большой прямоугольный список в левой части задаёт структуру окна:

0


Кнопки — обычно линейный элемент. Но важные кнопки часто делают большими. Они «выходят из строки» — начинают вести себя как прямоугольники и занимают особенное место на странице:

0


Все элементы управления независимо от формы — мощные якорные объекты. В отличие от слов в наборном тексте, они хорошо заметны по отдельности и легко создают бардак на странице. Чтобы не допустить «рак формы» на экране, элементы управления нужно сортировать, отделять, собирать в однородные модули и выравнивать друг с другом:

0

Напомню, что мы рассматривали элементы управления как базовый кирпичик вёрстки. Здесь не упомянуты многие требования пользовательского интерфейса. Дизайнер должен проектировать сценарии и логику использования, применять элементы управления по назначению, следить за правильными формулировками и синтаксисом, последовательно ставить прописные буквы и многоточия.

P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.


Поделиться
Отправить

Комментарии

Роман Павленко
14 июля 2014

А откуда берутся 7 и 9 пикселей в отступах?


14 июля 2014

7 пикселей — это старый виндовый гайдлайн для минимального расстояния между элементами. Этот пример не стоит рассматривать как руководство к действию.

В совете мы даём общие типографические рекомендации, которые работают, например, для сайтов. Точные гайдлайны в пикселях лучше смотреть в конкретных операционных системах.

Кирилл Шумилов
14 июля 2014

Если я ничего не путаю:
7 пикселей: ровно на столько выступает вверх поле ввода (от верхней грани прописной буквы до верхней грани поля).
9 пикселей: поля у нас по 28 пикселя, а строка для подписи с инпутом 30 пикселей. Итого два бонусных пикселя. Прибавляем известную нам семёрку и voilà! :-)

P. S. Написал значение в поле по базовой линии подписи. И выглядит это криво. Хочется сместить текст в поле на два пикселя вниз. Но тогда и подпись нужно сместить. И тогда всё становится на свои места. А вместе с тем и гайдлайн становится проще, т. к. можно избавиться от 7 пикселей: теперь отступ от 30-пиксельного модуля до подписи следующего модуля равняется 9 пикселям, так же как и нижний отступ от инпута. А это значит, что и модуль в 30 пикселей теперь может стать модулем 28 пикселей, дабы не плодить лишних правил про верхний внутренний отступ 2 пикселя.

Более того, теперь верхний и нижний отступ в инпуте равен 9 пикселям (включая бордер, но не включая нижнюю тень).

Если я в чем-то не прав, поправьте, пожалуйста.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 1 4




Недавно всплыло

Поделитесь соображениями, как работать, путешествуя 8 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Как написать хорошее резюме? 7 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3