Дизайн приложения погоды для iOS в Иллюстраторе

Автором этого урока является  — векторный энтузиаст, продвигающий идеи работы с вектором в массы. Родом с Багамских островов (остров Нассау) и активный пользователь ДевиантАрта. В этом уроке Крис расскажет и покажет, как создать адаптированный под ретина экраны дизайн приложения погоды. В этом ему поможет Адобе Иллюстратор, несколько рабочих областей и типографика. Дизайн очень простой и минималистичный. Перевод урока подготовил Д. Веровски.

Скачать шрифты можно здесь:

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

Настраиваем документ

Мы будем использовать несколько рабочих областей для разных видов приложения. Что бы начать работу, нам нужно создать документ с разрешением мобильного устройства. Так как мы работаем на iOS, мы будем делать дизайн для iPhone 5, экран которого немного длиннее чем у предыдущих iPhone-ов. Работать с большим разрешением проще, ведь дизайн всегда можно масштабировать  для других устройств. Размер нашего документа составит 640 на 1136 pt (не пиксели).

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

chris-weather-1-1

Цветовой профиль

После создания документа нам нужно настроить цветовые профили. Откройте Edit > Assign Profile и отключите все цветовые профили. Когда Xcode обрабатывает графику для приложения, он обнуляет любые цветовые профили ассоциируемые с исходниками. Поэтому наилучшим решением будет удалить любые профили из документа и регулярно тестировать дизайн на мобильных экранах, чтобы быть уверенным в точном отображении цвета.

chris-weather-1-2

Создаем задний фон

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

chris-weather-2-1

После нарисуйте окружность 30 на 30 pt и залейте её указанным ниже цветом.

chris-weather-2-2

Скопируйте созданную окружность позади первой. Увеличьте её до 2300 на 2300 pt и понизьте невидимость Opasity до 0%

chris-weather-2-3

Выберите обе окружности. Откройте Object > Blend > Blend Options… и выберите Specific Steps с 30-ю шагами. Затем примените блендер Object > Blend > Make

chris-weather-2-4

Отцентрируйте новый объект по верхней части рабочей области.

chris-weather-2-5

Продублируйте прямоугольник и разместите его над градиентной окружностью. Теперь выделите оба объекта и создайте маску Object > Clipping Mask > Make. Так нам не придется беспокоиться о том, что градиент пересекается с другими рабочими областями.

chris-weather-2-6

Чтобы разнообразить приложение мы добавим небольшую смену заднего фона, в зависимости от температуры. Задний фон, который мы уже сделали для «жары». Этот задний фон мы продублируем и поменяем цвета на более «холодные».

chris-weather-2-7

Добавляем текстовую информацию

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

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

Для начала напишем дату. Выберите инструмент Type Tool (T) и вбейте день недели. Я вбил вторник “Tuesday” шрифтом “Mission Gothic”  с гарнитурой  “Thin”. Сам текст будет белым. Но мы добавим эффект тени Drop Shadow чтобы текст выделялся на заднем фоне. Текст поместим по центру на расстоянии 20 пикселей от верхнего края. Просто поместите текст на самый верх к кромке рабочей области, затем удерживая SHIFT нажмите несколько раз стрелочку ВНИЗ.

chris-weather-3-1

Выбираем инструмент Type Tool (T) чтобы создать температурное обозначение. Я бы хотел, чтобы цифра была выровнена по центру, а знак температуры сдвинут вправо. Поэтому вместо того чтобы центрировать шрифт из панели Paragraph я оставлю её выровненной по левой стороне и напечатаю цифру, которая будет нашим якорем. Шрифт “Maven Pro”. После того как вы напечатаете цифру и выровняете её по центру и по верхней части рабочей области. После выделяем текст и в меню Transform > Move… сдвигаем его на 210pt вниз. Теперь выделите шрифт и добавьте знак температуры.

chris-weather-3-2

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

Теперь добавим местонахождение. Вбейте свое местоположения, для меня это город Нассау, Багамы. Для контраста между городом и страной мы применим разное форматирование текста. Город напишем регулярным, а страну тонким шрифтом “Mission Gothic”. Что касается расположения, как я говорил ранее, мне нравится идея значения температуры по центру приложения. Все остальное будет выровнено по левой стороне относительно температуры. Поэтому я вручную выравняю надпись по левому краю температуры и подвину надпись ниже на 20pt.

(ред. Хронофага: На наш взгляд не самое разумное решение. Город из шести букв, конечно вписывается в данный дизайн, а Ekaterinburg, RUS или Sankt-Peterburg, RUS поломают радужную картину дизайна. И это с учетом того, что страна сокращена.  Надпись придется либо переносить, либо организовывать вокруг неё «специальное решение», чтобы уменьшалось при большом количестве символов.  Редакция Хронофага считает, что в контексте подобного подхода разумно пожертвовать размером кегля. )

chris-weather-3-3

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

Мне нравятся цифры в шрифте “Maven Pro”, поэтому я продолжу работу именно с ним. Для цифр мы применим гарнитуру “Medium”, для характеристики применим “Mission Gothic” с тонким начертанием “Thin”. Кроме этого мы применим к характеристике надстройку “Small Caps”, то есть текст будет написан заглавными буквами. Настроить это можно на панели Character.

chris-weather-3-4

Иконки для приложения

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

Инструментом Type Tool (T) напечатайте знак градуса. Размер не имеет значения, мы все равно будем подгонять шеип под размер иконок. Правый клик по фигуре и из меню выбираем Create Outlines, чтобы конвертировать шрифт в кривые. Теперь выбираем Direct Selection Tool (A) и выделяем маленькую внутреннюю фигуру чтобы удалить её. Окантовку мы применим чуть позже. Теперь настроим высоту и ширину фигуры так, чтобы они были равны друг другу. Нам понадобится точность, когда мы будем добавлять внутренние элементы.

chris-weather-4-1

Мы будем использовать эту фигуру снова и снова, на случай если вы вдруг потеряете её во время работы. Ну а пока, создадим иконку для демонстрации меню локации. Сделайте копию фигуры и уменьшите её до 32 x 32pt. Добавьте внутреннюю окантовку 3pt.

chris-weather-4-2

Выберите инструмент Rounded Rectangle Tool и нарисуйте прямоугольник размером в  3 x 12pt, степень закругления краев настройте так, чтобы они были совершенно округлые. Продублируйте фигуру три раза и разверните так, чтобы они напоминали крест. Сгруппируйте все объекты вместе нажав CTRL+G. Наконец, примените Drop Shadow к сгруппированному объекту и разместите его на 30pt от верхнего края и левой стороны. Проверьте расстояния на мобильном устройстве.

chris-weather-4-3

Давайте скопируем фигуру окружности из иконки локации, так как все остальные иконки будут основаны на этой же фигуре. Установите её напротив элемента времени. Как вы поняли, для элемента времени мы создадим иконку часов. Сама окружность будет основой для часов, а нам останется лишь нарисовать стрелки.  Выберите инструмент Rounded Rectangle Tool и нарисуйте прямоугольник размером 10 на 4pt. Выравняйте его по центру от часов. Повторите процесс, только на этот раз нарисуйте элемент 4 на 12 pt. Соедините элементы в группу CTRL+G и примените к ним эффект тени Drop Shadow

chris-weather-4-4

Продублируйте окружную фигуру снова и выравняйте её с элементом ветра. С этой иконкой мы постараемся добиться эффекта, который сам по себе подскажет пользователю приложения, в какую сторону дует ветер. Мы нарисуем стрелочки, которые будут менять местоположение в зависимости от направления ветра. Начнем с основы стрелки, элемента, который мы нарисуем инструментом Rounded Rectangle 4 на 9 pt. Расположим его по центру иконки. После нарисуем идеальный квадрат тем же самым инструментом 12 на 12 pt и удалим один из углов. Закройте разорванные пути и разверните элемент так, что бы он образовал указательную часть стрелки.

Когда стрелка будет закончена, сгруппируйте элементы и создайте 7 копий. Разверните каждую из копий в разные стороны света. То есть стрелка наверх, в правый верхний угол, в левый верхний и так далее. Так как иконка не является окружность, её нельзя будет повернуть средствами программирования, поэтому нам нужны все иконки для каждого из состояний. После того как создадите все иконки, скройте их на панели слоев, но до этого сгруппируйте и примените тень Drop Shadow.

chris-weather-4-5

Снова копируем нашу окружность  и расположим рядом с элементом Влажности. Теперь нарисуем окружность 8 на 8 pt и выравняем её по центру относительно нашей окружности иконки. После чего сдвинем эту окружность немного ниже. Выберите инструмент Direct Selection Tool (A) и выделите верхний якорь на окружности. Потяните его выше, что бы создать образ капли. Так же уменьшите векторный элемент управления якорем, что бы сбавить угол падения кривой.  Продублируйте получившуюся каплю еще два раза и расположите их с верху по краям от нижней большой капли. Сгруппируйте все элементы Group (Control + G) и примените фильтр тени Drop Shadow.

chris-weather-4-6

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

Для начала выберите инструмент Rounded Rectangle и нарисуйте фигуру 40 на 36 pt. После залейте его внутренней окантовкой 3pt. После разложите на кривые Object > Expand Appearance. Выберите инструмент Direct Selection Tool (A), выделите два верхних якоря и сдвиньте их вниз на 9 pt. Инструментом Rounded Rectangle Tool нарисуйте 2 фигуры в высоту 9pt. И отрежьте эти  фигуры от основной фигуры на панели Pathfinder о которой мы уже писали ранее. Создайте еще 2 фигуры, которые будут держателями календаря. Размер 3 на 8 pt, поместите их в вырезы. Наконец добавьте дату, группируем элементы и добавляем тень через Drop Shadow.

chris-weather-4-7

Почасовой виджет приложения

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

Выбираем инструмент Rounded Rectangle Tool и рисуем прямоугольник 165 на 250 pt, разместите его по центру в 40 pt от нижней части рабочей области. Продублируйте прямоугольник и залейте черным. Продублируйте еще раз и сдвиньте вверх на 4 пикселя. Затем примените команду Minus Front на панели Pathfinder. Понизьте невидимость до 15%.

chris-weather-5-1

Продублируйте наш белый прямоугольник снова и залейте его черным. Затем понизьте невидимость до 15%.  Рисуем новый прямоугольник 79pt в высоту и любой ширины. Сдвигаем его к верхней части фигуры, которая находится под ним. Выделяем эту фигуру и черную, которая под ним. Выбираем команду Intersect на панели Pathfinder.

chris-weather-5-2

Выбираем инструмент Type Tool (T) и печатаем температуру. Я хочу быть уверенным в том что в этом блоке хватит места для любого значения, поэтому печатаю номер 100. Шрифт “Missing Gothic” в режиме “Black”. Сам текст будет черным, с значением невидимости 15%.

chris-weather-5-3

Так как приложение предполагается на тематику погоды, значения не будут точны. Поэтому мы включим предполагаемые «от» и «до». Инструментом Type Tool (T) я создам тонкий текст в режиме “Thin”.

chris-weather-5-4

Темное меню в верхней части будет индикатором времени. Скопируйте иконку часов, которую мы создали ранее и разместите её с левой стороны меню. Можете так же скопировать текст времени. Не забудьте удалить тень Drop Shadow с этих элементов.

chris-weather-5-5

Наконец, добавьте тень Drop Shadow к самому нижнему белому прямоугольнику, после чего сгруппируйте элементы вместе. Теперь элемент можно продублировать и расположить в ряд на расстоянии в 20 пикселей друг от друга. Не забудьте переписать время для каждой новой копии.

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

chris-weather-5-6

Создаем меню местоположения

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

chris-weather-6-1

Так как в целом мы создаем флэт дизайн (плоский дизайн), я не буду использовать обычные градиентные тени. Вместо этого мы применим черную однотонную заливку с невидимостью в 10%, такой же высоты, но шире на 4pt.

chris-weather-6-2

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

Выберите Rectangle Tool (M) и нарисуйте прямоугольник 640 на 100pt и выравняйте его по верху рабочей области. Примените к нему тень Drop Shadow.

Снова выберите Rounded Rectangle Tool и нарисуйте прямоугольник 8 на 32 pt, залейте его черным. Продублируйте эту фигуру и разверните её так, что бы она пересекала предыдущую в форме плюса. Выберите обе фигуры и соедините через команду Unite на панели Pathfinder. Уменьшите невидимость этого элемента до 25% и выравняйте его по вертикали вместе с элементом, который мы создали до этого. Как только это сделано, сдвиньте плюс ближе к краю, так, что бы с верхней части, нижней и от края было визуально одинаковое расстояние.

Наконец выбираем Type Tool (T) и вбиваем текст «Add new location…” (Добавить новое место…). Шрифт  “Mission Gothic” в режиме “Thin” и невидимость Opacity 15%.

chris-weather-6-3

Продублируйте предыдущий прямоугольник и выравняйте его по нижней предыдущей фигуры. После настройте тень Drop Shadow.

Скопируйте поверх наш округлый прямоугольник, который мы использовали для предыдущих иконок. Вместо заливки по контуру, залейте всю фигуру черным. После уменьшите невидимость до 15%.  Скопируйте символ «+» , который мы сделали в прошлом шаге и разверните его в форме икса «х». Выравняйте его по центру окружности, затем примените к обоим фигурам Minus Front из панелей режимов Pathfinder

Теперь скопируйте текст элемента локации с главной страницы. И удалите тень Drop Shadow. Установите основной цвет — черный. Примените невидимость 25% Добавьте еще несколько значений, чтобы иметь представление о том, как будет выглядеть список при заполнении.

chris-weather-6-4

Поработаем с элементами переключателей. Эти элементы будут привязаны к нижней части меню вне зависимости от длины меню. Начнем с того что нарисуем прямоугольник 640 x 200pt и добавим тень Drop Shadow.

Инструментом Type Tool (T) напечатаем заголовки для переключателей. Один будет для автоматического обнаружения нашего местонахождения, а второй для обозначения температуры (по Цельсию или по Фаренгейту).  Оба заголовка должны уместиться в высоту 200pt.

Между заголовками нарисуем разделитель. Это можно сделать инструментом Line Segment Tool (\). Нарисуйте линию 476pt в длину. Задайте её обводку 2pt. Линия будет черной, с невидимостью в 10%

chris-weather-6-5

Чтобы нарисовать сами выключатели, мы масштабируем тот самый округлый квадрат, который мы создали ранее. Скопируйте фигуру и увеличьте её до 50pt. Залейте черным. Правый клик по фигуре и выбираем Transform > Move… подвиньте фигуру горизонтально на 80pt и нажмите копировать «Copy» вместо «ОК». Теперь у вас две фигуры.

Выберите инструмент Rectangle Tool (M) и нарисуйте прямоугольник такой же высоты как у наших округлых квадратов. Разместите его ровно по центру. Выберите все фигуры и нажмите команду Unit на панели Pathfinder. Уменьшите невидимость элемента до 15% и расположите его напротив заголовка.chris-weather-6-6

Скопируйте округлую фигуру еще раз и залейте её белым цветом. Настройте размер 40 на 40pt. Выравняйте её по левой или по правой стороне переключателя. Можете снова скопировать фигуру и разместить её же с другой стороны, что бы показать другое состояние. Слой можно отключить. Напечатайте заголовок переключателя. Сделайте это как для включения, так и для выключения. Неактивные состояния можно скрыть на панели слоев.

Наконец продублируйте все элементы для второго переключателя. Теперь займемся меню.chris-weather-6-7

Добавление меню с датой

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

chris-weather-7-1

Нарисуем прямоугольник размером 640 x 160pt и выравняем его по верхней части рабочей области. Зададим ему тень Drop Shadow.

chris-weather-7-2

Нам понадобится что-то для отображения даты числа, поэтому как и ранее, нарисуем иконку календаря. Создайте прямоугольник с округлыми краями 120 на 120pt и добавьте внутренний контур 8pt. Теперь примените разбивку Object > Expand Appearance чтобы конвертировать контур в фигуру. Инструментом Direct Selection Tool (A) выделите две верхних внутренних точки и сдвиньте их на 30pt вниз стрелками указателями на клавиатуре. Уменьшите прозрачность объекта до 15%.

chris-weather-7-3

Теперь добавьте текст на иконку. Нам нужно что бы она обозначала день недели. Это и будет нашим текстом. Сама дата будет черной с невидимостью в 15%. Шрифты “Maven Pro” средней гарнитуры Medium.

chris-weather-7-4

Наконец добавим ожидаемую температуру. Шрифт — “Mission Gothic” для цифр и “Maven Pro” для значка градуса. С правой части так же добавим предельно высокую и предельно низкую температуру.

chris-weather-7-5

Итог работы — три экрана

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

chris-weather-600