5 советов по грамотному использованию иконок в интерфейсе

Иконки. Они популярны. Они помогают дополнять контент (в большинстве случаев). Тем не менее, они могут доставить немало сложностей.

Даже после того, как вы определились с форматом (SVG или иконочный шрифт?) и создали нужный набор, могут возникнуть определённые вопросы.

Вот прекрасный пример:

@chriscoyier #smashingconf any recommendations on how to align #svg icons to text?— Andreas Sahle (@pixelmord) October 20, 2015

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

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

1. Определитесь с форматом иконок

Есть и другие способы создания иконок помимо SVG, и многие из них уже устарели. Вот основные способы:

• SVG-иконки;
• шрифты-иконки;
• CSS-спрайты;
• inline-изображения.

Вне зависимости от ваших предпочтений, выравнивание иконок сильно зависит от выбранного формата. Допустим, все ваши иконки занесены в один спрайт. Значит, у иконок фиксированный размер (если, конечно, вы не сделали их большими с целью дальнейшего уменьшения при помощи background-size). В таком случае намного проще подобрать размер и line-height текста для выравнивания с иконками.

Преимущество SVG в том, что он масштабируемый, и вы уделяете больше времени CSS, а не дизайну.

Вывод: выберите один формат для всех иконок и на его основе стройте свой способ выравнивания. Код в таком случае будет намного проще, а ваш дизайнер (или ваш внутренний дизайнер) скажет вам спасибо.

2. Используйте иконки одинакового размера

Рассмотрим идеальную ситуацию: все иконки квадратные и одного размера, 100х100. Мы знаем размеры иконок, что существенно упрощает процесс выравнивания.

Мы также знаем, что так бывает далеко не всегда. Иконки могут занимать различное пространство.

Иконка карты уже иконки аватара, а та, в свою очередь, уже иконки корзины. Да, вы можете обрезать все пустое пространство вокруг иконок для экономии размера файла, но вы получите иконки разных размеров. Если мы работаем с SVG, это не проблема. А вот для растровой графики типа PNG такой расклад нежелателен. В SVG мы можем задать определенное пространство, которое будет занимать иконка без потери разрешения, а вот растровая графика будет растягиваться и искажаться, если не соблюдать разрешение.

Тут можно подогнать условия, в которых создаются иконки, к используемому формату. Если вы используете SVG, то сама иконка может быть любого размера, но постарайтесь не трогать размеры холста в Illustrator’е (или любом другом графическом редакторе). Так вы сможете в будущем масштабировать иконки.

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

3. Размер шрифта должен подходить к размеру иконок

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

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

Несмотря на одинаковое выравнивание в обоих примерах, слева иконки намного лучше подходят под размер текста и лучше выравнены, чем справа.

4. Точно настраивайте внешний вид с помощью CSS

Есть один точный и простой способ выравнивания иконок в тексте:

			.icon {
  position: relative;
  /* Adjust these values accordingly */
  top: 5px;
  left: 5px;
}
		

В демке ниже заметна разница между идеально выравненными иконками и текстом и иконками, которые выравнены чуть хуже.

5. Используйте классы для отдельных иконок

Пример выше неплох, но вы могли заметить, что иконка местоположения уже других и расположена дальше от текста, чем иконка музыки. Это так раздражает! Тут нас выручит CSS, написанный специально под эту иконку.

			<ul>
  <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> Weezer</li>
  <li><svg class="icon-location"><use xlink:href="#icon-location"></use></svg> Santa Monica</li>
  <li><svg class="icon-music"><use xlink:href="#icon-music"></use></svg> Discography</li>
  <li><svg class="icon-sphere"><use xlink:href="#icon-sphere"></use></svg> weezer.com</li>
  <li><svg class="icon-cart"><use xlink:href="#icon-cart"></use></svg> Artist Store</li>
</ul>
		

			/* Match any class name that starts with icon */
[class^="icon"] {
  width: 50px;
  height: 50px;
  position: relative;
  top: 15px;
  margin-right: 10px;
  fill: #fff;
}

/* Reposition the music note icon */
.icon-music {
  right: 5px;
}
		

Так намного лучше!

Заключение

Если и это не помогло точно выровнять иконки и текст, то вы не одиноки. Тут все сильно зависит от того, как вы создавали иконки. CSS – довольно простой способ.

В этой статье описан только способ выравнивания иконок внутри текста, но есть много других элементов, таких как кнопки, поля формы, меню и т.д. А еще есть адаптивный дизайн, так ведь?! Несмотря на то, что нужно сделать, предложенные пять советов помогут справиться с задачей.