Иконки приложений в OS X Yosemite: подробный обзор

В прошлом месяце компания Apple представила новую OS X Yosemite, которая получила существенные визуальные новшества вслед за iOS 7. Купертиновцы добавили в систему эффекты размытия и полупрозрачности, сделали интерфейс более плоским, обновили системный шрифт и иконки.

Новые значки в док — моё излюбленное обновление в Yosemite. Первым делом люди хотят обсудить внешний вид, но уже существует немало сравнений иконок Mavericks и Yosemite. Значки стали более опрятными, потеряли блеск, но при этом стали ярче и сохранили некоторые элементы скевоморфизма. Думаю, иконки Finder и настроек просто прекрасны, значок Safari выглядит лучше, чем на iOS, а иконки калькулятора, игрового центра и FaceTime выглядят ужасно.

Отлично. Давайте двигаться дальше.

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

Док

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

Фигуры и сетка

Дизайнеры Apple переписали систему значков для Yosemite. Существует три основные фигуры, используемые для создания иконок: круг, квадрат и наклонный прямоугольник. Очевидно, Apple отклоняется от этой системы в некоторых местах, но это явно не бросается в глаза. Чтобы лучше понять эти формы, я соединил их с сеткой иконок из iOS 7. Я не сдвигал фигуры, поэтому они находятся на правильных местах.

Я не удивился тому, что круг и квадрат четко вписался в контуры. Теперь давайте посмотрим на сетку вместе с настоящим значком. Для лучшей наглядности я уменьшил непрозрачность иконок.

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

Вы можете заметить, что значок настроек немного меньше ширины сетки. Apple действительно использует два размера для квадрата. Настройки и Finder имеют одну ширину, а терминал и мониторинг системы — другую.

На иконке App Store буква «А» немного выходит за установленные границы, имея менее строгую форму, чем на книге. Наклонный прямоугольник заслуживает особого внимания, так как это будет самый распространённый тип значков для сторонних программ.

Если вы начали вращать прямоугольник, нарисованный в старой версии системы, то вам все равно придется исказить его в перспективе, чтобы соответствовать форме. В Yosemite достаточно добавить ложной глубины в виде страниц книги или тени. Значки в новой системе проще и для пользователя, и для художника. Это трудно описать, но изображение выше помогает проиллюстрировать разницу. Для таких иконок нет необходимости в 3D полке.

До WWDC 2014 было много спекуляций на тему значков в Yosemite. Предполагалось, что все они будут выглядеть в виде эллипсов или окружностей. К счастью, это оказалось не так. Думаю, дизайнеры Apple проделали огромную работу для создания единого стиля значков, оставляя возможность разработчикам создавать свои уникальные варианты.

Я адаптировал сетку iOS 7, чтобы создать обновлённую сетку для Yosemite:

Иерархия фигур

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

Круг

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

Квадрат

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

Наклонный прямоугольник

Такие значки всегда были отличительной чертой OS X. Наклонный прямоугольник будет самой используемой формой из всех упомянутых. Эти иконки относятся к приложениям, помогающим выполнить какую-либо работу. Они имеют наибольшую гибкость в вариантах рисования, поэтому будут лучше представлять цель программы своим неповторимым обликом.

Эффекты освещения и материалы

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

Крейг Федериги назвал новую полку для дока полупрозрачным материалом, когда Apple представила Yosemite. Многие решили, что это простое размытие и эффект прозрачности. Однако, всё действительно выглядит так, будто создано из реального материала, сохраняя при этом более плоский вид. Мы можем прослеживать эту идею во многих иконках. Например, металлические края имеют значки терминала, системных настроек и мониторинга системы.

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

Сфера слева сделана не из светоотражающего материала. Однако, вы всё равно можете увидеть оранжевые тени, оттенки зелёного, жёлтого и коричневого, отражённые на сфере. Именно так себя ведут некоторые «плоские» объекты в Yosemite.

Сфера справа сделана из хрома, поэтому отражает происходящее вокруг подобно зеркалу. Это похоже на изображение металлических объектов в Yosemite. В системе они представляются алюминиевыми, имея из-за этого более рассеянный и тонкий эффект отражения.

Именно такие тонкие детали в иконках OS X Yosemite прослеживаются повсюду.

Ваша очередь

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

Объединение всех иконок с определенными фигурами имеет смысл. Однако, не все приложения будут или должны соответствовать этому принципу. Сторонние значки очень легко заметить, поэтому не забывайте про угол наклона, освещение и общий размер. Теперь вы можете начать работу над своим собственным значком для OS X Yosemite! В качестве отправной точки можете использовать PSD файлы с фигурами и сеткой, созданные мной.

via Martiancraft