Illustrator Material Дизайн иконок, темы, шаблоны и загружаемые графические элементы на Dribbble
Просмотр Веб-дизайн и разработка
Веб-дизайн и разработка
View Oppo Icon Branding Design: набор иконок с плоским вектором
Oppo Icon Branding Design: набор иконок в плоском векторе
View Oppo Icon Branding Design: набор иконок с плоским вектором
Фирменный дизайн Oppo Icon: набор иконок в плоском векторе
Просмотр 🏴 Набор иконок
🏴 Набор иконок
View Bunny Icon Branding Design: набор иконок с плоским вектором
Bunny Icon Branding Design: набор иконок в плоском векторе
View MarkLogic Icon Branding Design: набор иконок в плоском виде
MarkLogic Icon Branding Design: набор иконок в плоском виде
Просмотр 🏴 Набор иконок
🏴 Набор иконок
Посмотреть минимальную клавиатуру
Минимальная клавиатура
Посмотреть жест рукой для предстоящего проекта
Жест рукой для предстоящего проекта
View Material 2.
0 Icons: CinemaМатериал 2.0 Иконки: Кино
-
Просмотр значков фоторедактора
Значки фоторедактора
Посмотреть двухцветный дизайн материалов
Дизайн материала, двухцветный
Посмотреть набор значков
Набор иконок
Посмотреть увлажнитель AQ — Дизайн логотипа
Увлажнитель AQ — дизайн логотипа
Просмотр материала, округлено: Еда
Материал округлый: пищевой
Просмотр микровзаимодействий в стиле материалов
Микровзаимодействия в материальном стиле
Просмотр удаления материала
Удаление материала
Просмотр значка для иллюстрации концепции масштабирования
Концепция масштабирования от иконки к иллюстрации
Посмотреть дизайн пользовательского интерфейса мобильного приложения Community для iPhone
Дизайн пользовательского интерфейса мобильного приложения Community для iPhone
Посмотреть логотип горных рюкзаков
Горные рюкзаки Logo
- Просмотр значков Figma 1600+ — заполненные, контурные, двухцветные
Figma 1600+ Иконки — заполненные, контурные, двухцветные
View Material 2.
0 Icons: Больше КиноЗначки Material 2.0: Больше кино
Посмотреть дизайн пользовательского интерфейса мобильного приложения Community для iPhone
Дизайн пользовательского интерфейса мобильного приложения Community для iPhone
Посмотреть Дизайн пользовательского интерфейса мобильного приложения Tech Startup для iPhone
Дизайн пользовательского интерфейса мобильного приложения Tech Startup для iPhone
0 Icons: Cinema
0 Icons: Больше КиноЗарегистрируйтесь, чтобы продолжить или войдите
Идет загрузка еще…
Как использовать значки Material Design? Пошаговое руководство
Материальный дизайн — одна из самых популярных систем проектирования.
Если у вас есть устройство Android, вы ежедневно используете Material Design. Многие компании используют Систему дизайна материалов в качестве основы для создания мобильных и веб-приложений.
Обширная библиотека компонентов и ресурсы системы, в том числе значки материалов (теперь символы материалов), предоставляют организациям и стартапам строительные блоки для неограниченного масштабирования продуктов без проектирования с нуля.
В этой статье рассматриваются символы материалов и другие ресурсы материалов, которые вы можете использовать для своего следующего проекта по разработке продукта.
Содержание
- Что такое материальный дизайн?
- Запуск символов материалов
- Набор значков материалов
- Символы материалов — что нового?
- Три стиля
- Создайте свои собственные значки материалов
- Как использовать значки материалов и символы Google
- Загрузка SVG или PNG
- CSS/CDN
- Операционные системы и платформы
- Использование Designer
- Использование значков и символов материалов с типографикой
- Веса
- Размер и выравнивание 9 0259 Доступность значков материалов
- Шаг 1. Щелкните элемент значка
- Шаг 2. Нарисуйте значок на холсте
- Шаг 3. Панель свойств значка
- Шаг четвертый — выберите значок
- Шаг пятый — настройте свойства значка
- Шаг 6 — добавьте взаимодействия
Щелкните элемент значкаДизайн материалов Пользовательский интерфейс и значки входят в стандартную комплектацию каждого плана UXPin. Подпишитесь на бесплатную пробную версию, чтобы создавать красивые приложения с UXPin и Material Design уже сегодня!
Material Design — это библиотека дизайна, разработанная Google, включающая компоненты пользовательского интерфейса, значки, типографику и многое другое. Каждый компонент Material включает рекомендации по реализации, использованию, анатомии, поведению и многому другому, чтобы помочь дизайнерам и инженерам достичь наилучших результатов, обеспечивая при этом высокое качество взаимодействия с пользователем.
Google представил первую версию Material Design на конференции Google I/O 2014.
В мае 2021 года Google выпустила Material Design 3, включая такие важные функции, как Dynamic Color, компоненты складных устройств и дизайнерские токены.
Запуск Material Symbols
Одним из самых захватывающих последних обновлений Material Design стал запуск Material Symbols — настраиваемого набора значков с более чем 2000 значков с открытым исходным кодом в пяти стилях. Вы по-прежнему можете найти все свои любимые значки материалов, но теперь у вас больше гибкости и возможностей настройки для соответствия требованиям вашего продукта и бренда.
Материальные значки по-прежнему доступны, но не предлагают такую же настройку, как символы. Вы можете настроить только размер и плотность по сравнению с четырьмя переменными параметрами с символами.
Набор значков материалов
Google сохранил старые значки материалов, хотя и меньше, чем каталог символов. Иконки доступны в пяти стилях: контурный, заполненный, основанный, четкий и двухцветный.
Символы материалов — что нового?
Значки материалов переместились в Google Fonts, предлагая переменный набор значков в трех стилях: контурный, округлый и острый.
У дизайнеров также есть возможность настроить набор значков с помощью четырех переменных или осей:
- Заливка: Внешний вид с заливкой или без заливки
- Толщина: Определяет обводку символа от 100 до 700 Weight
- Степень: Детальная настройка толщины символа для передачи акцента
- Оптический размер: Значки размера до 20, 24, 40 или 48 пикселей
Методология переменных позволяет инженерам хранить несколько вариантов одного шрифта (или значка), а не нескольких файлов. Уменьшая размер файла и количество файлов, инженеры получают более высокую производительность и меньше ресурсов для управления.
Три стиля
Google также представила три новых стиля, соответствующих фирменному стилю и дизайну пользовательского интерфейса.
- В общих чертах: Чистота и свет. Дизайнеры могут настроить вес значка в соответствии со шрифтами продукта.
- Закругленный: Изогнутая эстетика хорошо сочетается с закругленными логотипами и более крупными шрифтами.
- Sharp: Разработан для соответствия пользовательским интерфейсам с прямыми краями и стилем с углами под углом 90 градусов.
Создание собственных значков материалов
Если вы не можете найти нужный значок в обширном каталоге Material Symbols, Google предлагает рекомендации по созданию пользовательских значков, в том числе:
- Принципы дизайна: лучших практик для создания четких иконографий, значимых и полезных для пользователей.
- Размеры и расположение значков: как настроить размер сетки и расположение для создания значков с помощью инструмента дизайна.
- Сетка и формы ключевых линий: приемов для создания последовательного последовательного набора значков.
- Показатели значков: анатомия дизайна значков, включая углы, вес, обводку и сложность.
Следуя этим полезным рекомендациям, вы можете использовать обширный набор значков Material, включив в него несколько соответствующих вашему бренду.
Как использовать значки и символы материалов Google
Существует несколько способов использования значков и символов материалов дизайнерами и инженерами.
Загрузка SVG или PNG
Вы можете скачать значки и символы в формате SVG или PNG. Мы рекомендуем использовать SVG из-за его преимуществ производительности и настройки. Файлы PNG намного больше по размеру, и дизайнерам и инженерам сложнее их редактировать и изменять размер.
Google позволяет настроить значки и символы перед загрузкой, чтобы у вас был готовый ресурс для использования в вашем проекте.
CSS/CDN
Material Symbols предоставляет файл CSS для установки веб-сайта, аналогичный тому, что вы используете для Google Fonts. Проблема с этим методом заключается в том, что он требует от вашего веб-сайта дополнительных запросов, которые могут серьезно повлиять на производительность.
Если вы планируете использовать более одного символа материала, лучше использовать другой метод установки.
Операционные системы и платформы
Material Icons and Symbols предлагает загрузку для Android и iOS для установки в качестве активов проекта с фрагментами кода для реализации. Material Design включает инструкции для Flutter (разработанный Google язык программирования) и Angular. Инструкции React доступны в документации MUI.
Designer Usage
Большинство инструментов дизайна предлагают подключаемые модули или расширения для значков материалов. Если вы используете UXPin, полный набор значков материалов входит в стандартную комплектацию каждого плана.
Вы также можете импортировать свои собственные значки SVG, редактировать их в UXPin и сохранять в системе дизайна, чтобы поделиться ими с другими членами команды.
Использование значков и символов материалов с типографикой
Документация Google Material 3 предлагает советы и рекомендации по сочетанию значков с типографикой.
Толщина
Никогда не используйте разную толщину для значков и текста. Google позволяет легко связать эти активы с переменной настройки веса символов материала. Убедитесь, что вы всегда сопоставляете вес шрифта с весом значка, чтобы добиться чистой и последовательной эстетики.
Правильный вес шрифта.
Неправильный вес шрифта.
Размер и выравнивание
Размер значка и его выравнивание всегда должны соответствовать тексту. Пользователи должны иметь возможность прочитать оба и признать, что они связаны. Google рекомендует дизайнерам «уменьшить базовую линию символов примерно до 11,5% размера шрифта». Этот метод обеспечивает единообразие и выравнивание значков и текста.
Материал Доступность значков
Google дает краткий, но полезный совет дизайнерам по доступности значков. Дизайнеры всегда должны использовать осмысленные описательные метки со значками, особенно для навигации. Иконки без текстовых меток может показаться пользователям двусмысленным и запутанным.
Дизайнеры также должны включать замещающий текст для программ чтения с экрана и других вспомогательных технологий.
Целевой размер также является важным фактором для значков. Люди с большими пальцами или инвалидностью рук могут случайно нажать не ту кнопку со значком, что вызовет замешательство и разочарование.
Google рекомендует дизайнерам использовать минимальный целевой размер 48 пикселей. Если вы используете 20-пиксельную иконку, предоставьте достаточно отступов, чтобы общая целевая область составляла 48 пикселей.
Благодаря нескольким наборам значков, включая значки материалов, предварительно установленным с помощью UXPin, дизайнерам не нужно устанавливать плагины или загружать внешние файлы. Вот как легко добавить значки в свой проект.
Шаг первый. Щелкните элемент значка
Щелкните элемент значка на панели быстрых инструментов слева от холста. Кроме того, вы можете использовать сочетание клавиш OPTION+I (на Mac) или ALT+I (на ПК).
Шаг второй.
Нарисуйте значок на холстеЩелкните и перетащите квадрат в то место на холсте, где вы хотите разместить значок. Удерживайте нажатой клавишу SHIFT, чтобы сохранить одинаковую ширину и высоту.
Шаг третий. Панель свойств значка
После того, как вы нарисуете значок, на правой панели свойств появится панель свойств значка. Вы можете выбрать Material Icons или один из других наборов, включая Fonts Awesome, Retina Icons и набор UXPin, и это лишь некоторые из них.
Шаг четвертый. Выберите значок
Пролистайте доступные значки материалов, чтобы найти то, что вам нужно. Щелкните любой значок на панели свойств (пока значок выбран на холсте), чтобы сделать выбор.
Шаг пятый. Настройка свойств значка
После того, как вы выбрали значок, вы можете изменить его стиль с помощью панели свойств над разделом Значок . Под палитрой цветов находится раскрывающийся список с доступными системами дизайна, включая Material Design, поэтому дизайнерам не нужно копировать/вставлять HEX-коды из других источников.
Шаг 6. Добавление взаимодействий
В верхней части панели свойств вы найдете «Взаимодействия». Добавьте взаимодействия, анимацию, переходы и т. д., чтобы сделать ваши значки интерактивными. Например, мы можем захотеть, чтобы этот значок пользователя открывал персональную страницу профиля.
Ознакомьтесь с интерактивными шаблонами пользовательского интерфейса и примерами приложений UXPin, чтобы узнать, как работают функции UXPin и что возможно с дизайном на основе кода.
Улучшение прототипирования и тестирования с помощью UXPin
Значки материалов — это лишь одно из удобств работы в UXPin. Наша цель — помочь дизайнерам создавать прототипы быстрее и с большей функциональностью и точностью в качестве инструментов дизайна на основе изображений.
Используя одну из встроенных библиотек дизайна UXPin, дизайнеры могут перетаскивать элементы для создания интерактивных прототипов за считанные минуты. Мы включили пять популярных библиотек дизайна для любого типа проектов, от веб-сайтов до веб-приложений и мобильных приложений для предприятий и продуктов B2C.
Каждый план UXPin включает в себя Material Design, iOS, Bootstrap, Foundation и User Flows с интерактивными элементами каждой библиотеки, цветами, стилями текста и значками.
Функция Design Systems UXPin позволяет дизайнерам создавать дизайн-систему с нуля, автоматически разделяя библиотеку на цвета, активы, типографику и компоненты. Вы также можете настроить разрешения и включить документацию для дизайнеров и инженеров.
Создавайте лучшие прототипы, которые точно воспроизводят конечный продукт, используя инструмент проектирования на основе кода UXPin. Подпишитесь на бесплатную пробную версию, чтобы открыть для себя возможности дизайна с помощью UXPin.
Создавайте прототипы, такие же интерактивные, как и конечный продукт. Попробуйте UXPin
Нашли это полезным? Поделиться с
от UXPin 3 августа 2022 г.