Значки (основы проектирования)

Примечание.

Это руководство по проектированию было создано для Windows 7 и не было обновлено для более новых версий Windows. Большая часть рекомендаций по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

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

Заметка: Рекомендации, связанные со стандартными значками , представлены в отдельной статье.

Принципы проектирования

Aero — это имя пользовательского интерфейса Windows Vista, представляющее как значения, воплощенные в дизайне эстетики, так и визуальное представление пользовательского интерфейса. Аэро означает: подлинный, энергичный, отражающий и открытый. Аэро стремится установить дизайн, который является как профессиональным, так и красивым. Эстетика Aero создает высококачественный и элегантный интерфейс, который упрощает производительность пользователей и даже приводит к эмоциональному отклику.

Значки Windows Vista отличаются от значков в стиле Windows XP следующими способами:

• Стиль более реалистичный, чем иллюстрированный, но не совсем фотореалистичный. Значки являются символьными изображениями, которые они должны выглядеть лучше, чем фотореалистично!
• Значки имеют максимальный размер 256x256 пикселей, что делает их подходящими для отображения с высоким числом точек (точек на дюйм). Эти значки с высоким разрешением позволяют обеспечить высокое качество визуального элемента в представлениях списка с большими значками.
• Где бы ни было практическим, фиксированные значки документов заменяются эскизами содержимого, что упрощает идентификацию и поиск документов.
• Значки панели инструментов имеют меньшую детализацию и нет перспективы, чтобы оптимизировать для небольших размеров и визуальной отличительности.

Хорошо разработанные значки:

• Улучшение визуального взаимодействия программы.
• Сильно влияет на общее впечатление пользователей о визуальном дизайне вашей программы и благодарим за его соответствие и отделку.
• Повышение удобства использования путем упрощения идентификации, обучения и поиска программ, объектов и действий.

На следующих изображениях показано, что делает стиль аэроконографии в Windows Vista отличается от того, что использовалось в Windows XP.

Значки Windows Vista (блокировка и ключ слева) являются подлинными, четкими и подробными. Они отрисовываются вместо рисования, но не полностью фотореалистичны.

Значки Windows Vista (два слева) профессиональные и красивые, с вниманием к деталям, которые улучшают качество производства значков.

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

на с

В этих примерах показаны различные типы значков, включая трехмерный объект в перспективе, внешний (плоский) значок и значок панели инструментов.

Руководящие принципы

Перспектива

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

  

  Типичные трехмерные и плоские значки.

• Трехмерные объекты представлены в перспективе как твердые объекты, видимые с низкой точки зрения птиц с двумя исчезающими точками.

  

  В этом примере показаны точки перспективы и исчезания, типичные для трехмерных значков.

• В меньших размерах один и тот же значок может измениться с точки зрения на прямой. В размере 16x16 пикселей и меньше отрисовка значков прямо на переднем краю. Для более крупных значков используйте перспективу.

  • Исключение: Значки панели инструментов всегда являются внешними, даже в больших размерах.

  

  В этом примере показано, как один и тот же значок обрабатывается по-разному в зависимости от размера.

Источник света

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

Тени

Общие сведения

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

• Используйте диапазон непрозрачности от 30 до 50 процентов для теней. Иногда следует использовать другой уровень тени в зависимости от формы или цвета значка.

• Перо или сокращение тени при необходимости, чтобы сохранить его от обрезки размером значка.

• Не используйте тени в значках в 24x24 или меньших размерах.

  

  Типичные тени значков.

Плоские значки

• Плоские значки обычно используются для значков файлов и неструктурированных реальных объектов, таких как документ или лист бумаги.
• Плоское освещение значка происходит из левого верхнего угла в 130 градусов.
• Небольшие значки (например, 16x16 и 32x32) упрощаются для удобства чтения. Однако если они содержат отражение в значке (часто упрощено), они могут иметь жесткую тень падения. Падение диапазонов тени в непрозрачности от 30 до 50 процентов.
• Эффекты слоя можно использовать для плоских значков, но следует сравнить с другими неструктурированными значками. Тени для объектов будут отличаться несколько, в соответствии с тем, что лучше всего выглядит и наиболее согласовано в наборе размеров и с другими значками в Windows Vista. В некоторых случаях может потребоваться даже изменить тени. Это особенно верно, когда объекты размещаются над другими.
• Для достижения желаемого результата может использоваться тонкий диапазон цветов. Тени помогают объектам сидеть в пространстве. Цвет влияет на воспринимаемый вес тени и может исказить изображение, если он слишком тяжелый.

с

Параметр "Удалить тень" в диалоговом окне "Стиль слоя" и типичная тень для неструктурированного значка.

Базовые диапазоны теневого значка

Характеристика	Диапазон
Цвет	Чёрный
Режим смешивания	Multiply
Непрозрачность	22–50 процентов в зависимости от цвета элемента
угол	120-130 (используйте глобальный свет)
Расстояние	3 для 256x256, начиная до 1 для 32x32
Распространение	0
Размер	7 для 256x256, начиная до 2 для 32x32

Трехмерные значки

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

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

Цвет и насыщенность

• Цвета, как правило, менее насыщенные, чем Windows XP.

• Используйте градиенты для создания более реалистичного изображения.

• Хотя для стандартных значков нет определенной цветовой палитры, помните, что они должны работать хорошо вместе во многих контекстах и темах. Предпочитайте стандартный набор цветов; Не переназначайте стандартные значки, такие как значки предупреждения, так как это нарушает способность пользователей интерпретировать смысл. Дополнительные рекомендации см. в разделе "Цвет".

• Файлы значков также требуют 8-разрядных и 4-разрядных версий палитры для поддержки параметра по умолчанию в удаленном рабочем столе. Эти файлы можно создать с помощью пакетного процесса, но их следует проверить, так как некоторые из них требуют повторной удобочитаемости.

  

  Нет строгого ограничения цветовой палитры. Избегается только полная насыщенность (сверху справа).

• Битовые уровни: дизайн ICO для 32-разрядной (альфа-включен) + 8-разрядный + 4-разрядный (dithered вниз автоматически пиксель ткнуть только наиболее критическим). Следует включить только 32-разрядную копию изображения пикселя 256x256, и только изображение пикселя размером 256x256 должно быть сжато, чтобы сохранить размер файла вниз. Несколько инструментов значков предлагают сжатие для Windows Vista.

• Битовые уровни: панели инструментов 24-разрядная + альфа -(1-разрядная маска), 8-разрядная и 4-разрядная.

• Панели инструментов или файлы AVI: используйте magenta (R255 G0 B255) в качестве цвета прозрачности фона.

Требования к размеру

Общие сведения

• Обратите особое внимание на значки высокой видимости, такие как основные значки приложения, значки файлов, которые могут отображаться в проводнике Windows, а также значки, отображаемые в меню "Пуск" или на рабочем столе.
  • Значки приложения и элементы панели управления: Полный набор включает 16x16, 32x32, 48x48 и 256x256 (код масштабируется в диапазоне от 32 до 256). Требуется формат файла .ico. Для классического режима полный набор — 16x16, 24x24, 32x32, 48x48 и 64x64.
  • Параметры значка элемента списка: Используйте динамические эскизы или значки файлов типа файла (например, .doc); полный набор.
  • Значки панели инструментов: 16x16, 24x24, 32x32. Обратите внимание, что значки панели инструментов всегда плоские, а не трехмерные, даже в размере 32x32.
  • Значки диалогового окна и мастера: 32x32 и 48x48.
  • Наложения: Код оболочки ядра (например, ярлык) 10x10 (для 16x16), 16x16 (для 32x32), 24x24 (для 48x48), 128x128 (для 256x256). Обратите внимание, что некоторые из них немного меньше, но близки к этому размеру, в зависимости от формы и оптического баланса.
  • Область быстрого запуска: Значки будут уменьшаться с 48x48 в динамических наложениях ALT+TAB, но для более четкой версии добавьте 40x40 в .ico файл.
  • Значки воздушных шаров: 32x32 и 40x40.
  • Дополнительные размеры: Они полезны для использования в качестве ресурсов для создания других файлов (например, примечаний, полосок панели инструментов, наложения, высокой dpi и особых случаев): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 и 8x8. Вы можете использовать .ico, .png, .bmpили другие форматы файлов в зависимости от кода в этой области.

Для высокого уровня dpi

• Windows Vista предназначено для 96 dpi и 120 dpi.

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

dpi	Размер значка	Масштаб
96	16 x 16	1.0 (100%)
120	20x20	1.25 (125%)
144	24x24	1.5 (150%)
192	32x32	2.0 (200%)

dpi	Размер значка	Масштаб
96	32x32	1.0 (100%)
120	40x40	1.25 (125%)
144	48x48	1.5 (150%)
192	64x64	2.0 (200%)

.ico размеров файлов (стандартный)

.ico размеров файлов (особые случаи)

Заметки и наложения

• Заметки идут в правом нижнем углу значка и должны заполнить 25 процентов области значка.
  • Исключение: значки 16x16 принимают заметки 10x10.
• Не используйте несколько заметок над значком.
• Наложения идут в левом нижнем углу значка и должны заполнить 25 процентов области значка.
  • Исключение: значки 16x16 принимают наложения 10x10.

Уровень детализации

• 16x16 размер многих этих значков по-прежнему широко используется и поэтому важно.

• Сведения в значке этого размера должны четко отображать ключевую точку значка.

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

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

  

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

• Простое масштабирование с размера 256x256 не работает.

• Для всех размеров требуется соответствующий уровень детализации; чем меньше значок, тем больше необходимо преувеличивать определяющие детали.

  

  

Разработка значков

Проектирование и создание значков

• Нанимайте опытного графического дизайнера. Для отличной графики, изображений и значков работают с экспертами. Рекомендуется использовать иллюстрации с помощью векторного искусства или трехмерных программ.
• Планируйте выполнять ряд итерации, начиная с первоначальных эскизов концепции, до макетов в контексте, до окончательного обзора производства и завершения значков в рабочем продукте.
• Создание значка вперед может быть дорогостоящим. Соберите все существующие сведения и требования, такие как полный набор значков, необходимых; основная функция и значение для каждого; семейства или кластеры в наборе, который вы хотите быть очевидным; требования к бренду; точные имена файлов; форматы изображений, используемые в коде; и требования к размеру. Убедитесь, что вы можете сделать большую часть времени с помощью конструктора.
• Помните, что конструктор не может быть знаком с вашим продуктом, поэтому предоставьте функциональные сведения, снимки экрана и разделы спецификаций, как это необходимо.
• План для геополитических и юридических обзоров в соответствии с соответствующими параметрами.
• Сопоставьте интервал времени и регулярное взаимодействие.

От эскиза концепции до конечного продукта

• Создание эскизов концепции.
• Попробуйте концепцию в разных размерах.
• При необходимости отрисовка в трехмерном формате.
• Размеры тестов на различных цветах фона.
• Оцените значки в контексте реального пользовательского интерфейса.
• Создайте окончательный .ico файл или другие форматы графических ресурсов.

Инструменты

• Карандаш и бумага: Первоначальные концепции, перечисленные и наброски.
• 3D Studio Max: Отрисовка трехмерных объектов в перспективе.
• Adobe Photoshop: Эскиз и итерацию, макет в контексте и завершение деталей.
• Adobe Illustrator/ Macromedia Freehand: Эскиз и итерацию, завершение сведений.
• Gamani Gif Movie Gear: Создайте файл .ico (при необходимости с сжатием).
• Мастерская значков Axialis: Создайте файл .ico (при необходимости с сжатием).
• Microsoft Visual Studio не поддерживает значки Windows Vista (не поддерживает альфа-канал или более 256 цветов).

рабочей

Подсказка

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

Шаг 1. Концептуальная концепция

• Используйте установленные понятия, где это возможно, для обеспечения согласованности значений значка и его релевантности для других видов использования.
• Рассмотрим, как будет отображаться значок в контексте пользовательского интерфейса и как он может работать в составе набора значков.
• При пересмотре существующего значка рассмотрите возможность уменьшения сложности.
• Рассмотрим культурное влияние вашей графики. Избегайте использования букв, слов, рук или лиц на значках. Изображение представлений пользователей или пользователей как можно более универсальным образом при необходимости.
• При объединении нескольких объектов в один значок следует учитывать, как изображение будет масштабироваться до меньших размеров. Используйте не более трех объектов в значке (два предпочтительнее). Для размера 16x16 рассмотрите возможность удаления объектов или упрощения изображения для улучшения распознавания.
• Не используйте флаг Windows в значках.

Шаг 2. Иллюстрация

• Чтобы проиллюстрировать значки стиля Windows Aero, используйте векторное средство, например Macromedia Freehand или Adobe Illustrator. Используйте характеристики палитры и стиля, как описано ранее в этой статье.
• Проиллюстрировать изображение с помощью Freehand или Illustrator. Скопируйте и вставьте векторные изображения в Adobe Photoshop.
• Сделайте и используйте слой шаблона в Photoshop, чтобы убедиться, что работа выполняется в квадратных регионах регулируемых размеров.
• Создайте изображения в размере немного меньше общего размера значка, чтобы разрешить пространство для тени (для тех размеров, которые требуют одного).
• Поместите изображения в нижней части квадратов, чтобы все значки в каталоге располагались согласованно. Избегайте отрезания тени.
• Если вы добавляете другой объект в изображение или ряд, сохраните основной объект в фиксированной позиции и поместите неструктурированные изображения меньшего размера в фиксированное положение, например в левом нижнем или верхнем правом углу в зависимости от ситуации.

Шаг 3. Создание 24-разрядных образов

• После вставки размеров в Photoshop проверьте удобочитаемость изображений, особенно в 16x16 и меньших размерах. Пиксель ткнуть с использованием процентных значений цветов может потребоваться. Кроме того, может потребоваться сокращение прозрачности. Обычно преувеличивать аспекты на меньших размерах и устранять аспекты, чтобы сосредоточиться на ключевой точке.
• 8-разрядные значки будут отображаться в любом цветовом режиме ниже 32-разрядного и не будут иметь 8-разрядный альфа-канал, поэтому им может потребоваться их края или более чистые, потому что нет анти-псевдонимов (края могут быть рывками, и изображение может быть трудно прочитать).
• В Photoshop дублируйте 24-разрядный слой изображений и переименуйте слой на 4-разрядные изображения. Индексирование 4-разрядных изображений в цветовой палитре Windows 16.
• Очистите изображения, используя только цвета из 16 цветовой палитры. Контуры, сделанные из темных или более светлых версий цветов объекта, обычно предпочтительнее серого или черного.
• При работе с растровым изображением убедитесь, что цвет фона не используется в самом изображении, так как этот цвет будет прозрачным цветом. Magenta (R255 G0 B255) часто используется в качестве цвета прозрачности фона.

Шаг 4. Создание 8-разрядных и 4-разрядных образов

• Теперь, когда 24-разрядные образы готовы к созданию в 32-разрядные значки, необходимо создать 8-разрядные версии.
• Это отличное время для тестирования контекстных снимков экрана. Это удивительно, что можно обнаружить, просмотрев другие значки или семейство значков в контексте. Этот шаг может сэкономить время и деньги. Гораздо лучше поймать проблемы перед тем, как файлы проходят через рабочую среду и передаются.
• Добавьте тень перетаскивания к изображениям в размерах, которые требуют их.
• Объединение тени падения и 24-разрядных изображений вместе.
• Создайте новый файл Photoshop для каждого размера. Скопируйте и вставьте соответствующее изображение. Сохраните каждый файл в виде файла .psd.
• Не объединяйте слой изображения с фоновым слоем. Полезно включить размер и глубину цвета в имя файла во время работы, но в конечном итоге файл может потребоваться переименовать.

Шаг 5. Создание файла .ico

• Выберите приложение, которое лучше всего соответствует потребностям и навыкам художников. Помните, что значки, используемые в продукте доставки, должны быть созданы в инструменте, который был приобретен или лицензирован. Это означает, что пробные версии нельзя использовать.
• Оба продукта, перечисленные ниже, были использованы дизайнерами, которые создали значки для Windows Vista, и каждый предлагает возможность экспортировать в Adobe Photoshop CS.
  • Gamani Gif Movie Gear: Создание файла .ico
  • Мастерская значков Axialis: создание файла .ico
• Visual Studio не поддерживает значки Windows Vista (не поддерживает альфа-канал или более 256 цветов), поэтому его использование не рекомендуется.
• Файлы значков (.ico формата) должны содержать 4-разрядные и 8-разрядные версии, а также 24-разрядную и альфа-версию.
• Сохраните файлы в виде значка Windows (.ico)независимо от того, какую программу создания значков вы хотите использовать.
• Некоторые значкографические ресурсы могут на самом деле быть растровыми полосами, которые также требуют альфа-канала (например, для панелей инструментов) или .png файлы, сохраненные с прозрачностью. Не все обязательно .ico формате; Проверьте, какой формат поддерживается в коде.

Шаг 6. Оценка

• Посмотрите на все размеры.
• Посмотрите на семью вместе, чтобы оценить сходство семьи, оптический баланс и различие.
• Посмотрите на контекст, чтобы оценить относительные весы и видимость (убедитесь, что он не доминирует).
• Рассмотрим случаи, которые не могут использоваться сейчас, но могут быть в ближайшем будущем. Может ли этот значок быть аннотирован или иметь наложение?
• Посмотрите на код.

Значки в контексте представлений списка, панелей инструментов и представлений дерева

Представления списка

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

  

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

Заметка: Для файлов без визуального содержимого не используйте эскизы. Вместо этого используйте традиционные значки символьного файла с представлением объекта и соответствующим приложением или типом.

Панели инструментов

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

В приведенном выше примере оптический баланс еще не достигнут.

Попробуйте итерации в контексте.

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

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