0,0
рейтинг
29 марта 2015 в 02:41

Разработка → iOS-приложение от наброска до App Store

Привет, хабр. Я работаю ведущим дизайнером в студии. Делюсь рассказом о своем первом приложении, которое я не только проектировал и оформлял, а прошел все шаги до релиза своими силами.



Осторожно: статья проиллюстрирована крупными анимированными изображениями.

Если вы дизайнер без внятного опыта программирования, первый запуск Xcode напомнит вам первый запуск 3D редактора. Не понятно как подступиться, с чего начать. Мне очень помогла эта сайт-книга Design+Code. Она написана дизайнером для дизайнеров. Автор использует связку Sketch+Xcode и делает акцент на прототипировании. Растерянность от вида Xcode пройдет после одной-двух глав. Заодно, если вы не знали чем так хорош Sketch, — довольно быстро узнаете.
Кроме знаменитого экспорта графики сразу в нескольких разрешениях прямо с макета, у Sketch есть еще одно очень полезное свойство. Системы координат и единицы измерения вплоть до трекинга текста такие же как в Xcode.

Зачем вообще дизайнеру разбираться с программированием? Плюсы довольно весомые:
  • По-настоящему общий язык с разработчиками
  • Прототипирование и мокап с неограниченными возможностями
  • Небольшие проекты можно разрабатывать от эскиза до аппстора в одиночку.

Статья как раз об одном таком проекте: трекере выпитой воды.

Очередной трекер воды


В App Store полно трекеров воды. Навороченность функционала самая разная. Наверное, многим придется по вкусу учитывать тип жидкости, хотя я с трудом представляю, чтобы кто-то сидя в баре вбивал каждый стакан пива в счетчик. Я же думал совсем о другом сценарии: о самом леньтяйском. Уверен, мало кому охота проходить три экрана приложения после каждой кружки чая. Но это не значит, что таких людей не волнует собственное здоровье. Здоровье волнует всех, кто хочет жить долго и счастливо. Мое приложение сделано для людей, которые хотят стать немного здоровее, воспитав в себе новую привычку — выпивать дневную норму воды.

Конечно, интерфейс — зло и когда-нибудь умные медицинские гаджеты будут сами считать баланс веществ в организме, но если оставаться в рамках приложения для iOS, то самый ленивый сценарий предполагает следующее:
  • Нельзя делать больше одного тапа, чтобы что-то «выпить».
  • В идеале, приложение вообще не нужно запускать для этого.
  • Приложение должно регулярно напоминать попить.
  • При необходимости настраиваются дневная норма, период и интервал уведомлений и автоматический сброс счетчика.

Все очень просто. Чтобы добавить воды в один тап, нужно взять несколько популярных объемов и сделать их отдельными кнопками на главном экране. Пожалуй, нет никакого смысла глубоко разбирать проектирование интерфейса такого приложения.



Разве что, упущен один момент: это ужасно скучно. Попил воды — записал, попил воды — записал, попил воды — записал. Моему ленивому целевому юзеру это надоест в первый же день. Значит нужно сделать не скучно, но ничего не усложнить. Речь о воде. Решение — оживить воду.

Живая вода




Все варианты заранее заготовленной анимации здесь не подходят. Нужна живая вода, а не надоедливая. Вода должна реагировать на движение девайса, чтобы с приложением можно было немножко поиграться. А значит нужно немного физики. Первое, что приходит в голову — частицы. Много взаимодействующих друг с другом частиц. Но недостатки очевидны сразу: чтобы такая вода выглядела прилично, придется съесть немало ресурсов. Это вполне резонно в играх и непозволительно для приложения, которое цифры плюсует.

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



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



Не запускать приложение


iOS 8 принесла с собой Today-виджеты. Apple совершенно логично рекомендует там выводить актуальные данные и простейшие действия. Это как раз мой случай. Те же пять кнопок и две строчки информации. И задача «не запускать приложение каждый раз» выполнена.



Но есть куда более удачное место для размещения контроллера, чем Today-панель. Apple как раз кстати анонсировала наручные часы. Задача «Не запускать приложение» эволюционировала в «Не доставать телефон».

Не доставать телефон


Нынешние возможности конструирования UI в WatchKit похожи на тетрис. Ограничено почти все. Но пока нет устройства — нет возможности как следует протестировать результат. А значит разумно держаться всего самого стандартного. К тому же, мне снова нужны пять кнопок и две строчки.



App Store пока не позволяет загружать приложения с WatchKit Extension, но к релизу WaterCheck готов и, надеюсь, версия выйдет вместе со стартом продаж Apple Watch.

Иконка


Многие удивились, узнав, что среди разбитых по молекулам данных о питании в HealthKit нет ничего о воде. Возможно, на это есть веские причины, но я предпочел воспользоваться этим.



Теперь приложение выглядит как часть Apple Health. Автор иконки — мой коллега Вадим Матвеев.

Поддержка


Epic fail: Однажды, экспериментировав с ценой на приложение, мы получили несколько тысяч установок из США. Следом мы получили приличную кучу негативных отзывов по одной причине: я забыл про локализацию единиц измерения. В США, как известно, почти все пользуются унциями.

Многим пользователям недостаточно жестко закрепленных стандартных объемов. Но мне важно сохранить максимальную простоту. Решение — жесты. Уточнить добавляемое значение можно, потянув любую кнопку вверх.



Конечно, такой способ повышает вероятность случайных или неточных действий, поэтому нужно сделать undo. По гайдлайнам Apple стандартный жест для отмены — встряхнуть девайс. Так я и сделал.
Для владельцев нестандартной по объему посуды я сделал In-App с настройками значений для кнопок ввода. В последних обновлениях приложение научилось собирать историю и показывать в виде графика. График появляется при повороте экрана.



В следующей статье я напишу о маркетинге приложения, про удачные и неудачные ходы раскрутки приложения.
Антон Нестеров @blind_designer
карма
21,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (33)

  • +2
    Здорово поработали. Я пока мало знавал дизайнеров, которые так же готовы разбирать код, как и работать с графическим редактором. Видимо новый уровень.
  • +3
    Автор поста — неплохой программист, если всё это работает. Неопытный — да, но неплохой. Поздравления!
  • 0
    А какие сложности были с обучением людей тянуть кнопки?
    • 0
      Когда написал, проверил на нескольких людях. Единственная неприятность — неаккуратный тап мог трактоваться как драг. Решил вопрос, задав небольшое расстояние, на котором значение еще не меняется.

      Проблем с обучением, как и вопросов на эту тему от юзеров не было — функция не всем и не каждый раз нужная. Вообще, я поступил довольно стандартно и сделал вводный экран с описанием жестовых возможностей.
  • 0
    Очень здорово.
    Один момент.
    Когда тянешь кнопки вверх — загораживаешь пальцем иконку и информацию. Возможно, можно применить игрушечный прием — тянуть кнопку вниз, натягивая пружину (здесь красивая анимация потребуется) и, отпуская её, стрелять вверх (здесь звук и еще чуть строгой анимации). При этом все действия будут чудесно видны.
    • 0
      Как показали тесты на живых людях и айфонах, в момент ввода юзер сосредоточен на получившемся значении (поэтому оно вверху). Для более-менее точного ввода таким способом нужно оставить хотя бы пол экрана в высоту. Извиняюсь, если я не совсем правильно понял вашу идею.
  • +1
    Интересные решения, а самое главное простые.
    А дайте пару кодов?
  • 0
    На последнем экране… не логичнее было бы сделать изменение цифр объема жидкости прямо вместо стандартных при свайпе? Тем самым просто заменяя счетчиком стандартные значения (для тапов как я понимаю).
    • 0
      Дело в том, что в момент ввода они закрыты пальцами.
  • 0
    Очень красивое и полезное приложение!
    Я бы добавил формулу расчёта дневной нормы потребления жидкости (пусть даже как встроенную покупку) исходя из пола, роста, веса, процента жира, средней физической активности, да и вообще — можно все эти данные из HealthKit импортировать при их наличии.
    Но ещё недостаток, на мой взгляд, что график потребления жидкости выводится только поворотом экрана. У меня, например, книжная ориентация всегда заблокирована, поэтому неудобно каждый раз менюшку снизу вытягивать и включать её. Поэтому, для тех, у кого книжная ориентация заблокирована, лучше сделайте отдельную кнопку.
    А так — молодцы!
    • +2
      P.S. Купил пакет нестандартных объемов: ещё неплохо было бы добавить возможность менять иконки ёмкостей с водой. Кто-то маленькими чашками воду совсем не пьёт, а вот бутылки — разные бывают (магазинные, тренировочные). И увеличить шаг изменения объёма. 648, 649, 650 мл — это смешно. Миллилитров по 10 хотя бы.
      • +1
        Спасибо за мнение! Многое из того, что вы написали, уже в планах. Дальше будет больше и лучше :)
  • 0
    Очень круто и минималистично!
  • –1
    Последние пару лет увлекаюсь и живу на здоровом питание, иногда на спортивной диете, удалось победить худобу и набрать полезные 10-14 кг и выйти в нормальный индекс массы тела. Могу с уверенностью сказать вода один из двигателей обмена веществ и обновления организма.

    Приложение очень полезное! Так как сам стараюсь выпить 2-3 литра воды в день, кулеры и дома и на работе и запасники воды по всюду.

    Думаете на Андройд, порт делать делать?

    Одно замечание! Чашечка и стакан побольше, обычно используют для чая и кофе, а это совсем не вода, даже наоборот. Мой тренер и не только, говорят, что на каждый стакан чая и кофе, нужно обязательно выпить такое же количество воды, так как кофеин держит воду в организме, как и таурин (не пинайте если чуток ошибаюсь) :)

    Даже стакан сока, нельзя назвать полноценной водой, сок скорей еда чем вода. И пользователи вашего приложения могут запутаться особенно если не опытные и выпить 2 литра сока за день и еще 2 чашки чая или кофе, и посчитать что они восполнили запас воды.

    Говорят что обезвоженность организма можно определять по цвету мочи, может встать в приложения колор мочи, это так шучу ;)

    Вообще советую всем пить воду, с утра с лимончиком, кофе конечно так не умеет бодрить, но сам наркоман кофе еще тот!
    • 0
      Вы правы насчет разных напитков. Позже я сделаю опционально поддержку типов жидкостей.
      Андроид — вполне возможно.
    • +4
      так как кофеин держит воду в организме
      — наоборот мочегонное.
      • 0
        Да вы правы, я все таки ошибся, перепутал с креатином, который у добавлял во время тренировок.
  • 0
    Великолепная работа и внимание к деталям!
  • 0
    Вот, что значит отличная работа! Не сдержался и купил, хотя раньше такими приложениями пользоваться не нравилось. Добавление через виджет для меня — киллерфича! Ну и вообще благодаря качеству проработки получаю эстетическое удовольствие от пользования.
  • +1
    А Вы не думали скрывать информацию о процентах и другое описание в момент, когда пользователь тянет «кнопку»? Таким образом можно увеличить шрифт добавляемого кол-ва жидкости и убрать из поля зрения лишнюю информацию.
    • 0
      Хорошая мысль, спасибо! Нужно, конечно, протестировать вживую, но, вполне возможно, так и сделаю в будущем.
  • +1
    А если отказаться от чашек-бутылок?
    Заменить это всё возможностью потянуть за саму воду вверх?
    Человек тянет воду вверх и видит сколько унций/мл/л он добавляет.
    При отпускании воды она льётся вниз с брызгами и показывает сколько % от нормы человек в себя влил.

    Этот же подход будет удобен для часов, например.
  • 0
    Если кликать на воду, то будет, конечно, еще более минималистичнее, но уйдет элемент игры. Станет скучнее. Ну и связка с реальным миром важна, т.к. только цифры мотивируют хуже.
  • 0
    Прикольный интерфейс, молодцы. Интересно узнать про результаты, пишите.
  • 0
    Здорово!
    Тоже попробовал. Сделал порт под Android самой волны
    github.com/app-z/WaterWaves
    Сколько делали колонок? У меня с 50 не плохо отображается
    • 0
      5 :)
      Тесты показали, что эрмитова интерполяция пяти точек выглядит лучше и ест меньше, чем расчет 50-100 пружин.
  • 0
    Отличное приложение! А почему нотификашки не несут никакой полезной нагрузки? В смысле там же можно дополнительные действия задавать…
    • 0
      Их можно только 2 на лок-скрине делать. Если бы было 5 — сделал бы сразу, не задумываясь. В будущем сделаю добавление одного объема, задаваемого в настройках.

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