Эволюция дизайна приложений в App Store
Издание 9to5Mac — о том, как изменилось оформление десяти приложений, доступных со дня открытия магазина App Store.
Вначале в App Store было всего 500 приложений. Разработчики задавали направление дизайна миллионам других продуктов, появившихся с тех пор.
Самые первые приложения были похожи друг на друга и по удобству, и по дизайну. Со временем, собирая обратную связь, дизайнеры нашли уникальный путь для каждого. По мере улучшения аппаратной части появились анимация и динамичные интерфейсы.
Apple показала пример другим разработчикам прямо на старте, добавив в свой магазин игру Texas Hold«em и простую утилиту для управления библиотекой iTunes на Mac и Apple TV Remote.
Ранний дизайн Remote напоминал приложение iPod, которое сейчас называется Music. Начиная с iOS 6, их дизайн стал расходиться — приложение Music получило новый вид: тени на ползунке регулятора громкости менялись в зависимости от наклона телефона; в Remote сохранилось прежнее оформление. В 2016 году приложение переименовали в iTunes Remote
Первое серьёзное обновление Remote появилось вместе с выходом iOS 7. В отличие от светлой темы Music, приложение получило тёмный фон, подсвеченный цветами обложки.
До июня 2018 года приложение не менялось — тогда его полностью обновили и добавили поддержку iPhone X.
В новом дизайне компания вернулась к сдержанному оформлению, напоминающее вид Music на iOS 11, — отказалась от больших плиток и карточек в пользу традиционной навигации. Дизайн выдержан в синем цвете, чтобы соответствовать обновлённой иконке. В самой ранней версии приложения на иконке отсутствовала фирменная «f»
Приложение социальной сети не раз полностью меняло дизайн. Поэтому на картинке представлена лишь часть — восемь основных переработок.
Facebook появилась на iPhone ещё до App Store — сервис стал одним из первых веб-приложений для устройства в октябре 2007 года. Выход iOS 7 вернул в Facebook вкладки для навигации внизу экрана. Иконки на ней до сих пор меняют своё оформление и расположение
Третья версия Facebook, впервые представленная в 2009 году, была призвана облегчить навигацию с помощью сетки из иконок в синем цвете. Но в публичный доступ так и не вышла.
В октябре 2011 года социальная сеть стала одной из первых использовать меню «гамбургер». После четвёртой версии следить за хроникой стало сложнее. Внешний вид приложения стал обновляться чаще.
Многие дизайнерские решения Facebook связаны с масштабами компании и её задачей обеспечить работу сервиса на многих платформах. Поэтому в августе 2017 года Facebook объединила дизайн новостной ленты на iOS и Android, а комментарии в веб-версии стали похожи на беседу в Messenger.
Изначально приложение разрабатывалось для Mac, но первая версия появилась именно на iOS. Компания Cultured Code, ведущая разработку, призналась, что оригинальную сборку мобильной версии создала за месяц.
В Things 1.0 не хватало нескольких важных функций — синхронизации с компьютером и тегов. Первое большое обновление разработчики провели в августе 2012 года — во второй версии приложения.
Версия 2.5 2014 года освежила интерфейс с помощью светлых цветов. Things 3 вышла в 2017 году, став самым крупным обновлением.
Каждый элемент интерфейса был создан заново, однако лежащая в основе схема осталась прежней. В ролике, который команда Cultured Code подготовила к запуску, отдельное внимание уделяется анимации. Редизайн принёс разработчикам победу на Apple Design Award. В каждой иконке с 2012 года спрятано «пасхальное яйцо». Приглядевшись, можно заметить, что текстура позади галочки состоит из логотипов Omni
Изначально интерфейс OmniFocus строился по табличному типу, но с особыми иконками для навигации — в 2008 году компания выиграла Apple Design Award. В 2010 году Omni Group заново нарисовала элементы управления и иконку, чтобы они лучше отображались на дисплее Retina.
Большие изменения пришли через год, когда в приложение добавили функцию «прогноз» и ползунок для выбора даты. После выхода iOS 7 разработчики стали использовать различные оттенки цветов, облегчавшие навигацию. В мае этого года вышла третья версия приложения: и хотя многие изменения не касались дизайна, крупные плитки и оптимизация под iPhone X освежили UI Перед запуском приложения на iPhone компания провела ребрендинг — тогда же и появился узнаваемый логотип со слоном
Evernote 1.0 строилась на UIKit от Apple и крупной глянцевой графике. В 2012 году компания всё ещё зависела от UI-элементов iOS — панель навигации и кнопки автоматически приобретали матовое оформление шестой версии. В 2011 году дизайнеры отдали предпочтение хронологическому порядку заметок и реорганизовали область вкладок
В ноябре 2012 года вышла пятая версия Evernote с обновлённым дизайном: рельефные иллюстрации, текстуры бумаги, объёмные тени придавали интерфейсу глубины. Иконка потеряла выходящий из моды блеск, но сохранила текстуру металла. Evernote 5 принесла дизайнерам Apple Design Award.
В Evernote для iOS7 отказались от теней, текстур и округлых углов. На панели навигации появился градиент, совпадающий по цветам с новой иконкой. В обновлении 2017 года в интерфейсе появились мягкие тени, которые затемнили область вкладок.
Несмотря на то, что команда eBay выступала с презентацией на WWDC 2008, приложение поначалу выглядело сырым и недоработанным. К ноябрю 2009 года дизайн переработали, сделав акцент на выдержанном сером цвете. Ещё год спустя в eBay 2.0 появилась табличная структура, закрепившаяся на несколько лет. В 2010 году дизайнеры совместили в одном приложении функции покупки и продажи
В 2013 году для приложения вышло несколько обновлений, которые закрепили организацию блоков и цветовую гамму. Потому выход iOS 7 eBay встретила спокойно.
В сентябре 2015 года разработчики представили четвёртую версию приложения. Они поместили большую часть функций в «гамбургер», оставив на экране три вкладки. Но перегруженное текстом оформление и новый логотип заставили дизайнеров вернуть прежний интерфейс. Богатая на детали иконка Twitterific
Благодаря Jailbreak первый клиент для Twitter появился до того, как Apple открыла App Store и выпустила инструменты для разработки. Потому неудивительно, что первая версия Twitterrific принесла разработчикам Apple Design Award. Twitterrific — одно из первых приложений, в котором использовалась популярная сегодня тёмная тема Дизайн иконки 2011 года создал один из основателей Dribbble Дэн Седерхем
Дизайн Instapaper с самого начала был сдержанным, так как приложение предназначено для чтения. Визуальные изменения приложение получило благодаря развитию мобильной системы Apple — в шестой и седьмой версиях iOS внешний вид сменили блок навигации и кнопки. Несколько раз в Instapaper менялся владелец — в 2013 году компания попала под управление Betaworks, а через три года платформу выкупила Pinterest В версии ОС 10.3 Apple позволила разработчикам менять иконки приложений, не размещая новую версию в магазине. В PCalc обрадовались изменениям — в калькуляторе появилось множество иконок
Сервис PCalc появился задолго до открытия App Store: первую версию для Mac создатель Джеймс Томпсон опубликовал в свободном доступе в 1992 году.
Оформление приложения для iPhone пользователи могли менять самостоятельно — у PCalc была большая галерея тем. В декабре 2008 года вышла популярная тема «Сумерки», а с появлением iOS 7 — «Самурай»
После десяти лет приложение PCalc практически исчерпало возможности калькулятора на iPhone. Поэтому в последних обновлениях Томпсон добавил даже функции дополненной реальности. В 2012 году некоторые функции приложения встроили в Apple Maps
Приложение остаётся узнаваемым за счёт постоянной цветовой гаммы.
В августе 2009 года разработчики Yelp добавили в приложение примитивный интерфейс дополненной реальности. Тогда это было интересной новинкой, но сегодня, когда приложений на базе ARKit становится больше, нововведение Yelp кажется пророческим. В 2012 году приложение существенно изменилось, но после частично вернулось к прошлым наработкам
В последних обновлениях Yelp на домашнем экране первыми показываются рекомендуемые результаты, которые сервис предугадывает с помощью машинного обучения.
Выход iOS 7 изменил представления о качественном интерфейсе. Тогда дизайнеры и разработчики переработали дизайн своих программ, так как они выглядели не так хорошо на фоне стандартных приложений Apple.
С тех пор многие изменения касались не столько внешнего вида, сколько удобства. Продуманный дизайн и быстрый доступ для решения типичных задач популяризовали различные UX-элементы. Но иногда дизайнеры оглядываются назад и используют элементы оформления прошлых лет.
#дизайн
Вначале в App Store было всего 500 приложений. Разработчики задавали направление дизайна миллионам других продуктов, появившихся с тех пор.
Самые первые приложения были похожи друг на друга и по удобству, и по дизайну. Со временем, собирая обратную связь, дизайнеры нашли уникальный путь для каждого. По мере улучшения аппаратной части появились анимация и динамичные интерфейсы.
Apple показала пример другим разработчикам прямо на старте, добавив в свой магазин игру Texas Hold«em и простую утилиту для управления библиотекой iTunes на Mac и Apple TV Remote.
Ранний дизайн Remote напоминал приложение iPod, которое сейчас называется Music. Начиная с iOS 6, их дизайн стал расходиться — приложение Music получило новый вид: тени на ползунке регулятора громкости менялись в зависимости от наклона телефона; в Remote сохранилось прежнее оформление. В 2016 году приложение переименовали в iTunes Remote
Первое серьёзное обновление Remote появилось вместе с выходом iOS 7. В отличие от светлой темы Music, приложение получило тёмный фон, подсвеченный цветами обложки.
До июня 2018 года приложение не менялось — тогда его полностью обновили и добавили поддержку iPhone X.
В новом дизайне компания вернулась к сдержанному оформлению, напоминающее вид Music на iOS 11, — отказалась от больших плиток и карточек в пользу традиционной навигации. Дизайн выдержан в синем цвете, чтобы соответствовать обновлённой иконке. В самой ранней версии приложения на иконке отсутствовала фирменная «f»
Приложение социальной сети не раз полностью меняло дизайн. Поэтому на картинке представлена лишь часть — восемь основных переработок.
Facebook появилась на iPhone ещё до App Store — сервис стал одним из первых веб-приложений для устройства в октябре 2007 года. Выход iOS 7 вернул в Facebook вкладки для навигации внизу экрана. Иконки на ней до сих пор меняют своё оформление и расположение
Третья версия Facebook, впервые представленная в 2009 году, была призвана облегчить навигацию с помощью сетки из иконок в синем цвете. Но в публичный доступ так и не вышла.
В октябре 2011 года социальная сеть стала одной из первых использовать меню «гамбургер». После четвёртой версии следить за хроникой стало сложнее. Внешний вид приложения стал обновляться чаще.
Многие дизайнерские решения Facebook связаны с масштабами компании и её задачей обеспечить работу сервиса на многих платформах. Поэтому в августе 2017 года Facebook объединила дизайн новостной ленты на iOS и Android, а комментарии в веб-версии стали похожи на беседу в Messenger.
Изначально приложение разрабатывалось для Mac, но первая версия появилась именно на iOS. Компания Cultured Code, ведущая разработку, призналась, что оригинальную сборку мобильной версии создала за месяц.
В Things 1.0 не хватало нескольких важных функций — синхронизации с компьютером и тегов. Первое большое обновление разработчики провели в августе 2012 года — во второй версии приложения.
Версия 2.5 2014 года освежила интерфейс с помощью светлых цветов. Things 3 вышла в 2017 году, став самым крупным обновлением.
Каждый элемент интерфейса был создан заново, однако лежащая в основе схема осталась прежней. В ролике, который команда Cultured Code подготовила к запуску, отдельное внимание уделяется анимации. Редизайн принёс разработчикам победу на Apple Design Award. В каждой иконке с 2012 года спрятано «пасхальное яйцо». Приглядевшись, можно заметить, что текстура позади галочки состоит из логотипов Omni
Изначально интерфейс OmniFocus строился по табличному типу, но с особыми иконками для навигации — в 2008 году компания выиграла Apple Design Award. В 2010 году Omni Group заново нарисовала элементы управления и иконку, чтобы они лучше отображались на дисплее Retina.
Большие изменения пришли через год, когда в приложение добавили функцию «прогноз» и ползунок для выбора даты. После выхода iOS 7 разработчики стали использовать различные оттенки цветов, облегчавшие навигацию. В мае этого года вышла третья версия приложения: и хотя многие изменения не касались дизайна, крупные плитки и оптимизация под iPhone X освежили UI Перед запуском приложения на iPhone компания провела ребрендинг — тогда же и появился узнаваемый логотип со слоном
Evernote 1.0 строилась на UIKit от Apple и крупной глянцевой графике. В 2012 году компания всё ещё зависела от UI-элементов iOS — панель навигации и кнопки автоматически приобретали матовое оформление шестой версии. В 2011 году дизайнеры отдали предпочтение хронологическому порядку заметок и реорганизовали область вкладок
В ноябре 2012 года вышла пятая версия Evernote с обновлённым дизайном: рельефные иллюстрации, текстуры бумаги, объёмные тени придавали интерфейсу глубины. Иконка потеряла выходящий из моды блеск, но сохранила текстуру металла. Evernote 5 принесла дизайнерам Apple Design Award.
В Evernote для iOS7 отказались от теней, текстур и округлых углов. На панели навигации появился градиент, совпадающий по цветам с новой иконкой. В обновлении 2017 года в интерфейсе появились мягкие тени, которые затемнили область вкладок.
Несмотря на то, что команда eBay выступала с презентацией на WWDC 2008, приложение поначалу выглядело сырым и недоработанным. К ноябрю 2009 года дизайн переработали, сделав акцент на выдержанном сером цвете. Ещё год спустя в eBay 2.0 появилась табличная структура, закрепившаяся на несколько лет. В 2010 году дизайнеры совместили в одном приложении функции покупки и продажи
В 2013 году для приложения вышло несколько обновлений, которые закрепили организацию блоков и цветовую гамму. Потому выход iOS 7 eBay встретила спокойно.
В сентябре 2015 года разработчики представили четвёртую версию приложения. Они поместили большую часть функций в «гамбургер», оставив на экране три вкладки. Но перегруженное текстом оформление и новый логотип заставили дизайнеров вернуть прежний интерфейс. Богатая на детали иконка Twitterific
Благодаря Jailbreak первый клиент для Twitter появился до того, как Apple открыла App Store и выпустила инструменты для разработки. Потому неудивительно, что первая версия Twitterrific принесла разработчикам Apple Design Award. Twitterrific — одно из первых приложений, в котором использовалась популярная сегодня тёмная тема Дизайн иконки 2011 года создал один из основателей Dribbble Дэн Седерхем
Дизайн Instapaper с самого начала был сдержанным, так как приложение предназначено для чтения. Визуальные изменения приложение получило благодаря развитию мобильной системы Apple — в шестой и седьмой версиях iOS внешний вид сменили блок навигации и кнопки. Несколько раз в Instapaper менялся владелец — в 2013 году компания попала под управление Betaworks, а через три года платформу выкупила Pinterest В версии ОС 10.3 Apple позволила разработчикам менять иконки приложений, не размещая новую версию в магазине. В PCalc обрадовались изменениям — в калькуляторе появилось множество иконок
Сервис PCalc появился задолго до открытия App Store: первую версию для Mac создатель Джеймс Томпсон опубликовал в свободном доступе в 1992 году.
Оформление приложения для iPhone пользователи могли менять самостоятельно — у PCalc была большая галерея тем. В декабре 2008 года вышла популярная тема «Сумерки», а с появлением iOS 7 — «Самурай»
После десяти лет приложение PCalc практически исчерпало возможности калькулятора на iPhone. Поэтому в последних обновлениях Томпсон добавил даже функции дополненной реальности. В 2012 году некоторые функции приложения встроили в Apple Maps
Приложение остаётся узнаваемым за счёт постоянной цветовой гаммы.
В августе 2009 года разработчики Yelp добавили в приложение примитивный интерфейс дополненной реальности. Тогда это было интересной новинкой, но сегодня, когда приложений на базе ARKit становится больше, нововведение Yelp кажется пророческим. В 2012 году приложение существенно изменилось, но после частично вернулось к прошлым наработкам
В последних обновлениях Yelp на домашнем экране первыми показываются рекомендуемые результаты, которые сервис предугадывает с помощью машинного обучения.
Выход iOS 7 изменил представления о качественном интерфейсе. Тогда дизайнеры и разработчики переработали дизайн своих программ, так как они выглядели не так хорошо на фоне стандартных приложений Apple.
С тех пор многие изменения касались не столько внешнего вида, сколько удобства. Продуманный дизайн и быстрый доступ для решения типичных задач популяризовали различные UX-элементы. Но иногда дизайнеры оглядываются назад и используют элементы оформления прошлых лет.
#дизайн
Ещё новости по теме:
18:20