Глава 5 — Рекомендации по созданию значков
Красивые, интересные значки — существенная часть опыта взаимодействия с Мак ОС X. Будучи далеко не только декоративными, значки играют неотъемлемую роль в обеспечении связи с пользователями.
Каждое приложение должно содержать несколько вариантов значков приложения, которые будут отображаться в Файндере и других средах. Многим приложениям также нужно иметь дополнительные значки, такие как значки панели инструментов и значки документов. При работе в Мак ОС Х все значки должны быть тщательно продуманными, информативными и доставляющими эстетическое удовольствие.
О видах и семействах значков приложений
Приложения классифицируются по ролям — пользовательское приложение, программная утилита и т.п. — и каждая роль ассоциируется с узнаваемым стилем, или видом значка. Вид значка помогает определить пользователям, что можно сделать с приложением, прежде, чем они запустят его. Вы можете увидеть несколько разных видов значков, представленных в Доке.
[Изображение]
Легко можно выделить два вида значков — это пользовательские приложения и утилиты. Обычно значки пользовательских приложений красочные и манящие, в то время, как значки утилит имеют более строгий вид. В качестве примера, сравните яркость красок, используемых в значках пользовательских приложений (изображенных в верхнем ряду рисунка ниже) с серой окраской значков утилит (изображенных в нижнем ряду).
[Изображение]
Семейство значков — это набор значков, которые используют одинаковые графические элементы. Приложение может создать семейство значков, чтобы помочь пользователям определить принадлежность файлов и других объектов к данному приложением. Например, айТюнс использует внешний стиль своего значка в значке плагина:
[Изображение]
и в значке плейлиста:
[Изображение]
Советы по разработке значков
Для лучших результатов заручитесь поддержкой профессионального графического дизайнера. Опытный графический дизайнер поможет вам проработать общий визуальный стиль для вашего приложения и использовать этот стиль для всех используемых в нем значков.
Советы в этом разделе помогут вам разработать великолепные значки приложения, но многие из них также могут быть использованы для разработки других типов значков, таких как значков панели инструментов.
Придавайте вашим значкам приложения реалистичную, уникальную форму. Значки приложений в Мак ОС Х должны иметь форму объектов, которые они изображают, включая, если это применимо, контуры. Уникальное очертание фокусирует внимание на изображаемом объекте и позволяет пользователям быстрее распознать его даже при беглом взгляде.
Если необходимо, вы можте использовать округлые формы, чтобы объединить набор изображений. Однако, избегайте использования формы "округлая плитка" , которая ассоциируется у пользователей со значками приложений iOS.
Если у вас есть значок приложения iOS, не используйте его. Если вы разрабатываете под Мак ОС Х версию приложения, существующего под iOS, вы не должны использовать значок приложения iOS. Хотя вам, конечно, хочется, чтобы пользователи узнавали ваше приложение, вам не хочется, чтобы неявно читалось, что ваше приложение не адаптированно под окружение Мак ОС Х. Начните с переосмысления того, как вы используете изображения и метафоры в вашем значке приложения iOS. Затем удалите контур округлого прямоугольника из значка приложения iOS и сфокусируйтесь на главном его изображении. Например, если ваш значок приложения iOS изображает дерево внутри треугольника, используйте само это дерево как значок приложения Мак ОС Х.
Используйте универсальные образы, которые легко опознаются людьми. Избегайте концентрации на вторичных аспектах элемента. Например, в качестве значка для почты деревенский почтовый ящик будет, скорее всего, менее узнаваемым, чем почтовая марка.
Стремитесь к простоте. В частности, избегайте включения в ваш значок большого количества изображений. Постарайтесь использовать один объект, который наиболее полно выразит сущность вашего приложения.
Используйте цвета и тени так, чтобы помочь вашему значку лучше передать свое назначение. Не добавляйте цвета только для того, чтобы сделать значок более насыщенным. Также учтите, что мягкие градиенты обычно воспринимаются лучше, чем резкие наброски цветами. (Обратите внимание, что значки боковой панели и значки кнопок панели инструментов должны быть бесцветными; более детальную информацию смотрите в главах "Проектирование значков панели инструментов" (страница 94) и "Проектирование значков боковой панели" (страница 97).)
Тени придают объектам объем и реализм. Также они помогают связать элементы значка так, чтобы они не выглядели как коллаж.
Используйте для вашего значка правильную перспективу. Вы, конечно, хотите, чтобы ракурс проекции вашего значка соответствовал ракурсу проекции других значков такого же вида. Например, значок пользовательского приложения должен выглядеть так, словно оно лежит на столе напротив вас, в то время как большинство значков приложений утилит используют прямую перспективу. Чтобы узнать больше о различных ракурсах иконок, смотрите главу "Использование перспективы и текстур для отражения реальности" (страница 90). Несмотря на то, какая перспектива является подходящей для вида вашего значка, всегда используйте только один источник света, расположенный надо значком.
В общем случае избегайте использования абстрактных символов или волнистых линий, подразумевающих текст. Если вы хотите отобразить текст на вашем значке, но не хотите привлекать внимание к самим словам, возьмите актуальный текст и сделайте его сложным для прочтения, уменьшив или замылив его. Например, сложно прочесть текст в значке приложения TextEdit, если не увеличить его размер. Хотя текст в этом значке имеет смысл, пользователям нет необходимости прочесть его, чтобы понять, что TextEdit — приложение для редактирования текста.
В общем случае используйте не фотографию, а идеализированную версию объекта. Хотя использование фотографии (или скриншота) в значке приложения может оказаться приемлемым, чаще всего лучше усилить реалистичность художественным путем. Создание идеализированной версии поможет вам подчеркнуть те аспекты объекта, на которые вы хотели бы обратить внимание пользователей.
Если ваше приложение обладает хорошо узнаваемым интерфейсом, вместо того, чтобы использовать в значке приложения скриншот, попробуйте сделать доведенный до совершенства образ приложения. Создание улучшенной версии интерфейса особенно важно в том случае, если большая версия значка может быть принята за фактический интерфейс приложения.
Замечание: если значок приложения отображает то, что, фактически, предшествует тому, что пользователи увидят, когда запустят приложение, он должен использовать прямую перспективу, взгляд "напротив стены". Имеет смысл использовать такой ракурс, потому что пользователи никогда не увидят интерфейс таким, словно он расположена на столе напротив них.
Избегайте использования элементов интерфейса Аква в ваших значках. Вам бы не хотелось, чтобы пользователи перепутали ваши значки с элементами интерфейса Мак ОС Х.
Не используйте изображения продукции Эпл в качестве значков. Символы, которые изображают продукцию Эпл, защищены авторским правом и не должны использоваться в значках. Вообще говоря, это хорошая идея — отказаться от использования в качестве значков любых определенных моделей устройств, так как их внешний вид часто изменяется, и значки, изображающие их, могут выглядеть устаревшими.
Не используете в своем интерфейсе системные значки Мак ОС Х. Пользователей могут сбить с толку разбросанные по всей системе одинаковые значки со слегка разными значениями.
Используйте для значка приложения .icns формат файла. Для начала, создайте в графическом редакторе изображение формата PNG с указанием необходимого значения альфа канала. Затем, сделайте преобразование этого .png файла, используя приложение Icon Composer, расположенное в /Developer/Applications/Utilities (устанавливается вместе с инструментами разработки Xcode; о том, как правильно установить эти инструменты, смотрите Инструменты разработки). Существуют приложения сторонних производителей, которыми также можно выполнить это преобразование. Обратите внимание, что .icns формат файла подходит только для значков приложения и значков документов. Этот формат не подходит для использования в качестве других типов значков в вашем приложении. (Чтобы больше узнать о создании значков документов для вашего приложения, смотрите главу "Проектирование значков документов" (страница 99).)
Использование перспективы и текстур для отражения реальности
Для того, чтобы передать черты объектов в реальном мире, в разных видах значков используются разные углы и тени. Важно разобраться, какой вид значка какому типу перспективы соответствует, чтобы значки смотрелись на своем месте.
Разные углы обзора достигаются путем изменения расположения воображаемой камеры, которая снимает значок. Источник света, за счет которого проявляются тени, всегда остается расположенным над объектом.
Значок приложения изображает объект так, словно тот располагается перед вами на столе.
[Изображение]
Значки утилит изображены так, словно они расположены на полке перед вами. Плоские объекты отображаются так, словно позади них находится стена. Тень должна быть за обхектом.
[Изображение]
Трехмерные объекты, такие как ракета, выглядят более реальными, когда они расположены на поверхности. Значок, изображающий ракету, должен изображать ее так, словно она расположена на полке. Тень должна быть под ракетой.
[Изображение]
Перспектива значков панели инструментов также должна быть прямой, словно объект находится на полке перед вами. Тень должна быть под объектом. (За более подробной информацией по проектированию значков панели инструментов смотрите "Проектирование значков панели инструментов" (страница 94).)
[Изображение]
Точно изображайте реальные сущности. Значки, которые отображают реальные объекты, должны выглядеть так, словно они сделаны из реальных материалов и обладают действительной массой. Реалистичные значки должны точно воспроизводить такие характеристики, как ткань, стекло, бумагу и металл, и передавать вес и восприятие объекта.
Используйте прозрачность только тогда, когда в этом есть смысл. Прозрачность в значке поможет изобразить стекло или пластик, но сделать это убедительно может оказаться не так уж и просто. В то же время, например, вы никогда не увидите прозрачное дерево, поэтому не делайте этого в значке. (Некоторые рекомендации по работе с прозрачностью в значке приложения смотрите в разделе "Использование технологии Cover Flow" (страница 93).)
[Изображение]
Масштабирование изображения
При работе над созданием значка приложения вам, скорее всего, прийдется потратить некоторое время на масштабирование изображения под различные размеры. Советы этого раздела помогут сократить время на процесс масштабирования и добиться лучших результатов.
Чтобы быть уверенным, что ваш значок приложения будет прекрасно смотреться в любом месте, необходимо создать исходные изображения под каждое из следующих разрешений:
● 1024 x 1024 пикселя
● 512 x 512 пикселей
● 256 x 256 пикселей
● 128 x 128 пикселей
● 32 x 32 пикселя
● 16 x 16 пикселей
Если ваш подход: начать с большого по размеру оригинального изображения и постепенно уменьшать его до нужных размеров, то в этом случае особенно удобным будет выбрать размер оригинала таким, чтобы он был кратен нужным размерам значка. Если, также, при работе над оригиналом изображения вы используете правильный размер сетки в редакторе изображений, при дальнейшей обработке вам проще будет сделать четкой каждую версию значка меньшего размера и сократить время на их ретуширование и придание им четкости.
Например, чтобы создать значки в рекомендованных выше разрешениях, для начала создайте оригинальное изображение размером 1024 x 1024 пикселя. При создании оригинала установите в редакторе изображений сетку в 8 x 8 пикселей. Это означает, что каждый блок сетки имеет размер 8 x 8 пикселей и представляет один пиксель в значке размера 128 x 128 пикселей. После того, как вы подготовите оригинальное изображение, "сожмите" его по размерам сетки и придайте ему законченный вид, убрав полу-пиксели и размытости, которые могут возникнуть в результате масштабирования.
Хотя 8ми-пиксельная сетка хорошо подходит и для создания значка размером 512 x 512 пикселей, точность изображения можно повысить используя 2х-пиксельную сетку при создании оригинального изображения.
Если вас не удовлетворяет результат масштабирования изображения до размеров 32 x 32 пикселя и 16 x 16 пикселей, вы можете просто перерисовать его для этих размеров. Если вы решите поступить именно так, то выбор подходящей сетки по прежнему может избавить вас от лишней работы. Например, использование 32х-пиксельной сетки при создании оригинального изображения размером 1024 x 1024 пикселей поможет при создании значка размером 32 x 32 пикселя, а 64х-пиксельная сетка — при создании значка размером 16 x 16 пикселей.
Создавая версию значка размером 1024 x 1024 пикселей, работайте с ней как с оригиналом самой себя. В частности, не нужно создавать версию размером 1024 x 1024 пикселей, растягивая каждый пиксель версии значка меньшего размера. Избегайте неразборчивых черт и "векторизированного" вида в значках. В общем случае, большие значки должны быть более качественной проработкой детализации изображения размером 128 x 128 пикселей, что означает:
● Более насыщенные текстуры
● Больше деталей
● Больше реализма
Например, версия значка приложения Адресная книга размером 128 x 128 пикселей использует на обложке мягкие градиенты и тонко намекает на отдельные страницы в нижней части книги:
[Изображение]
Сравните версию значка Адресной книги размером 128 x 128 пикселей с версией 512 x 512 пикселей, которая добавляет реализма в деталях, таких, как кожаную отделку обложки и переплета и отчетливые очертания страниц:
[Изображение]
Использование великолепной технологии Cover Flow
При работе Файндера в режиме Cover Flow, значки располагаются на хорошо отражающей поверхности с черным фоном. Поэтому при создании значка вам необходимо учитывать следующее:
● Если ваш значок отбрасывает тень, то она должна быть полностью черная.
Если падающая тень содержит серые тона, то серый цвет на черном фоне придаст тени эффект свечения.
● Если ваш значок содержит черные отражающие поверхности, такие как стекло или металл, добавьте небольшое внутренне свечение по краям, чтобы выделить значок на черном фоне.
Если вы не добавите свечения для подчеркивания краев значка, может оказаться, что он сольется с черным фоном режима Cover Flow.
● Избегайте использования высоких значений альфа канала для важных частей вашего значка (что означает большую прозрачность), особенно в нижней половине значка. Области со слишком высоким значением альфа канала могут оказаться обрезанными.
В режиме Cover Flow Файндер распологает значки так, чтобы они располагались на одном уровне. Чтобы сделать это выравнивание Файндер начинает с нижней границы значка искать достаточно непрозрачные пиксели. Если нижняя часть значка довольно прозрачная, Файндер игнорирует прозрачные пиксели до тех пор, пока не найдет первый непрозрачный. Файндер использует этот непрозрачный пиксель, чтобы определить выравнивание значка по отношению к общему уровню, и может отсекать прозрачные пиксели ниже этого уровня.
В значке приложения Mail использована почтовая печать, которая выходит за границы изображения марки (пример этого значка на изображении ниже). Поскольку эта область значка обладает высоким значением альфа канала, Файндер принимает в качестве непрозрачного пикселя левый нижний угол изображения марки, отсекая часть печати, как изображено ниже.
[Изображение]
Замечание: Мак ОС Х не предоставляет программного интерфейса, поддерживающего добавление расширенного поведения cover flow в важем приложении.
Проектирование значков панели инструментов
Элементы панели инструментов предоставляют быстрый доступ к наиболее часто используемым командам (чтобы узнать больше о концепциях разработки панели инструментов, смотрите "Designing a Toolbar" (страница ХХ)). Для представления этих команд в панели инструментов нужны маленькие, недвусмысленные значки, которые пользователи будут легко выделять и запоминать.
● Используйте прямую перспективу
● Оставляйте контуры резкими и четкими
● Применяйте сглаживание
● Используйте цвета только для передачи определенного смысла
● Значки должны быть размером 32 x 32 пискелей
● Используйте формат PDF
При работе над значком кнопки рекомендуется использовать прямую перспективу, однако если для использования на панели инструментов вы берете легко узнаваемый значок из другого места интерфейса, не нужно менять его поведение или перспективу. То есть, не переделывайте под панель инструментов хорошо узнаваемый элемент интерфейса.
Проектирование значков боковой панели
Если в вашем приложении используется боковая панель (или список источников), вам необходимо подготовить значки, которые будут на ней отображаться. Например, список почтовых ящиков приложения Mail содержит разные значки, которые представляют почтовые ящики клиента, новостные ленты и напоминания.
[Изображение]
[Изображение]
Галерея значков
Великолепный значок приложения — не только прекрасный и притягивающий, но он также передает главную цель приложения и подсказки на удобство работы. Пока вы решаете, как в лучшем свете представить ваше приложение в вашем значке приложения, будет полезным обратиться к некоторым примерам удачных значков.
Значки пользовательских приложений живые и манящие, и должны сразу передавать основную цель приложения. Например, значок приложения Photo Booth ясно показывает, что это приложение позволяет пользователям делать свои снимки.
В приложении, основная цель которого — дать пользователям возможность создавать или просматривать медиа, имеет смысл использовать значок, который содержит медиа. Если это уместно, значок также может изображать инструмент, который сообщает тип задачи, которую пользователь может решить с этим приложением. Значок приложения Preview (изображенный ниже) содержит увеличительное стекло, что означает, что приложение может быть использовано для просмотра изображений. Близость увеличительного стекла к изображениям ясно передает, что функция инструмента напрямую связана с содержимым, с которым работает приложение.
В значке приложения Stickies в желтом прямоугольнике легко узнаются стикеры. В определенном смысле, стикеры сами по себе являются инструментом, так что значок не содержит ручку или другой пишущий предмет, потому что это не является необходимым, чтобы передать смысл значка.
Некоторые приложения, которые представляют предметы или хорошо известные продукты, такие как Калькулятор и QuickTime Player, проще всего узнаются по увеличенным версиям изображений или объектов самих себя. Обратите внимание, что значки этих приложений (изображенные ниже) используют прямую перспективу, потому что пользователи никогда не видят этих объектов в третьем измерении, в ракурсе "на столе".
Значки приложений утилит тяготеют к более строгим тонам, чем значки пользовательских приложений. Цвета в значках приложений утилит выцветшие, преимущественно серые и добавляются только тогда, когда требуется явно сообщить, что именно делает приложение. Например, обратите внимание на преобладание серого и подчеркнутое использование цвета в значках приложений Activity Monitor и System Information ниже.
Внимание! Этот перевод, возможно, ещё не готов.
Его статус: идёт перевод
Переведено на Нотабеноиде
http://notabenoid.org/book/21170/69909
Переводчики: Krishtalskiy, Kinday