Mac OS X Human Interface Guidelines / Руководство по проектированию пользовательских интерфейсов для Мак ОС X: Chapter 5 — Icon Design Guidelines

Хотя 8ми-пиксельная сетка хорошо подходит и для создания значка размером 512 x 512 пикселей, точность изображения можно повысить используя 2х-пиксельную сетку при создании оригинального изображения.

Krishtalskiy 06.09.11 в 19:19

Если вас не удовлетворяет результат масштабирования изображения до размеров 32 x 32 пикселя и 16 x 16 пикселей, вы можете просто перерисовать его для этих размеров. Если вы решите поступить именно так, то выбор подходящей сетки по прежнему может избавить вас от лишней работы. Например, использование 32х-пиксельной сетки при создании оригинального изображения размером 1024 x 1024 пикселей поможет при создании значка размером 32 x 32 пикселя, а 64х-пиксельная сетка — при создании значка размером 16 x 16 пикселей.

Krishtalskiy 06.09.11 в 19:23

Создавая версию значка размером 1024 x 1024 пикселей, работайте с ней как с оригиналом самой себя. В частности, не нужно создавать версию размером 1024 x 1024 пикселей, растягивая каждый пиксель версии значка меньшего размера. Избегайте неразборчивых черт и "векторизированного" вида в значках. В общем случае, большие значки должны быть более качественной проработкой детализации изображения размером 128 x 128 пикселей, что означает:

Krishtalskiy 06.09.11 в 19:39

● Более насыщенные текстуры

Krishtalskiy 06.09.11 в 19:40

● Больше деталей

Krishtalskiy 06.09.11 в 19:40

● Больше реализма

Krishtalskiy 06.09.11 в 19:40

Например, версия значка приложения Адресная книга размером 128 x 128 пикселей использует на обложке мягкие градиенты и тонко намекает на отдельные страницы в нижней части книги:

Krishtalskiy 06.09.11 в 19:44

[Изображение]

Krishtalskiy 06.09.11 в 19:27

Сравните версию значка Адресной книги размером 128 x 128 пикселей с версией 512 x 512 пикселей, которая добавляет реализма в деталях, таких, как кожаную отделку обложки и переплета и отчетливые очертания страниц:

Krishtalskiy 06.09.11 в 19:47

[Изображение]

Krishtalskiy 06.09.11 в 19:26

Использование великолепной технологии Cover Flow

Krishtalskiy 06.09.11 в 19:49

При работе Файндера в режиме Cover Flow, значки располагаются на хорошо отражающей поверхности с черным фоном. Поэтому при создании значка вам необходимо учитывать следующее:

Krishtalskiy 06.09.11 в 19:55

● Если ваш значок отбрасывает тень, то она должна быть полностью черная.

Krishtalskiy 06.09.11 в 19:58

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

Krishtalskiy 06.09.11 в 20:00

● Если ваш значок содержит черные отражающие поверхности, такие как стекло или металл, добавьте небольшое внутренне свечение по краям, чтобы выделить значок на черном фоне.

Krishtalskiy 06.09.11 в 20:03

Если вы не добавите свечения для подчеркивания краев значка, может оказаться, что он сольется с черным фоном режима Cover Flow.

Krishtalskiy 06.09.11 в 20:05

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

Krishtalskiy 06.09.11 в 20:07

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

Krishtalskiy 06.09.11 в 20:17

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

Krishtalskiy 06.09.11 в 20:24

[Изображение]

Krishtalskiy 06.09.11 в 20:08

Замечание: Мак ОС Х не предоставляет программного интерфейса, поддерживающего добавление расширенного поведения cover flow в важем приложении.

Krishtalskiy 06.09.11 в 20:27

Проектирование значков панели инструментов

Krishtalskiy 06.09.11 в 20:28

Панель инструментов дает пользователям легкий доступ к наиболее часто используемым командам (чтобы узнать больше о концепции проектирования панели инструментов смотрите "Designing a Toolbar" (страница ХХ)). Чтобы представить эти команды в панели инструментов, необходимы однозначные значки, которые пользователи смогут легко различать и запоминать.

Krishtalskiy 06.09.11 в 21:42