UXPUB 🇺🇦 Дизайн-спільнота

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

Опубліковано • Оновлено

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

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

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

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

1-rpGg8FMGoDR_LBU-B6FkAQ Мы используем новое фоновое изображение для экрана помесячного планировщика. Нарисуйте прямоугольник (R) с шириной 375px и длиной 667px (не забудьте удалить границы), который покроет весь артборд. Запустите плагин Unsplash It для выбора подходящей картинки. Нарисуйте еще один прямоугольник (R) с такими же размерами, как только что созданный, и выберите общий стиль 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). Нарисуйте прямоугольник (R), 375px на 315px (и не забудьте удалить границы). Напустите плагин Unsplash It и выберите подходящее изображение. Нарисуйте еще один прямоугольник (R) с такими же размерами и выберите общий стиль 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 Текстовым слоям задайте цвет #303030, и измените текст соответственно. 1-Sf6goCiljFTWMPOvErtOgQ Нужно добавить еще одно поле в ‘Settings Form’, поэтому в Iconjar найдите иконку present и перетащите ее на артборд. Затем, с помощью инструмента Scale уменьшите ширину до 25px и измените цвет на #DEDEDE. Добавьте текстовый слой и линию к новой иконке по аналогии с предыдущими полями, корректно выровняйте все элементы. 1-M5qH6OrvzD7lVZV5DfnDDA

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

1-IuCIKVesTzrZOHvEruOL4g Экран настроек готов. Перейдем к дизайну последнего экрана...

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

1-D5Lc_iiGLlY8jy7eRP4Kgw Сначала выделите все элементы из артборда Settings и, удерживая Alt (что продублирует их в процессе), перетащите эти элементы на артборд Navigation. 1-kPcglVZ9-u-a9EVOlzaVmQ Нарисуйте прямоугольник (R), чтобы он покрыл весь артборд, и залейте его цветом #303030 с непрозрачностью 80%. 1-YaSZpb3f_aKU_5LKHK9EhA Нарисуйте еще один прямоугольник (R), высотой 667px и шириной 320px, задайте следующие параметры:

  • Fill Color: #FFFFFF
  • Borders: None
  • Shadows: Color: #000000 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: #303030
  • 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


Перевод статьи Marc Andrew

Топ коментарі (0)