Створення iOS додатки. Від ідеї до результату

Все почалося з того, що я озирнувся і, не побачивши автомобіля своєї мрії, вирішив сконструювати його сам.
Фердинанд Порше
Привіт, Хабр. Хочу розповісти, як створив своє перше iOS додаток і що з цього вийшло.

image

Ідея
Ідея для програми виникла сама собою: створи те, чим би ти із задоволенням користувався сам. Я постійно пишу нотатки. Адже у кожного зайнятого людини існує певний набір фактів, які він отримує протягом дня, і які варто запам'ятати. А так як всі люди забувають (і це нормально!), немає кращого рішення, ніж просто записати. Я весь час відчував якусь незручність при роботі з представленими в AppStore додатками-заметочниками. Зайва складність в управлінні, наявність непотрібних категорій, нагромадження додаткової інформації — все це заважає додатком виконувати його основну функцію. Плюс до всього, багато з цих речей виглядають просто негарно.

Тому, поставивши всі ставки на простоту і зручність, я приступив до створення концепції. Модель програми з єдиним списком нотаток. Все в одному місці, що може бути простіше? Якщо щось має велику цінність або актуальність, зовсім не обов'язково вішати на нього ярлик, адже досить просто перемістити більш важливу примітку до топ списку. Старі і непотрібні записи поступово будуть опускатися вниз і надалі будуть видалені користувачем.

Функціонал
Після того, як концепція була придумана, я виписав основний функціонал — ті речі, на які я хотів би зробити акцент в управлінні:

  • Один головний список для всіх нотаток;
  • Всі дії з помітив повинні виконуватися одним рухом — створення, редагування, видалення, виділення, переміщення в топ і шарінг;
  • Можливість легко поділитися нотатками в Facebook, Twitter, скопіювати або надіслати на електронну пошту;
  • Виділення нотатки декількома кольорами, в залежності від пріоритету і терміновості;
  • редагування в портретної і ландшафтної орієнтації;
  • Денна і нічна теми оформлення для зручної роботи в будь-який час доби
Досить стандартний функціонал для подібного роду програм, погодьтеся. Але це тільки верхівка айсберга, диявол криється в деталях.

Інструментарій
Перед тим, як писати код в Xcode, я повністю відтворив зовнішній вигляд програми у векторному редакторі Sketch. Ця програма відмінно підходить для швидкого створення макетів. Для цього додатка доступна безліч плагінів, серед них є Sketch Preview — попередній перегляд артборда відразу на пристрої через програму Skala Preview. Всього лише потрібно завантажити безкоштовні програми Skala Preview на комп'ютер і мобільний пристрій і встановити плагін. Після цього вибрати потрібний артборд, натиснути комбінацію Command+P і вже через секунду зовнішній вигляд додатка транслюється на пристрій.

Крім того, в додатку дуже зручно створювати скріншоти для публікації в AppStore. Для кожного розміру екрана створювався свій набір артбордов, разом з використанням стилів, час витрачений на форматування мінімально. Але про публікацію трохи пізніше.

Розробка
В додатку я використовував всього два контролера — один безпосередньо для всіх-всіх-всіх нотаток, інший — для відображення невеликого туториала при першому запуску. Роботу з базою даних я організував з допомогою фреймворку CoreData.

Після створення базового функціоналу (створення, видалення, редагування нотаток) я вирішив поліпшити кожну з цих функцій.

Погодьтеся, редагування тексту в iOS реалізовано досить незручно. При допущенні помилки в слові для переміщення курсору на потрібну позицію необхідно зробити торкання і не прибираючи пальця від екрану, спробувати потрапити в обрану область. До того ж після виправлення помилки потрібно повернути курсор назад в кінець рядка. У своїй програмі я вирішив переробити механізм переміщення курсору: для того щоб внести зміни в слово, потрібно лише зробити свайп в зоні між клавіатурою і набираемой фрази не загороджуючи при цьому огляд тексту.

Анімації видалення і переміщення в топ я вирішив реалізувати самостійно, а візуальне супроводження максимально наблизити до реального життя. Щось набуло більш високий пріоритет — свайп вправо і замітка переміщається в топ списку. Щоб видалити свайп " вліво і анімація закреслення покаже на скільки ще потрібно продовжити свайп щоб завершити видалення. При випадковому видаленні — потрібно просто потрясти пристрій («Shake»), і замітка повернеться на своє попереднє місце.

Для того, щоб виділити замітку, я використовував LongTapGesture і три основних кольори програми — білий, синій і червоний, які і сформували головну палітру кольорів.

Щоб поділитися нотатками з програми я додав додатковий нижній бар, для появи якого необхідно зробити свайп з-під нижнього краю пристрою (Bottom Edge Swipe). У панелі для шарінга зібрані всі найважливіші дії — публікація в Facebook або Twitter, відправка списку заміток по електронній пошті, або просто копіювання для подальшого використання. Механізм дуже простий — потрібно виділити необхідні записи, після — натиснути на потрібну функцію. Якщо ви необхідно повернутися в звичайний режим — свайп по бару, але вже вниз.

Перехід між денною і нічною темами я вирішив зробити автоматичним — чому ніхто ще не додумався змінювати зовнішній вигляд в залежності від положення сонця на небі? Все дуже просто — після настання темряви і після сходу сонця тема змінюється, при цьому користувачеві не потрібно відволікатися від створення заміток, адже додаток завжди буде автоматично підлаштовуватися під навколишні умови.

Неймінг
Назва програми — найважливіша частина при розробці, — це перше, що бачить користувач в магазині. На хабре є відмінна стаття з цього приводу. До підбору імені я вирішив підійти грунтовно: для початку я перебрав список 1000 найпопулярніших слів в англійській мові і виписав всілякі комбінації, які підходили б для назви мобільного додатку для нотаток, до того ж хотілося вкластися в 8-10 символів. Але при цьому не хотілося вибирати назву SuperNotes або NotesPlus etc, хотілося чогось нового. Мені сподобалося поєднання mad note, на яку випадково натрапив в Urban Dictionary:
mad note — excellent, entertaining, surprising, or unexpected awe-inspiring
Відразу ж з'явився і слоган: MadNotes — Note your passion. Оскільки палітра основних кольорів у мене вже була готова (білий, синій, червоний), я вирішив придумати відповідну іконку. Ситуація з логотипами для додатків подібного роду плачевна:

image

Оскільки нотатки на папері пишуть олівцем або ручкою, я вирішив відобразити це на іконці — олівець повернутий під кутом 45 градусів. Вийшло ось так:
image
Результат
Оскільки спочатку проект замислювався як дизайнерський, я вирішив взяти участь з моїм додатком у всеукраїнському конкурсі Ukrainian Design Awards: The Very Best Of Digital в категорії Design. До конкурсу залишалося кілька тижнів, за цей час я встиг зробити публікацію на Behance, де візуально показав усі основні функції програми, а також записав відео-превью.
Оскільки переможців конкурсу не розголошують до самого останнього моменту, було неймовірно приємно побачити свою роботу на виставці робіт переможців — журі побачили і оцінили головну концепцію — мінімалістичне і, разом з тим, функціональна програма для ведення нотаток.
image
Додаток перебувати в AppStore вже кілька місяців, за цей час я зробив шість оновлень і переписав код Swift. В останній версії (1.2) додано синхронізувати з iCloud, так що замітки вже встигли перебратися в хмару.

Спасибі увагу.
Note your passion

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.