Содержание:

Логика и эволюция дизайна приложений

Принципы дизайна: Android

Принципы дизайна: iOS

Дизайн iOS и Android — в чем отличия?

Логика и эволюция дизайна приложений

Тот дизайн, который мы сейчас видим у приложений, разрабатываемых под iOS или Android, был таким не всегда. Обе платформы прошли свой долгий путь проб и ошибок, адаптации концептов под реалии, соответствующие текущим запросам рынка.

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

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

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

Принципы дизайна: Android

Еще 10 лет назад десктопные и мобильные приложения для Android имели кардинально разные интерфейс и стили, между ними не было ничего общего. Это были абсолютно разные вещи, которые имели разную логику и способы взаимодействия с пользователем. 

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

Серьезный прорыв в решении проблемы произошел после того, как компания опубликовала документацию Material Design. 

Material Design — это собственный гайдлайн, разработанный компанией Google, он содержит свод адаптируемых правил и рекомендаций для проектирования и дизайна пользовательского интерфейса. Руководствуясь общими принципами построения платформы под Андроид приложения от разных разработчиков выглядят стандартно. Гайдлайн стандартизирует способы навигации и взаимодействия внутри мобильных приложений: цвета, формы элементов интерфейса, типографические стили и иконографию.

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

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

Составные компоненты системы охватывают ряд требований к интерфейсу, в том числе:

• Отображение 

Размещение и организация контента с использованием таких компонентов, как карточки, списки и листы.

• Навигация 

Предоставление пользователям возможности перемещаться по приложению с помощью таких компонентов, как панели навигации и вкладки.

• Действия 

Предоставление пользователям возможности выполнять задачи с помощью компонентов (прим. плавающая кнопка).

• Ввод

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

• Коммуникация 

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

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

• тактильные поверхности

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

• графический дизайн

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

• осмысленная анимация

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

• адаптивный дизайн

Согласно данному принципу все вышеперечисленное должно работать на любых устройствах.

Важной частью Material Design является анимация. И здесь кроется его первое отличие от Apple: у Apple анимация несет в себе преимущественно эстетическую функцию, Google же больший упор делает на UX и функциональность. Основная цель анимации — сделать интерфейс не только более выразительным, но и простым в использовании, обеспечить пользователю комфортный опыт взаимодействия с мобильным приложением.

Три основных принципа анимации Material Design:

• информативность 

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

• ориентированность

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

Также анимация позволяет учить пользователя, например, демонстрировать, как выполнять те или иные действия.

• выразительность 

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

Принципы дизайна: iOS

До 2013 года дизайн Apple базировался на принципах скевоморфизма.

Скевоморфизм представляет собой тенденцию в дизайне, в основе которой лежит реалистичное изображение объектов: подчеркивается объем предметов, свет, тени, блики, текстура. 

Скевоморфизм был популярен по нескольким причинам.

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

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

Из этого можно понять, почему скевоморфизм в итоге утратил свою популярность.

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

Во-вторых, изменились устройства. Объемные детализированные изображения было удобно рассматривать на больших экранах, но при уменьшении в мобильной версии они начали превращаться в нечеткую рябь. Кроме того, с появлением мобильных устройств вход в интернет перестал быть каким-то редким событием. С помощью мобильных приложений в своем смартфоне пользователи решают повседневные задачи каждые 5-10 минут. Поэтому на первый план для них выходят простота интерфейса и скорость работы. Отсюда появляются новые требования к дизайну — он должен быть минималистичным, чтобы работать с ним было легче и быстрее. 

Так со временем минималистичный плоский дизайн фактически вытеснил скевоморфизм.

Плоский дизайн (англ. flat design) — минималистичный подход к оформлению сайтов, мобильных приложений и печатных изданий, целью которого является сделать эстетически приятный, легкий в использовании продукт, с акцентом на функциональности, а не на визуалах. 

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

Собственный гайдлайн ― Human Interface ― появился у Apple в 2013 году, с выходом iOS 7. В основе концепции лежала воздушность, лаконичность и отзывчивость к действиям пользователя. Особое внимание уделялось эстетике и уместности дизайна: минималистичность следовало использовать для серьезных бизнес-приложений, а яркость и сложные анимации ― например, для мобильных игр в жанре Action.

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

Дизайн iOS и Android — в чем отличия? 

Наиболее важные различия, которые стоит учесть прежде, чем приступить к разработке дизайна мобильного приложения для iOS или Android:

• навигация

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

В сравнительной таблице ниже перечислены параметры, которые могут измениться в зависимости от того, выберете вы Human Interface или Material Design:

• стандарты и привычки 

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

• типографика

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

Несмотря на имеющиеся отличия, важно отметить, что оба гиганта, как Apple, так и Google, являются умными компаниями, продуктами которых пользуются миллионы людей по всему миру. Нельзя сказать, что используемые ими подходы правильные или неправильные — они просто разные. Каждый подход, используемый для разработки дизайна Android-приложений и дизайна приложений для iOS, является логичным, продуманным и имеет полное право на существование и в чем-то может быть взаимозаменяемым.