8 800 500 30 94
9:00-19:00 по МСК
9:00-19:00 по МСК
* Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и получение sms-, email-сообщений и сообщений в# мессенджерах от Среды обучения
Как создавать идеальные плоские иконки: 10 главных правил
Несколько базовых советов, которые помогут создавать наборы иконок в стиле flat design.
1. Пользуйтесь оптической сеткой
Иконки в интерфейсе обычно сводятся к базовым формам: вертикальному, горизонтальному или диагональному прямоугольнику, кругу, треугольнику или квадрату. Если размыть изображения, то получатся похожие кляксы с примерно одинаковым визуальным весом.
В зависимости от формы иконки, впишите ее в соответствующую рамку оптической сетки. Например, квадратные значки более компактны, чем треугольные или вытянутые.
Чем иконка лаконичнее, тем компактнее. А чем больше у нее углов и мелких деталей, тем больше места она займет на артборде.
Сетка должна помогать, а не ограничивать. Если иконка лучше выглядит с торчащими элементами, ничего страшного.
В зависимости от формы иконки, впишите ее в соответствующую рамку оптической сетки. Например, квадратные значки более компактны, чем треугольные или вытянутые.
Чем иконка лаконичнее, тем компактнее. А чем больше у нее углов и мелких деталей, тем больше места она займет на артборде.
Сетка должна помогать, а не ограничивать. Если иконка лучше выглядит с торчащими элементами, ничего страшного.
2. Помните о пиксельной сетке
Чтобы иконки оставались четкими на экране без Retina, ориентируйтесь на пиксельную сетку и используйте для контуров границы шириной два пикселя. Обычно они дают достаточную толщину и четкость силуэтов.
2. Помните о пиксельной сетке
Чтобы иконки оставались четкими на экране без Retina, ориентируйтесь на пиксельную сетку и используйте для контуров границы шириной два пикселя. Обычно они дают достаточную толщину и четкость силуэтов.
Если вы выбираете однопиксельные границы для значков, проследите, чтобы они были внешними или внутренними относительно контура, не центрированными.
Если выровнять однопиксельную границу по центру контура, иконка в масштабе 100% может размыться, хотя при увеличении будет казаться качественной.
Установите начальную и конечную точки диагоналей по пиксельной сетке. Диагонали с углами 45°, 30° и 60° выглядят четче диагоналей с нестандартными углами, например, 13,7° или 81°. Миллионы людей по-прежнему пользуются устройствами с экранами с низким разрешением, поэтому четкость значков все еще важна.
3. Сохраняйте уровень детализации
Начните делать набор иконок с самой сложной — так вы найдете нужный уровень детализации для остальных.
Когда значки имеют разные уровни детализации, более детальные кажутся слишком тяжелыми.
Начните делать набор иконок с самой сложной — так вы найдете нужный уровень детализации для остальных.
Когда значки имеют разные уровни детализации, более детальные кажутся слишком тяжелыми.
4. Сохраняйте размер промежутков
Пространство между соседними элементами иконки не должно быть слишком маленьким или непостоянным. Определите минимальный размер промежутков и сохраняйте его везде, чтобы контуры не слипались.
Для значков линий рекомендуется сделать минимальное пространство равным толщине линии. Линии должны быть либо четко разделены, либо точно связаны, но никогда не должны быть почти связаны.
В контурных иконках минимальный размер промежутка между элементами должен равняться толщине линии. Контуры должны быть либо отделены, либо соединены — не что-то между.
В контурных иконках минимальный размер промежутка между элементами должен равняться толщине линии. Контуры должны быть либо отделены, либо соединены — не что-то между.
Для значков линий рекомендуется сделать минимальное пространство равным толщине линии. Линии должны быть либо четко разделены, либо точно связаны, но никогда не должны быть почти связаны.
В контурных иконках минимальный размер промежутка между элементами должен равняться толщине линии. Контуры должны быть либо отделены, либо соединены — не что-то между.
В контурных иконках минимальный размер промежутка между элементами должен равняться толщине линии. Контуры должны быть либо отделены, либо соединены — не что-то между.
5. Избавляйтесь от повторяющихся деталей
В наборах иконок могут встречаться повторяющиеся детали. Избавьтесь от общих элементов, чтобы сконцентрироваться на отличающихся. Это как с математической дробью — ½ проще, чем 12/24. Чем меньше визуального шума, тем понятнее иконка.
Если пользователь знает, в какой среде он работает, ему не надо об этом напоминать. Поэтому, если вы имеете дело с почтовым приложением, сосредоточьтесь на изображении функций кнопок и забудьте про пиктограмму конверта.
В наборах иконок могут встречаться повторяющиеся детали. Избавьтесь от общих элементов, чтобы сконцентрироваться на отличающихся. Это как с математической дробью — ½ проще, чем 12/24. Чем меньше визуального шума, тем понятнее иконка.
Если пользователь знает, в какой среде он работает, ему не надо об этом напоминать. Поэтому, если вы имеете дело с почтовым приложением, сосредоточьтесь на изображении функций кнопок и забудьте про пиктограмму конверта.
Это правило также касается рамок, фонов и прочего декора. Если что-то не помогает считать смысл иконки, то оно мешает это сделать.
6. Придерживайтесь единого стиля
Согласованность стилей помогает считывать смысл, поэтому не смешивайте фронтальное изображение предметов с перспективой.
То же касается контурных иконок и иконок с заливкой.
Если вы смешаете их, пользователь подумает, что они отличаются по важности или статусу.
Исключение — если вы действительно все так и задумали, а иконки и правда отличаются по важности или статусу.
Если вы смешаете их, пользователь подумает, что они отличаются по важности или статусу.
Исключение — если вы действительно все так и задумали, а иконки и правда отличаются по важности или статусу.
Здорово, если вы решите отрисовать для каждой иконки два варианта. Контурный — для состояния покоя, с заливкой — для состояния активности.
7. Используйте четные размеры
В интерфейсах часто используется 8-пиксельная сетка и 12-колоночный лейаут. 12 делится на 2, 3, 4 и 6. Поэтому 24- и 48-пиксельные размеры иконок стали стандартом. Такие иконки легко масштабировать.
8. Следите за точностью и чистотой
Перфекционизм — не самоцель. Идеальные формы, в которых нет ничего лишнего, нужны не просто так, они делают ваши иконки читаемыми. Поэтому следите, чтобы в иконках не было лишних опорных точек и пробелов между смежными элементами.
Та же история с бесящими размерами: 8,999 или 100,001 пикселей. Если расставить опорные точки правильно, края иконки будут четкими. Если впоследствии вам придется объединять фигуры, у вас не будет лишних опорных точек и пробелов.
Перфекционизм — не самоцель. Идеальные формы, в которых нет ничего лишнего, нужны не просто так, они делают ваши иконки читаемыми. Поэтому следите, чтобы в иконках не было лишних опорных точек и пробелов между смежными элементами.
Та же история с бесящими размерами: 8,999 или 100,001 пикселей. Если расставить опорные точки правильно, края иконки будут четкими. Если впоследствии вам придется объединять фигуры, у вас не будет лишних опорных точек и пробелов.
9. Очищайте SVG–файлы от мусора
Многие редакторы, например, Sketch, создают SVG с лишними артефактами — группами, слоями и масками. Вот пример: в Sketch все выглядит хорошо.
А теперь откроем тот же файл в Adobe Illustrator. Появились пустые слои, ненужные группы, обтравочные маски. Этот мусор может стать проблемой в дальнейшей работе с иконкой.
Многие редакторы, например, Sketch, создают SVG с лишними артефактами — группами, слоями и масками. Вот пример: в Sketch все выглядит хорошо.
А теперь откроем тот же файл в Adobe Illustrator. Появились пустые слои, ненужные группы, обтравочные маски. Этот мусор может стать проблемой в дальнейшей работе с иконкой.
Если обнаружили лишние артефакты — удалите мусор и сохраните файл.
Вы увидите, что у SVG-файлов из Sketch и Illustrator будут разные превью в файловом менеджере. Также от мусора можно избавиться, не прибегая к помощи графических программ, — если вы знакомы с кодом SVG, то сможете удалить лишние строки в текстовом редакторе.
Если обнаружили лишние артефакты — удалите мусор и сохраните файл.
Вы увидите, что у SVG-файлов из Sketch и Illustrator будут разные превью в файловом менеджере. Также от мусора можно избавиться, не прибегая к помощи графических программ, — если вы знакомы с кодом SVG, то сможете удалить лишние строки в текстовом редакторе.
10. Нарушайте правила, если это уместно
Эти рекомендации — вовсе не непоколебимые законы. Пренебрегайте ими, если знаете, что делаете.
Не бойтесь делать выбивающиеся из набора эмоциональные иконки, если это предусматривает контекст — это уместно, например, в значке для сценария «все электронные письма прочитаны». И смело перегружайте интерфейс иконками с талисманами и логотипами, если это поможет сделать его узнаваемым и функциональным.
И еще момент — если вы долго работаете над созданием иконки, спросите себя, а точно ли она здесь нужна? Иногда с ее ролью справится небольшой осмысленный текст.
Не бойтесь делать выбивающиеся из набора эмоциональные иконки, если это предусматривает контекст — это уместно, например, в значке для сценария «все электронные письма прочитаны». И смело перегружайте интерфейс иконками с талисманами и логотипами, если это поможет сделать его узнаваемым и функциональным.
И еще момент — если вы долго работаете над созданием иконки, спросите себя, а точно ли она здесь нужна? Иногда с ее ролью справится небольшой осмысленный текст.
К ДРУГИМ МАТЕРИАЛАМ