| 10 июля 2018 г. – 7:44 утра по тихоокеанскому времени
Одна из самых значительных дизайнерских возможностей в современной истории была объявлена простым постом в блоге на сайте Apple. «Позвольте мне просто сказать это: мы хотим нативные сторонние приложения для iPhone, и мы планируем предоставить SDK разработчикам в феврале», — написал Стив Джобс. Тихим четверговым утром менее чем через год после этого, App Store открылся для пользователей iPhone с выбором чуть более 500 приложений.
Немногие современные инновации так сильно изменили нашу жизнь и взаимодействие с окружающим миром, как приложения для iPhone. Создатели первых 500 приложений, доступных на старте, имели уникальную возможность сформировать направление дизайна и методы взаимодействия для миллионов приложений, созданных с тех пор.
Чтобы отпраздновать 10-летие App Store, давайте изучим визуальную эволюцию 10 оригинальных приложений App Store.
Приложения
Для этого материала я сосредоточился исключительно на заметных визуальных изменениях приложений, которые были доступны для загрузки в первый день и продолжают получать обновления до сих пор. Хотя многие из этих приложений также доступны для iPad, этот обзор освещает изменения в версиях для iPhone. (Нажмите на любое фото, чтобы увидеть увеличенную версию.)
iTunes Remote
Apple с самого начала подала пример другим разработчикам, опубликовав собственное программное обеспечение в App Store. Два из первых созданных приложений — это игра Texas Hold’em и Remote, простая утилита для управления воспроизведением библиотеки iTunes на Mac или Apple TV по Wi-Fi. В то время как Texas Hold’em была удалена из магазина в 2011 году, Remote существует и по сей день.
С самого начала дизайн Remote находился под сильным влиянием внешнего вида приложения iPod для iPhone (сегодня называемого Music). По сути, вид «Сейчас играет» был идентичен по внешнему виду. Версия 2.0 принесла новый значок, разработанный Луи Мантиа. Два приложения начали расходиться с выходом iOS 6, когда стандартное приложение Music было полностью переработано и получило ползунок громкости, который динамически реагировал на движение вашего iPhone. Remote сохранил более стандартный внешний вид. Значок снова был обновлен, чтобы соответствовать стилю iTunes 11 для Mac.
Первый серьезный полный редизайн Remote произошел с выходом iOS 7. В отличие от строго белой темы приложения Music, Remote имел темный, размытый фон, окрашенный цветом обложки альбома. В 2016 году Apple выпустила приложение Apple TV Remote для Apple TV четвертого поколения, что стало логичным шагом вперед, который, казалось, заменил Remote. Вскоре после этого Remote был переименован в iTunes Remote. Хотя приложение продолжало быть доступным для загрузки, оно оставалось практически неизменным до прошлого июня, когда оно получило полностью новый дизайн и поддержку более высокого дисплея iPhone X.
Обновление iTunes Remote возвращает более консервативный вид, напоминающий приложение Music для iOS 11, но отказывается от больших заголовков и карточек в пользу традиционной навигации. Вместо красного оттенка iTunes Remote использует синий, чтобы соответствовать обновленному значку.
В отличие от скромных изменений iTunes Remote, приложение Facebook постоянно перерабатывалось на протяжении последнего десятилетия с нарастающей частотой. Полная визуальная история приложения могла бы составить небольшую книгу, поэтому я выбрал восемь наиболее значительных изменений.
Приключения Facebook на iPhone на самом деле начались до появления App Store. Сервис изначально был доступен как одно из первых веб-приложений iPhone в октябре 2007 года. Версия 1.0 в App Store едва узнаваема как Facebook сегодня, кроме фирменной синей навигационной панели. Даже на значке отсутствует характерная белая «f». Лента новостей приложения представляла собой, по сути, украшенное табличное представление над панелью вкладок с пятью значками: Home, Profile, Friends, Chat и Inbox. Версия 2.0 развивала ту же концепцию, добавляя еще два уровня навигации под основной строкой заголовка.
Facebook 3.0 был впервые представлен в июле 2009 года и ввел сетку иконок 3×3, чтобы помочь решить проблему разрастающейся навигации приложения. Ранние скриншоты демонстрируют полностью синюю сетку плиток, но этот дизайн так и не был выпущен в общедоступной сборке приложения.
В октябре 2011 года Facebook 4.0 стал одним из первых, кто использовал «гамбургер-меню» для навигации. Популярность приложения ускорила внедрение этого спорного элемента дизайна в бесчисленных приложениях и веб-сайтах в последующие годы. После версии 4 отслеживать хронологию дизайна Facebook стало значительно сложнее. Внешний вид приложения начал быстро итерироваться, и изменения часто внедрялись постепенно, а не задерживались для крупных релизов.
В апреле 2013 года Facebook экспериментировал с «Chat Heads» в приложении для iOS — перемещаемые фотографии профиля, которые при нажатии разворачивались в окна чата. Новый вид iOS 7 потребовал редизайна, который вернул панель вкладок для навигации. Значки на панели вкладок регулярно перерабатываются и перемещаются между обновлениями.
Некоторые из дизайнерских проблем Facebook связаны с его масштабами деятельности. В отличие от многих небольших приложений, Facebook должен обеспечивать единообразный опыт для своих клиентов на большом количестве платформ, а не только на Apple. Обновление в августе 2017 года попыталось унифицировать дизайн Ленты новостей на iOS, Android и в Интернете, стилизовав комментарии так, чтобы они больше напоминали разговор в Messenger.
Things
Things начал разрабатываться как инструмент управления задачами для Mac, но в итоге первым достиг статуса 1.0 на iOS. Cultured Code, разработчик приложения, отметил в своем посте о запуске, что оригинальная версия была создана чуть более чем за месяц — срок, который казался невозможным.
В Things 1.0 отсутствовал способ синхронизации с версией для Mac, а тегирование было отключено — оба критически важных параметра. Несмотря на напряженный запуск, та же базовая иерархия приложения сохраняется по сей день. Отличный альбом Flickr документирует ранние этапы проектирования приложения. Первое крупное визуальное обновление произошло в августе 2012 года, когда была выпущена Things 2.0. Новый слой краски избавил от стандартного вида iOS, а мелкие графические украшения придали ему уникальную индивидуальность.
Things 2.5 в сентябре 2014 года снова обновил пользовательский интерфейс приложения, придав ему более плоский вид и более светлую цветовую схему. Изначально планировался редизайн для Things 3, но разработка заняла больше времени, чем ожидалось. Things 3, выпущенный в мае 2017 года, стал самым значительным изменением во внешнем виде приложения. Практически каждый значок и элемент пользовательского интерфейса был перерисован, сохраняя при этом базовую компоновку. В видео запуска обновления Cultured Code специально подчеркивает, как анимация использовалась для придания приложению совершенно нового ощущения. Редизайн принес Cultured Code Apple Design Award в 2017 году.
OmniFocus
Даже в зачаточном состоянии App Store был хорошо укомплектован приложениями для управления задачами. И Things, и OmniFocus от The Omni Group доступны с первого дня. Хотя оба приложения предоставляют схожую функциональность, каждое из них за последнее десятилетие выбрало уникальные направления дизайна.
OmniFocus для iPhone изначально использовал простые табличные представления с пользовательской иконографией для навигации, получив в 2008 году Apple Design Award. The Omni Group перерисовали все свои изображения и значок приложения в июне 2010 года в ответ на Retina-дисплей iPhone 4. Одно из самых больших изменений в приложении произошло в июне 2011 года, когда был добавлен режим Forecast Forecast mode. Глянцевый выбор даты прямо под навигационной панелью стал определяющим элементом пользовательского интерфейса, даже когда в 2013 году глянец был убран в рамках редизайна в стиле iOS 7. Новый плоский вид сильно полагался на цвета оттенков текста для пространственного восприятия.
Обновление весной 2015 года принесло на iPhone более темный значок приложения с более мягкими краями галочки. Каждый значок с 2012 года содержит пасхальное яйцо, о котором могут не знать даже давние пользователи. Увеличьте масштаб, и вы заметите, что текстура углеродного волокна на самом деле состоит из крошечных повторяющихся логотипов Omni.
Последнее крупное обновление OmniFocus вышло в мае этого года с OmniFocus 3.0. Хотя многие из изменений были связаны с инженерией, большие заголовки и оптимизация для iPhone X освежили пользовательский интерфейс.
Evernote
История стиля Evernote прекрасно иллюстрирует многие основные тенденции дизайна программного обеспечения с 2008 года. Инструмент для заметок и организации начинал свою работу как настольное приложение до появления App Store и недавно прошел ребрендинг со своим узнаваемым логотипом слона перед запуском на iPhone.
Как и многие ранние приложения для iPhone, Evernote 1.0 сильно опирался на стандартные элементы UIKit и большие глянцевые графические элементы. Редизайн в 2011 году реорганизовал панель вкладок и выделил хронологический вид «Все заметки». Когда Evernote добавил поддержку увеличенного дисплея iPhone 5 в 2012 году, приложение все еще использовало стандартные элементы пользовательского интерфейса iOS. Панели навигации и кнопки автоматически получили матовое покрытие iOS 6.
В ноябре 2012 года вышел Evernote 5. Полностью переработанное с нуля, приложение стало образцовым примером насыщенных текстур и высоко тематических дизайнов, типичных для той эпохи. Рельефная иконография, имитация текстур бумаги и глубокие тени придавали приложению глубину. Значок приложения потерял устаревший глянцевый вид, но сохранил шлифованный металл.
В анонсирующем посте в блоге Evernote заявил: «Не так часто мы выпускаем полный редизайн. На самом деле, это происходит только раз в несколько лет». Хотя они не знали этого в то время, Evernote пришлось снова перерабатывать менее чем через год после анонса iOS 7 на WWDC 2013. Evernote 5 получил Apple Design Award в тот же день.
Evernote с распростертыми объятиями принял плоскостность iOS 7. Каждая текстура, тень и фаска были заменены. Яркий градиент слева направо проходил по навигационной панели приложения, соответствуя цветам, используемым на новом значке без текстур. Обновление в начале 2017 года смягчило дизайн более приглушенным значком, белой навигационной панелью, карточками заметок с мягкими тенями и темной панелью вкладок. Последующие улучшения типографики и значков панели вкладок.
eBay
Дизайн eBay, возможно, претерпел самое драматичное преображение из 10 представленных в этой статье приложений. Хотя Apple отметила его на сцене WWDC 2008, оригинальная версия eBay для iPhone была откровенно грубой по сравнению с сегодняшним отполированным опытом. К ноябрю 2009 года все приложение было переосмыслено с более последовательным серым пользовательским интерфейсом.
Год спустя eBay 2.0 заложил основу для организации приложения на долгие годы. Хотя ранее eBay предлагал отдельное приложение для продаж, эта функция теперь была интегрирована в основной опыт. Главный экран приложения также был обновлен и наконец-то стал по-настоящему нативным дизайном iOS.
Несколько обновлений в течение 2013 года придали eBay новые оттенки, сохраняя при этом тот же базовый пользовательский опыт. Каждое изменение отражало быстро меняющиеся вкусы в дизайне программного обеспечения того периода. Эта постоянная итерация означала, что внешний вид eBay довольно плавно перешел при редизайне приложения для iOS 7. Использование привычной цветовой палитры и навигационной иерархии помогло сохранить мышечную память пользователей.
В сентябре 2015 года eBay 4.0 сломал шаблон. Большая часть функциональности приложения была помещена под меню-гамбургер, оставив всего три вкладки вверху: «Activity, Shop, Sell». С строгим, насыщенным текстом пользовательским интерфейсом и новым значком в соответствии с ним, дизайн просуществовал недолго. К маю 2016 года eBay почти полностью вернул прежнюю организацию приложения. Сегодняшняя компоновка больше напоминает дизайн, выпущенный еще в 2010 году.
Twitterrific
Крейг Хокенберри и The Iconfactory создали первый клиент Twitter для iPhone еще до того, как App Store был анонсирован. Благодаря джейлбрейк-программному обеспечению, разработанному сообществом энтузиастов Apple, у разработчиков было несколько месяцев опыта написания приложений к тому времени, когда Apple предоставила официально санкционированные инструменты.
Twitterrific 1.0 позаимствовал мало элементов дизайна из дней джейлбрейка, выглядя на удивление отполированным с самого начала. Он получил Apple Design Award в 2008 году. Twitterrific также был одним из первых приложений, использовавших темную тему — вариант, который сегодня становится все более популярным. Но история дизайна Twitterrific больше говорит об истории Twitter как сервиса, чем о тенденциях дизайна. Каждое обновление отражало изменения в функциях и возможностях платформы Twitter. В ранние годы эти функции часто первыми внедрялись самими сторонними разработчиками.
В 2012 году Twitterrific 5.0 переместил всю навигацию в верхнюю часть экрана и использовал полностью пользовательские элементы пользовательского интерфейса. Подобная компоновка сохраняется и по сей день. Столь же увлекательным, как и дизайн приложения, является его значок. Помимо того, что он был первым приложением Twitter, использующим изображения птиц, Twitterrific является одним из немногих приложений iOS, которым удалось сохранить богатый детализированный значок, сохраняя при этом современный вид. Талисман приложения, Олли, почти не изменился во время перехода на iOS 7 и выглядит так же свежо сегодня, как и в 2012 году.
Instapaper
Приложение, созданное для чтения, ставит контент выше интерфейса, поэтому дизайн Instapaper изначально был сдержанным. На самом деле, некоторые из самых очевидных визуальных изменений, которые получило приложение, произошли благодаря изменениям в самой iOS. Стили навигационной панели и кнопок изменились как в iOS 6, так и в 7, что дало приложению две «бесплатные» визуальные обновления.
Однако утверждать, что приложение не развивалось, было бы неверно. Instapaper начал свою жизнь в App Store как бесплатная загрузка. Вскоре после этого была запущена платная версия под названием Instapaper Pro. Крупные обновления пользовательского интерфейса для чтения и более темные элементы пользовательского интерфейса появились осенью 2011 года, когда был добавлен новый значок, разработанный соучредителем Dribbble Дэном Сидархолмом. Значок позже был показан на слайде сессии WWDC о хорошей иконографии.
В апреле 2013 года Betaworks приобрела Instapaper у основателя Марко Армента, направив приложение по другому пути. Первое крупное обновление под руководством Betaworks вышло в сентябре 2013 года, обновление для iOS 7. Pinterest приобрел Instapaper в августе 2016 года, когда компания пообещала, что приложение продолжит жить. Под текущим владением Instapaper сохраняет довольно последовательный внешний вид даже после обновления для поддержки дисплея Super Retina iPhone X.
PCalc
История PCalc начинается более чем за десятилетие до запуска App Store. Разработчик Джеймс Томсон выпустил оригинальное приложение для Mac в 1992 году, и его эволюция продолжается по сей день. PCalc с самого начала имел полностью пользовательский интерфейс на iOS, предлагая постоянно растущий выбор тем и опций настройки. Здесь их слишком много, чтобы выделить, поэтому я выбрал несколько ключевых моментов.
Первая версия PCalc для iPhone была портирована из виджета панели управления Mac, но хорошо сочеталась с классическим интерфейсом iPhone. Глянцевые кнопки и темно-синяя ЖК-панель соответствовали значку приложения. В декабре 2008 года была добавлена популярная тема Twilight с еще более детализированной графикой и цветовой схемой, похожей на стандартное приложение калькулятора iOS. Twilight позже был обновлен с графикой Retina и поддержкой больших дисплеев. Это по-прежнему вариант в приложении сегодня.
PCalc адаптировался к плоской трансформации iOS 7 с новой темой по умолчанию под названием «Samurai» и соответствующим значком. Более старые темы остались доступны в настройках приложения. Значок PCalc снова был обновлен в марте 2016 года. С момента выпуска iOS 10.3 Apple позволяет сторонним приложениям динамически менять свои значки без отправки новой версии в магазин. PCalc начал полностью использовать эту функцию в мае 2017 года, выпуская огромное разнообразие альтернативных значков на выбор. В последующих обновлениях были добавлены новые.
После 10 лет разработки PCalc достиг практических пределов приложения-калькулятора для iPhone. Последние обновления демонстрировали некоторую творческую свободу с новыми функциями, такими как режим AR-калькулятора. Поддержка дисплея iPhone X принесла скругленные углы в тему Samurai.
Yelp
Как и Facebook, интерфейс Yelp для iPhone значительно изменился за эти годы, но сохранил узнаваемый брендинг благодаря использованию последовательной окраски навигационной панели. Приложение пользуется повышенной популярностью благодаря своей глубокой интеграции с Apple Maps.
В августе 2009 года Yelp внедрила в приложение для iPhone рудиментарный интерфейс дополненной реальности для поиска предприятий поблизости. Хотя в то время это было не более чем новинкой, функция ощущается пророческой сегодня, учитывая рост популярности ARKit-приложений.
В январе 2010 года новый домашний экран Yelp был выпущен с сеткой быстрых ярлыков 3×3. Тот же базовый интерфейс стилистически дорабатывался до тех пор, пока все приложение не было переработано в октябре 2013 года с более плоским видом и более заметной вкладкой «Nearby».
Последние обновления Yelp выходят за рамки простых результатов на основе местоположения, показывая контент, соответствующий вашим интересам. Этот метод открытия через кураторство — тенденция дизайна пользовательского опыта, которая пользовалась большим успехом в переработанном App Store iOS 11.
Значки
Сравнение итераций значков всех десяти представленных приложений бок о бок показывает уникальный путь к современности, который выбрал каждый из них. Некоторые значки оставались довольно неизменными за последнее десятилетие, лишь с небольшими улучшениями, а другие перерабатывались каждые несколько лет. Расположенные хронологически, общеотраслевые тенденции дизайна становятся очевидными.
В целом, глянцевые значки правили миром, когда запустился App Store. Иконный глянец применялся по умолчанию, и разработчикам приходилось специально отключать эффект в Xcode, чтобы удалить его. По мере развития приложений iOS большинство из них в конечном итоге отказались от глянца и перешли на высокодетализированные пользовательские дизайны.
iOS 7 знаменито установила новый стандарт того, что делает значок хорошим. Высоко текстурированные и 3D-рендеринговые активы, как правило, выглядели неуместно рядом с новым набором значков Apple, а некоторые противоречили обновленному скругленному радиусу угла. По мере того как дизайнеры и разработчики постепенно вырабатывали новые рекомендации и лучшие практики для дизайна значков, детали и более сдержанные цветовые палитры постепенно возвращались во многие значки.
Индивидуальность
Ранние приложения для iPhone бросились в неизведанный мир с головой. Без предвзятых представлений о том, как должно выглядеть или работать приложение, помимо собственного небольшого набора стандартных приложений Apple, дизайнеры и разработчики имели полную свободу экспериментировать.
Несмотря на это, многие ранние приложения выглядели и ощущались очень похоже, поскольку пользователи и разработчики вместе изучали лучшие практики. Ранняя обратная связь и метод проб и ошибок быстро сформировали то, как эволюционировало каждое приложение. В течение нескольких лет большинство приложений нашли свой путь и разработали уникальные стили и индивидуальность. По мере улучшения аппаратных возможностей дифференциация дизайна постепенно сместилась от статической графики к анимации и динамическим интерфейсам.
После того как гомогенизирующие правила интерфейса, введенные с iOS 7, отправили дизайнеров и разработчиков обратно к чертежной доске, многие приложения начали отличаться благодаря экспериментальным решениям, которые ощущаются, а не видятся. Тщательная кураторство и предиктивный дизайн информации часто используются, чтобы помочь найти новый и интересный контент, который иначе мог бы остаться незамеченным. Интеллектуальные рабочие процессы упрощают распространенные действия и помогают вам тратить меньше времени на выполнение задач. Важность хорошего дизайна за пределами пиксельного уровня привела к росту популярности дизайна пользовательского опыта (UX) в последние годы.
Следующие 10 лет
В 2008 году было невозможно точно предсказать, как будет развиваться App Store. Инновации порождали инновации, а вкусы и привычки владельцев iPhone формировали типы приложений, которые выбирали разработчики. То же самое можно сказать и о будущем. Предстоящие iPhone и версии iOS, несомненно, изменят ландшафт приложений непредвиденными способами. Новый тренд в дизайне может охватить мир завтра. Даже спустя 10 лет будущее волнительно.
Посмотрите 9to5Mac на YouTube для получения других новостей Apple: