Захотів розробити невеликий додаток - Qtty. Додаток повинен вміти робити знімок і застосовувати набір фільтрів до нього, після чого публікувати цей самий знімок як основну фотографію в профілі ВКонтакте.
Автор буде пробувати робити все через прототипи, так як це робили в 223 сесії WWDC 2014.
Опис проекту
Спочатку опис виглядав таким чином:
Додаток буде працювати тільки з ВК (поки) і дозволяти користувачеві робити фотографії і відразу їх завантажувати в потрібний альбом у ВК, за можливості застосувавши якісь фільтри.
Основний функціонал:
1. Показати список фото альбомів
2. Показ фотографій вибраного альбому
3. Можливість вилучити фотографію
4. Можливість вилучити альбом
5. Можливість створити альбом і вказати права доступу до нього
6. Зробити фотографію, застосувати фільтри, вказати альбом в який завантажити фотографію (або зробити основною картинкою профілю), прикріпити місце розташування, додати опис до фотографії.
Вирішив, що хочу зробити щось по-швидкому, тому прибрав більшу частину функціоналу і зробив такий додаток, який описується першим абзацем:
Додаток буде працювати тільки з ВК (поки) і дозволяти користувачеві робити фотографії і відразу їх завантажувати у ВК, за можливості застосувавши якісь фільтри.
Прототипи. Раз.
Робимо будь-які замальовки екранів, пропонуємо різні ідеї і будь-яким чином наносимо їх на папір.
Почав я з екрану авторизації. Без авторизації програми немає сенсу обробляти фотографію, тому виключений варіант показу екрану для здійснення знімка в якості стартового. На екрані авторизації повинен був знаходиться якийсь елемент на кшталт кнопки, після натискання на який користувач би зміг авторизуватися у ВК і ми змогли здійснювати запити від його особи.
Які начерки були у мене:
Поясню кожен з них.
1. Задумка була в тому, що перед користувачем буде якийсь набір фотографій на яких будуть написи (Поділися враженнями з друзями, Будь завжди на зв'язку, Поділися радісними моментами і тд). Нижче знаходиться кнопка авторизації.
Мінуси цього варіанту:
Треба щось гортати.
Зайва робота з підбору картинок потрібних тонів, які поєднуватимуться з фоновим кольором + підбір шрифту та його кольори для нанесення на зображення.
Скидається на якесь керівництво користувача.
Мені він просто не сподобався.
2. Якщо в першому варіанті не було видно, яке зображення ти гортаєш за рахунком і скільки з усього, то тут цей недолік виправлений. Однак мінуси залишаються такі ж.
3. Картинка і кнопка. Здавалося б все просто, але виникає маса питань: колір тла, кольори зображення, їх поєднання. Варіант відпав.
4. Тут фоном встановлена картинка з безліччю фотографій користувача, на картинці може бути якийсь додатковий шар, щоб безліч осіб не різало очі і у користувача не викликало відчуття тривоги і нервозності. Кнопка залишається.
Цей варіант мені найбільше сподобався.
Після того, як всі наші ідеї були перенесені з голови на папери взявся робити начерки цих самих екранів в реальних розмірах з реальними елементами. Все робилося в Keynote.
Покажу не всі варіанти, а тільки 2, які я зміг зробити. В ході реалізації перших двох варіантів, з перелистуваннями, прийшов до висновку, що занадто громіздко для такого маленького додатку.
Найперший попередній вигляд екрану авторизації:
Поцікавився у своїх колег по роботі, який з двох варіантів їм більше подобається. Всі відповіли перший. Другий багатьом не сподобався через якогось чувака і вигляд. Вони не могли зрозуміти, в чому суть програми, чому саме цей хлопець, хто він такий і т. д.
Другий варіант було відкинуто.
Через деякий час з'явилися ще такі варіанти:
Під рукою не було паперу, тому екран відображення ВК в UIWebView для авторизації був накиданий відразу в Keynote. Варіанти, які вийшли:
Зупинився на першому варіанті. З кнопкою «Закрити »/« Скасувати» верхня панель виглядала не так, як хотілося б. Пробував додати туди кнопку з різними тінями/прозорістю і символом «Х», але теж вибивалося (хоча починає подобається ідея зі стікерами або елементами-наклейками).
Хочу ще раз нагадати, що основне завдання на етапі прототипування - відтворити візуально додаток не програмуючи, випробувати безліч видів і варіантів екранів, подивитися на реакцію користувача і почути їх відповідну реакцію (вже на ранніх етапах прототипування ми позбавляємося від якихось проблем, які б зазвичай виникли десь в середині розробки додатку або в кінці).
Наступним екраном буде екран фотографії, де користувач зможе зробити знімок (використовуючи фронтальну або задню камеру) і перейти на екран застосування фільтрів/ефектів.
З екраном фотографії було куди цікавіше. Переглянув і попрацював з Інстаграмом, деякі моменти мені не сподобалися і я вирішив усунути їх, але в той же час перейняти дещо собі.
Що вийшло (від початкових варіантів до останніх):
Даний екран не хотілося захаращувати чимось крім основних елементів, тому в цілому можна сказати, що всі варіанти це якісь варіації одного. Спочатку в нижній частині екрана знаходиться тільки одна кнопка (один елемент) за натисканням на який користувацькі знімок буде зафіксовано. Після фіксації знімка з кнопки (в моєму перегляді) повинні «виїхати» в протилежні сторони дві додаткові кнопки - «Перезняти» і «Обробити». Як видно на одному з начерків, на початковому етапі кнопки були тільки з написами «YES» і «NO», але другий варіант (перший знімок, другий екран) наштовхнув мене на думку, що YES/NO анітрохи не інформативно, але в той же час відображати питання «Що хочете робити зі знімком?» зайве, тому що з контексту зрозуміло, які дії можуть бути потрібні.
Чому я вирішив опустити кнопку з літерою «Q» в нижню частину екрану таким чином, що вона стала трохи заїжджати вниз? Відповідь проста - бажання збільшити вільний простір. З цієї причини на 3 знімку (1 екран) верхня панель була вилучена.
З Інстаграму я перейняв тільки сітку, мені вона здалася необхідною в разі, якщо я хочу зробити пару знімків таким чином, щоб об'єкт знаходився в центрі фотографії.
Ось, що я отримав через 40-50 хвилин (см нижче). Деякі моменти були змінені, деякі ще будуть змінені, є ідеї. Завдяки прототипу вдалося зауважити, що просто накласти знак ґрат і фотоапарата на зображення не вийде - треба щось підкладати під них. Панель - перше рішення, але через неї втрачається цілісність і враження від фотографії, вона заважає.
Відео процесу прототипування можете знайти за цим посиланням.
Поки переносив елементи з портрет-режиму в лендскейп-режим задумався про те, щоб прибрати статус бар.
Порівняйте:
Порівняйте:
Порівняйте:
Може спробувати зробити так?
А в портрет режимі перенесемо елементи вниз:
Через хвилин 20-30 вирішив зупинитися на такому варіанті (чим більше зараз варіантів, тим ширше потім буде вибір):
Фіолетова кнопка заважає. Фіксування знімка буде за натисканням, після натискання користувача не буде з'являтися ніякого запиту подальшої дії - відразу відображення фільтрів, кропів тощо. З цього екрана користувач зможе одним натисканням перейти до зйомки.
Приступив до начерків екрану обробки фотографії. Перші версії виглядали наступним чином:
Варіант сподобався, але я б загруз в реалізації, чого мені не хочеться.
Спростив до такого:
У цьому варіанті вирішив обіграти тему зі стікерами/наклейками. Як можна помітити, у першій версії цієї теми - плоскі елементи.
Такими вийшли у мене екрани обробки фотографії в лендскейп режимі (вибирати потім будемо, але вже є кілька фаворитів. Відео за цим посиланням.):
Дещо зовсім інше (кожне зображення має бути вихідним зображенням з накладеним фільтром):
Після натискання відкривається такий екран:
Правда у такого варіанту кілька питань:
1. Як піти з цього екрану?
2. Два елементи, які підтверджують дію якусь (кнопка - застосовує фільтр, а галочка - перехід до налаштувань)
3. При невеликому кол-ві фільтрів виглядає добре і досить велика частина зображення видно, але як буде виглядати ця гармошка при 10-15 фільтрах?
Все-таки виглядає приємно, тому остаточно не будемо відкидати цей варіант.
Наступним у нас йде екран зазначення опцій завантаження. Що користувач може вказати:
1) Встановити фотографію як основну
2) Прикріпити поточне місце розташування
3) Вибрати альбом до якого буде завантажено фотографію
4) Додати мітку друга на фотографію
5) Запостити фотографію на стіну
Накидання у Keynote:
Відео процесу створення можна знайти за цим посиланням.
Чи варто показувати користувачеві процес завантаження фотографії? Якщо відповідь так, вам слід розмістити індикатор завантаження на поточному екрані або створити новий екран зі списком фотографій, які слід завантажити. Список потрібен для того, щоб вирішити проблему завантаження фотографій при відсутньому інтернеті. Наскільки потрібен користувачеві такий список в явному вигляді? Основне завдання - сховати все зайве і зробити роботу програми максимально органічною і природною.
Після декількох хвилин прикидок прийшов ось до такого варіанту відображення кол-ва фотографій у черзі:
Завантажувати зображення будемо у фоновому режимі. Якщо з якоїсь причини завантажити фотографію не вдалося, то повторимо спробу пізніше, але не будемо видаляти фотографію зі списку.
Останній екран з опціями мені не особливо подобається, вирішив пошаманити ще. Порівняйте:
Такі виходять інтерфейси в лендскейп режимі:
Варіант з callout-блоком навіть не став розглядати. Місця вертикального в лендскеп режимі мало + хотілося зберегти деякі загальні положення елементів між лендскейп варіантом і портретним.
Прототипи: відгуки. Два.
Екран авторизації:
Коментарі: відсутні.
Модальне вікно авторизації у ВК (коректована версія):
Коментарі:
Напис «Авторизація» на минулому скріні змахував на кнопку і у випробовуваних виникали питання з цього приводу.
Вікно знімання (портретний режим):
Коментарі: відсутні.
Вікно знімання (лендскейп режим):
Коментарі: відсутні.
Фільтри (портретний режим):
Коментарі: відсутні.
Фільтри (лендскеп режим):
Коментарі: відсутні.
Параметри завантаження (портретний режим):
Коментарі:
Шрифт відстій. Навіщо потрібен заголовок «Друзі», якщо я отже бачу, що це мої друзі? (автор: так з'явився другий варіант екрану)
Параметри завантаження (лендскейп режим):
Коментарі: такі ж, як до екрану в портретному режимі.
Прототипи: анімація. Три.
Відео можна переглянути за цим посиланням.
Програмуємо головний екран.
На цьому екрані я вирішив провести кілька експериментів:
1. Використовувати блюр ефект як «скляний» прошарок між фоновою картинкою і назвою програми.
2. Кнопку авторизації можна вставляти не з тінню, а програмно створювати її.
Почнемо з того, що використання блюра в чистому вигляді не дасть потрібного ефекту.
Треба хитрити - додавати інший шар. Так і зробимо. Додатковий шар буде сірого кольору і для досягнення потрібного ефекту (як на макеті) необхідно експериментувати з прозорістю самого шару (alpha).
Логотип програми вставлявся простою картинкою.
З тінню було розбиратися куди цікавіше, справа в тому, що не можна на одній вьюху застосувати cornerRadius і кастомний shadowPath. Після гуглення та читання документації вирішуємо винести тінь на окремий шар. Для досягнення потрібного стікер-ефекту, необхідно визначити межі тіні під кнопкою, для цього скористаємося GGPath і згадаємо геометрію.
Якщо уважно придивитися до тіні під кнопкою, то можна прикинути, що вона складається з «майже» -прямокутника з однією округленою стороною (нижньою). З побудовою прямих ніяких проблем не повинно виникнути - CGPathAddLceToPoint () і CGPathMoveToPoint (). Що ж стосується округленої сторони, то у нас вибір невеликий - або ми хитримо і округлену сторону замінюємо двома прямими, або розбираємося з методом CGPathAddArc () і подібними.
Скажу відразу, що використовуючи перв
