Подробный урок по дизайну приложения под iOS в Sketch: Часть 2 из 3

В этом уроке из 3 частей (я хотел разбить его на более легко перевариваемые куски) мы будем создавать скрины для выдуманного приложения под iOS под названием ‘Piece’ с функционалом «Заплати другому».

А почему бы и нет? Настал сезон творить добро!

Читайте также:

Подробный урок по дизайн приложения под iOS в Sketch: Часть 1 из 3

Подробный урок по дизайн приложения под iOS в Sketch: Часть 2 из 3

Подробный урок по дизайн приложения под iOS в Sketch: Часть 3 из 3

Перед тем, как начать, вам понадобится несколько вещей:

  • Sketch (кажется, это очевидно)
  • Iconjar
  • San Francisco Fonts
  • Icon Set
  • Unsplash It Sketch (Plugin)
  • Content Generator for Sketch (Plugin)

Как только у вас установлены все эти инструменты, можем начинать.

Экран IOS Walkthrough

Скрин IOS Walkthrough

Давайте сфокусируемся на экране Walkthrough (краткий обзор).

Для этого экрана нужно выгрузить фоновое изображение (что мы будем делать и для других экранов).

Выделите оверлей и фоновое изображение на последнем созданном нами артборде, и, удерживая Alt, перетяните его через жти 2 слоя в вашем артборде.

Как и раньше, убедитесь, что оба слоя стоят на позиции 0 по осям X и Y.

Конечно, фоновое изображение, которое нам нужно редактировать, спрятано под оверлеем. Как же это исправить?

Давайте я покажу вам несколько способов получить слой, находящийся под другим слоем:

  • Очевидный способ — выделить слой с фоновой картинкой в списке слоев (я думаю, вы уже об этом знаете).
  • Когда ни один слой не выделен, наведите курсор на артборд, и затем, удерживая Alt, кликните, чтобы выделить слой под верхним слоем.
  • Кликните правой кнопкой мыши по слоям и выберите опцию Pick Layer, чтобы выбрать ваше фоновое изображение.

1-s6i90qnIDbXiBorAavR6kg

Используйте новое изображение — перейдите в меню Unsplash It Sketch > Unsplash It или нажмите Shift + Cmd + U.

Теперь, давайте вставим стрелочку навигации и заголовок.

Продублируйте иконку стрелки, которую мы добавили на предыдущий экран, и расположите ее в 20 пикселях с левого края и в 30 пикселях с верхнего края артборда.

1-_PRx0I33YMXZyIOFB2lXog

Затем, используя ранее созданный текстовый стиль, добавьте новый заголовок, и измените текст на ‘Walkthrough’, корректно расположите его на артборде.

1-9Mmog81egdaFbyx6CW4ihg

И теперь сделаем слайды для нашего ‘walkthrough’.

Нарисуйте прямоугольник ®, 300px в ширину и 400px в высоту с радиусом границы 4. Задайте заливку прямоугольника в тоне #6C56B7.

Удерживая Alt, продублируйте слой и затем задайте ему такие настройки:

  • Width: 20px
  • Height: 380px
  • Fill Color Opacity: 40%

Вы наверняка заметили, что у нас до сих пор все 4 угла закруглены с заданным радиусом? В этом новом слое нам понадобится изменить настройки радиуса (Radius) в панели инспектора.

В поле Radius замените 4 на 0/4/4/0 — только верхний правый и нижний правый углы останутся закругленными.

1-d15KNz8D9zpAoiKOyDI15g

Продублируйте этот новый слой, отразите по горизонтали (Flip horizontally) и поместите его в самый првый край артборда.

1-VcZgCqVuMJn9HrlirPglrw

Затем выделите все 3 слоя с фигурами и в панели инспектора воспользуйтесь опцией Align Vertically.

1-EgCABoYCuWmr6d_GkmEP4w

Последуем стилю ‘Big Icon’!

В Iconjar возьмите иконку touch и перетяните ее в артборд.

При выделенной иконке увеличьте ширину до 150px и измените цвет на #FFFFFF.

1-r2DuMQv0GTV0ZhWDvOu48w

Вставьте текстовый слой (T), добавьте текст ‘Easily navigate through your daily Pay It Forward deeds’, и добавьте такие настройки:

  • Typeface: SF UI Display
  • Weight: UltraLight
  • Color: #FFFFFF
  • Size: 15
  • Alignment: Center
  • Character Spacing: 1.5

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

1-wEyaJJkIfz2z_aQYMtcI7g

Настало время добавить точечную навигацию для слайдов.

1-WsLBvFWV8TnKltFzNQxLrw

Нарисуйте круг с помощью инструмента Овал (O), 10px x 10px. Удалите заливку и измените цвет границы на #FFFFFF.

Продублируйте этот слой дважды. Для одной копии оставьте настройки оригинала, а для второй (кружок посередине) сделайте заливку и контур цвета #6C56B7.

Выделите все фигуры, выровняйте их правильно под ранее созданными слайдами.

1-PdZuNwcXwuNkkpKkOJ0tYw

Экран Walkthrough готов.

Daily Deeds

1-pjOjhJtbmlWujduFVUdFtg

Перейдем к экрану Daily Deeds. Давайте покажем всем, какими щедрыми мы были в течение последних суток!

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

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

На экране Walkthrough выделите градиентный слой и выберите опцию Create New Shared Style в панели инспектора.

1-KAVdQwEhrQ7lnVM_KCuuPA

Теперь общий стиль будет виден в панели инспектора.

1-_FBBViTaLMB15X8Oag4Lfg

Если хотите, вернитесь к слоям оверлея на ранее созданных экранах, и подключите этот стиль к ним. Это просто означает, что если вы решите изменить цвет градиента (или измените цвет на сплошной), изменения сразу отразятся на всех скринах. Экономия времени!

Вернемся к экрану Daily Deeds.

Нарисуйте прямоугольник ®, 375px в ширину и 667px в длину, который покроет весь артборд. Запустите плагин Unsplash It для выбора подходящего изображения.

1-nvfLzCBb1uGUVzQpreQC9A

Нарисуйте еще один прямоугольник ®, с такими же размерами, как только что созданный, и выберите Shared Style с градиентом из панели инспектора.

1-rJjZBUuVRWZaiIkQhQWX8Q

Добавим иконки меню и поиска в область панели управления.

Из Iconjar перетащите и вставьте иконки hamburger menu и magnifying glass.

Измените цвет обеих иконок на #FFFFFF. Размер иконки hamburger menu оставьте без изменений, а magnifying glass уменьшите до 25px.

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

1-FQ_2KqEO0BmNUc9j5mssbQ

Когда обе иконки выделены, сгруппируйте их вместе с помощью Cmd + G (назовите группу Menu + Search), и сконвертируйте группу в символ.

Вставьте Text Style, и измените текст на ‘Good Morning’, затем выровняйте корректно на артборде.

1-yxKgF5Y3pLsogCVLuAGhsw

Настало время использовать аватар, так что задействуйте плагин Content Generator.

Нарисуйте круг (O), 100px x 100px, задайте границу 4 (с цветом #FFFFFF).

При выделенном слое перейдите в меню Plugins > Content Generator Sketch Plugin > Persona > Photos > Female/Male/Neutral.

1-YM_GDPuA2I_VU3rz-cyVkw

Вставьте в новый текстовый слой (T), с текстом вроде ‘Tuesday, December 22, 2015′, и задайте следующие настройки:

  • Typeface: SF UI Display
  • Weight: Light
  • Color: #FFFFFF
  • Size: 15
  • Alignment: Center
  • Character Spacing: 1.5

И выровняйте текст на артборде.

1-rw74ii9Io1R8v395zlhFWQ

Теперь для счетчика заданий (Tasks Counter) нарисуйте 2 круга (О). Первый размером 100px x 100px, с заливкой #6C56B7, и второй 50px x 50px с заливкой #8C72E3.

Расположите их, как показано на рисунке внизу:

1-mqdKzW2xOH4dcT0mGhldFw

Затем добавьте 2 текстовых слоя (T).

Для слоя с количеством заданий используйте такие параметры…

  • Typeface: SF UI Display
  • Weight: Regular
  • Color: #FFFFFF
  • Size: 66
  • Alignment: Center

А для слоя с процентами нужны такие параметры:

  • Typeface: SF UI Display
  • Weight: Regular
  • Color: #FFFFFF
  • Size: 12
  • Alignment: Center
  • Character Spacing: 1.5

Затем выровняйте оба слоя корректно внутри кругов, чтобы получилось так:

1-JfqCNzxzDDl4L4EHN_KEVw

Вставьте еще один текстовый слой (T), с текстом типа ‘You’ve already completed 4 Pay It Forward deeds today. Nice work buddy!’

И задайте следующие настройки:

  • Typeface: SF UI Display
  • Weight: UltraLight
  • Color: #FFFFFF
  • Size: 15
  • Alignment: Center
  • Character Spacing: 1.5

Для части текста ‘Pay It Forward’ измените жирность (Weight) на Light.

Затем выровняйте этот текстовый слой корректно на артборде.

1-TmzEJhRvZZEGk78D6nAVLA

Вставьте новый текстовый слой (Т) с текстом ‘View PIF deeds for today’. Настройки должны быть такими же, как для предыдущего слоя, только уменьшите размер шрифта до 13.

В завершение работы над этим экраном вставьте иконку arrow left in circle из Iconjar.

Уменьшите ее до 35px, задайте цвет #FFFFFF, и вставьте -90 в поле настройки Rotate.

1-qdPq4I9XMrN_BSAEeK1E-w

Экран Daily Deeds готов

Пример Deed

1-k73Lya8ge7XUnjPlr2bmyQ

Для фонового изображения мы будем использовать то же изображение, что и для Daily Deeds. Так что скопируйте это изображение на пустой артборд и уменьшите высоту до 315px.

1-_tossqyq7EbjwzqW5qQjkA

Затем нарисуйте прямоугольник ®, чтобы он покрыл все изображение, и примените к нему стиль градиента (Shared Style), созданный ранее.

1-8yyKO0wHOqI8ApN9ckiUaA

Вставьте символ Menu + Search и выровняйте его корректно на артборде.

1-0I_YnGt7-ZbKVR0bT1gH8Q

Вставьте текстовый стиль с текстом ‘1st Deed of the day’, и выровняйте его корректно на артборде.

1-pXNdiY2vDdddjVZF7B_Wig

Нарисуйте круг (O), 100px x 100px с заливкой #8C72E3.

Из Iconjar, вставьте иконку shopping bag. Оставьте размер без изменения, а цвет измените на #FFFFFF. Выровняйте иконку корректно в круге.

1-Olft936nXrJPRatQSUcx8A

Вставьте текстовый слой (T) с текстом ‘At 10.36am’, и примените такие настройки:

  • Typeface: SF UI Display
  • Weight: UltraLight (For the actual time change it to Light)
  • Color: #FFFFFF
  • Size: 20
  • Alignment: Center
  • Character Spacing: 2

1-xQZv4jeVKRrUnFJjQA6PEA

Добавьте текстовый слой (T) с текстом Paid an old lady’s grocery bill at the local convenience store. Felt real good about it!’ и такими параметрами:

  • Typeface: SF UI Display
  • Weight: UltraLight
  • Color: #303 030
  • Size: 24
  • Alignment: Center
  • Character Spacing: 2.5

1-J7zKuBF-DHbfmy6fdsJG3g

Добавьте иконку с плюсом (+), с помощью которой пользователь сможет добавить новое деяние (Deed) (так как он у нас очень добрый!).

Нарисуйте круг (O), 60px x 60px, с заливкой #6C56B7.

Из Iconjar, выделите иконку plus symbol и вставьте ее в круг. Размер оставьте без изменений, а цвет измените на #FFFFFF.

1-VBEMoWRDqqYTDO1FdnC4hA

Знаете, что? Создайте экран со вторым примером поступка самостоятельно!

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

1-P_dFkMaHXye34mVMzuuwQQ

Вторая часть урока закончена.

В следующей части мы поработаем над Экранами Monthly Planner, Settings и Navigation.

Читайте также:

Подробный урок по дизайн приложения под iOS в Sketch: Часть 1 из 3

Подробный урок по дизайн приложения под iOS в Sketch: Часть 2 из 3

Подробный урок по дизайн приложения под iOS в Sketch: Часть 3 из 3

Нет комментариев
.