Connect with us

Дизайн и прототипирование

10 лет App Store: эволюция дизайна первых приложений

Одна из самых значительных дизайнерских возможностей в новейшей истории была анонсирована на сайте Apple простым постом в блоге. «Позвольте мне сказать: мы хотим, чтобы на iPhone были нативные сторонние приложения, и мы планируем в феврале передать SDK в руки разработчикам», — написал Стив Джобс. Тихим утром в четверг, менее чем через год, App Store открылся для пользователей iPhone, предоставив на выбор чуть более 500 приложений.  Сайт Sketchapp.me разбирается с тем, как изменился дизайн приложений за год.

AppTractor

Опубликовано

/

     
     

Немногие современные инновации изменили нашу жизнь и взаимодействие с окружающим миром больше, чем iPhone. Создатели первых 500 приложений, доступных на старте, имели уникальную возможность сформировать направление дизайна и методы взаимодействия миллионов приложений, созданных с тех пор.

Чтобы отметить 10-летие App Store, давайте изучим визуальную эволюцию 10 оригинальных приложений App Store.

Приложения

Для этой цели я сосредоточился исключительно на заметных визуальных изменениях приложений, которые были доступны для загрузки в первый день, и все еще получают обновления сегодня. Хотя многие из этих приложений также доступны для iPad, этот обзор освещает изменения в iPhone-версиях.

iTunes Remote

iTunes Remote

Apple дала пример другим разработчикам, опубликовав некоторые из своих программ в App Store. Одними из первых созданных приложений были игра Texas Hold’em и Remote — простая утилита для управления воспроизведением библиотеки iTunes на Mac или Apple TV по Wi-Fi. В то время, как Texas Hold’em убрали из магазина в 2011 году, Remote существует и сегодня.

С самого начала, дизайн Remote сильно зависел от внешнего вида приложения iPod для iPhone (сегодня называется «Музыка»). Фактически, представление Now Playing было по существу идентичным. Версия 2.0 принесла новую иконку, созданную Louie Mantia. Два приложения начали разделяться на iOS 6, когда приложение «Музыка» было полностью переработано и появился ползунок громкости, который динамически реагировал на движение вашего iPhone. Remote сохранил предыдущий внешний вид. Иконка приложения снова была обновлена, чтобы соответствовать стилю iTunes 11 на Mac.

Первый крупный редизайн Remote был проведен с выходом iOS 7. В отличие от белой темы приложения «Музыка», Remote представил темный, размытый фон, который был тонирован цветом обложки прослушиваемого альбома. В 2016 году, Apple выпустила приложение Apple TV Remote для Apple TV 4-го поколения — логичный шаг вперед, который, похоже, заменит Remote. Вскоре после этого Remote был переименован в iTunes Remote. Хотя приложение по-прежнему было доступно для скачивания, оно оставалось практически неизменным до июня прошлого года, когда получило совершенно новый дизайн и поддержку более высокого дисплея iPhone X.

Обновление iTunes Remote вернулось к более визуально консервативному оформлению, напоминающему приложение «Музыка» для iOS 11, но отказалось от больших заголовков и карточек в пользу традиционной навигации. Вместо красного цвета оттенка iTunes Remote использует синий цвет, чтобы соответствовать обновленной иконке.

Facebook

В отличие от скромных изменений iTunes Remote, приложение Facebook в течение прошедшего десятилетия постоянно обновлялось с увеличивающейся частотой. Всесторонней визуальной истории приложения хватило бы на небольшую книгу, поэтому я решил выделить восемь наиболее значительных изменений.

Приключения Facebook на iPhone в действительности начались до того, как появился App Store. Первоначально сервис был доступен в качестве одного из первых веб-приложений iPhone в октябре 2007 года. Версия 1.0 в App Store едва ли похожа на сегодняшний Facebook, разве что фирменной синей панелью навигации. Даже на иконке отсутствовала белая буква «f». Новостная лента приложения была по существу украшенным табличным представлением над панелью вкладок с пятью иконками: «Главная», «Профиль», «Друзья», «Чат» и «Входящие». Версия 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, но в итоге вышел раньше на iOS. Разработчик приложения Cultured Code, отметил в своем стартовом сообщении, что оригинальная версия была создана чуть более месяца назад — дэдлайн, который казался невозможным.

В Things 1.0 отсутствовали важные функции: возможность синхронизироваться с Mac версией и тегирование. Несмотря на стресс-запуск, та же самая базовая иерархия приложения сохраняется и по сей день. Отличный альбом на Flickr документирует ранние этапы разработки приложения. Первое крупное визуальное обновление состоялось в августе 2012 года, с выходом Things 2.0. Улучшение внешнего вида iOS, и небольшие графические украшения придавали ему уникальную индивидуальность.

Things 2.5, вышедший в сентябре 2014 года, снова обновил пользовательский интерфейс приложения более украшенным внешним видом и более светлой цветовой гаммой. Первоначально планировался редизайн для версии Things 3, но разработка заняла больше времени, чем ожидалось. Things 3, выпущенный в мае 2017 года, был самым значительным изменением внешнего вида приложения. Практически каждый значок и элемент пользовательского интерфейса были перерисованы при сохранении основного макета. В видеоролике обновления, Cultured Code особо подчеркнули, как анимация использовалась для придания приложению совершенно новых ощущений. В 2017 году этот редизайн принес им Apple Design Award.

OmniFocus

С самого начала App Store был полон приложений для управления задачами. И Thing, и OmniFocus от Omni Group, были доступны с первого дня работы магазина. Хотя оба приложения обеспечивают аналогичную полезность, каждое из них выбрало уникальные направления дизайна.

OmniFocus для iPhone изначально использовал простые табличные представления с собственной иконографией для навигации. Он получил премию Apple Design Award в 2008 году. Omni Group переделала оформление приложения и его иконку в июне 2010 под Retina-дисплей iPhone 4. Одно из самых больших изменений приложения состоялось в июне 2011 года, когда был добавлен режим «Forecast». Глянцевый выборщик дат под навигационной панелью стал определяющим элементом пользовательского интерфейса, даже когда глянцевый дизайн исчез в 2013 году при редизайне iOS 7. Новый плоский вид в значительной степени основывался на цветах оттенков текста для ощущения пространства.

Весеннее обновление 2015 года для iPhone принесло темную иконку приложения с более мягкими краями на галочке. Каждая иконка с 2012 года содержит пасхальное яйцо, о котором могут не знать даже давние пользователи приложения. Увеличьте масштаб, и вы заметите, что текстура из углеродного волокна на самом деле состоит из крошечных, повторяющихся логотипов Omni.

Последнее важное обновление для OmniFocus вышло в мае прошлого года с версией OmniFocus 3.0. В то время, как многие из изменений были связаны с инженерией, большие заголовки и оптимизация iPhone X освежили интерфейс.

Evernote

История стиля Evernote прекрасно отражает большинство основных тенденций разработки программного обеспечения с 2008 года. Инструмент создания и организации записей получил свое начало в качестве десктопного приложения до появления App Store и недавно получил ребрендинг с узнаваемым логотипом — слоном.

Как и многие ранние приложения для iPhone, Evernote 1.0 сильно опирался на элементы UIKit и большую глянцевую графику. В 2011 году редизайн реорганизовал панель вкладок и определил хронологическое представление «Все заметки». Когда Evernote добавил поддержку более крупного дисплея iPhone 5 в 2012 году, приложение по-прежнему использовало элементы интерфейса iOS по умолчанию. Панель навигации и кнопки автоматически использовали матовую поверхность iOS 6.

В ноябре 2012 года был запущен Evernote 5. Спроектированное с нуля, приложение было примером учебника богато текстурированных, тематических проектов, типичных для той эпохи. Рельефная иконография, текстуры искусственной бумаги и глубокие тени придали приложению глубину. Иконка приложения утратила старую глянцевую внешность, но сохранила матовый металл.

В сообщении в блоге, Evernote сказали: «Мы не часто начинаем полный редизайн. Фактически, это происходит только один раз в несколько лет». Хотя они и не знали этого тогда, Evernote пришлось бы переделать свой дизайн снова менее, чем через год, когда на WWDC 2013 было объявлено о релизе iOS 7. 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

Craig Hockenberry и The Iconfactory создали первый Twitter-клиент для iPhone, прежде, чем App Store даже был анонсирован. Благодаря jailbreak софту, разработанному сообществом Apple-энтузиастов, разработчики имели несколько месяцев опыта написания приложений к тому времени, когда Apple предоставила официально санкционированные инструменты.

Twitterrific 1.0 заимствовал некоторые элементы дизайна времен джейлбрейка, в итоге со старта выглядя удивительно хорошо. Оно выиграло премию Apple Design Award в 2008 году. Twitterrific также было одним из первых приложений, использующих темную тему — все более популярный вариант сегодня. Но история дизайна Twitterrific больше напоминает историю Twitter как сервиса, чем разработки трендов дизайна. Каждое обновление отражало изменения функций и функциональности платформы Twitter. В первые дни эти функции часто первыми пробовали именно сторонние разработчики.

В 2012 году Twitterrific 5.0 переместил всю навигацию в верхнюю часть дисплея и использовал полностью настраиваемые элементы интерфейса. Подобный макет сохранился до сегодняшнего дня. Так же увлекательна, как дизайн приложения, его иконка. Помимо того, что это было первое Twitter приложение, использовавшее образ птицы, Twitterrific является одним из немногих iOS-приложений, которым удалось оставить детальную иконку, сохраняя при этом современный вид. Талисман приложения, Ollie, едва изменился во время перехода на iOS 7 и по-прежнему выглядит так же свежо, как и в 2012 году.

Instapaper

Приложение, созданное для чтения, уделяет приоритетное внимание контенту, поэтому дизайн Instapaper, естественно, с самого начала был неяркий. Фактически, некоторые из самых очевидных визуальных изменений приложения, были получены благодаря изменениям в самой iOS. Панель навигации и стили кнопок были изменены в iOS 6 и 7, что дало приложению два «бесплатных» визуальных обновления.

Однако сказать, что приложение не развилось, было бы неправдой. Instapaper начал свою жизнь в App Store как бесплатное приложение. Вскоре после этого была запущена платная версия под названием Instapaper Pro. Большие обновления опыта чтения и более темные элементы интерфейса появились осенью 2011 года, когда была добавлена новая иконка созданная Dan Cedarholm — сооснователем Dribbble. Позже иконка была показана на слайде WWDC в рамках сессии о большой иконографии.

В апреле 2013 года Betaworks приобрел Instapaper у основателя Marco Arment, отправив развитие приложения на другую траекторию. Первое крупное обновление под руководством Betaworks состоялось в сентябре 2013 года, с обновлением iOS 7. Pinterest приобрела Instapaper в августе 2016 года, когда компания пообещала, что приложение будет жить. В настоящее время Instapaper поддерживает довольно согласованные визуальные эффекты даже после обновления для поддержки дисплея Super Retina iPhone X.

PCalc

История PCalc началась более, чем за десять лет до запуска App Store. Разработчик Джеймс Томсон выпустил оригинальное приложение для Mac в 1992 году, и его эволюция продолжается и сегодня. С самого начала на iOS PCalc предложил полностью настраиваемый интерфейс, предлагая постоянно расширяющийся набор тем и вариантов настройки. Cлишком много, чтобы рассматривать их здесь, поэтому я выбрал несколько основных моментов.

Первая версия PCalc для iPhone была портирована из виджета панели управления Mac, но в сочетании с классическим интерфейсом iPhone выглядела хорошо. Глянцевые кнопки и темно синяя LCD-панель соответствовали иконке приложения. В декабре 2008 года популярная тема под названием «Сумерки» была добавлена ​​с еще более детальной графикой и цветовой схемой, аналогичной iOS-калькулятору. Затем тема «Сумерки» была обновлена и поддержкой Retina-графики больших дисплеев.

PCalc адаптировался к плоскому дизайну iOS 7 с новой темой по умолчанию под названием «Самурай» и соответствующей иконкой. Старые темы остались доступными в настройках приложения. Иконка PCalc снова была обновлена в марте 2016 года. С момента релиза iOS 10.3, Apple разрешила сторонним приложениям динамически изменять иконки приложений, без внесения на рассмотрение новой версии в магазин. В мае 2017 года PCalc начал в полной мере использовать эту функцию, выпустив огромное количество альтернативных иконок на выбор. В последующих обновлениях было добавлено еще больше.

После 10 лет разработки, PCalc вышел за пределы калькулятора для iPhone. Недавние обновления обладали некоторой творческой свободой с функциями новизны, такими как режим AR калькулятора. Поддержка дисплея iPhone X принесла теме «Самурай» закругленные углы.

Yelp

Подобно Facebook, интерфейс Yelp для iPhone значительно изменился с годами, но поддерживает узнаваемый брендинг благодаря использованию все тех же цветов навигационной панели. Приложение пользуется большой популярностью благодаря своей глубокой интеграции с Apple Maps.

В августе 2009 года Yelp использовал рудиментарный интерфейс дополненной реальности в приложение iPhone для поиска предприятий вокруг вас. Хотя тогда это было немного больше, чем новинка, сегодня эта особенность кажется актуальной, учитывая рост приложений ARKit.

В январе 2010 года появился новый главный экран Yelp с сеткой быстрого доступа 3×3. Один и тот же базовый интерфейс стилистически дорабатывался до тех пор, пока все приложение не было переработано в октябре 2013 года с более плоской внешностью и более заметной вкладкой «Рядом».

Последние обновления 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 лет будущее увлекательно.

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Апарекиум: в поисках невидимых особенностей дизайна

Леонид Никулин, арт-директор мобильных приложений AGIMA, написал для нас статью об особенностях прототипирования и создания дизайна мобильных приложений.

AppTractor

Опубликовано

/

Автор:

Существуют невидимые чернила, — прошептала она и, трижды коснувшись палочкой дневника, произнесла: — Апарекиум!

Мы дизайнеры и мы волшебники. Что-то для нас кажется обычным и привычным, но, к сожалению, мы работаем с простыми магглами. Всю нашу работу мы должны делать максимально прозрачно, чтобы нашим коллегам не пришлось использовать заклинание Апарекиум в поисках того, что мы написали невидимыми чернилами.

1. Много разных диагоналей, что делать

Если вы веб-дизайнер, но никогда не работали с мобильными приложениями, то скорее всего у вас возникнет вопрос про большое количество экранов мобильных устройств. А еще у них разные пропорции и на разных платформах разные стандарты экранов. О ужас! – скажете вы. Но все достаточно просто. Существуют основные разрешения девайсов под которые нужно рисовать дизайн. На iOS это 375х667, а на Android 360х640. Это основные пропорции, которые используются практически на всех девайсах. В большинстве случаев остальные смартфоны увеличиваются в высоту, а это не доставляет особых проблем, просто у вас будет видно чуть больше контента. В некоторых случаях стоит учитывать смартфоны с меньшим разрешением или другими пропорциями, например iPhone 4. Для него может потребоваться отрисовать отдельные версии экранов, если контент не помещается на экран.

2. Негативные кейсы

Достаточно часто на макетах присутствуют различные формы ввода данных и последующее получение результата по ним. Эти формы имеют различные состояния, дизайнеры рисуют основное состояние, состояние положительного результата и возможно подсказки. Но ведь вариантов негативных состояний у формы тоже достаточно большое количество. И об этом зачастую забывают.

Во время верстки макетов у разработчика возникают вопросы по состояниям формы и он видит, что у него есть 3 негативных ответа от сервера, а отрисовано только одно. Дизайн возвращается на доработку, тратится время, менеджер нервничает, сроки факапятся.

Во избежании таких ситуаций уточняйте у разработчика, а лучше у аналитика, какие состояния могут быть в той или иной форме и будет у вас счастье.

3. Активная клавиатура

В дизайне мобильных приложений немаловажно отображать все возможные состояния, т.к. размер экрана достаточно компактный, а элементы могут быть зависимы друг от друга, поэтому при движении одного элемента двигаются и другие, а не всегда это происходит корректно.

Одно из важных состояний является отображение активной и неактивной клавиатуры при вводе информации в текстовые поля. Нужно обязательно показывать состояние поля без фокуса, с фокусом и клавиатурой, введенным текстом и клавиатурой, ошибками и т.д. Клавиатура может двигать некоторые элементы при активации, а другие перекрывать. Повторюсь, что на смартфонах компактные экраны и блоки могут просто поехать при активации клавиатуры, за этим нужно внимательно следить.

4. Карта экранов

При создании приложения зачастую возникает достаточно большое количество экранов, в которых к середине проекта уже сложно разобраться. Для этого нужно создавать карту экранов приложения или карту навигации.

Карта навигации составляется как на все приложение, так и на отдельные блоки, которые потом будут встраиваться в приложение. Карту можно составить и на этапе проектирования/прототипирования приложения, когда уже будет понятна основная логика работы приложения. Но по своему опыту для выстраивания логики приложения и составляется карта переходов. Она позволяет выявить недостающие экраны, о которых вы могли забыть.

Карту переходов можно составлять в таких программах: Realtimeboard, Axure, Figma, Sketch. Но для меня самым удобным вариантом оказался Overflow.

5. Текст в контейнере

Практически на всех макетах присутствует текст. При добавлении текста на макет его можно добавить несколькими способами. Просто нажать инструментом текст и начать писать или сделать текстовый контейнер ограниченный по ширине и высоте. Первый способ можно оставить для заголовков, а вот второй использовать для большого количества текста. Текст помещенный в контейнер поможет разработчику сориентироваться в ваших макетах гораздо проще, т.к. отступы будут везде приблизительно одинаковые. В большинстве случаев при создании макетов у дизайнера нет конечного варианта текста и в макеты вставляется “рыба”. Если вы делаете интерфейс, который будет в большинстве случаев использоваться только на русском, то ставьте текст на русском, т.к. есть большая разница в отображении шрифта на разных языках.

6. Нет указания типа навигации

Для разработчиков очень важно описание типа навигации в мобильном приложении, т.к. есть несколько типов переходов с одного экрана на другой. При создании дизайна приложения наилучшим образом показать типы навигации будет создание кликабельного прототипа. На данный момент почти все сервисы для создания кликабельных прототипов поддерживают основные типы переходов между экранами. Для разработчиков этого будет достаточно.

Еще можно показывать типы навигации элементами управления на экране. Например, крестик показывает, что это модальное окно, а стрелка назад, что скорее всего переход будет осуществляться путем пуша.

7. Удобный экспорт

Вы нарисовали макет, утвердили его у заказчика, выложили все макеты для верстки и вроде выдохнули. Но вот откуда ни возьмись прибегает разработчик и говорит вам о том, что иконка выгружается коряво. о_О

И тут вы понимаете, что забыли сгруппировать и/или объединить иконки. Поэтому всегда при завершении работы по дизайну проверяйте все элементы, которые могут понадобиться разработчику. Самый оптимальный вариант, это когда все элементы, которые разработчик не может сделать кодом размещать на отдельном артборде. Иконки и элементы должны быть сгруппированы для удобства экспорта, иначе все будет коряво выгружено и также заверстано.

8. Не всегда то, что нарисовано легко реализуемо

Дизайнеры творческие натуры и могут иногда нарисовать такое, что разработчик потом либо не сможет это реализовать, либо для этого понадобится очень много времени. Время сотрудников агентства обычно оплачивает заказчик, а для заказчика зачастую важны бизнес показатели и конечный результат точно в срок.

Поэтому во время отрисовки макетов, а лучше на этапе проектирования и аналитики уточняйте у разработчиков о доступности данных, и о возможности реализации вашей идеи. Иногда достаточно описать идею словами или нарисовать на листочке, чтобы объяснить разработчику вашу задумку. Возможно, что вы получите ответ на интересующий вас вопрос прямо здесь и сейчас, а, возможно, что разработчику понадобится время на ресерч информации. Но чем раньше вы узнаете о том, что можно реализовать на проекте, а что нет, принесет вам плоды в дальнейшем.

9. 50 оттенков серого

Если у вас большой макет сайта или приложения и цвет используется 2-3 раза на разных элементах, то уверенно создавайте стиль. Стили ускорят не только вашу работу и не дадут применить к элементу похожий, но не идентичный цвет. Но и разработчику будет потом намного проще, т.к. стили можно выгрузить в Zeplin. Главное не забывать о том, что при индивидуальном изменении элемента с привязанным стилем есть возможность того, что вы случайно можете изменить стиль. Лучше заранее отвязать от стиля элемент и редактировать его под свои нужды.

10. Кратности в макетах

Говорить на тему сеток можно бесконечно. Но в данном контексте хочется рассказать о личном опыте построения интерфейса. Недавно читал пост в facebook и там разгорелась очень интересная дискуссия. Кто-то настаивал на том, что все интерфейсы должны быть построены по определенному формату, т.е. никакой индивидуальности. И тут же спрашивают о том, что делать если экран имеет нечетные параметры? Например iPhone 8 имеет разрешение 375х667, что же делать в таком случае? Если отталкиваться от построения на четных количествах столбцов, то здесь едет вся логика. Google же предлагает использовать сетку основанную на 8 единицах.

Занимаясь мобильными приложениями, я пришел к выводу, что нужно брать определенный минимальный параметр за единицу. Учитывая гайдлайны или нарушая их, вы можете строить интерфейсы на любое разрешение при помощи минимальной единицы измерения. Не всегда это может быть четное число, знаю, что многие с этим не согласятся, но на то дизайнер творческая натура, чтобы придумывать что-то новое :)

Если сделать качественное описание макетов и пояснить в нем, что у вас минимальная единица для отступов 4, то разработчику станет гораздо легче, поверьте.

11. Нестандартный кернинг

Что же такое кернинг? Говоря простыми словами, это интервал между буквами. В зависимости от кернинга меняется внешний вид слов. При помощи кернинга можно улучшить или ухудшить восприятие текста.

Нестандартный кернинг не сразу заметен для разработчика. Макет верстается и вроде все хорошо, но выглядит он не как задумано дизайнером. В результате приходится вносить правки, а это дополнительное время.

Есть очень интересная игра, в которой вы можете потренироваться: https://type.method.ac

12. Своевременная актуализация

Зачастую один дизайнер делает макеты на две или более платформ. Когда разработка дизайна длится долгое время над одним продуктом, то количество макетов может быть бесконечно огромным. Следить за этим становится проблематично.

И вот приходит новая задача от менеджера сделать новую фичу в приложении. Соответственно, при создании дизайна существует ведущая платформа, на которую делается дизайн и утверждается с заказчиком. Выбор платформы может быть обусловлен требованиями заказчика, т.к. количество пользователей на одной платформе больше, чем на другой. Или дизайнер сам может выбрать платформу, которая ему по душе.

И вот макеты готовы, все утвердили, а менеджер забыл поставить задачу на перенос дизайна на другую платформу. Все об этом забыли. Наступает пора имплементировать дизайн в приложение и разработчики начинают смотреть ваш дизайн. У Андроид разработчиков он есть, а у iOS — нет, вот незадача. А с момента отрисовки макетов до реализации может пройти значительное время, все уже и забыли, что там нарисовано. Приходится искать задачу, перечитывать бизнес требование и вспоминать, что же там было тогда сделано.

Из этого всего следует то, что нужно стараться помнить о том, что дизайн должен быть отрисован под несколько платформ. Завести такое правило в компании или у себя в голове. Даже если менеджер не поставил задачу, а в компании действует правило: “если нет задачи в таск трекере, то и нет ее результата”, то можно перенести дизайн на другие платформы и спокойно ждать пока разработчику он понадобится. И еще вдобавок можно тонко намекнуть, кто не поставил задачу :)

13. Тени картинками

В интерфейсах часто используются тени у объектов. Они могут быть различных размеров и форм. В большинстве случаев тень отбрасывается от объекта для того, чтобы показать положение объекта в пространстве. Тень позволяет ставить приоритеты над объектами. Но не стоит забывать, что тень является вспомогательным элементом и использовать ее нужно очень аккуратно.

При разработке приложений тень можно задать при помощи кода, а можно сделать изображением. Тень в виде изображения ускоряет разработку, т.к. разработчику не нужно выдумывать от какого объекта отбросить тень и по каким параметрам ее делать. Также тень, которую вы отдадите в виде изображения точно будет соответствовать задуманным параметрам.

Хотелось донести до вас, что упрощая работу себе, вы упрощаете ее и другим. Старайтесь делать все максимально четко и понятно. Объясняйте магглам простые дизайнерские истины, ведь они не волшебники.

Вкусного вам дизайна!

Комментарии
Продолжить чтение

Дизайн и прототипирование

iOS 12 GUI

iOS 12 GUI – набор экранов и компонентов интерфейса для iOS 12.

AppTractor

Опубликовано

/

Автор:

Бесплатно можно скачать для Sketch, Figma и Adobe XD.

Ссылка: https://files.design/templates/ios12gui

Комментарии
Продолжить чтение

Дизайн и прототипирование

Будущее UX дизайна: за пределами экрана

Альберт Шум, вице-президент Microsoft по дизайну, рассказывает о будущем осмысленного дизайна в мире многих устройств – в переводе UX.PUB.

AppTractor

Опубликовано

/

Автор:

Как масштабировать осмысленный дизайн в мире полном различных устройств

Нарушайте устоявшиеся шаблоны осмысленным дизайном

Индустрия дизайна находится в напряжении. Технология продуктивна и продолжает развиваться, завалив нас разнообразными устройствами и опытом, которые соперничают за наше внимание. Дизайн, как практическая дисциплина, развился в различных направлениях, тем самым изменив роль дизайнера и расширив смысл творчества.

В основе этой эволюции лежат инструменты и системы дизайна — вещи, которые всегда были вокруг нас, но только недавно обрели свою современную идентичность, связанную с искусственным интеллектом и машинным обучением. То, что раньше использовалось в руководствах по статическому графическому дизайну, теперь охватывает весь спектр дизайна взаимодействия, предоставляя компаниям возможность масштабировать свою идентичность с использованием интеллекта и автоматизации. Создание цифрового опыта в больших количествах привело к тому, что инвестиции в живые дизайнерские системы и инструменты дизайна — положительная вещь, но также экзистенциальный момент для творческих профессионалов. Является ли ИИ креативнее вас? И если ИИ может делать всю творческую работу, нужны ли нам дизайнеры?

Я вечный оптимист и моя творческая задача — адаптироваться. Машины умеют видеть паттерны, но люди умеют их нарушать. Инвестиции в ИИ будут только возрастать. Но, как творческий человек, вы можете найти, смысл в опыте и вынести его на первый план. Проектируйте таким образом, чтобы вернуть человека. Ниже представлено руководство, как масштабировать обоснованный дизайн:

Создайте стол

Дизайн занял свое место за столом — теперь возьмите его дальше

Не просто садитесь за стол. Создайте его. Представьте себе, что значит для дизайна иметь влияние и создайте прототип новых способов работы и объединения людей. Поскольку в век инструментов дизайна наши возможности растут, мы должны использовать их, чтобы инновации соответствовали технологиям. Это происходит в первую очередь из-за пересечения дисциплин и знаний для того, чтобы включить больше точек зрения и сформировать общее видение.

Это не значит, что это легко — для проведения организационных изменений требуется время. Но в конечном счете поддержка дизайнерского мышления и креативности, ориентированных на человека, помогает разрабатывать более инклюзивные практики, создавать ценный опыт для людей и влиять на реальный бизнес. Создайте стол и используйте его для конструктивной работы.

Найдите свою модель работы

Статические системы не могут идти в ногу со временем — найдите свои дизайнерские модели

Создайте модель совместного творчества и начните работать комфортнее. Линия между дизайнером и разработчиком размывается из-за сотрудничества с открытым исходным кодом, тем самым стимулируя творчество и фидбек. Наша связь с клиентами переносится во все более связанные среды. Мир быстро меняется, и важно, чтобы инструменты менялись в тандеме с потребностями людей.

Также важно понять, что наши дизайны оказывают влияние. В частности, поскольку ИИ становится более интегрированным в цифровой опыт, наши проекты должны попасть к клиентам на раннем этапе, чтобы они могли помочь нам определить предвзятости и исключения. Сложнее переделывать проект в конце, чем сделать его открытым с самого начала. Покажите командам незавершенную работу. Свяжитесь с реальными клиентами для тестирования прототипов. Работа в закрытой системе только вредит, а индустрия дизайна явно движется в направлении открытой и совместной разработки. Адаптируйтесь к тенденциям, позвольте инструментам дизайна высвободить вашу креативность и быстрее двигаться в постоянно развивающемся мире.

Выйдите на улицу

Идите и найдите новую точку зрения

Речь идет о поиске реальных потребностей и перспективы за пределами вашего привычного круга вещей. Ярчайшие моменты творчества часто находятся далеко от вашего стола. Идите на улицу и открывайте для себя что-то новое, потому что вдохновение стимулирует инновации.

Партнерство Microsoft на саммите «Дизайн для инклюзивности» этим летом стало вдохновляющим опытом. Там повсюду были любящие свое дело дизайнеры. Еще столько предстоит узнать о том, как индустрия дизайна думает о таких вещах, как разнообразие, инклюзивный подход и доступ к дизайнерскому образованию, и мы только начинаем привлекать больше перспектив и равенства в эту сферу.

Microsoft Design имеет уникальную возможность подключаться к другим подобным образом, но я понимаю, что все имеют разные возможности. В конце концов, все сводится к практической эмпатии. Если вы что-то разрабатываете и не думаете о человеке на другом конце опыта, немедленно измените свое мышление. В какофонии дизайнерских трендов и новых технологий человеческое понимание всегда приносит гармонию.

Работа, которую надо выполнить

Зона дилеммы, в которой мы находимся. Желаемый уровень смысла — это то, куда мы стремимся

Поскольку время бежит вперед, а производительность продолжает расти, между новыми технологиями и чувством доверия к тому, что уже знакомо, создается напряженность. Мы находимся в зоне дилеммы. Мы должны задуматься о привлечении клиентов к разработке путешествия, которое мы создаем для них, особенно с увеличением опыта использования множества различных девайсов.

Важнее работы, которую мы выполняем для внедрения инноваций — дизайн, копирайтинг, исследования, разработка — работа, выполняемая создаваемой нами вещью. Это работа, которую продукт выполняет для людей: убедитесь, что мы строим правильные вещи и делаем это правильно. Мы можем достичь этого, переориентируя инновации, чтобы лучше соответствовать жизни людей.

Для этого нужно масштабировать понимание и одержимость клиента. Любой человек может собрать кучу данных и опираться на эти цифры, чтобы определить, что проектировать дальше. Настоящий новатор будет копать глубже. Данные полезны только в том случае, если вы применяете правильный уровень смысла, тренируя острое и чуткое внимание к дизайну, чтобы проектировать то, что действительно нужно людям.

Будьте свободным радикалом

Refik Anadol, «Melting Memories» — результат совместного творчества машины и человека

Не радуйтесь застою. Инструменты дизайна и ИИ облегчают нашу работу, но это не значит, что мы должны потерять дух первооткрывателей. Будьте свободным радикалом и нарушайте закономерности. Дизайн живет на перекрестке технологий и гуманитарных наук, и именно эта двойственность позволяет нам одновременно решать проблемы и быть художниками. Дизайн будущего будет влиять на изменения с помощью творчества, потому что автоматизация служит только системе, а не сердцу людей, стоящих за этим опытом.

Творчество всегда будет иметь значение, потому что оно является частью нашего человеческого духа. Оно определяет инновации и осознанный дизайн. Примите будущее UX дизайна и мыслите за пределами экрана.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Победители Material Design Awards 2018

Google объявил победителей Material Design Awards 2018.

AppTractor

Опубликовано

/

Автор:

Google подвел итоги ежегодного конкурса  и выбрал лучшие приложения, выполненные по заветам Material Design.

В категории Выражение победило приложение с рецептами KptnCook:

В Инновациях – Lyft:

Лучшим дизайном в Опыте стало приложение Simple Habit Meditation для мобильной медитации:

Ну а лучшей адаптацией стали кроссплатформенные подкасты Anchor:

 

 

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.