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

Глава 5 — Рекомендации по дизайну значков

Krishtalskiy 05.09.11 в 17:37

Красивые, неотразимые значки являются фундаментальной частью пользовательского опыта Мак ОС Х. Являясь далеко не только декоративными, значки играют важную роль в общении с пользователями.

Krishtalskiy 05.09.11 в 17:48

Каждое приложение должно содержать несколько вариантов значков приложения, которые будут отображаться в Файндере и других средах. Многим приложениям также нужно иметь дополнительные значки, такие как значки панели инструментов и значки документов. При работе в Мак ОС Х все значки должны быть тщательно продуманными, информативными и доставляющими эстетическое удовольствие.

Krishtalskiy 05.09.11 в 18:01

О видах и семействах значков приложений

Krishtalskiy 05.09.11 в 17:52

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

Krishtalskiy 05.09.11 в 18:09

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

Krishtalskiy 06.09.11 в 17:33

Легко можно выделить два вида значков — это пользовательские приложения и утилиты. Обычно значки пользовательских приложений красочные и манящие, в то время, как значки утилит имеют более строгий вид. В качестве примера, сравните яркость красок, используемых в значках пользовательских приложений (изображенных в верхнем ряду рисунка ниже) с серой окраской значков утилит (изображенных в нижнем ряду).

Krishtalskiy 05.09.11 в 18:15

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

Krishtalskiy 06.09.11 в 17:33

Семейство значков — это набор значков, которые используют одинаковые графические элементы. Приложение может создать семейство значков, чтобы помочь пользователям определить принадлежность файлов и других объектов к данному приложением. Например, айТюнс использует внешний стиль своего значка в значке плагина:

Krishtalskiy 05.09.11 в 18:23

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

Krishtalskiy 06.09.11 в 17:33

и в значке плейлиста:

Krishtalskiy 05.09.11 в 18:23

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

Krishtalskiy 06.09.11 в 17:33

Советы по разработке значков

Krishtalskiy 05.09.11 в 18:24

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

Krishtalskiy 05.09.11 в 18:29

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

Krishtalskiy 05.09.11 в 18:31

Придавайте вашим значкам приложения реалистичную, уникальную форму. Значки приложений в Мак ОС Х должны иметь форму объектов, которые они изображают, включая, если это применимо, контуры. Уникальное очертание фокусирует внимание на изображаемом объекте и позволяет пользователям быстрее распознать его даже при беглом взгляде.

Krishtalskiy 05.09.11 в 18:38

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

Krishtalskiy 05.09.11 в 18:45

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

Krishtalskiy 05.09.11 в 18:55

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

Krishtalskiy 05.09.11 в 18:59

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

Krishtalskiy 05.09.11 в 19:01

Используйте цвета и тени так, чтобы помочь вашему значку лучше передать свое назначение. Не добавляйте цвета только для того, чтобы сделать значок более насыщенным. Также учтите, что мягкие градиенты обычно воспринимаются лучше, чем резкие наброски цветами. (Обратите внимание, что значки боковой панели и значки кнопок панели инструментов должны быть бесцветными; более детальную информацию смотрите в главах "Проектирование значков панели инструментов" (страница 94) и "Проектирование значков боковой панели" (страница 97).)

Krishtalskiy 05.09.11 в 19:27

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

Krishtalskiy 05.09.11 в 19:34

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

Krishtalskiy 05.09.11 в 19:46

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

Krishtalskiy 05.09.11 в 19:57

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

Krishtalskiy 05.09.11 в 20:13

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

Krishtalskiy 06.09.11 в 05:38

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

Krishtalskiy 06.09.11 в 05:43

Избегайте использования элементов интерфейса Аква в ваших значках. Вам бы не хотелось, чтобы пользователи перепутали ваши значки с элементами интерфейса Мак ОС Х.

Krishtalskiy 06.09.11 в 05:45

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

Krishtalskiy 06.09.11 в 17:12

Не используете в своем интерфейсе системные значки Мак ОС Х. Пользователей могут сбить с толку разбросанные по всей системе одинаковые значки со слегка разными значениями.

Krishtalskiy 06.09.11 в 17:16

Используйте для значка приложения .icns формат файла. Для начала, создайте в графическом редакторе изображение формата PNG с указанием необходимого значения альфа канала. Затем, сделайте преобразование этого .png файла, используя приложение Icon Composer, расположенное в /Developer/Applications/Utilities (устанавливается вместе с инструментами разработки Xcode; о том, как правильно установить эти инструменты, смотрите Инструменты разработки). Существуют приложения сторонних производителей, которыми также можно выполнить это преобразование. Обратите внимание, что .icns формат файла подходит только для значков приложения и значков документов. Этот формат не подходит для использования в качестве других типов значков в вашем приложении. (Чтобы больше узнать о создании значков документов для вашего приложения, смотрите главу "Проектирование значков документов" (страница 99).)

Krishtalskiy 06.09.11 в 17:31

Использование перспективы и текстур для отражения реальности

Krishtalskiy 06.09.11 в 17:32

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

Krishtalskiy 06.09.11 в 17:41

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

Krishtalskiy 06.09.11 в 17:44

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

Krishtalskiy 06.09.11 в 17:45

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

Krishtalskiy 06.09.11 в 17:33

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

Krishtalskiy 06.09.11 в 17:48

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

Krishtalskiy 06.09.11 в 17:33

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

Krishtalskiy 06.09.11 в 17:51

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

Krishtalskiy 06.09.11 в 17:33

Перспектива значков панели инструментов также должна быть прямой, словно объект находится на полке перед вами. Тень должна быть под объектом. (За более подробной информацией по проектированию значков панели инструментов смотрите "Проектирование значков панели инструментов" (страница 94).)

Krishtalskiy 06.09.11 в 17:54

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

Krishtalskiy 06.09.11 в 17:33

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

Krishtalskiy 06.09.11 в 18:44

Используйте прозрачность только тогда, когда в этом есть смысл. Прозрачность в значке поможет изобразить стекло или пластик, но сделать это убедительно может оказаться не так уж и просто. В то же время, например, вы никогда не увидите прозрачное дерево, поэтому не делайте этого в значке. (Некоторые рекомендации по работе с прозрачностью в значке приложения смотрите в разделе "Использование технологии Cover Flow" (страница 93).)

Krishtalskiy 06.09.11 в 18:22

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

Krishtalskiy 06.09.11 в 17:33

Масштабирование изображения

Krishtalskiy 06.09.11 в 17:34

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

Krishtalskiy 06.09.11 в 18:25

Чтобы быть уверенным, что ваш значок приложения будет прекрасно смотреться в любом месте, необходимо создать исходные изображения под каждое из следующих разрешений:
● 1024 x 1024 пикселя
● 512 x 512 пикселей
● 256 x 256 пикселей
● 128 x 128 пикселей
● 32 x 32 пикселя
● 16 x 16 пикселей

Krishtalskiy 06.09.11 в 18:31

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

Krishtalskiy 06.09.11 в 19:07

Например, чтобы создать значки в рекомендованных выше разрешениях, для начала создайте оригинальное изображение размером 1024 x 1024 пикселя. При создании оригинала установите в редакторе изображений сетку в 8 x 8 пикселей. Это означает, что каждый блок сетки имеет размер 8 x 8 пикселей и представляет один пиксель в значке размера 128 x 128 пикселей. После того, как вы подготовите оригинальное изображение, "сожмите" его по размерам сетки и придайте ему законченный вид, убрав полу-пиксели и размытости, которые могут возникнуть в результате масштабирования.

Krishtalskiy 06.09.11 в 19:16