#2. Интерфейс приложения
Я фанат цветовых сочетаний. Простых сочетаний лишенных какого-либо дополнительного смысла. Долгое время я искал и фотографировал их повсюду параллельно постигая тайны пропорций, сечений и гармоний.
Затем фотографировать я подустал, но любовь к цвету не пропала и влекомый своей слабостью я сделал Цветометр - страничку в интернете, где специальный скрипт генерирует красивые сочетания из 6 цветов (не всегда удачно, но в 95% случаев получалась чертовски хорошо).
Так я и жил с Цветометром, пока в один прекрасный день мне не захотелось перенести его в айфон.
Изучив вопрос я понял, что, к сожалению, мне даже в шутку не стоит задумываться над чем-то подобным. Одна только регистрация в качестве разработчика Эппла казалось невероятно сложным делом: нужно было разговаривать с ними по телефону, готовить и пересылать какие-то документы и проч. Идея накрылась медным тазом.
Но не так я прост. Наученный опытом я знал, что если что-то не получается, то нужно просто подождать какое-то время (когда неделю, когда год) по истечении которого все будет казаться уже не таким сложным. Ну это как с литературой: дорос - не дорос.
И вот момент настал. Я почувствовал, что готов. Сел. Все организационные моменты оказались вовсе не таким страшными как казалось в начале и я приступил.
Будь то покупка мебели, планирование поездки, создание сайта - я всегда начинаю с графической концепции и дизайна. В данном случае концепция будущего приложения придумалсь сама собой. Выглядела она так (внимание! исторический документ):
За почеркушками на обрывке листа настало время фотошопа. Первая фотошопная версия приложения выглядела так:
Ну это всего лишь разноцветные плашки, а в Цветометре были еще шастнадцетеричные (НЕХ, хекс) координаты цвета. Мне хотелось сохранить подобный функционал и в приложении, добавив к нему также и RGB:
Кроме того, в Цветометре в зачаточном виде была реализована возможность сохранения понравившегося цветового набора в соц. сетях - сочетание загружалось на стену пользователя. Это было не очень удобно с точки зрения использования и существовало скорее для распространения информации о существовании Цветометра. В новом приложении функция сохранения должна была быть реализована в полном объеме. Первая фотошопная версия сохраненных наборов выглядела так:
Тут же встал вопрос, как переключаться между сохраненными наборами и главной сценой с плашками. На этом этапе в истории случилось первое прозрение. Принято, что в айфоновских приложениях подобные переходы осуществляются кнопкой (насчет Андройда не знаю). Но кнопки казались такими скучными и я решил, что переходы между сценами будут осуществляться самым удобным для подобных устройств образом - свайпами. Ну это когда вы проводите по экрану пальцем в ту или иную сторону.
Так в интерфейса появилась «тянучка». Вот она, внизу посередине:
Ну хорошо. Есть плашки, есть сохраненные наборы. И все? Как вы скорее всего не заметили, на скриншоте с сохраненными цветами есть две белые кнопочки: доступ к фото-библиотеке и фотоаппарату. Все верно. Я посчитал, что просто генерировать разноцветные плашки для приложения слишком мало, поэтому расширил его функционал возможностью анализировать окружающий мир и переводить его в цветные плашки. Это отдельная история, о ней позже.
А пока я завяз в поиске подходящего фона для экрана с сохраненными цветами:
Забегая вперед скажу, что на этом этапе я крепко застрял, и пока я буксовал я думал над экраном настройки, который выглядел в соответствии с общим стилем так:
Напрашивались перемены. Мне не нравилось все. Легко родившийся и такой естественный прототип на клочке бумаги превратился в какого-то монстра, а я не люблю монстров. Я люблю чтоб ах.
К сожалению у меня не сохранилось исходников чтобы показать мысленный процесс в динамике, скажу лишь очевидное - от фона надо было избавляться, а плашки с сохраненными наборами делать больше и эффектнее. Едва я применил на макет мой любимый, кажется довлатовский, принцип «хули ты выебываешься, будь проще» и результат не заставил себя ждать:
Ну вот, другое дело. «Эх, родимая, сама пошла». Оставался еще экран настройки. В этом месте необходимо сделать небольшое лирическое отступление. Дело в том, что до сих пор приложение существовало без названия и без иконки.
Ясно, что иконка для такого приложения должна быть предельно проста:
...и при этом быть достаточной заметной среди других иконок в телефоне (обратите внимание, что у приложения еще нет названия и оно до сих пор живет под случайным именем - asd):
Я любитель непонятных звучных слов (типа как в Икее, хотя их слова обычно все тупые). В голову пришло слово Клогг. Оно какое-то недоброе, само по себе, колючее, несуразное, в общем все как я люблю. Клогг - это не «твое светлое завтра, детка, е-е». Под этим названием макет просуществовал около недели, пока я не ввел его в гугл. оказалось, что Клогг - это недоброе, само по себе, колючее, несуразное, в общем все как я люблю и по совместительству главный злодей в Неверхуде:
Ёжтыж! Какое сходство! Но надо было думать дальше. Ситуация усложнялась тем, что в клогговские времена было придумана иконка приложения с буквой К и от этой буквы я отказываться не хотел. После бессонных дней поиска я остановился на двух вариантах, каждый из которых мне по-своему нравился: Koj и Kooj. Когда я не могу выбрать, я спрашиваю мнение народа и делаю наоборот. Народ выбрал Kooj.
Итак, есть название, есть иконка. Что дальше? Дальше сплеш-скрин. Как оказалось, айфоновские приложения должны иметь специальную картинку, показывающуюся при загрузке, в противном случае будет показываться черный экран, что не тру. Сплеш родился сам собой из иконки:
Подобная легкость не бывает случайной и означает только одно - пробурился до нефти. Из сплеша родился и весь фирменный стиль сопутствующих материалов. Да, Koj читается как «Коудж», но если вы будете читать его как «Кой», а не буду противиться.
Так и не разобравшись с фоноами для настройки, я стал думать над вводным уроком. Ну тот, который объясняет пользователю как пользоваться приложением. Урок должен был быть ненавязчивым и не скучным. Вариантов было не много, одним из которых были черные стрелки с подписями:
Собственно этот урок и задал недостающий вектор в оформлении приложения. Сразу стало ясно каким должны быть кнопки, фоны и прочее оформление.
Не смотря на всю общую веселость и бесшабашность оно обрело холодную строгость, что вкупе с кривоватым названием дало превосходный результат.
Больше я ничего показывать не буду - скачайте приложение и посмотрите сами, вам правда понравится.
А! Чуть не забыл. Поскольку приложение платное, я сделал легкую, бесплатную версию. В ней нет некоторых функций, но она прекрасна и без них. Дело в том, что обычно делая легкую версию разработчики херачат на иконку слово FREE красненьким и все. Этот способ годится на крупных компаний с членами совета директоров. Простой паренек из Питера не может себе позволить опуститься до подобной безвкусицы, поэтому для легкой версии был придуман сверхгениальный и абсолютно мозгодробительный до дрожи знак - k.
И соответствующий сплеш-скрин:
Такая вот история.
А пока я пишу продолжение рассказа, вы можете скачать приложение себе на айфончик:
Koj - https://itunes.apple.com/us/app/koj/id643485164?mt=8
Koj Lite - https://itunes.apple.com/us/app/koj-lite/id643497152?ls=1&mt=8
Либо ищите его в АппСторе по слову koj.
Продолжение следует.
Затем фотографировать я подустал, но любовь к цвету не пропала и влекомый своей слабостью я сделал Цветометр - страничку в интернете, где специальный скрипт генерирует красивые сочетания из 6 цветов (не всегда удачно, но в 95% случаев получалась чертовски хорошо).
Так я и жил с Цветометром, пока в один прекрасный день мне не захотелось перенести его в айфон.
Изучив вопрос я понял, что, к сожалению, мне даже в шутку не стоит задумываться над чем-то подобным. Одна только регистрация в качестве разработчика Эппла казалось невероятно сложным делом: нужно было разговаривать с ними по телефону, готовить и пересылать какие-то документы и проч. Идея накрылась медным тазом.
Но не так я прост. Наученный опытом я знал, что если что-то не получается, то нужно просто подождать какое-то время (когда неделю, когда год) по истечении которого все будет казаться уже не таким сложным. Ну это как с литературой: дорос - не дорос.
И вот момент настал. Я почувствовал, что готов. Сел. Все организационные моменты оказались вовсе не таким страшными как казалось в начале и я приступил.
Будь то покупка мебели, планирование поездки, создание сайта - я всегда начинаю с графической концепции и дизайна. В данном случае концепция будущего приложения придумалсь сама собой. Выглядела она так (внимание! исторический документ):
За почеркушками на обрывке листа настало время фотошопа. Первая фотошопная версия приложения выглядела так:
Ну это всего лишь разноцветные плашки, а в Цветометре были еще шастнадцетеричные (НЕХ, хекс) координаты цвета. Мне хотелось сохранить подобный функционал и в приложении, добавив к нему также и RGB:
Кроме того, в Цветометре в зачаточном виде была реализована возможность сохранения понравившегося цветового набора в соц. сетях - сочетание загружалось на стену пользователя. Это было не очень удобно с точки зрения использования и существовало скорее для распространения информации о существовании Цветометра. В новом приложении функция сохранения должна была быть реализована в полном объеме. Первая фотошопная версия сохраненных наборов выглядела так:
Тут же встал вопрос, как переключаться между сохраненными наборами и главной сценой с плашками. На этом этапе в истории случилось первое прозрение. Принято, что в айфоновских приложениях подобные переходы осуществляются кнопкой (насчет Андройда не знаю). Но кнопки казались такими скучными и я решил, что переходы между сценами будут осуществляться самым удобным для подобных устройств образом - свайпами. Ну это когда вы проводите по экрану пальцем в ту или иную сторону.
Так в интерфейса появилась «тянучка». Вот она, внизу посередине:
Ну хорошо. Есть плашки, есть сохраненные наборы. И все? Как вы скорее всего не заметили, на скриншоте с сохраненными цветами есть две белые кнопочки: доступ к фото-библиотеке и фотоаппарату. Все верно. Я посчитал, что просто генерировать разноцветные плашки для приложения слишком мало, поэтому расширил его функционал возможностью анализировать окружающий мир и переводить его в цветные плашки. Это отдельная история, о ней позже.
А пока я завяз в поиске подходящего фона для экрана с сохраненными цветами:
Забегая вперед скажу, что на этом этапе я крепко застрял, и пока я буксовал я думал над экраном настройки, который выглядел в соответствии с общим стилем так:
Напрашивались перемены. Мне не нравилось все. Легко родившийся и такой естественный прототип на клочке бумаги превратился в какого-то монстра, а я не люблю монстров. Я люблю чтоб ах.
К сожалению у меня не сохранилось исходников чтобы показать мысленный процесс в динамике, скажу лишь очевидное - от фона надо было избавляться, а плашки с сохраненными наборами делать больше и эффектнее. Едва я применил на макет мой любимый, кажется довлатовский, принцип «хули ты выебываешься, будь проще» и результат не заставил себя ждать:
Ну вот, другое дело. «Эх, родимая, сама пошла». Оставался еще экран настройки. В этом месте необходимо сделать небольшое лирическое отступление. Дело в том, что до сих пор приложение существовало без названия и без иконки.
Ясно, что иконка для такого приложения должна быть предельно проста:
...и при этом быть достаточной заметной среди других иконок в телефоне (обратите внимание, что у приложения еще нет названия и оно до сих пор живет под случайным именем - asd):
Я любитель непонятных звучных слов (типа как в Икее, хотя их слова обычно все тупые). В голову пришло слово Клогг. Оно какое-то недоброе, само по себе, колючее, несуразное, в общем все как я люблю. Клогг - это не «твое светлое завтра, детка, е-е». Под этим названием макет просуществовал около недели, пока я не ввел его в гугл. оказалось, что Клогг - это недоброе, само по себе, колючее, несуразное, в общем все как я люблю и по совместительству главный злодей в Неверхуде:
Ёжтыж! Какое сходство! Но надо было думать дальше. Ситуация усложнялась тем, что в клогговские времена было придумана иконка приложения с буквой К и от этой буквы я отказываться не хотел. После бессонных дней поиска я остановился на двух вариантах, каждый из которых мне по-своему нравился: Koj и Kooj. Когда я не могу выбрать, я спрашиваю мнение народа и делаю наоборот. Народ выбрал Kooj.
Итак, есть название, есть иконка. Что дальше? Дальше сплеш-скрин. Как оказалось, айфоновские приложения должны иметь специальную картинку, показывающуюся при загрузке, в противном случае будет показываться черный экран, что не тру. Сплеш родился сам собой из иконки:
Подобная легкость не бывает случайной и означает только одно - пробурился до нефти. Из сплеша родился и весь фирменный стиль сопутствующих материалов. Да, Koj читается как «Коудж», но если вы будете читать его как «Кой», а не буду противиться.
Так и не разобравшись с фоноами для настройки, я стал думать над вводным уроком. Ну тот, который объясняет пользователю как пользоваться приложением. Урок должен был быть ненавязчивым и не скучным. Вариантов было не много, одним из которых были черные стрелки с подписями:
Собственно этот урок и задал недостающий вектор в оформлении приложения. Сразу стало ясно каким должны быть кнопки, фоны и прочее оформление.
Не смотря на всю общую веселость и бесшабашность оно обрело холодную строгость, что вкупе с кривоватым названием дало превосходный результат.
Больше я ничего показывать не буду - скачайте приложение и посмотрите сами, вам правда понравится.
А! Чуть не забыл. Поскольку приложение платное, я сделал легкую, бесплатную версию. В ней нет некоторых функций, но она прекрасна и без них. Дело в том, что обычно делая легкую версию разработчики херачат на иконку слово FREE красненьким и все. Этот способ годится на крупных компаний с членами совета директоров. Простой паренек из Питера не может себе позволить опуститься до подобной безвкусицы, поэтому для легкой версии был придуман сверхгениальный и абсолютно мозгодробительный до дрожи знак - k.
И соответствующий сплеш-скрин:
Такая вот история.
А пока я пишу продолжение рассказа, вы можете скачать приложение себе на айфончик:
Koj - https://itunes.apple.com/us/app/koj/id643485164?mt=8
Koj Lite - https://itunes.apple.com/us/app/koj-lite/id643497152?ls=1&mt=8
Либо ищите его в АппСторе по слову koj.
Продолжение следует.