Индивидуальный дизайн для айфона


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

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

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

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

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

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

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

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

Этап 1

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

Создание <em>индивидуальный дизайн для айфона</em> дизайна фитнес-приложения для 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.

Почитать еще:


Источник: http://www.blog.jazov.com/uiux-design/dizajn-prilozheniya-dlya-ios-apple-watch-v-sketch.html


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Моддинг и тюнинг iPhone виды, определения и примеры Дизайн дворов с бассейном


Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона Индивидуальный дизайн для айфона


ШОКИРУЮЩИЕ НОВОСТИ