<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icons-and-artwork" xml:lang="ru">

  <info>

    <credit type="author">

      <name>Алан Дэй (Allan Day)</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Якуб Штайнер (Jakub Steiner)</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Выбор и создание значков.</desc>   

  </info>

<title>Icons and artwork</title>

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

<section id="using-icons">

<title>Using icons in your user interface</title>

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

<list>

<item>
Используйте только широко распространённые значки. Если вы не можете подобрать подходящий значок, используйте вместо него текстовую метку.

<list>

<item>
При выборе значков следуйте устоявшимся соглашениям об использовании значков. Если сомневатесь, посмотрите, какие значки используются в других приложениях.
</item>

<item>
Подумайте какие значки подходят в контексте использования вашего приложения, пользователи специализированных приложений часто также знакомы с символическими обозначениями, используемыми в соответствующей предметной области.
</item>

</list></item>

<item>
Помните, что некоторые значки используются только вместе со значками такого же типа. Например, значок «Стоп», который чаще всего представлен в виде квадратика, может быть неправильно растолкован, если он используется изолировано, без дополнительных медиа-кнопок (воспроизведения, паузы, перемотки и т. д.). Или например значок с изображением минуса, который используется для удаления элементов из списка, также может быть неправильно понят, если рядом нет значка с изображением плюса.
</item>

</list>

</section>

<section id="stock-icons">

<title>Choosing stock GNOME icons</title>

GNOME предоставляет полный набор стандартных значков. Старайтесь использовать стандартные значки, создавайте собственные значки только в крайнем случае.

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

Для поиска рекомендуемых значков можно воспользоваться браузером значков GTK+.

<section id="color-vs-symbolic">

<title>Color vs. symbolic icons</title>

GNOME 3 предоставляет два набора значков: цветных и монохромных.

Цветные значки используются для:

<list>

<item>
обозначения устройств;
</item>

<item>
обозначения типов файлов;
</item>

<item>
значков приложений.
</item>

</list>

Все прочие значки должны быть монохромными. Кроме того, монохромные значки должны всегда использоваться для:

<list>

<item>
кнопок;
</item>

<item>
списков;
</item>

<item>
поле ввода;
</item>

<item>
полупрозрачного фона (значки используются в качестве элементов управления мультимедиа и переходом в полноэкранный режим).
</item>

</list>

</section>

</section>

<section id="application-icons">

<title>Application icons</title>

Каждое приложение должно иметь свой собственный значок, являющийся визитной карточкой приложения. Значок — это первый визуальный элемент, с которым встречается пользователь. В разделе «<link xref="application-basics">Что такое приложение</link>» подробно объясняется, что такое приложение, и когда у него должен быть свой собственный значок.

Because application icons are presented at larger sizes, legacy Tango styled 48x48 px or SVG icons no longer suffice (lacking detail). It is essential your application has a 256x256 px icon. With the advent of high-DPI displays, a 512x512 px variant is recommended.

<media type="image" mime="image/png" src="figures/icons/sizes.png"/>

While not as critical, there are still areas where application icons are presented at a small size. To keep the icon sharp and well defined, a specific rendering is required to sizes of 48x48 px, 32x32 px, 24x24 px and 16x16 px. Many GNOME icons also ship a 22x22 px size for legacy reasons, but that isn’t required.

<media type="image" mime="image/png" src="figures/icons/sizes-small-24.png"/>

В значках небольших размеров приходится жертвовать детализацией и использовать линию шириной в 1 пиксел для создания силуэта объекта.

В разделе «Создание цветных значков» вы найдёте дополнительную информацию о создании значков для приложений.

</section>

<section id="custom-symbolic-icons">

<title>Custom symbolic icons</title>

Symbolic icons have a simple form and are drawn within a 16x16 pixel grid. They are then programmatically scaled and colored within the user interface itself.

<list>

<item>
При поиске метафоры для значка определите её главное свойство, сосредоточьтесь на том, что может выразить данную идею. Например, при описании действия, выполняемого над изображением, не нужно использовать его метафору в каждом значке. Вместо этого используйте метафору действия: повернуть, выровнять, отметить и т. п.
</item>

<item>
Избегайте использования перспективы в символических значках, используйте ортогональную сетку.
</item>

<item>
Фигуры со сплошной заливкой быстрее воспринимаются зрительной системой, чем контурные фигуры.
</item>

<item>
Символические значки окрашиваются во время исполнения, чтобы их цвет соответствовал контексту (также как и текст). Не используйте полупрозрачность и дизеринг для передачи теней.
</item>

<item>
Если метафора имеет противоположный смысл, используйте инвертирование цветов. Например, эффект блика на линзе включён, если он светлее, чем линза.
</item>

</list>

<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>

<section id="size-and-grid">

<title>Размер и сетка</title>

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

</section>

</section>

<section id="custom-full-color-icons">

<title>Custom full-color icons</title>

Цветные значки представлены наборами различных размеров.

<section id="perspective">

<title>Перспектива</title>

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

</section>

<section id="palette">

<title>Палитра</title>

При создании полноцветных приложений и значков устройств используйте цветовую палитру Tango.

Жёлтый

<media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/>

Сливовый

<media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/>

Оранжевый

<media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/>

Красный

<media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/>

Коричневый

<media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/>

Серый

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/>

Зелёный

<media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/>

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/>

Синий

<media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/>

Это основные цвета, которые можно использовать при создании значков. Вы также можете использовать различные оттенки этих цветов. Палитра Tango предустановлена во многих популярных свободных графических пакетах.

</section>

</section>

<section id="see-also">

<title>See also</title>

<link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Руководство по значкам в стиле Tango</link>

</section>

</page>