иконки — Дизайн на vc.ru
Подготовка иконок к работе в дизайн-системе.
17 386 просмотров
Кто я и почему об этом пишу?
Привет, меня зовут Андрей Насонов, я UI/UX-дизайнер, работаю руководителем дизайн отдела в Elonsoft. Мы создаём программные продукты и помогаем компаниям из разных отраслей масштабировать свой бизнес.
Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб-дизайнером.
Мне интересна разработка сервисного дизайна, проектирование дизайн-систем и автоматизация дизайн- и бизнес-процессов.
В этой серии статей я хотел бы поделиться своим опытом построения дизайн-систем и предложить несколько идей по автоматизации. В первой статье мы поговорим на довольно простую, но важную тему — иконки. Поехали!
Помещайте иконки во фреймы
Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.
Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.
Оставлять иконки без фрейма нельзя!
Всегда помещайте иконки во фрейм
Экспортировать иконки нужно также во фрейме.
Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.
Причем важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по геометрическому. Разработчик же зачастую выравнивает иконку по геометрическому центру не замечая разницы.
Иконка выровнена по геометрическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево.
Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру.
Компонент из фрейма с иконкой
Создайте компонент из фрейма с иконкой.
Компонент из фрейма с иконкой
Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».
Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).
Замена иконок с помощью функции «Instance»
Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.
Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.
Заодно и новые слова на английском выучите, если у вас с ним беда, как и у меня. 😄
Хранение иконок
Статья 224, лишение свобод…… .. ладно 😄
Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.
Основные иконки 24x24px мы храним в артборде «Icons 24». Остальные иконки размер которых больше или меньше 24px храним в «Other Icons». Обычно их не очень много.
Артборд «Trash Icons» нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд «Icons 24», а другие два варианта иконки перемещаете в артборд «Trash Icons». На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.
Фон и цвет
Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.
Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.
Удаление фона и применение стиля цвета
Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.
Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.
Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль.
Констрейнтс
Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.
Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.
Настройка constraints
Массовые действия с иконками
Все вышеописанные действия можно проделать с несколькими иконками сразу.
Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.
Мусор в иконках
Во фрейме компонента кроме иконки ничего не должно быть.
Не забывайте удалять все скрытые слои из фрейма с иконкой.
Например, Material Design иконки имеют белый фоновый слой.
В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.
В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.
После того, как вы объединили слои, не забывайте применять «Outline Storke» к объединенной фигуре.
Объединение иконки в один слой
Все это нужно для того, чтобы иконки меньше весили, SVG код был гораздо меньше и понятней, а у разработчиков не возникли проблемы с перекрашиванием иконок.
Так выглядит SVG-код иконки, когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров «Fill» для разных элементов иконки. Так делать нельзя.
Размер файла иконки 1318 байт
А так выглядит SVG-код иконки, когда все слои объединены.
Код гораздо меньше и имеет всего 2 параметра «Fill». Один для фона контейнера, другой для цвета иконки. Так делать можно.
Размер файла иконки 803 байта
После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.
После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.
Размер файла иконки 508 байт
Ресурсы с иконками
Ну и напоследок несколько ресурсов откуда можно брать иконки.
Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.
Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск.
Принципы дизайна для идеального набора иконок
12 шагов, которые необходимо выполнить, если вы хотите создать выдающийся набор иконок
Привет! Меня зовут Дима, я дизайнер и создатель универсального набора иконок. Не так давно я выпустил версию 2.0 этого набора. Работая над версией 1.0, я четко не определил правила построения единой системы иконок. В результате возникли некоторые несоответствия.
Чтобы избежать подобных ситуаций в будущем, я создал принципы, которые можно использовать при построении системы иконок.
Мой список принципов верен для каждого стиля в наборе (линейный, сплошной, двухцветный). Таким образом, каждый стиль можно использовать отдельно или комбинировать друг с другом, в обоих случаях это будет выглядеть гармонично.
За основу я взял принципы Material Design и руководства IBM Design Language. В версии 2.0 я изменил дизайн всех значков и добавил новые. Теперь здесь 1671 иконка (557 для каждого стиля).
В общей сложности у меня получилось 12 правил.
Продолжайте читать, в этой статье я делюсь своим опытом.
Каково основное назначение иконки? Быстрое понимание ее смысла. Человеческий глаз обрабатывает визуальные образы гораздо быстрее, чем текст. Кроме того, это универсальный способ понимания информации на любом языке. Поэтому, чем точнее метафора вашей иконки, тем быстрее она будет «прочитана». И это первое, на что следует обратить внимание при создании иконок.
Ясность (примеры)✅ “Используйте четкие образы”
❌ “Избегайте сложных для понимания образов”
Также важно обращать внимание на контекст использования иконки. Например, один и тот же значок дома будет иметь разное значение для интерфейса браузера и на картах.
ПростотаПрежде чем начать рисовать, необходимо подумать о том, как будет выглядеть ваша иконка. Чем проще будет ее изображение, тем легче будет понять ее конечному пользователю.
Простоты можно добиться, используя минимально возможное количество деталей для создания иконки.
Если в процессе работы она окажется сложной, не бойтесь убрать лишние детали, оставив только самые важные.
✅ “Сделайте свои иконки как можно более простыми”
❌ “Не используйте в своих иконках много деталей”
Стиль набора иконокЕсли вы зайдете на Dribbble и наберете в строке поиска «иконки», вы увидите множество вариантов различных стилей иконок. Каждый стиль подходит для своих нужд. Все иконки в наборе должны быть выполнены в одном стиле, не забывайте об этом.
У меня в наборе три разных стиля — линейный, сплошной, двухцветный. По моему опыту, этого более чем достаточно, чтобы покрыть большинство случаев использования иконок.
Стиль набора иконок (примеры)✅ “Придерживайтесь единого стиля в рамках одного набора иконок”
❌ “Не используйте разные стили в рамках одного набора”
Вы можете использовать два стиля иконок, когда вам нужно выделить одну из них. Например, для навигации можно использовать значки в стиле линии, а для выделения — в стиле сплошной линии.
Перейдем к более техническим принципам. Они помогут нам создать систему с четкими правилами. Прежде всего, начните с выбора базовой сетки. Все иконки будут строиться на ее основе. Каждая часть вашей иконки должна быть помещена в пиксельную сетку.
Сетки различаются в зависимости от задачи. Наиболее распространенные размеры — 16×16, 24×24, 32×32, 48×48, 64×64, 96×96;
Размер сетки зависит от причины использования иконок, рекомендаций и особенностей операционной системы. Например, для Android размер сетки составляет 24 x 24 dp (dp — density independent pixels — плотность независимых пикселей).
Базовая сетка (примеры)✅ “Расположите иконку внутри пиксельной сетки”
❌ “Не помещайте иконку на десятичные значения координат x- и y-”
Область обрезкиОбласть обрезки (или отступы) указывает область сетки, которую следует избегать. Основная часть иконки должна располагаться точно в безопасной области (или живой области).
В большинстве случаев это не правило, а рекомендация. Вы можете зайти в зону обрезки, если этого требует здравый смысл. В своем наборе я использую эту область как дополнительное пространство для маневра в исключительных случаях.
✅ “Иконка должна размещаться внутри области обрезки”
❌ “Избегайте размещения частей иконки на область обрезки”
В некоторых случаях это правило нельзя нарушать. Например, когда мы имеем дело с иконками приложений для операционных устройств.
Основные формыВизуальный вес иконки должен быть одинаковым, если вы хотите, чтобы они выглядели гармонично. В этом помогут основные формы. К ним относятся квадрат, круг, горизонтальный и вертикальный прямоугольники.
Они помогают упростить создание иконок, сохраняя единый визуальный баланс для каждой из них. Визуальный вес иконки можно рассчитать по формуле. Значения будут приблизительными, но этого будет достаточно. А теперь давайте вспомним геометрию!
Начнем с площади круга:
d — высота безопасной зоныВ нашем случае диаметр «d» равен 20 пикселям, а радиус «r» — 10 пикселям, площадь круга приблизительно равна 314 пикселей².
Далее найдем стороны квадрата и его площадь:
а — округлите до ближайшего четного значенияСторона ‘a’ будет равна приблизительно 17,7 пикселям. Округлите до ближайшего четного числа. В нашем случае — 18 пикселей. Площадь квадрата составит 324 пикселей².
Теперь давайте найдем стороны прямоугольника:
b — высота безопасной зоныВ нашем случае сторона «b» составляет 20 пикселей, а сторона «c» — 16 пикселей.
Это дает нам размеры наших основных фигур:
Основные формы (примеры)Ширина линииПосле того как мы настроили основные параметры нашей сетки, мы можем приступить к созданию значков. Нам нужно выбрать ширину линии для иконок. Чтобы ваши иконки выглядели пиксельно идеально на любом устройстве, я рекомендую придерживаться целочисленного значения. Например, 1 px или 2 px.
Также важно не забывать о минимальном расстоянии между элементами. Оно также должно быть равно ширине линии или быть чуть больше нее.
Ширина линии (примеры)✅ “Будьте последовательны в использовании ширины линии и минимального свободного пространства”
❌ “Не используйте разные веса начертания и минимальный пробел меньше ширины линии”
УглыПри создании гармоничного набора иконок важно определить углы у ваших объектов.
Для начала выберите форму углов: острые или закругленные. С острыми углами все понятно. Однако для закругленных углов следует установить правила, по которым они будут закругляться, в зависимости от размера объекта.
Например, у меня для основных объектов установлено закругление от 2 до 4 px в зависимости от размера.
Углы (примеры)Угол наклонаВы можете указать базовые значения или один шаг (например, 15 градусов) для выравнивания угла наклона косых линий. Это ограничение также поможет вам при создании иконок.
Угол наклона (примеры)Оптический балансЧасто то, что аккуратно с геометрической точки зрения, не является таковым с визуальной. При создании иконок необходимо выравнивать объекты по их визуальному весу. В первую очередь это относится к асимметричным объектам. Например, мы часто сталкиваемся с такой проблемой при рисовании иконки «воспроизведения».
Оптический баланс (примеры)✅ «Используйте оптический баланс”
❌ «Не полагайтесь только на цифровые значения”
В дополнение ко всем принципам, для единообразия иконок важно придерживаться одной перспективы.
В большинстве случаев подойдет двухмерный вид значка. Это может быть вид сверху или спереди. Можно использовать 3D-вид, но тогда необходимо использовать одну и ту же перспективу для всех иконок в наборе.
Я рекомендую придерживаться этих принципов для создания целостного набора иконок, но вы также должны руководствоваться здравым смыслом и своим личным визуальным вкусом. Из любого правила есть исключения, так что нарушайте его, если это необходимо.
Здравый смысл (примеры)“В этом примере я использовал различные углы наклона, чтобы получить идеальную иконку с точностью до пикселя”
“В этом примере часть элемента “замка” расположена на области обрезки, таким образом его отображение на всех иконках останется единым”
ЗаключениеВместо скучного вывода я хочу показать вам видео, которое я сделал для Universal Icon Set v2.0.
Спасибо, что дочитали до конца. Надеюсь, эта статья была для вас полезной.
дизайнов иконок, тем, шаблонов и загружаемых графических элементов на Dribbble
Просмотреть NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография
NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография
Посмотреть коллекцию иконок
Коллекция иконок
Посмотреть MetaSpark Logomark Брендинг, дизайн логотипа, визуальная идентификация
MetaSpark Logomark Брендинг, дизайн логотипа, визуальная идентификация
Посмотреть иконографию: брендинг иконок, набор иконок, визуальная идентификация, приложение
Иконография: брендинг иконок, набор иконок, визуальная идентификация, приложение
- Посмотреть линейную иконку
Линейный значок
Посмотреть набор значков телефона
набор иконок телефона
Посмотреть иконки Canvaspop
Иконки Canvaspop
Просмотр значка погоды
значок погоды
Посмотреть обложку Okta 3d Animated Icons, набор иконок, логотип, пользовательский интерфейс, контур
Okta 3d Анимированные иконки, набор иконок, логотип, пользовательский интерфейс, контур
Просмотр брендинга Proemion Web Icons, набора иконок, набора, плоской векторной линии пользовательского интерфейса
Proemion Web Icons брендинг, пакет иконок, набор, плоская векторная линия ui
Посмотреть Oppo ColorOS 7 Icons брендинг, дизайн логотипа, набор иконок, пакет иконок
Oppo ColorOS 7 Icons брендинг, дизайн логотипа, набор иконок, набор иконок
Посмотреть иконку Figma 3D #2
Иконка Figma 3D #2
Посмотреть иконографию Дейбриджа
Иконография Дневного моста
Посмотреть иконографию FirstVet
Иконография FirstVet
Посмотреть коллекцию логотипов
Коллекция логотипов
Посмотреть иллюстрации
иллюстрации
Просмотр значков HypeFlags
Иконки HypeFlags
Посмотреть дизайн логотипа Merchy
Дизайн логотипа Merchy
Просмотр GiB: Игровая аналитика
ГиБ: игровая аналитика
Просмотр значка приложения VStack для iOS
Значок приложения VStack iOS
Посмотреть дизайн портфолио
Дизайн портфолио
Посмотреть набор значков
Набор значков
Посмотреть иллюстрированные иконы Klarna
Иллюстрированные иконки Klarna
Посмотреть Хоумбридж
Хоумбридж
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загружается еще…
Полезные советы по созданию отличных значков приложений
Дизайн значков играет решающую роль, помогая пользователям ориентироваться в интерфейсах.
Иконки заменяют слова, чтобы дизайнеры UX могли создавать понятный и удобный пользовательский интерфейс.
Разработка набора значков предоставляет пользователям уникальный опыт работы с брендом, а также предоставляет полезные указания и инструкции.
Дизайн иконок сталкивается со многими проблемами, поскольку дизайнеры должны найти идеальный баланс между формой и функцией для этих коммуникативных символов. Иконки должны выглядеть красиво, передавая пользователю важное сообщение.
UXPin упрощает создание значков, особенно если вы работаете в команде. Вы можете начать с 14-дневной бесплатной пробной версии и начать создавать красивые значки для своего следующего проекта.
Люди использовали символы на протяжении всего своего существования. Эти небольшие, но высокотехнологичные иллюстрации обеспечивают универсальный язык для обслуживания, указаний, функций, предупреждений, дизайна, маркетинга и многого другого.
Дизайн иконок создает визуальное представление программы, сущности, данных, взаимодействий или действий в программном обеспечении, на веб-сайтах и в приложениях.
Эти узнаваемые значки позволяют пользователям со всего мира быстро перемещаться по веб-сайту или приложению.
Краткая история дизайна иконок
Графический дизайнер Сьюзен Каре широко известна как пионер пиксель-арта и современного дизайна иконок. Ее работа восходит к началу 1980-х годов в Apple, где она проектировала элементы интерфейса и вносила свой вклад в шрифты Apple.
Сьюзен разработала все значки и шрифты Apple на миллиметровой бумаге, прежде чем рисовать их попиксельно на Mac, и это не что иное, как сложные инструменты дизайна UX, которые у нас есть сегодня! К 1984 году Сьюзен перешла на первую версию MacPaint, что значительно упростило создание иконок.
Иконки Сьюзан Каре. Источник.Некоторые из ранних значков Сьюзен Кэр включают ножницы («вырезать»), палец («вставить»), кисть и карандаш .
Дизайн значков начинается с определения того, какие значки потребуются вашему проекту. Хорошей практикой является составление списка всех страниц, действий, навигации и взаимодействий вашего дизайна, чтобы вы могли определить, где вам могут понадобиться значки.
Некоторые рекомендации по дизайну значков:
- Попробуйте сделайте ваши значки максимально простыми с минимальным количеством деталей. Многие иконки живут в мире 24×24 пикселей. Итак, если у вас слишком много деталей, ваши значки будут выглядеть как бессвязные капли.
- Не пытайтесь заново изобретать колесо для универсально узнаваемых значков, таких как шестеренка для настроек или сердце для . При разработке набора иконок важно проявлять творческий подход, но не забывайте поддерживать подход, ориентированный на пользователя. В UXPin вы можете свободно использовать готовые иконки Material Design, которые ждут вас в готовых библиотеках.
- Единообразие — это то, что отличает средний набор иконок от отличного. Если вы работаете в команде, вы должны разработать руководство для всех. Например, сохраняя угловой радиус 5 пикселей для каждого штриха.
- Вам также необходимо убедиться, что ваши значки соответствуют бренду и соответствуют системе дизайна проекта.
Из-за небольшого размера значок может показаться обманчиво простым. Но, учитывая все вышеперечисленное, все может стать техническим и потребовать много размышлений.
При разработке значков сложно поддерживать согласованность, особенно при работе в команде.
Первый шаг — выбрать сетку. Всегда используйте сетку в 1 пиксель, так как это даст вам наилучший визуальный ориентир для вашего холста.
Далее вам нужно решить, будете ли вы проектировать числа, кратные 8 или 10? Большинство наборов иконок кратны 8 с размерами 16, 24, 32, 40, 48 и так далее.
Чтобы сохранить согласованность, решите, какой кратный размер будет вашим базовым размером для создания всех ваших значков. Например, если вы проектируете с разрешением 512 пикселей, убедитесь, что вы создаете все свои значки с разрешением 512, а затем увеличиваете или уменьшаете масштаб.
Некоторые дизайнеры предпочитают начинать с самого большого размера, необходимого для проекта, а затем уменьшать его по мере необходимости.
Часто бывает проще удалить штрихи, чем добавить их.
Оставайтесь на пикселях
Один из приемов для поддержания согласованности — оставаться «на пикселях». Подобно ребенку, раскрашивающему линии, вы хотите, чтобы все штрихи вашего значка оставались внутри линий сетки, а не пересекали их. Если вам нужно охватить линию сетки, отцентрируйте свои штрихи, чтобы сохранить эстетику на пикселях.
Использование пикселя поможет сохранить чистоту и согласованность значков при увеличении и уменьшении масштаба. Это также отличный способ сохранить единообразие в вашем наборе иконок.
Заполнять или не заполнять
Еще одно соображение для ясности и согласованности — это то, являются ли ваши значки штрихами (иногда называемыми линиями или контурами), заливкой или набором значков с обоими вариантами. В большинстве случаев брендинг будет играть ключевую роль в том, будут ли ваши значки использовать обводку или заливку.
Дизайн значков с обводкой отлично передает детали, а значки с заливкой выделены жирнее, что делает их более четкими.
Технические правила
Ваши штрихи, формы, углы, кривые и углы должны быть математически точными, чтобы поддерживать единообразие в вашем наборе значков. Даже если вы стремитесь к рисованной эстетике, придерживайтесь цифр, а не рисуйте иконки от руки, это поможет сохранить единообразие.
Например, ваши концы закруглены или квадратны? Используете ли вы целые приращения или десятичные дроби? Какие у вас пропорции портрета и пейзажа? Каковы ваши угловые приращения?
Как и в любой дизайн-системе, ваши технические правила будут развиваться по мере расширения набора иконок. Даже для небольшого набора значков ведение подробной документации позволит вам и вашей команде поддерживать согласованность. Эти правила также упрощают адаптацию или передачу.
Несмотря на то, что важно привнести креативность вашего бренда в ваш дизайн, ваши значки должны быть понятны пользователю. Думайте о дизайне иконок как о языке, а не как об иллюстрациях. Какое сообщение вы хотите отправить пользователю?
Например, если у вас есть действие «просмотр», лучше всего использовать значок глаза.
Вы также можете использовать камеру или бинокль (оба используются для «просмотра» вещей), но пользователь может связать эти символы со съемкой изображения или осмотром достопримечательностей.
Если вы разрабатываете значок для чего-то нового или незнакомого пользователю, проведите небольшое исследование, чтобы выяснить, как передать свое сообщение визуально.
Следуйте правилам дизайна значков
Если вы подходите к дизайну значков как к универсальному языку, вы поймете важность соблюдения набора правил и принципов.
Если вы даете кому-то указания, вы указываете, куда идти, а не машете им рукой. То же самое относится и к дизайну иконок. Значок дома всегда означает значок дома, поиск всегда представляет собой значок увеличительного стекла, а значок корзины всегда означает удаление.
Материальные значки Google содержат обширную библиотеку стандартизированных символов, на которые можно ссылаться, если вы когда-нибудь застрянете. Редизайн версий иконок материалов поможет сделать ваш набор иконок узнаваемым.
Включение цвета может помочь сохранить ваши значки фирменными или привлечь внимание пользователей к важным действиям или функциям. Цвет также может помочь пользователям в навигации, используя значок другого цвета для активного состояния.
Дизайнеры должны соблюдать осторожность при использовании более одного цвета, поскольку значки становятся трудночитаемыми.
Как правило, два цвета для дизайна значков лучше всего сочетаются с другим цветом фона и символа. Когда вы масштабируете значки более 64 пикселей, становится немного проще включать несколько цветов и теней без потери деталей.
Специальные возможности
Если вы используете цвет, убедитесь, что вы тестируете дизайн своих значков на фоне вашего проекта, так как иногда значки трудно увидеть без правильного контраста.
При выборе цветов крайне важно учитывать доступность, поскольку значки маленькие и их может быть сложно увидеть. Использование нашего встроенного средства проверки контрастности гарантирует, что ваши значки будут выделяться среди пользователей с нарушениями зрения.
Культурное значение
Дизайнеры иконок также должны учитывать, как разные культуры интерпретируют цвета, жесты рук и символы. Если вы разрабатываете продукт для определенного рынка, некоторые исследования местного языка и культуры могут помешать пользователям неверно интерпретировать или неправильно понять значение значка.
Белое пространство
Белое пространство — еще один фактор, который дизайнеры должны учитывать, чтобы сделать значки разборчивыми и доступными. Пустое пространство также добавляет баланса, в результате чего пользователи получают приятный визуальный опыт.
Поскольку значки должны уменьшаться (иногда в 20 и более раз по сравнению с исходным размером), пустое пространство играет решающую роль в поддержании формы дизайна.
Iconic…icons
Символ @, возможно, является одним из наиболее часто используемых значков сегодня. Его можно найти в адресах электронной почты и использовать для пометки учетных записей в социальных сетях, но он имеет древнюю историю.
Знак @ восходит к началу 1300-х годов, когда он использовался для заглавной буквы «А» в слове «Аминь».
Знак мира — еще одна общепризнанная икона, впервые использованная в 1958 за антиядерный протест в Англии. Джеральд Холтом разработал символ, используя буквы N и D (обозначающие ядерное разоружение) из алфавита семафоров.
Международный символ доступа, часто называемый символом инвалидной коляски, используется во всем мире и в Интернете для обозначения функций доступности для людей с ограниченными возможностями. Датская студентка-дизайнер Сюзанна Кефед разработала икону в 1968 году. Первоначальный дизайн был безголовым; несколько лет спустя сверху был добавлен круг для головы персонажа.
Значок питания представляет собой комбинацию | и O на аналоговых переключателях питания. С появлением цифровой электроники выключатель питания превратился в кнопку, поэтому дизайнеры объединили два символа с символом | вложенный в ломаный круг (представляющий O).
UXPin — идеальный инструмент для создания иконок.