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

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

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

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

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

Если вы еще не скачали необходимые инструменты, загрузите и установите их:

Давайте приступим к финальной части этого урока…

Планировщик на месяц

1-rpGg8FMGoDR_LBU-B6FkAQ

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

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

1-IpwpTGIkCnUicxwYkVoUag

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

Вставьте ваш текстовый стиль и измените текст на что-то вроде ‘December, 2015', затем выровняйте слой на артборде.

В Iconjar возьмите иконки arrow left и arrow right. Затем с помощью инструмента Scale уменьшите высоту иконок до 20px и задайте цвет #FFFFFF.

Выделите иконки со стрелками и текстовый слой, и примените опцию Align Vertically для уплотнения элементов.

1-f29sOJfjRYy6-fRW7ucrOQ

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

1-qxcR6XtWrwRJrRQN0egyMw

Теперь давайте сделаем круговую диаграмму и поместим ее в нужное место.

1-ajj0iygNJJwS4sMEhDu2nw

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

Затем с помощью инструмента Scissors (ножницы) кликните на секторе круга, чтобы удалить его.

1-KP1zxkXU0ssbJAfEUA8uTg

При выделенном круге нажмите правой кнопкой мышки и выберите Duplicate (Дублировать). Задайте цвет для круга #8C72E3, и поместите этот слой позади белого круга.

Используя опцию Transform, введите значение 180 в поле Rotate.

1-zyWEYGBo4dtbLnwIfBsikA

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

Вставьте новый текстовый слой (T) с текстом ‘25', и задайте следующие настройки…

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

Вставьте другой текстовый слой (T), измените текст на знак процента (%), и задайте такие параметры:

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

И добавьте последний текстовый слой (T) для круговой диаграммы, вставьте текст ‘4 Deeds Complete' (совершено 4 поступка), и задайте такие параметры:

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

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

1-vWDtxQMHyodyiQ6xqKUlaQ

Чтобы закончить этот экран приложения, добавьте 2 текстовых слоя (Т). В первый вставьте текст вроде ‘You're on course to reach your goal for this month.' (Вы на верном пути для выполнения своей цели на этот месяц) и задайте такие настройки:

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

Во второй текстовый слой вставьте ‘A big high-five for you!' (Дай пять!), задайте такие настройки:

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

Выровняйте все корректно на артборде. Вот и все, работа над экраном завершена!

1-w3UtlGO6Wzn95WMlj8IrRg

Settings

1-2rFJHB85GXHrnn-DjKKokA

Мы возьмем новый фон для экрана настроек (Settings). Нарисуйте прямоугольник ®, 375px на 315px (и не забудьте удалить границы). Напустите плагин Unsplash It и выберите подходящее изображение.

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

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

1-isoA2SV0a6DM4jzmBnZGhw

Вставьте ваш текстовый стиль и измените текст на ‘Settings', и также выровняйте его на артборде.

1-4XzR-J7n-_DDbVSXIkq1Lg

Для Аватара мы воспользуемся тем же, который создали для экрана Daily Deeds (Добрый дела за день). Скопируйте и вставьте его, поместите под заголовком.

1-oX6k-IJV4V6UMRVKD6V7tA

Настало время вставить поля ввода.

1-Sf6goCiljFTWMPOvErtOgQ

Чтобы сэкономить время и избежать повторного создания всех элементов с нуля, мы вставим символ ‘Form Fields (Sign Up)', который мы создали еще в 1 части этого урока.

1-BYI7Bza9ge4yNZI52p-wxQ

Но, перед тем, как продолжить, нужно изменить символ, созданный для экрана регистрации. При выделенном символе нажмите на меню Select в инспекторе и выберите Duplicate Symbol.

1-LFwJjqm4SR15WiPJK_icBA

Затем переименуйте этот новый символ на ‘Settings Form'.

1-cZgjFpB2WtUrNF4vTZqjxw

Конечно, сейчас вы смотрите на невидимый элемент дизайна из-за цветов, используемых в оригинальном символе. Это не совсем то, что нужно.

Но через список слоев мы можем выделить каждый из этих элементов и изменить цвета на подходящие.

1-oKp35nzb5KYTM0n77dto6A

Перейдите в список слоев и задайте значение #DEDEDE для Fill Color (цвет заливки). Сделайте то же самое и для Line.

1-TH_KNoZPFG1_vfSC3jLwyA

Текстовым слоям задайте цвет #303 030, и измените текст соответственно.

1-Sf6goCiljFTWMPOvErtOgQ

Нужно добавить еще одно поле в ‘Settings Form', поэтому в Iconjar найдите иконку present и перетащите ее на артборд. Затем, с помощью инструмента Scale уменьшите ширину до 25px и измените цвет на #DEDEDE.

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

1-M5qH6OrvzD7lVZV5DfnDDA

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

1-IuCIKVesTzrZOHvEruOL4g

Экран настроек готов.

Перейдем к дизайну последнего экрана…

Экран навигации

1-D5Lc_iiGLlY8jy7eRP4Kgw

Сначала выделите все элементы из артборда Settings и, удерживая Alt (что продублирует их в процессе), перетащите эти элементы на артборд Navigation.

1-kPcglVZ9-u-a9EVOlzaVmQ

Нарисуйте прямоугольник ®, чтобы он покрыл весь артборд, и залейте его цветом #303 030 с непрозрачностью 80%.

1-YaSZpb3f_aKU_5LKHK9EhA

Нарисуйте еще один прямоугольник ®, высотой 667px и шириной 320px, задайте следующие параметры:

  • Fill Color: #FFFFFF
  • Borders: None
  • Shadows: Color: #0 Opacity: 40% X: 4 Y: 2 Blur: 15

1-qlsLdcQzZs6X0lAn6-q-2A

Из Iconjar перетащите иконку close symbol и расположите ее корректно на только что созданном фоновом слое.

1-SC2n1E57jS5JGZBO_s_ttw

Теперь оживим картину несколькими добавками к навигации…

Вернитесь в Iconjar и выберите иконку home. Кликните на нее и перетяните на ваш артборд. Сделайте то же самое для иконок planner, calendar и settings.

Выделите каждую иконку отдельно и с помощью инструмента Scale уменьшите ширину до 25px. Затем измените цвет каждой иконки на #DEDEDE.

Выделите все иконки, примените опцию Align Left, расположите их в 20 px от левого края артборда.

1-Bn1xpeiTiXV55ALkgIaBkQ

Вставьте 4 текстовых слоя для каждой иконки по одному и введите такой текст:

  • Home
  • Deeds for the Day
  • Monthly Planner
  • Settings

Затем задайте слоям такие параметры:

  • Typeface: SF UI Display
  • Weight: Light
  • Color: #303 030
  • Size: 18
  • Alignment: Left
  • Character Spacing: 1.5

И выровняйте слои корректно относительно каждой иконки.

1-rc7HS11MVbpVzJtRoU6wpA

Нарисуйте линию толщиной 1px (L). Она будет выполнять роль разделителя между элементами навигации. Задайте длину 280px и цвет границы #DEDEDE.

Затем выровняйте все элементы, чтобы все смотрелось аккуратно.

1-V6GdBtUOGU30mi2uVDnbZw

Завершите работу над экраном, добавив логотип ‘Piece'.

Вставьте иконку dove из Iconjar и уменьшите ее ширину до 40px, задайте заливку #8C72E3. Расположите ее внизу панели навигации.

1-knXkzebPyfWm1CQ4PmnJPw

Вот мы и подошли к концу 3 части этого урока. Настало время сотворить что-то свое!

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

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

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

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

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