Компьютерные иконки Google Play App Store, Android, синий, угол png
Компьютерные иконки Google Play App Store, Android, синий, угол pngтеги
- синий,
- угол,
- прямоугольник,
- треугольник,
- инкапсулированный PostScript,
- мобильные телефоны,
- значок Google,
- логотипы,
- линия,
- Google Play,
- Android,
- скачать,
- значки компьютеров,
- площадь,
- магазин приложений,
- крыло,
- png,
- прозрачный png,
- без фона,
- бесплатная загрузка
- Размер изображения
- 1600x1600px
- Размер файла
- 19.99KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Некоммерческое использование, DMCA Contact Us
org/ImageObject»> Goggle PlayStore значок, Google Play значки компьютеров Android, кнопка воспроизведения, угол, прямоугольник png
2800x2800px
776.04KB
44KB
32KB 78KB 45KBСетки, принципы и правила создания интерфейсных иконок, 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 (но, к сожалению, без векторных сеток)
- 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
значков Google на компьютерах Mac и iPad
Мы уже обсуждали символы научной фантастики и их использование в Amadine в нашем блоге, но сегодня пришло время использовать еще один бесценный источник значков — значки Google. Это два разных официальных набора иконок Google, которые имеют одинаковый базовый дизайн. Первоначальная коллекция называется Material icons и содержит значки пяти стилей: очерченные, заполненные, закругленные, четкие и двухцветные, доступные в различных загружаемых размерах и плотности. В апреле 2022 года был представлен новый набор символов Google Material Symbols на основе шрифтов.0003
Эта обширная коллекция состоит из 2500 глифов, каждый из которых представляет определенную идею или ситуацию в «одном файле шрифта с широким спектром вариантов дизайна». Символы материалов можно найти в трех стилях и четырех регулируемых стилях шрифта. Иконки основаны на фундаментальных метриках и идеях Material Design.
Зачем дизайнеру иконки Google?
Как правило, всегда приятно иметь максимально широкий набор инструментов и как можно больше вариантов значков. Но что хорошего в браузере символов Google, так это то, что есть опция поиска и возможность настроить символ в соответствии с вашими потребностями.
Каждый символ имеет четыре оси: заполнение, вес, качество и оптический размер. Ось — это свойство символа, которое можно изменить для получения различных визуальных эффектов. Вы можете изменить эти атрибуты шрифта и настроить каждый из них для каждого символа отдельно, чтобы получить идеальный результат. После этого вы сможете скачать готовый SVG именно с нужным вам символом.
Как получить значки Google в Amadine
Что можно сделать, чтобы получить значки Google? Их можно удобно просматривать на соответствующей странице Google Icons. Google также предлагает Руководство по дизайну с рекомендациями для создателей значков по основным правилам и передовым методам.
По сути, есть два способа получить иконки для Amadine. Первый — скачать и установить все гугловские шрифты, где есть иконки, и поискать там нужные. Это означает, что вы можете получить весь набор иконок с GitHub. В репозитории есть папка fonts, и эти шрифты можно установить в систему, но тогда вы получите стандартизированный выбор иконок, и не будет дополнительных настроек, о которых мы поговорим позже.
Но если вам нужен более простой способ, вы можете без каких-либо хлопот загрузить необходимые значки в формате SVG и включить их непосредственно в свои документы Amadine как на Mac, так и на iPad/iPhone.
Какой бы вариант добавления значков в Amadine вы ни выбрали, здесь важно отметить, что вы не должны забывать развернуть значок, чтобы он стал векторным объектом. Когда вы применяете команду «Развернуть» в приложении Amаdine, текст преобразуется в кривые, что позволяет вам изменить цвет, обводку и заливку значка.
Доступность и использование значков Google
Все значки можно использовать бесплатно, поскольку Google опубликовал их с помощью API с открытым исходным кодом для систем Web, Android и iOS. Кроме того, они доступны в репозитории GitHub, где Google хранит соответствующую библиотеку. Иконки Google могут использоваться веб-дизайнерами для улучшения UI/UX своих веб-сайтов, а также любыми энтузиастами, заинтересованными в создании собственных интерфейсов и наборов иконок.
Использование этих иконок в векторной графике также вполне допустимо. Кроме того, создатели контента могут использовать их для усиления контента, выступая в качестве вспомогательного элемента. Все эти символы можно использовать как часть дизайнов из вашей библиотеки в приложении Amadine или добавить один раз для одноразового использования.
Заключение
Иконки Google, несомненно, были созданы для улучшения процесса проектирования и облегчения жизни дизайнеров, предоставляя непревзойденный уровень настраиваемости для каждого отдельного элемента. Коллекции Material Icons и Material Symbols, импортированные в приложение Amadine, могут предоставить любому дизайнеру все необходимые варианты значков. Добавление профессионально разработанных векторных иконок значительно улучшит вашу окончательную работу.
Дизайн статьи разработан Max Lazor.
Опубликовано в августе 2022 г.
Используйте значки Google для создания любых интерфейсов и дизайнов в бесплатном приложении Amadine на устройствах Apple!
Бесплатная пробная версия Mac
Как импортировать значки и экраны материалов Google в Adobe XD
Поиск
Последнее обновление: 23 февраля 2022 г. 08:55:06 GMT
Adobe XD улучшает и упрощает рабочий процесс создания интерфейсов благодаря пользовательскому интерфейсу
функция импорта наборов. Узнайте, как импортировать элементы, принадлежащие системе дизайна Google, чтобы быстро приступить к созданию пользовательского интерфейса.
Итало Саннино связан с цифровым творчеством более 20 лет, с тех пор как он окончил Академию изящных искусств Неаполя, где сейчас преподает дизайн пользовательского интерфейса. В 1997 году он основал «Геко», небольшое агентство новых медиа, которое стало его личным полем для экспериментов. Благодаря проекту Adobe Guru и тому, что сегодня он является профессионалом сообщества Adobe, он активно участвует в методологии, дизайне и планировании удобных интерфейсов и соответствующих инструментов Adobe, а недавно стал одним из членов Wacom Ambassador.
Вы можете оценить его неиссякаемый творческий потенциал здесь!
Условие: Активируйте правильные шрифты
Google Material — это система дизайна, разработанная Google в основном для ОС Android. Типографика играет фундаментальную роль в использовании систем дизайна. Чтобы дизайн работал должным образом, активируйте эталонные шрифты из библиотек Adobe Fonts.
Google Material — это больше, чем просто набор иконок и стилей кнопок. Это система дизайна, и как таковая она суммирует не только общие рекомендации по UI/UX, но и по использованию импортированных элементов интерфейса. Для получения дополнительной информации посетите Материальный дизайн.
Выполните следующие действия, чтобы активировать правильный шрифт:
Посетите страницу Roboto в Adobe Fonts.
Используйте ползунок «Активировать все шрифты» в правом верхнем углу, чтобы активировать семейство шрифтов.
Страница Roboto на сайте fonts.adobe.com
Подготовка к импорту комплектов пользовательского интерфейса
Запустите Adobe XD. Вас приветствует заставка, которая предлагает различные возможности. Выберите, чтобы начать с классического пресета, такого как iPhone 6/7/8.
После выбора предустановки и создания документа выберите пункт меню: Файл > Получить наборы пользовательского интерфейса > Материалы Google.
Получить меню наборов пользовательского интерфейсаВы перенаправлены на страницу загрузки материалов Google.
Страница загрузки файла формата Adobe XD Щелкните ссылку для скачивания комплекта пользовательского интерфейса в формате Adobe XD.Откройте недавно загруженный файл Adobe XD.
Файл, содержащий Google Material UI Kit 9.0066
Когда у вас есть файл с элементами пользовательского интерфейса Google Material, вы можете эффективно импортировать его в свой дизайн или новый файл двумя способами, в зависимости от ваших конкретных потребностей. Вы можете импортировать один элемент за раз или все монтажные области, которые, в свою очередь, содержат все элементы (включая компоненты).
Этот метод обладает неоспоримыми преимуществами: он позволяет сохранить размер вашего файла и полностью контролировать ваши активы.
Определите элемент пользовательского интерфейса (или элементы интерфейса, которые нас интересуют).
С помощью инструмента «Выбор» (нажмите v) выберите элемент пользовательского интерфейса.
Скопируйте выбранный элемент, нажав command + c (на Mac) или ctrl + c (в Windows), и вставьте, нажав command + v (на Mac) или ctrl + v (на Win).
Вставить, нажав команду + v (на Mac) или ctrl + v (на Win).
В этом случае я решил взять значок почты, чтобы интегрировать его в свой дизайн:
Все элементы в наборе пользовательского интерфейса Google имеют векторную графику, поэтому вы можете редактировать их по своему усмотрению.
Если есть много отдельных элементов, взятых по одному из файла с пользовательским интерфейсом Google, вы столкнетесь с процессом, который может занять много времени и утомительно. Возможность копировать и вставлять одну или несколько монтажных областей — интересная функция Adobe XD, которую вы можете использовать в своих интересах.
Повторно откройте или верните файл Adobe XD, содержащий пользовательский интерфейс Google.
Чтобы выбрать все монтажные области, нажмите Cmd + a (в Mac) или Ctrl + a (в Windows).
Скопируйте, нажав command + c (на Mac) или ctrl + c (в Windows), и вставьте, нажав command + v (на Mac) или ctrl + v (на Win).
Использование компонентов для импорта нескольких монтажных областей
Процесс вставки нескольких монтажных областей удобен и эффективен, но начиная с последней версии Adobe XD использует модель связанных компонентов. Невозможно редактировать те части пользовательского интерфейса, которые были преобразованы в компонент в файле Google, если только вы не отсоедините компонент от источника или не отредактируете компоненты из исходного файла. В этом случае попробуйте отключить компонент от его источника.
Сегодня не редкость, когда над одним и тем же проектом работает больше людей и делятся своими файлами. Это, конечно, также относится к вашему XD-файлу набора пользовательского интерфейса Google. В подобных обстоятельствах эти связанные компоненты показывают всю свою истинную силу.
Связанные компоненты позволяют вам иметь только один исходный файл (руководство по стилю или систему дизайна, как в данном случае) со всеми элементами пользовательского интерфейса вашего проекта и использовать их в других файлах Adobe XD.