Рекомендации по проектированию значков приложений Windows

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

Руководство по проектированию: Метафора

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

Представление

Значок должен проиллюстрировать концепцию приложения в единственном элементе с помощью простых форм.

При создании значка используйте четкие метафоры и понятия, которые хорошо понятные, например, конверт для почты или увеличительное стекло для поиска. Ключевое понятие должно быть фокусом значка; Не разбавляйте значок, добавляя декоративные элементы, которые не поддерживают метафору. Чтобы улучшить ясность связи, используйте не более двух метафор в одном значке. Если можно использовать одну метафору, это еще лучше.

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

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

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

Руководство по проектированию: форма

Сетка и округленные углы

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

Общительность является принципом корпоративного стиля Microsoft. Один из способов передачи этой характеристики заключается в использовании мягких или округлых углов. Фигуры, используемые в значках продуктов приложения, должны быть построены так, чтобы соответствовать сетке значков. Углы этих фигур должны соответствовать закруглённым углам в сетке иконок. Если округленные углы применяются к внешней кривой, используйте радиус 2px при размере 48x48. Если округлённые углы применены к внутренней кривой, используйте вместо этого радиус 1px.

Силуэт

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

Detail

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

Руководство по проектированию: цвет и градиенты

Тщательно выбирайте цвета и избегайте полагаться только на цвет, чтобы передать смысл. Используйте фигуру и метафору с цветом для взаимодействия. Чтобы избежать сложности при масштабировании значка в диапазоне размеров, следует свести к минимуму методы обработки цветов. Градиенты цветов, наложения с различной степенью прозрачности и оттенки цвета следует свести к минимуму.

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

Угол по умолчанию для градиентов составляет 120 градусов. Начальные и конечные точки можно настроить соответствующим образом. Важно, что это гладкий переход. Избегайте очень резких переходов, которые будут напоминать отражения или размеры.

Монохромная палитра

Создайте монохромную палитру, выполнив следующие действия.

1. Создайте три цвета из одного и того же оттенка. В большинстве случаев вам потребуется настроить светлый цвет сделать более ярким, а тёмный — менее насыщенным, но, конечно, следует использовать собственное усмотрение.
2. Создайте три шага между каждым базовым цветом. Это будет ваша основная полоса. Большая часть значка должна состоять из этих цветов.
3. Для более широкой палитры создайте оттенки до белого и оттенков для черного цвета, используя тот же метод, что и шаг 2. Эти оттенки и тона следует использовать только в том случае, если вам потребуется немного больше контрастности.
4. Оттенки тёмных и светлых цветов обычно бесполезны и унылы. Их можно удалить.

Градиенты монохромные

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

Аналогичная палитра

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

1. Создайте три набора цветов вместо одного.
2. Сделайте вертикальные пандусы из всех трех цветовых наборов.
3. Вместо создания оттенков и теней с помощью белого и черного, используйте второй и третий цвета.

Аналогичные градиенты

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

Руководство по проектированию: контрастность, тень и перспектива

Контрастность цветов

Специальные возможности — это высокий приоритет корпорации Майкрософт. Значки приложений в основном отображаются на светлых и темных фонах, но отображаются над фоновыми изображениями рабочего стола и оттенками системного цвета акцента. Трудно сделать значок 100% доступным на каждом фоне, но есть несколько действий, которые можно сделать, чтобы значок был максимально доступным.

• Используйте значения цвета во всех 3 диапазонах, темных, средних, светлых.
• Убедитесь, что по крайней мере половина иконки имеет коэффициент контрастности не менее 3.0:1 для светлой и темной темы.
• Некоторые значения оттенков сложнее, чем другие. Желтый никогда не пройдет допустимое соотношение контрастности в светлой теме, если он не станет коричневым. Красные труднее в темной теме.
• Хотя и не требуется, у вас есть возможность предоставить отдельные светлые и темные ресурсы темы для панели задач, запуска и других областей с учетом темы Windows.

Высокая контрастность

Подсказка

Windows 11 больше не требует ресурсов высокой контрастности для значков приложений.

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

Слои и тени

Вид верхнего или переднего плана.

Изометрический вид для иллюстрации глубины по оси Z. Только для иллюстрирующих целей; не предлагаемый вариант проектирования.

Значки состоят из плоских объектов, сидящих на вершине слоев под ним.

• Используйте как можно меньше слоев и свести к минимуму крайние контрасты масштабирования между фигурами.
• Используйте теневые эффекты в значках, чтобы создать четкость между слоями объектов и визуально соединить компоненты друг с другом в дизайне значков.
• Как правило, тени, отбрасываемые от света на темные фигуры, имеют лучший результат.
• Внутренние тени должны создавать тени только на графическом символе, а не на окружающем фоне.
• Существует два типа внутренней тени, оба из которых имеют две тени каждый из них

Теневая конструкция

Все эти значения должны отображаться в 48x48 пикселей и масштабироваться вверх или вниз оттуда. Если это не соответствует, тени будут несогласованы по всей системе значков. Существует два типа теней объектов, оба из которых имеют две тени каждый. Объекты в той же метафоре имеют тени с немного меньшим размытием.

Та же метафора

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

Отдельная метафора

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

Перспектива

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

Значки должны быть нарисованы с прямой перспективой, чтобы метафора была представлена простым и понятным способом. Исключения — это случаи, когда метафора плохо воспринимается без учета другой стороны. Например, цилиндр, рассматриваемый спереди, является прямоугольником, поэтому добавление верхней части могло бы показать, что у него есть объем. Другое исключение — это приложение, связанное с 3D, где есть смысл показать размерность. В обоих случаях предыдущие рекомендации по поводу неструктурированных объектов по-прежнему применяются. Слои всегда должны быть плоскими и перпендикулярными к углу просмотра.