Dev Story Biorhythmica. История о биоритмах

Информатор avatar | 25
FavoriteLoading В закладки
Biorhythmica. История о биоритмах

ТЕКСТ: ВИКТОР ТУМИЛОВИЧ. Начну с того, что, на мой взгляд, нет ничего менее удобного для восприятия, чем несколько переплетающихся разноцветных синусоид (если ты не физик или математик с 20-ти летним стажем). Тем не менее, 99% приложений AppStore, посвященных биоритмам, именно это из себя и представляют. Поэтому, как это часто бывает, не найдя для себя симпатичного калькулятора биоритмов, я решил написать его сам.

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

Дизайн

Общая концепция. Я сразу решил, что биоритмы в приложении должны отображаться в виде инфографики (отсюда позднее родилось и название Biorhythmica = биоритмы + инфографика). Затем пришло понимание, что оптимальный период, который должен быть виден на экране – это текущая неделя. Во-первых, на мой взгляд, это наиболее эффективный период планирования своих эвентов. А во-вторых, более семи диаграмм, показанных на iPhone одновременно, будут не читаемы, поскольку каждая из них должна отражать по три показателя – физический, эмоциональный и интеллектуальный – итого 21 показатель. В будущем, когда я буду адаптировать приложения для iPad – предусмотрю отображение биоритмов текущего месяца.

Инструментарий. В качестве инструмента для дизайна интерфейса у меня был лишь Adobe Photoshop CS4, о чем я не раз сожалел. Очень советую иметь под рукой еще и какой-либо векторный редактор, поскольку часто приходится масштабировать различные фигуры без потери качества. Если же такового не имеется, то пользуйтесь такими инструментами Photoshop как «Rectangle Tool», «Rounded Rectangle Tool» и «Custom Shape Tool».

Дизайн интерфейса. Мне показалось, что чтобы не быть скучным, приложение должно иметь возможность выбора обложек («скинов») – т.е. вариантов диаграмм на вкус пользователя. В результате длительных мучений было придумано три обложки:

1. Обычный Pie Chart. Она используется по умолчанию, и является единственной в бесплатной версии приложения. Тут все понятно: пустой кружок – все очень плохо, заполненный – все очень хорошо.

2. Разновидность кольцевой диаграммы. Три вложенных кольца, наружное – физическая активность, среднее – эмоциональная, внутреннее – умственная. Величину показателя отражает завершенность кольца.

3. Последняя обложка – что-то среднее между лепестковой и пузырьковой диаграммами. Здесь величину показателя отражает размер лепестка.

Естественно, приложению не обойтись без экрана настроек (в него можно попасть нажав на иконку «i» внизу главного экрана):

Кроме выбора даты рождения здесь присутствуют элементы:

– Панель выбора обложки. Сделал ее прокручиваемой на будущее, хотя текущие 3 «preview» обложек легко помещаются и на одном экране.

– Легенда текущей обложки – пояснения как читать выбранную визуализацию. Выглядит как небольшой блокнотик, который перелистывается при выборе обложки (стандартная анимация UIViewAnimationTransitionCurlUpDown).

Иконка приложения. Советую не жалеть на нее ни сил ни времени – ведь это первое, с чего начет знакомство с продуктом ваш будущий покупатель. А от первого впечатления зависит если не все, то многое.

Сперва я создал версию для iTunesArtwork 512×512, а затем уже масштабировал до более мелких иконок – 114px, 72px и 57px. Здесь как раз очень бы пригодился векторный редактор. Хочу сказать, что для масштабирования не достаточно просто уменьшить все слои до нужного размера – приходится подправлять эффекты – тени, градиенты и прочее, которые на иконке 57х57 смотрятся совсем не так хорошо как на 512х512. На горьком опыте советую также не делать на иконке никаких элементов, подчеркивающих закругление углов – как например мой синий ободок по контуру. Иначе придется помучаться с радиусом закругления – его нужно будет точно выставлять для каждого размера:

Размер иконки = Corner Radius

512×512 (iTunesArtwork) = 90

114×114 (iPhoneiPod touch Retina) = 18

72×72 (iPad) = 11

57×57 (iPhoneiPod touch) = 9

Для того чтобы проверить как точно будет выглядеть моя iTunesArtwork, я даже формировал файл *.ipa приложения с помощью органайзера Xcode и просматривал его в библиотеке iTunes.

Разработка

Программирование интерфейса. Существовало два варианта переноса придуманных мной визуализаций из Photoshop в Objective-C:

– отрисовка изменяемых элементов диаграмм при помощи CoreGraphics;

– создание и хранение изображений для всех возможных значений каждого показателя;

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

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

Соответственно, для каждого показателя в рамках одной обложки потребовалось 11 изображений. Названия я присвоил им так, чтобы в коде его можно было легко составить динамически, исходя из величины показателя и номера текущей обложки, например «emIcon10_s3.png» – иконка отображения эмоционального ритма величиной в 100% для третьей обложки. На скриншоте ниже можно посмотреть пример со структурой каталога обложки:

Поскольку я тестировал приложение в том числе на старых устройствах (iPhone 3G и 3GS), то столкнулся с проблемой производительности некоторых элементов интерфейса. Например, на панели выбора обложек, реализованной с помощью UIScrollView, у меня использована тень CALayer Shadow, которая первоначально «тормозила» скроллинг. Однако использование shadowPath и setShouldRasterize:YES решило эту неприятную проблему.

Интеграция с Twitter. Эта идея возникла у меня в тот момент, когда остальная часть приложения была уже готова. Но как раз в то время эта социальная сеть поймала меня в свои пернатые объятья. Я подумал, что было бы интересно публиковать в нее не только мысли и новости, но и своё текущее состояние в физическом, эмоциональном и умственном плане. Например, отправить друзьям свои биоритмы на день экзамена чтобы попытаться вызвать у них сочувствие :).

После недолгих поисков, я обнаружил Open source проект ShareKit от Nate Weiner, который позволяет публиковать данные вашего приложения в различные социальные сети. Внедрение его в приложение не вызвало особых проблем. Правда осталось несколько моментов (не связанных с самим ShareKit) которые меня не устраивают, но пока не нашли своего решения. Причем оба они вызваны интегрированным в iOS5 twitter-клиентом:

– Biorhythmica отправляет в твиттер скриншот выбранного пользователем дня в виде картинки. Но при отправке с встроенного клиента я никак не могу регулировать потерю качества изображения в результате сжатия. В результате, опубликованные изображения при большом увеличении кажутся слегка «зернистыми».

– Вторая проблема скорее маркетинговая – при отправке со встроенного клиента внизу твита написано «… с помощью iOS» – и никакого упоминания моего приложения. Тогда как при отправке из версий ниже iOS5 (с авторизацией через web) – внизу красуется гордое «… с помощью Biorhythmica» со ссылкой на мой веб-сайт.

Полезные ресурсы

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

1. Библиотека пиктограмм The Noun Project. Бесценный сайт для создателей инфографики – лицензии Creative Commons или Public Domain, иконки разбиты по категориям, есть поиск на русском языке. Коллекция пиктограмм постоянно растет.

2. StackOverflow – без данного сайта, разработка под iOS для меня была бы сложнее на порядок. Очень много полезных советов по Objective-C и Xcode.

Итоги

Все-таки мой опыт по самостоятельному созданию iOS-приложения я могу считать удавшимся, хотя бы потому, что приложение в результате опубликовано в AppStore и уже нашло своих первых покупателей. И, если сравнивать его с аналогами, то, по крайней мере, в части оформления оно выглядит гораздо привлекательнее многих из них. Конечно, Biorhythmica не имеет такого мощного функционала, как например Humanist, который рассчитывает совместимость с другими людьми, анализирует ваш характер и многое другое. Но, во-первых, я и не претендую на столь глубокий психоанализ – мое приложение для тех, кто просто хочет узнать свои биоритмы. Причем визуализация позволяет сделать этот процесс очень быстрым и интуитивно понятным. А во-вторых, Biorhythmica и стоит соответственно на 2$ дешевле. Кроме того, анализируя, насколько часто твиттеряне пишут о своих биоритмах, я надеюсь, что и интеграция с этой соц. сетью найдет своего потребителя.

Для таких же, как и я одиночек, рискнувших вступить в конкурентную борьбу с акулами AppStore, хочу дать совет. Пусть ваше первое приложение будет совсем не сложным – тогда есть вероятность, что вы доведете его до конца. А наличие хоть одного опубликованного приложения придаст вам уверенности в своих силах и будет мотивировать на дальнейшие свершения. Но простота не должна означать низкое качество – отнеситесь ответственно к разработке и, особенно, к дизайну (чем часто пренебрегают одиночки, пришедшие в iOS из программистов). Если не чувствуете в себе дизайнерских способностей, попробуйте привлечь друзей либо найти недорогие варианты на фриланс-сайтах.

Но вот и все, буду рад услышать ваши пожелания и предложения в комментариях.

Цена: $0.99$ [iTunes link]

Данная история опубликована в рамках рубрики Developer Story, где разработчики делятся секретами своей внутренней кухни.
1 Звезд2 Звезды3 Звезды4 Звезды5 Звезд (Проголосуйте первым за статью!)
🤓 Хочешь больше? Подпишись на наш Telegram.
... и не забывай читать наш Facebook и Twitter 🍒
FavoriteLoading В закладки
undefined
iPhones.ru
ТЕКСТ: ВИКТОР ТУМИЛОВИЧ. Начну с того, что, на мой взгляд, нет ничего менее удобного для восприятия, чем несколько переплетающихся разноцветных синусоид (если ты не физик или математик с 20-ти летним стажем). Тем не менее, 99% приложений AppStore, посвященных биоритмам, именно это из себя и представляют. Поэтому, как это часто бывает, не найдя для себя симпатичного...
Прокомментировать

🙈 Комментарии 25

  1. Entze avatar
    Entze5 апреля 2012
    0

    Интересно сравнить с другими “биоритмерами”. Помню Humanist показал пересечение всех синусоид в одной точке, тогда как другие приложения ничего такого близко не показывали и теперь вот недоверие к такому ПО.

    robolizer avatar
    robolizer5 апреля 2012
    0

    @Entze, я при разработке Biorhythmica специально проанализировал около ста сайтов предлагающих онлайн-расчет – оказалось что версий было всего две – одни сайты утверждали что мой эмоциональный ритм -68%, а другие что +90% ) к счастью большинство сайтов все-же совпадали с показаниями Биоритмики ) – иначе бы я начал искать ошибку у себя. Видимо в какую-то книгу или статью откуда остальные сервисы брали формулу, закралась опечатка…

    Entze avatar
    Entze5 апреля 2012
    0

    @robolizer, если не против – покритикую, правда для бесплатной версии :)

    Я впервые увидел “биоритмы” в виде простыней распечаток лет 25 так назад. И уже тогда объясняли, что соль не только в значениях, но и в точках пересечений кривых, называемых критическими днями. Так что просто значения это лишь часть информации.

    Яркий циановый – это жесть просто!
    Иконки выглядят так, словно не под ретину. В Photoshop можно прекрасно рисовать векторные элементы, которые затем растрируются с антиалиасингом.

    Слово details на английском, а интерфейс – на русском.

    Если принимать теорию биоритмов на веру, то конечно интересно смотреть на несколько дней назад. Но почему тогда только на несколько? И про критические дни я писал выше.
    Если продолжать следовать идее инфографики, то хорошо бы скажем давать сводку на месяц, добавлять критические дни в календарь. Чем покупатели программы хуже японских таксистов? ;)

    robolizer avatar
    robolizer5 апреля 2012
    0

    @Entze, спасибо за конструктивную критику ), со всем почти согласен. Я сейчас как раз веду список что необходимо учесть в следующей версии. Вы имеет ввиду пересечение между синусоидами? В основном все пишут о пересечении синусоиды и оси нуля…

    Entze avatar
    Entze5 апреля 2012
    0

    @robolizer, Да, пересечение с осью.

    TOVVV avatar
    TOVVV5 апреля 2012
    0

    @Entze, Ну тогда у автора уже Humanist получится :)

    TOVVV avatar
    TOVVV5 апреля 2012
    0

    @robolizer, интересно же вы изучали тему, если не знаете, почему выдается два значения. В 1979 году при испытании теории биоритмов на военных летчиках было установлено, что использование целочисленных фаз биоритмов – ошибочно и дает неточные результаты. Однако эту информацию нужно глубоко искать в профильной литературе, поэтому многие разработчики подобных приложений просто не в курсе этого. Если ваше приложение использует для физического биоритма фазу 23 дня, вместо 23.688437, то поздравляю – ваше приложение выдает неверные результаты, как и 95% подобного софта (Humanist, к счастью, в эти проценты не попадает).

    robolizer avatar
    robolizer6 апреля 2012
    0

    @TOVVV, Спасибо авторам Humanist за комментарии. Я естественно знаю о теории “дробных” биоритмов, поскольку изучал профильную литературу. И совершенно осознанно выбрал использование целочисленных биоритмов, т.к. большая часть авторов (как вы сами отметили 95%) склоняется к тому, что дробные периоды применять не верно, потому что вся природа и жизнь человека в том числе проходит с привязкой к суточным ритмам смены дня и ночи и собственные ритмы человека должны быть кратны суткам.

    TOVVV avatar
    TOVVV5 апреля 2012
    0

    @Entze, недоверие у вас из-за того, что вы ориентируетесь на большинство, а не на точность. причину, почему в некоторых приложениях показатели отличаются от большинства описал: они банально самые точные.

    Entze avatar
    Entze6 апреля 2012
    0

    @TOVVV, Спасибо за комментарий. Значит пойду искать другие тройные кризисы ;)

  2. Sima4 avatar
    Sima45 апреля 2012
    0

    Написанные радиусы скругления — это радиусы вашей иконки, то есть синего ободка?

    Если нет, то странно, тк стандартные радиусы другие:

    57х57 — радиус 10, например

    robolizer avatar
    robolizer5 апреля 2012
    0

    @Sima4, укажите ваш источник, пожалуйста. Насколько я знаю, Apple не пишет нигде стандартных радиусов и рекомендует самостоятельно иконки не округлять. Но большинство дизайнеров именно такие радиусы приводят – если погуглить “iphone 57 icon corner radius” то практически все результаты выдают 9px. В любом случае я проверял на всех устройствах и проблем не обнаружил.

    Sima4 avatar
    Sima45 апреля 2012
    0

    @robolizer, Большое кол-во темплейтов от дизайнеров, например, на dribbble.com, питерская контора по интерфейсам SoftFacade в своем блоге указывала размеры 57х57-10… а реального источника нет у меня, тк Эппл не пишет, да =)

    но за 4 года работы первый раз увидел 9px, честно =)

    вот с ретины:
    http://www.imagepost.ru/?v=ekrana_2012-04-05_v_16.41.28.png

    Лево-верх – 20px
    Право-верх – иконка Фото
    Право-низ – 18px

    по пикселам видно, что 20 правильно

    robolizer avatar
    robolizer5 апреля 2012
    0

    @Sima4, тогда странно действительно – приду домой, проверю ) Но на самом деле, почему тогда так много ресурсов пишут 9px и 18px? Может зависит от того в чем рисуешь (Ps\Corel)? Но я не буду спорить с профессиональными дизайнерами – в следующем апдейте поправлю, спасибо за бдительность )

    Sima4 avatar
    Sima45 апреля 2012
    0

    @robolizer, да, мне тоже удивительно, тк на stackoverflow тоже написали, что 9, но там споры начались)))

    и да, не зависит)

    и поправлять не надо, иконка нормально смотрится, просто другие будут делать 9px, вот что плохо

  3. kr1k avatar
    kr1k5 апреля 2012
    0

    Все, вроде, ничего, только обложка Pie Chart ни разу не вписывается в общий “бумажный” дизайн.

    robolizer avatar
    robolizer5 апреля 2012
    0

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

  4. Jason Rawland avatar
    Jason Rawland5 апреля 2012
    0

    нет в американском сторе??

    robolizer avatar
    robolizer5 апреля 2012
    0

    @Jason Rawland, сорри, пока нет. Выложу через недельку – хочу сайт и пару обзоров перевести на английский сначала.

  5. iam83 avatar
    iam836 апреля 2012
    0

    Один маленький совет: в следующий раз наймите хорошего дизайнера. Серьезно.

    robolizer avatar
    robolizer6 апреля 2012
    0

    @iam83, Спасибо за совет. Был бы признателен если бы вы пояснили что самое ужасное в моём дизайне. Но вообще согласен – как только появятся средства – обязательно найму хорошего дизайнера.

  6. Vikarti Anatra avatar
    Vikarti Anatra9 апреля 2012
    0

    The item you’ve requested is not currently available in the U.S. store.
    А зачем так сделано?
    руками поиск тоже в US store не находит

    robolizer avatar
    robolizer9 апреля 2012
    0

    @Vikarti Anatra, Я уже отвечал ранее, что в US выложу на этой неделе – хочу сначала перевести сайт техподдержки – а пока только в русском store. Как только выложу в US обязательно сюда напишу. Или оставьте свой email – отправлю вам уведомление. Прошу прощения, я просто как-то упустил из виду, что у многих посетителей данного ресурса может не быть русского аккаунта.

    Vikarti Anatra avatar
    Vikarti Anatra9 апреля 2012
    0

    @robolizer, vikarti.anatra at me.com
    вообще – по описанию программа нравится.

  7. robolizer avatar
    robolizer18 апреля 2012
    0

    Biorhythmica стала доступна в US AppStore и многих других странах.
    http://itunes.apple.com/us/app/biorhythmica/id509845471

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

Нашли орфографическую ошибку в новости?

Выделите ее мышью и нажмите Ctrl+Enter.

Как установить аватар в комментариях?

Ответ вот здесь