Иконка цель: Цель – Бесплатные иконки: стрелы

Содержание

Сетки, принципы и правила создания интерфейсных иконок, iOS и Android

Если вы цифровой дизайнер, то уже наверняка сталкивались с сеткой иконок. Возможно, вам поручали создать иконку приложения для iOS или Android, или вы участвовали в работе над набором иконок интерфейса. Вероятно, вы, как и я, не знали, как ее использовать.

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

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Обзор

Сетки иконок закладывают визуально основу для рисования. Они очерчивают размеры иконки, пиксельную сетку, лежащую в ее основе, и дополнительные ключевые линии, которым нужно следовать.

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

Анатомия

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

Сетка иконки Material Play Store

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

Пиксельная сетка

Пиксельная сетка помогает рисовать с определенным шагом. Приращение в 1px долгое время считалось стандартом для цифровых технологий, а шаг в 0.5px пикселя стал применяться совсем недавно.

Иконка увеличения громкости из руководства Material плотно прилегает к сетке 24 x 24px с использованием штриха в 2px:

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

Подробнее о привязке к пикселям – в будущей статье.

Ключевые фигуры (Keyshapes)

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

IBM использует эти 4 ключевые фигуры для создания иконок воспроизведения, сохранения, удаления и HD:

Думайте о ключевых фигурах как о starter kit, обеспечивающем необходимый стандарт, оставляя при этом место для гибкости и творчества. Цель вовсе не в том, чтобы каждая иконка идеально соответствовала базовой форме.

Ортогонали

Ортогонали – заимствованы из перспективы рисунка – относятся к ключевым линиям, которые пересекают центральную точку иконки и создают дополнительные вершины для использования. Эти линии обычно разрезают холст под углом 90 ° и 45 °. Когда требуются дополнительные углы, следующим шагом будет увеличение 15 ° и 5 °.

Иконка выключения звука из руководства Material выравнивает косую черту под углом 45 °:

Маска

Маска

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

Для иконок лаунчера (которые находятся на главном экране и в панели приложений) разные OEM-производители Android девайсов применяют различные маски к своим иконкам.

Безопасная область и область обрезки

Безопасная область (safe area) или активная область (live area) показывает, где должно располагаться важное содержимое значка, а область обрезки (trim

area) – показывает область, которую следует избегать.

В некоторых случаях безопасная область – это всего лишь рекомендация, но в случаях, когда контент будет обрезан, необходимо строго следовать безопасной области.

Иконка Google Apps Device Policy соответствует области обрезки:

Примеры

Теперь, когда мы знакомы с компонентами сетки иконок, давайте подробнее рассмотрим их конструкцию и использование.

Сетка иконок iOS-приложений

Сетка иконок приложений Apple помогает создавать значки приложений, отображаемые в App Store и системе iOS. Она основана на пропорциях золотого сечения и вписанных фигурах, взяв за отправную точку длину одной стороны. Ее маска представляет собой адаптацию расчета суперэллипса или кривой Ламе.

Строение сетки иконок iOS-приложений

Круглые иконки приложений Apple, такие как Safari, Часы, Компас и Настройки, непосредственно следуют круговыми ключевыми линиями.

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

Я считаю эту сетку очень приятной, но не самой интуитивно понятной в использовании. Неизвестно, какие дальнейшие расчеты или правила следует выполнять.

Сетки иконок Material Design

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

Ключевые фигуры Play Store

Gmail использует прямоугольник в ландшафтной ориентации:

В Google Apps Device Policy используется круг:

Google рекомендует несколько вариантов этой сетки, адаптированных к различным контекстам. Например, сетка иконок лаунчера имеет обширную область обрезки, позволяющую различным OEM-производителям Android девайсов применять свою собственную маску. Хотя пропорции меняются, эти сетки духовно одинаковы:

Вот структура системной сетки, используемой для создания иконок интерфейсов продукта:

Структура системной иконки Material

Примечание об основных параметрах

Обратите внимание, что основной размер холста для этой сетки иконок составляет 24 x 24px. Это означает, что иконки создаются с этим размером. Однако при использовании системных иконок Material их можно масштабировать до различных размеров:

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

Разный уровень детализации иконки компаса Nucleo при размере от 64px до 16px

Это сложный прием, ведь его применение ко множеству иконок потребует много времени. Чем больше нюансов, тем сложнее. Подумайте, нужно ли вам это.

Сетка иконок IBM

Сетка иконок IBM очень близка к Material, предлагая аналогичный набор ключевых фигур:

Ключевые фигуры IBM

В ее основе лежит холст размером 32 x 32px:

Структура сетки IBM

Вы видели это выше:

Иконки IBM icons поверх сетки (слева направо, сверху вниз): Воспроизведение, Сохранить, Удалить, HD, Пчела, Вырезать, Микроскоп и Глаз

Сетка иконок Phosphor

В прошлом году я и мой коллега выпустили Phosphor, семейство иконок, созданное для пользователей Android, чтобы они могли оформить домашний экран с минимальной эстетикой. Phosphor адаптирует сетку Material.

Структура сетки Phosphor

Для достижения визуального баланса ключевые фигуры иконки примерно основаны на расчетах ее площади. Мы используем круг, чтобы нарисовать иконки приложений Daylio и New York Times

, квадрат для LinkedIn и калькулятора, прямоугольник в портретной ориентации для Google Docs и Microsoft Word, и прямоугольник в ландшафтной ориентации для иконок приложений AliExpress и NBC:

Ключевые фигуры и примеры иконок Phosphor

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

Важно отметить, что мы не сразу сформировали структуру сетки Phosphor. Со временем мы удалили части, которые не были полезными (например, дополнительные ортогонали), мы уточнили и выделили область обрезки, а также изменили ключевые линии по мере того, как правила нашего семейства иконок обретали форму.

Несколько вариантов сетки Phosphor

Сетка – это рекомендация

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

Оптический баланс

Всегда проверяйте оптический баланс. В приведенном ниже примере строгое следование ключевой фигуре круга не совсем правильно.

В контексте символ «G» кажется немного большим. Если немного уменьшить его масштаб, он будет выглядеть более сбалансированным.

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

Чтобы узнать больше об оптических эффектах, прочтите эту прекрасно иллюстрированную статью Славы Шестопалова: «Оптические эффекты в пользовательских интерфейсах: иллюстрированное руководство».

Тестирование

Протестируйте свои иконки в контексте, чтобы проверить их согласованность и эффективность. Если вы создаете иконку приложения для iOS, как она будет отображаться вместе с другими иконками на главном экране? Внутри папки, внутри уведомления, в режиме просмотра настроек? В App Store? Для достижения максимальной точности тестируйте в собственном контексте, а не в инструментах проектирования.

Для Phosphor мы разработали строгую процедуру контроля качества, используя «тестовые листы», в которых каждая новая иконка помещается рядом с ее «братьями и сестрами» разных размеров и цветов. Предварительный просмотр выполняется непосредственно на устройствах Android, чтобы убедиться в ясности, удобочитаемости и соответствии стилистике.

Последовательность тестирования иконки Curiosity:

Сетки + Принципы + Правила

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

Лично для меня сетки иконок – скорее вспомогательный элемент, а принципы и правила важнее всего:

Примеры принципов из семейства иконок Phosphor:

Понятность. Прежде всего, будьте понятны. Сделайте иконку узнаваемой и читаемой. Никогда не жертвуйте понятностью изображения иконки.
Краткость. Используйте как можно меньше деталей. Стиль Phosphor — редуктивный. Будьте лаконичны и целенаправленны в каждом штрихе, чтобы передать суть изображаемого.
Характер. Будьте оригинальны. Добавляйте уникальные детали экономно, чтобы не быть слишком строгим.

—

Пример технических правил семейства иконок Phosphor:

Используйте холст 48 x 48px
Используйте обводку по центру 1.5px
Используйте закругленные концевые заглавные буквы
Используйте непрерывные штрихи, если разорванные сегменты не нужны для понимания
Используйте прямые сегменты, идеальные дуги и угол наклона 15°, где возможно
Отрегулируйте кривые, когда это необходимо для соблюдения принципов дизайна.
Используйте целые, четные приращения чисел для измерений, где это возможно; при необходимости округлите до 1px или 0,5px
Начните со следующих ключевых линий фигуры: круги 28 x 28px, квадраты 25 x 25px, прямоугольники в ландшафтной ориентации 28 x 22px, прямоугольники в портретной ориентации 22 x 28px
Сохраняйте область обрезки толщиной 6px

Это руководящие принципы, которые развиваются по мере того, как мы узнаем, что работает, а что нет. Не возражайте против проведения итерации и соответствующим образом обновите свою документацию.

Вывод

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

Иконки Phosphor сетки иконок Phosphor

Спецификации сетки иконок

Apple

Apple Design Resources: Официальные шаблоны, которые включают размеры холста для иконок App Store (но, к сожалению, без векторных сеток)

Google

Material System Icon Keyline Shapes: Сетка для системных иконок, которые используются в интерфейсах продукта.
Google Play icon design specifications: спецификации и шаблоны для иконок приложений, используемых в Play Store.
Adaptive icons and Android icons: спецификации иконок приложений, используемых в лаунчере (главный экран, панель приложений).
Material Product Icon Keyline Shapes: сетка для иконок продуктов, которые сопоставляются с Google Play и адаптивными иконками лаунчера, указанными выше.

IBM

IBM’s UI Icons: Четкое руководство по сетке иконок и отличные наглядные пособия

? Спасибо: Toby Fried, Monica Chang, Tate Chow и Christine Lee

Перевод статьи medium.com

Красная точка Blue желтая точка фокус цель Иконка для бесплатной загрузки

milker

@milker

общественное достояние изображение

Описание:

красная точка blue желтая точка фокуса цель Фокус Dot картинки

Похожие изображения с iStock | Сохранить сейчас

45 879 целевых иконок — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 6,9 миллионам активов

Получите неограниченное количество загрузок

Цель Значок

Таргетинг Значок

Цель Значок

Таргетинг Значок

Цель Значок

Таргетинг Значок

Цель Значок

Целевой пользователь Значок

Цель Значок

Целевая аудитория Значок

Цель Значок

Целевая безопасность Значок

Цель Значок

Целевая аудитория Значок

Цель Значок

Таргетинг Значок

Цель Значок

Цель по заработку Значок

Цель Значок

Целевое ключевое слово Значок

Таргетинг Значок

Цель Значок

Целевое облако Значок

Цель Значок

Таргетинг Значок

Цель Значок

Мишень для дартс Значок

Целевой пользователь Значок

Цель Значок

Таргетинг Значок

Цель Значок

Целевой кандидат Значок

Цель Значок

Целевая аудитория Значок

Цель Значок

Целевая прибыль Значок

Цель Значок

Цель Icon

Бесплатная мишень Icon и мишень Icon Pack

Связанные изображения из iStock | Сохранить сейчас

цель плюс добавлять

Цель — плюс

цель стрелка

Мишень-стрелка

инструмент уронить цель

Tool_drop_target

компьютер com/example-1″>графика черно-белые символы значок курсора

2 комплекта 3d

компьютер com/example-1″>графика черно-белые символы значок курсора

Stock_hyperlink-цель

компьютер

Иконка цель: Цель – Бесплатные иконки: стрелы

Сетки, принципы и правила создания интерфейсных иконок, iOS и Android

Обзор

Анатомия

Пиксельная сетка

Ключевые фигуры (Keyshapes)

Ортогонали

Маска

Безопасная область и область обрезки

Примеры

Сетка иконок iOS-приложений

Сетки иконок Material Design

Примечание об основных параметрах

Сетка иконок IBM

Сетка иконок Phosphor

Сетка – это рекомендация

Оптический баланс

Тестирование

Сетки + Принципы + Правила

Вывод

Спецификации сетки иконок

Красная точка Blue желтая точка фокус цель Иконка для бесплатной загрузки

milker

<p>красная точка blue желтая точка фокуса цель</p> <p><em>Фокус Dot картинки</em></p>

Похожие бесплатные иконки

Красная точка Blue желтая точка фокус цель

Две точки фокуса картинки

Vector Icon Set

Gamification icons

Game magnifying glass

Internet game

Default-Icon

Game-white-folder

Game-folder

Game Folder

Games Badge

Game Folder

The Music Icon

Game-folder

Game-folder (2)

Stock_form-automatic-control-focus

Appbar.

Focus

45 879 целевых иконок — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 6,9 миллионам активов

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Таргетинг Значок

Цель Значок

Таргетинг Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Цель Значок

Таргетинг Значок

Таргетинг Значок

Цель Значок

Цель Значок

Цель Значок

Целевой пользователь Значок