Обучение ui/ux дизайну

Дизайн приложения для iOS + Apple Watch в Sketch

В данном уроке мы сделаем дизайн удобного и простого приложения под iOS для фитнеса, которое даст возможность контролировать велосипедные тренировки и бег. Кроме iOS-приложения я покажу также пример дизайна для интерфейса Apple Watch в Sketch.

На уроке вы научитесь делать дизайн iOS-приложения под различные размеры дисплея и представления в Sketch. Задействованы базовые и несколько более продвинутые методы рисования в Sketch.

Итак, приступим!

Вам потребуются такие исходники:

Короткое отступление

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

Настройка артбордов

Мы применяем Sketch, созданный изначально как приложение для разработки различных дизайнов интерфейсов, и сейчас это самое простое и самое быстрое средство для создания дизайна под iOS.

Этап 1

После открытия Sketch, следует выбрать функцию Artboard (A) в меню Insert (Вставить).

Создание дизайна фитнес-приложения для iOS в Sketch

Sketch Mirror

В левой панели желательно выбрать размерности iPhone 6, однако если у вас иная модель айфона, лучше выбрать ее. Это очень важно, так как при помощи Sketch Mirror можно сразу протестировать работу в реальном времени на iOS-девайсе, без потребности экспортировать и переносить все изображения вручную. Sketch Mirror — это крайне важная часть рабочего процесса, поскольку посредством его я могу в считанные секунды оценить общий результат.

Создание дизайна фитнес-приложения для iOS в Sketch

Для полной активации Sketch Mirror необходимо скачать программу Sketch Mirror с App Store, потом кликнуть на значок Mirror в Sketch (надо убедиться, что ваш аппарат подключен к той же сети Wi-Fi или подсоединено при помощи USB-кабеля).

Создание дизайна фитнес-приложения для iOS в Sketch

 

Создание полосы табуляции

С момента выпуска 6 Plus и iPhone 6 использование специальной скрытой кнопки навигации в левом верхнем углу стало почти невозможным, так как большинство пользователей просто до нее не достанут одной рукой. Из-за этого главный инструмент навигации я разместил внизу дисплея, там она всегда легко доступна и видима.

Этап 1

Необходимо нарисовать внизу экрана прямоугольник высотой 100px.

Создание дизайна фитнес-приложения для iOS в Sketch

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

Этап 2

Теперь необходимо нарисовать квадрат 50x50px для значков. Ниже можно добавить специальные метки для различных экранов: Challenges (Испытания), Activities (Тренировки), GO (Старт), Profile (Профиль) и Friends (Друзья). Для данных меток я устанавливаю шрифт под названием Avenir Next Regular высотой строки 24px и размером 24px.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 3

Теперь необходимо разместить все значки в маленькие квадраты. Убедитесь в том, что у каждой иконки размер 50px в высоту или 50px в ширину. Для значка профиля следует нарисовать круг 50x50px при помощи средства Oval (O) и в панели Fills (Заливки) выберите пункт image fill (Заливка рисунком).

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 4

Далее нужно скрыть прямоугольники-гайды, для этого кликнув на иконку в форме глазка рядом со слоями.

Создание дизайна фитнес-приложения для iOS в Sketch

Для фона полосы навигации я выбирал белый оттенок #FFFFFF с фоновой тенью 8px и непрозрачностью 70%. Также я добавил линию шириной 1px оттенка #B4B4B4 при помощи средства Line (L) (Линия) в качестве специального визуального разделителя панели навигации со всей остальной частью дисплея.

Создание дизайна фитнес-приложения для iOS в Sketch

Для неактивных меток навигации и иконок желательно применять оттенок серого #666666 вместо черного. Для активных значков я установил красный цвет #FF3B30.

Создание дизайна фитнес-приложения для iOS в Sketch

 

Дизайн скрина GO

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

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

Этап 1

Вначале необходимы белые строки навигации и статуса из шаблона Sketch iOS UI Design. Его найти можно в меню File > New From Template > iOS UI Design.

Создание дизайна фитнес-приложения для iOS в Sketch

Создание дизайна фитнес-приложения для iOS в Sketch

Рекомендация: поскольку шаблон Sketch iOS UI Design исходники предоставляет в 1x, нам их надо конвертировать в разрешение 2х. Это можно сделать посредством инструмента Scale (Масштаб).

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 2

Для строки навигации я планировал выбрать фон живого и яркого цвета, который бы точно вдохновил пользователя на старт тренировки. Я взял красный цвет #FF3B30, который быстро привлекает к себе внимание.

Создание дизайна фитнес-приложения для iOS в Sketch

 

Для индикатора мощности сигнала GPS я применяю простой градиент от #15FF00 к #15FF00 в небольшом прямоугольнике с закругленными углами.

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

Этап 3

Теперь необходимо создать прогноз погоды вверху дисплея. Поскольку большинство тренировок длятся не более трех часов, то у нас будет трехчасовой прогноз погоды с дополнительными данными по времени заката и силе ветра. Я рекомендую взять светло-серый цвет типа #ACACAC для данного вида информации, так как у нас нет цели акцентировать все внимание именно на прогнозе.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 4

В качестве разделителя между всеми разделами интерфейса можно сделать прямоугольник шириной 100% и высотой 54px в оттенке #ECECEC.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 5

Перед стартом тренировки отличной мотивацией было бы задать себе какую-то цель. Это может быть дистанция пробежки, время пробежки или же новый рекорд средней скорости. Для того, чтобы отобразить все эти цели, надо создать два отдельных круга размерами 230x230px и 270x270px.

Создание дизайна фитнес-приложения для iOS в Sketch

Необходимо перетащить меньший круг в более крупный на панели слоев. Для того, чтобы нарисовать фигуру в форме кольца, выберите пункт ‘Subtract’.

Создание дизайна фитнес-приложения для iOS в Sketch

Далее закрашиваем кольцо линейным градиентом с непрозрачностью 20% от #AAFFA9 до #11FFBD. Это будет неактивным состоянием кольца.

Создание дизайна фитнес-приложения для iOS в Sketch

Для активного же состояние надо продублировать нашу фигуру, выделив ее на панели слоев, потом кликнув правой кнопкой мыши и выбрав специальную опцию Duplicate (также можно скопировать и вставить при помощи ⌘-C и ⌘-V).

Теперь при помощи средства Vector (V) надо создать маску на активном круге.

Создание дизайна фитнес-приложения для iOS в Sketch

Рекомендация: удерживание клавиши Shift в момент применения инструмента Vector помогает рисовать идеально ровные линии.

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

Создание дизайна фитнес-приложения для iOS в Sketch

Для того, чтобы детализировать дизайн, добавьте кружки размером 20x20px к маске. Сделайте так, чтобы получились закругленные края на всех концах активной части кольца.

Создание дизайна фитнес-приложения для iOS в Sketch

 

Создание дизайна фитнес-приложения для iOS в Sketch

Рекомендация: Для текста в центре кольца задайте внутреннюю тень.

На скрине GO теперь не хватает лишь кнопки для старта. Ее надо нарисовать в форме прямоугольника в оттенке красного #FF3B30 высотой 120px.

Создание дизайна фитнес-приложения для iOS в Sketch

 

Рисование раздела Activities

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

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

Этап 1

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

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 2

Для того, чтобы переключаться между своими тренировками и друзей, надо создать еще одну строку навигации. Для этого следует выбрать средство Rectangle tool (R) и нарисовать прямоугольник с темно-синей заливкой #1F2033 и высотой 90px.

Создание дизайна фитнес-приложения для iOS в Sketch

Теперь надо создать квадрат 22x22px и повернуть его на 45 градусов.

Создание дизайна фитнес-приложения для iOS в Sketch

Можно сгруппировать данные слои, как это уже делалось с кольцом для цели. Необходимо убедиться в том, что вы применяете опцию Subtract вместо Union.

Создание дизайна фитнес-приложения для iOS в Sketch

Рекомендация: заметьте изменение в непрозрачности между неактивными и активными деталями во второй строке навигации.

Этап 3

Для хорошей детализации интерфейса всегда можно создать еще один прямоугольник с тем же синим фоном. Правда на этот раз высота составлять будет 387 пикселей. Для всех направляющих линий следует воспользоваться инструментом Line (L).

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 4

Для того, чтобы отобразить визуально перепады высоты в момент тренировки, необходимо создать нестандартную фигуру при помощи инструмента Vector (V). Здесь нет какой-то специальной техники для рисования графика, поэтому можно поиграть с кривой Безье до тех пор, пока не получите необходимую картинку.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 5

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

Создание дизайна фитнес-приложения для iOS в Sketch

Методика прорисовки такая же, которая использовалась раньше с кривой Безье и инструментом Vector. Для цвета заливки использовался красный цвет #FF3B30 и зеленый #22EA05 (зеленый цвет обозначает скорость, которая выше средней, красный — ниже).

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 6

При помощи плагина для Sketch Content Generator можно с легкостью добавить в кружки аватарок различные картинки профиля.

Создание дизайна фитнес-приложения для iOS в Sketch

Раздел Activities полностью завершен!

Создание дизайна фитнес-приложения для iOS в Sketch

 

Дизайн раздела Challenges

На странице Challenges можно увидеть все соревнования, в которых принимал участие пользователь. Тут я совместил карточный дизайн и круглый дизайн в духе Apple Watch, чтобы пользователь мог пересортировать все соревнования в полной зависимости от их важности.

Этап 1

После дизайна прошлого раздела с этим вы справитесь намного проще, так как вы уже нарисовали практически все, что надо. Сначала нужно создать новый артборд при помощи инструмента Artboard (A) и скопировать дополнительную и основную строки навигации с пункта Activities.

Этап 2

Для создания карточек необходим прямоугольник с размером 355x400px.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 3

Я в качестве фона использовал белый цвет, правда чтобы визуально отделить все карточки от фона, я добавил специальную черную тень (непрозрачность — 20%).

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 4

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

Создание дизайна фитнес-приложения для iOS в Sketch

Рекомендация: если вам надо больше вдохновения по различным градиентам в дизайне интерфейсов, посетите сайт uigradients.com.

Этап 5

Не хватает еще одной детали — полосы табуляции внизу дисплея. Скопируйте ее с предыдущего раздела, однако не забудьте обязательно поменять активный статус на необходимой иконке.

Создание дизайна фитнес-приложения для iOS в Sketch

 

Создание пункта Browse Challenges

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

Этап 1

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

Этап 2

Создайте базовую информацию об определенном соревновании и добавьте какую-то нестандартную иконку для мотивации. Это будет особой наградой, когда кто-либо проходит соревнование.

Создание дизайна фитнес-приложения для iOS в Sketch

Рекомендация: небольшая разница в цветах и размере текста помогает создать очень четкую иерархию.

Этап 3

Для того, чтобы визуально отобразить все оставшееся время, следует создать прямую времени. Данная полоса будет иметь фон #F5F5F5 и закругленные края 40px.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 4

Для активной части такой полосы скопируйте предыдущий прямоугольник. Сделайте его чуть короче и задайте линейный градиент от #44FF30 к #FFDA30.

Создание дизайна фитнес-приложения для iOS в Sketch

Этап 5

После дублирования данного раздела и копирования полосы табуляции с прошлого раздела пункт Browse Challenges полностью готов!

Создание дизайна фитнес-приложения для iOS в Sketch

 

И еще: Apple Watch в Sketch

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

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

Создание дизайна фитнес-приложения для iOS в Sketch

Поздравляю!

Дизайн фитнес-программы под iOS полностью готов. В ходе данного урока вы улучшили навыки работы в Sketch для дизайна различных мобильных приложений.

Создание дизайна фитнес-приложения для iOS в Sketch

Скачать готовый файл Sketch

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

 

Перевод статьи medialoot.com автора Daniel Korpai.

Понравилось? Расскажите друзьям: