Дизайн ios приложений: Дизайн под iPhone X. Гайдлайны для iOS 11 / Mobile Dimension corporate blog / Habr – Справочник по дизайну приложений для iPhone и iPad (iOS)

Дизайн под iPhone X. Гайдлайны для iOS 11 / Mobile Dimension corporate blog / Habr

Вместе с iOS 11 появился новый iPhone X, айфон с самой большой диагональю экрана, который фактически не имеет границ. 5.8 дюймовый OLED экран даже больше чем экран 5.5 дюймов iPhone 8 Plus, в то время как размер самого корпуса примерно такой же как у iPhone 8. Для дизайнеров это означает большую свободу в макетах.

Большой экран

Дополнительные 145 pt дают пространство для еще одного ряда контента. Или мы можем разместить на экране меню, которое раньше туда не помещалось. Эти новшества касаются и iPhone 8, и 8 Plus, так как они имеют одинаковые пропорции, несмотря на разное разрешение.

Больше места для контента

Если сравнивать с самым первым iPhone, высота экрана увеличилась на 332 pt, а это 7 navigation bars. Все больше пространства для контента, и все меньше необходимости в гамбургер-меню.

Если сравнить первый iPhone и iPhone X, то можно заметить, что место для контента увеличилось почти вдвое. В целом это означает что современные приложения всегда должны включать все составляющие: статус бар, навигацию, таб бар и индикатор кнопки Home. Игнорируя эти элементы, вы рискуете навредить пользовательскому опыту и сделать приложение несовместимым со стандартами Apple.

Выемка

Возможно самый спорный аспект нового дизайна занимает верхние 10% экрана. Сенсорный датчик, больше известный как Выемка, – это элемент, который не дает новому экрану занимать полностью всю площадь. Технологически сейчас невозможно обойтись без Face ID, камеры и динамика, находящихся в нем.

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

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

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

Огромные заголовки

В iOS 11, заголовки обычно черного цвета размером 34 pt в начертании Bold. Интересно, что когда вы скроллите экран вниз, заголовки переходят на панель навигации и, тем самым, возвращают нам это ценное пространство.

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

Большой статус бар

Статус бар увеличился в высоту больше чем в 2 раза от 20 pt до 44 pt. Уведомления теперь можно просто стянуть вниз из левого верхнего угла. Для вызова пункта управления смахните экран из верхнего правого угла экрана. Смахивая экран снизу вы попадаете на домашний экран, но только если движение сделано быстро.

Безопасная зона контента

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

iPhone X в ландшафтном режиме

В ландшафтной ориентации экрана статус бар скрывается, чтобы максимально увеличить место для контента. Бар навигации сокращается до 32 pt, Tab bar до 30 pt, а индикатор кнопки home до 23 pt. Хотя большинство пользователей редко переключается в ландшафтный режим на iPhone X, все еще существует большое количество сценариев, когда нужен именно этот режим.

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

Веб-сайты в ландшафтном режиме

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

Скругленные углы экрана

Контент также может обрезаться из-за скругленных углов экрана iPhone X. Если вы не скрываете статус бар или индикатор кнопки Home, то вы не столкнетесь с такой проблемой. Однако, для полноэкранных приложений, таких как Камера, будет важно оставлять отступы в углу экрана. Скругления углов заданы радиусом 16 pt, такой же радиус скругления также рекомендуется для использования в кнопках.

Просматривайте ваши приложения на симуляторе iOS

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

“Гамбургер” меню больше не нужны

За последнее десятилетие дизайнерам приходилось бороться за каждый пиксель на крошечном экране первого iPhone. Многие решили полностью опустить Tab bar, потому что для него требовалось слишком много вертикального пространства. Применив немного креатива, некоторые из них придумали кнопку, которая будет выезжать слева. Это было рождение знаменитого Гамбургер меню. Сначала это было весело и свежо, но в плане юзабилити это был настоящий кошмар. Больше кликов для того, чтобы достичь скрытых под кнопкой экранов. В результате, использование вторичных вкладок снизилось, так как часто люди забывали о том, что там может быть больше содержимого.

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

Apple даже реализовала функцию опускания Navigation Bar по двойному тапу кнопки Home, при этом весь пользовательский интерфейс приложения также двигался вниз. Это было сделано для того, чтобы пользователь мог добраться до навигации с помощью большого пальца. Затем эта функция преобразовалась в вызов меню по двойному тапу. Гамбургер меню обычно располагался в левом верхнем углу экрана и добраться до него было крайне сложно. А сейчас, когда экраны стали гораздо больше, больше нет нужды бороться за место для контента. Tab bar — самый очевидный способ заменить Гамбургер меню, так как места для него сейчас достаточно. iPhone X подтверждает это направление. Если в вашем приложении есть несколько разделов, то нет никаких причин чтобы не использовать Таб бар. В iOS 11 Tab bar в ландшафтной ориентации экрана занимает даже меньше места.

Гамбургер меню очень распространены в вебе, и возможно это одна из причин почему мобильный веб опыт не догнал нативный опыт.
Даже React Native использует нативные контролы, которые являются фантастическим направлением в Веб технологии. Однако в iOS и особенно в iPhone X, вам нужно использовать Таб бар.

Адаптивные макеты и многозадачность

Сейчас, когда постоянно увеличивается количество разрешений для экранов с которым приходится иметь дело, очень важно делать ваши макеты адаптивными. Используя такие инструменты как Constraints в Sketch и Auto Layout в Xcode вам придется проектировать экран в расчете на то, что экран будет гибким и при необходимости может отображать дополнительное меню.

Stack Views

В Xcode вы также найдете Stack Views, прекрасное приложение для того, чтобы сделать ваши макеты более отзывчивыми на изменения. Некоторые элементы и группы могут динамично соединяться друг с другом и вам потребуется только редактировать отступы, когда контент встанет на место. Затем вы сможете завершить работу с Auto Layout. Эппл рекомендует использовать сначала Stack Views, затем Auto Layout.

Точки и Пиксели

Разработчики работают с точками, поэтому очень важно понимать разницу с пикселями. Когды был представлен самый первый айфон, эти 2 единицы были одинаковы 1 точка равнялась 1 пикселю. Затем, когда появились ретина экраны, 1 точка стал равняться 2 пикселям. Таким образом можно сказать что точки это величины измерения для первого айфона, в то время как пиксели это единицы измерения для новых моделей, и качество экрана напрямую зависит от их плотности (iPhone 4, 5, 6, 7, 8 = @2x, iPhone 8 Plus, iPhone X = @3x). Чтобы лучше понять разницу между в точках и пикселях рекомендую посмотреть видео.

Разрешения экрана iPhone

Всего в линейке iPhone 5 главных разрешений: 320 x 480 pt (iPhone 4), 320 x 568 pt(iPhone 5), 375 x 667 pt (iPhone 8), 414 x 736 pt (iPhone 8 Plus) and 375 x 812 pt (iPhone X). Макет не масштабируется, а расширяется в зависимости от разрешения. Например панель навигации адаптируется по ширине, но сохраняет ту же высоту. Элементы внутри остаются неизменными. iPhone 8 Plus единственный телефон который по поведению больше похож нам iPad в ланшафтном режиме. Иначе говоря, навигация может появится слева, заменяя собой Таб бар.

Иконки приложений

Иконка приложения используется для создания стиля вашего приложения. Это первое, что видят пользователи, когда начинают работу с приложением. Она отображается на домашнем экране, в App Store, Spotlight и настройках.

Размеры иконок

Разрешение @1x больше не поддерживается для iPhone, поэтому вам не нужно создавать для него иконку.
Иконки приложений сейчас имеют только два разрешения: @2x и @3x. Существует три типа иконок: иконка приложения, иконка spotlight и иконка для настроек. Для iPad используются @1x и @2x.

Супер-эллипс

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

Сетка для иконок

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

Цвета

iOS использует яркие цвета для того, чтобы иконки выделялись. Такие цвета хорошо работают как на белом, так и на чёрном фоне. Имейте ввиду, что яркие цвета должны использоваться редко, только в качестве призыва к действию и на минимально загруженном фоне. Приблизительно, только 10-20% всего дизайна может быть цветным, или же они будут слишком сильно конкурировать с контентом.

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

Системный шрифт

Системный шрифт теперь называется SF Pro Text для текстов с кеглем шрифта, меньше, чем 20 pt, и SF Pro Display для шрифта с кеглем 20 pt и больше. Важно отметить, что теперь при использовании системного шрифта, вы получаете доступ к динамическому шрифту (Dynamic Type), который позволяет шрифту настраиваться в соответствии с предпочтением пользователя.

Кнопки и размеры шрифтов

Главное правило: 44pt для кнопок, 12pt для маленького текста, 17pt для контента и 20pt+ для заголовков.

Расстояние между элементами и положение

Главное правило — придерживаться отступов в 8pt от края экрана и между элементами. Это создаёт достаточно воздуха, что облегчает восприятие контента на странице, а текст делает более читабельным. Также, UI элементы и текст должны располагаться по общей базовой линии.

Status Bar

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

Navigation Bar

Бар навигации — это быстрый доступ к информации об экране. Левая часть бара может быть использована для размещения кнопок «Назад», «Профиль», «Меню», тогда как правая часть может использоваться для кнопок действия: «Добавить», «Изменить», «Готово». Важно, что если вы используете одну из системных иконок, то нет необходимости создавать ассеты для них.

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

Поиск

Когда у вас достаточно много содержимого на странице необходимо обязательно добавлять возможности поиска по содержимому.

Тулбар

Тулбар используется в качестве дополнительного места для размещения активных кнопок и показа состояния экрана.

Таб бар

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

Состояния

Когда элементы меню не активны, иконки должны быть серыми. Например, как на картинке — они привлекают меньше внимания.

Вид таблицы

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

Основные стили

На базовом уровне Вы можете использовать некоторый набор предустановленных стилей и особенностей.

Разделы

Элементы могут быть сгруппированы с заголовком сверху и описанием ниже.

Collection View

Когда нужно разместить контент в виде таблички по строкам и столбцам, можно использовать Collection View. Он поможет вам в создании лэйаута мечты.

Варианты лэйаутов Collection View

Если коллекция не одна, можно создать комбинацию Collection View. Возможности безграничны.

Модальные окна

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

Модальные окна активности

Диалоговое окно активности позволяет обмениваться контентом (текстом, изображениями, ссылками) через Airdrop, различные приложения (например, Mail, Facebook, Twitter), а также добавить в избранное, в закладки и др. Внешний вид окна настраивать нельзя, а функции можно.

Полноэкранные модальные окна

Если информации много, можно использовать модальные окна на весь экран. Такие окна обычно открываются и закрываются с помощью анимации (они могут выезжать, появляться и исчезать, переворачиваться, пролистываться). Как и другие модальные окна, эти также должны быть предельно краткими и емкими, их должно быть легко скрыть.

Клавиатуры

Клавиатура используется для ввода информации в текстовые поля. Она легко кастомизируется под ввод разных видов информации, например, ссылки, эмейлы, номера телефонов, эмоджи. Есть возможность выбрать светлую или темную тему и надпись на кнопке подтверждения (по умолчанию «ввод» или «return» в англ.).

Picker

Если вариантов выбора много, можно использовать Picker. Он особенно удобен для дат, когда нужно ввести сразу три поля (число, месяц, год).

Segmented Control

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

Слайдеры

Слайдеры – это интерактивные контролы, которые не очень точны, но чрезвычайно удобны для быстрых настроек, таких как звук или яркость.

Progress bar

Элемент Progress bar показывает прогресс выполнения действия. Например, при загрузке веб-страницы. Высоту элемента можно настраивать.

Переключатель (Switch)

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

Stepper

Stepper медленнее, но точнее слайдера. Позволяет пользователям увеличивать или уменьшать значение с шагом в один. Граница и заливка настраиваются.

Иконки iOS

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

Рекомендуемые ресурсы

Эти шаблоны полезны не только для обучения. Вы можете их использовать и кастомизировать под свои нужды.

Набор IOS 11 GUI от APPLE

Если вы создаете дизайн для iOS, то захотите использовать стандартные элементы, такие как панели статуса, навигации и вкладок.

Набор IOS 11 GUI от GREAT SIMPLE STUDIO

Наиболее полный комплект со множеством элементов.

Мокапы устройств в векторе

Персональная коллекция автора с более чем 260 мокапами, сделанными в векторе. Идеально для презентации ваших проектов.

Дизайн ресурсы от FACEBOOK

Сокровищница ресурсов дизайна iOS, включая SoundKit, держащие устройства руки и полезные интерфейсы.

ЧТО НЕ НАДО ДЕЛАТЬ

Замечательная статья про дизайн для iPhone X. Включает несколько хороших примеров о том, что НЕ надо делать, если вы готовите дизайн для iPhone X.

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

Гайдлайны IOS от IVO MYNTTINEN

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

Перевод выполнен UX/UI дизайнерами компании Викторией Шишкиной, Ксенией Валякиной и Анастасией Овсянниковой

Разработка дизайна мобильных приложений для iPhone и iPad (iOS)

Для 50% пользователей дизайн приложения является ключевым фактором качества. Создание дизайна интерфейса для приложения не самая легкая задача. Для помощи в создании качественных и дружественных интерфейсов, компания Apple выпустила и обновляет руководство по созданию интерфейсов (iOS Human Interface Guidlines (HIG)). Мы сделали краткий обзор по особенностям создания дизайна интерфейсов приложений на iOS и кратко описали процесс создания дизайна приложения.

Получите оценку на создание дизайна приложения

Получить оценку

 

Этапы разработки дизайна приложения

Хороший, красивый и удобный дизайн приложений для iOS — это практически половина успеха вашей разработки. Все начинается с идеи.

Анализ спроса

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

Определение функционала

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

Пользовательские сценарии

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

Разработка навигации

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

Проектирование экранов

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

Получите предложение на разработку дизайна

Получить оценку

Разработка дизайна

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

Юзабилити дизайна

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

Дизайн приложения в магазине приложений

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

Руководство по созданию интерфейсов iOS

Поинты и пиксели

Пиксели – это наименьшие физические элементы, которые возможно контролировать на цифровом экране. Чем больше пикселей будет на экране определенного размера, тем выше количество пикселей на дюйм (PPI) и более качественным будем изображение на экране.

Поинты – это независимые от разрешения элементы. В зависимости от плотности пикселей, поинт может содержать несколько пикселей, например, 1 поинт содержит 2х2 пикселей на стандартном retina экране.

При создании дизайна для разных размеров экранов, вы должны думать в поинтах, а рисовать в пикселях. То есть вы все еще должны экспортировать элементы дизайна в 3 различных размерах:

• @1x – для устройств младше iPhone 4;
• в два раза больше @2x – для iPhone 4, 4s, 5, 5s, 6;
• в три раза больше @3x – для iPhone 6 Plus), независимо от того в каком разрешении вы создаете дизайн своего приложения.

Обработанные пиксели и физические пиксели равны на всех iOS устройствах кроме iPhone 6 Plus. Здесь экран имеет меньшее разрешение пикселей нежели оно должно быть при реальном @3x разрешении. Поэтому размер обработанного контента автоматически уменьшается до 87% реального размера с 2208 х 1242 пикселей до 1920 х 1080 пикселей.

Иконки приложений

Можно выделить следующие типы иконок в iOS: иконка приложения, иконка для магазина приложений AppStore, иконка для Spotlight, иконка для настроек.

Иконки обычно сохраняются как квадратные PNG файлы в различных разрешениях. Никаких дополнительных эффектов дизайнеру применять не нужно. iOS сама применяет все необходимые эффекты. Тоже самое касается радиуса углов иконок. На iOS устройствах и в AppStore мы видим «закругленные» углы (углы с радиусом). Не нужно самому создавать эти закругления и сохранять их в финальном файле. Apple обрежет вашу иконку с необходимым радиусом самостоятельно. Поэтому результатом вашей работы должно быть просто квадратное изображение в PNG формате. Важный аспект, который следует учитывать – прозрачность. Прозрачность не поддерживается для иконок приложения вообще. Поэтому все прозрачные участки будут заполнены черным цветом. Если иконка имеет белый фон, то серая 1px обводка будет применена к ней чтобы сделать её более выделяющейся. Это будет сделано только для иконок, которые будут находиться в разделе «Настройки» устройства, если ваше приложение там представлено.

Ваше предложение на разработку дизайна

Получить оценку

Шрифты

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

Цветовые схемы

Начиная с iOS 7 яркие цвета стали лицом iOS. Можно использовать любые, но не стоит увлекаться использованием большого количества пестрых цветов, потому как это может сбивать пользователя. Оптимально будет использовать 1-2 два основных цвета и 1-2 вспомогательных, без учета черного/белого для текста и заголовков.

Пиктограммы

Пиктограммы (иконки) – важная составляющая дизайна любого приложения. Она может гармонично дополнить текст или даже заменить его, при этом пиктограмма должна быть понятна пользователям. Обычно пиктограммы используются в Tab Bar – панель навигации, которая располагается внизу экрана и Nav Bar – панель навигации, располагается вверху экрана. Однако пиктограммы можно использовать их там, где это уместно.  Для создания пиктограмм, можно пользоваться вспомогательными неофициальными шаблонами, в которых применена система сеток, разработанная компанией Apple для своих иконок. Это может облегчить процесс создания дизайна приложения.

Часто используемые элементы

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

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

Заказать разработку дизайна вашего мобильного приложения

Отправить заявку

Передача готового дизайна мобильного приложения в разработку

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

• Карта экранов приложения – содержит в себе все экраны приложения и все возможные переходы между ними. Для каждого из переходов должно быть строго обозначено действие, инициирующее его, наприм, нажатие кнопки или определенный жест пользователя. Каждый из экранов должен быть определенным образом обозначен, например, порядковый номер, название, код. Это обозначение используется в качестве ссылки на экран, например, при наименовании папок, содержащих нарезку ресурсов;
• Карта цветов, используемых в приложении – это изображение, содержащее список всех цветов, используемых в приложении;
• Список шрифтов, используемых в приложении – текстовый документ, в котором перечислены все использующиеся в приложении шрифты;
• Размеченные состояния каждого из экранов – каждый из экранов может находиться в различных состояниях. Каждое из таких состояний, в том числе и основное, должно быть представлено в отдельном файле;
• Нарезка элементов для всех экранов – иконок, кнопок, индикаторов, стрелок. Ресурсы предоставляются в трех размерах — стандартном (соответствует размеру, указанному на разметке экрана в пойнтах), @2x и @3x. Все взаимозаменяемые ресурсы должны быть строго одного размера и располагаться в папках, названия которых соответствуют названию текущего экрана;
• Видео/gif со всеми нестандартными анимациями – все нестандартные анимаций сопровождаются пояснительные видео или текстовым описанием происходящего: какой параметр анимируется, за какое время и у какого объекта;
• Иконки приложения.

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

Заказать создание дизайна вашего мобильного приложения

Отправить заявку

50 советов для разработки безупречного дизайна iOS приложения / Habr

Привожу перевод статьи Ника Карсона. В статье собраны вместе, как мне кажется, основные правила построения интерфейса для iOS приложений.

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

2. Ориентируйтесь на устройство при создании приложений: учтите не только размер экрана, но и где и когда устройство используется. Больше всего iPad используется для развлечений между 8-11 часами вечера, перед сном, тогда как iPhone — в очереди на автобус или в кофейне. Учтите различные сценарии использования при разработке приложений – включая и то, как далеко устройство расположено от лица пользователя.

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

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

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

За остальными 45-ю — добро пожаловать подкат.

6. Секрет создания хорошей иконки для приложения – отразить основную идею: очевидные функции вашего приложения, но в визуально привлекающей форме. Пользователи iOS порой очень тщательно подходят к выбору иконок для рабочего стола. Не жалейте времени, чтобы создать иконки всех возможных размеров, чтобы они хорошо смотрелись на экране любого устройства, включая миниатюрный вариант, используемый в меню «Настройки» пользователя.

7. Палец больше и менее точен, чем мышь, поэтому область нажатия на сенсорном экране должна иметь значительную погрешность. Чтобы упростить задачу: никогда не располагайте слишком много элементов управления в одной области экрана или слишком близко друг к другу, и убедитесь, что кнопки достаточно велики для точного нажатия. Apple рекомендует размер не менее 44×44.

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

9. При разработке приложений для iOS, обратите внимание на систему обозначений Apple: у них богатый опыт разработки пользовательского интерфейса. Изменение стиля одного из элементов управления, чтобы улучшить вид и атмосферу вашего приложения это одно, но никогда не меняйте функции – это только спутает пользователей, которые привыкли к стандартным приложениям OS. К примеру, красные кнопки используются для удаления объектов, а синие – для выполнения действий.

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

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

12. При выборе внешнего вида и атмосферы приложения, соберите в помощь вдохновляющие материалы – например, составьте мудборд. Будет ли это нейтрально дружественный интерфейс или изображение реально существующих материалов таких как кожа, камень или металл? Экспериментируйте с различными комбинациями и цветовыми сочетаниями: в этом может помочь Adobe Kuler.

13. Размеры рабочей области iOS могут варьироваться от 1024×768 (iPad) до 640×960 (iPhone 4 и 4S) и 320×480 (iPhone 3GS). Часто приходится вставлять текст описания в дополнение к простым иконкам, чтобы вместить всю необходимую информацию в маленький экран. Это прекрасный способ разработать особый визуальный язык общения для ваших приложений, благодаря которому ясно какие функции выполняют иконки.

14. Можно легко адаптировать размер изображения для другого размера экрана, если создавать все графические элементы в Illustrator в форме векторов, а затем импортировать их в Photoshop, где вы можете легко подогнать их под конкретные размеры экрана и разрешение, дорабатывая и упрощая, где это необходимо.

15. Поработайте над набросками дизайна и функционалом на бумаге, используя в качестве образца доступные шаблоны iPhone или iPad. Когда вы уже готовы перевести дизайн на новый уровень, такие инструменты как LucidChart помогут вам создать функциональный макет приложения, чтобы далее перенести его в Photoshop для окончательной доработки внешнего вида приложения.

16. Рекомендации Apple по разработке дизайна интерфейса незаменимы для достижения совместимости с платформой, но некоторые правила нужно нарушить, если того требуют обстоятельства. Некоторые приложения — например, Flipboard, Twitter или Instagram — полностью отличаются от стандартных пользовательских ожиданий – поэтому не бойтесь выйти за рамки условностей.

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

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

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

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

21. Как уже упоминалось, иконка дает пользователям первое впечатление о вашем приложении: если она выглядит непродуманной или непривлекательной, приложение не примут всерьез. Вы можете провести поиск по App Store и сравнить ее с другими иконками данной категории приложений. Хороший способ оценить, как выглядит иконка вашего приложения, поместить ее на экран среди других.

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

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

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

25. Супер совет — Качественный дизайн прекрасно можно адаптировать под другие размеры – вспомните: такие сервисы как Google, Facebook и Twitter были адаптированы под другие формы, или версии приложений для iPhone или iPad, такие как например iWork. Небольшие версии более имеют более условную структуру, однако, большей частью имеют тот же вид и атмосферу.

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

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

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

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

30. Большинство качественных приложений имеют единую стилистическую тему, которая в свою очередь, влияет на конструктивные решения, и придает вашим приложениям ощущение цельности. Данная тема всегда должна соответствовать главной функции приложения: приведем обратный пример, когда тема не совсем соответствует функции – использование «прошитой кожи» в новом приложении Find a Friend.

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

32. Если визуальная область элемента управления немного меньше стандартного размера тач-области 44×44, убедитесь, что область экрана, отвечающая на прикосновение пользователя по размерам больше, и не размещайте элементы управления слишком близко друг к другу.

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

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

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

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

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

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

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

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

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

42. Одно из обязательных условий при разработке приложений – разместить в верхней части экрана источник света под углом 90 градусов, который будет освещать все элементы интерфейса. Угол освещения позволяет представить все тени и градиенты прямо, без наклона. Использование угла в 45 градусов возможно, но при сравнении ваше приложение может проигрывать другим.

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

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

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

46. Если вы хотите перенести приложение для iOS на Android, учтите следующее: более старые модели телефонов могут работать с теми же приложениями, ОС автоматически настраивает размер изображений и текста. Что касается планшетов, лучше внести изменения в дизайн некоторых экранов. Помните, что разрешение экрана и плотность элементов – это две разные вещи — вы должны несколько раз проверить как выглядит приложение на большом экране с меньшей плотностью.

47. Помните, что у Apple гораздо больше конструктивных норм, чем у Android, и соответственно – визуальной согласованности. У телефонов и планшетов на платформе Android гораздо больше способов управления приложениями, например, кнопка меню, задние кнопки, регулятор громкости, строка меню и т.д. – но данные элементы могут использоваться по-разному в зависимости от приложения.

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

49. Финальные испытания приложения должны всегда проходить на настоящих устройствах, а не на эмуляторах – это не помешает даже на ранних стадиях. При переносе на Android, убедитесь, что при тестировании используются различные устройства с различными разрешениями экранов и плотностью.

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

Благодарности: Yasuko Chujo and Koji Tachibana at e-bird Inc; Scott Meinzer at tap tap tap; Bowen Osborn at Shotzoom; Mladen Djordjevic at NFANY; Christoph Teschner at Algoriddim; Joey Neal at Superstashapp; Ben Zotto at Cocoa Box; Jon Steinmetz at Pixel Research Labs; Mike Rundle at Flyosity; Alex at Androidslide; Steve Varga, AKA Vargatron; and Marcos Weskamp at Flipboard.

Оригинал

Руководство по дизайну мобильных приложений под iOS и Android. Основные различия платформ

Если вы проектируете приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом 😎.

Мы рассмотрим наиболее важные для UX / UI дизайнеров различия между iOS и Android. Если вы создали приложение для одной платформы, то из этой статьи вы узнаете, что нужно, чтобы «перевести» его на другую платформу. Но, это всего лишь рекомендации. Речь идет о переводе «iOS-мышления» на «Android-мышление» и наоборот.

Дизайн интерфейса iOS и Android: основные отличия

Ниже представлены наиболее важные различия, которые UX / UI дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:

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

Нужно ли делать приложения для Android и iOS разными?

Если коротко, то «нет».

Apple и Google – очень умные компании с миллионами пользователей. Они будут совершать UX-ошибки, как и любая другая компания, но они не совершат вопиющих ошибок, когда будут определять язык дизайна своих систем. Поэтому, хотя, ниже я и представляю два альтернативных подхода (iOS и Android), ни один из них не является неправильным. Если пользователи могут уверенно перемещаться по вашему приложению и использовать его, никто не может запретить вам использовать вкладки на iOS или модальные представления на Android.

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

Навигация iOS и Android

Навигация в верхней части экрана

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

В iOS крайнее левое действие почти всегда является действием «назад» – последовательно к предыдущему экрану («Шаг 2» возвращает к «Шагу 1»), или иерархически к родительскому экрану (переход от «Inbox» к «Mailboxes»). Кроме того, здесь может быть привязан несвязанный пункт назначения. Заголовок страницы практически всегда присутствует, но сжимается по мере прокрутки представления пользователем. Дополнительные действия на странице могут отображаться, как одно текстовое действие или несколько иконок.

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

Ресурсы: панель навигации iOS; верхняя панель Material Design.

Основная навигация

Основная навигация или «пункты назначения» приложений расположены по-разному.

В iOS-приложениях основные пункты назначения перечислены в виде вкладок в нижней части экрана.

1. Всего 2-5 вкладок
2. Они имеют размер шрифта 10
3. Они представляют основные пункты назначения

Многие популярные сторонние iOS-приложения также соответствуют нескольким дополнительным правилам:

1. Любая вкладка, представляющая основное действие приложения – например, добавление новой фотографии в фото-приложение – центрируется
2. Любая вкладка профиля или настроек расположена последней
3. Поиск идет вторым

С другой стороны, iOS-приложения по умолчанию (1) не поощряют действия, находящиеся на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) показывают поиск последним.

Самое большое различие в приложениях Android заключается в том, что одни и те же основные пункты назначения распространены по всему интерфейсу – часто между (a)  кнопкой гамбургер-меню, (b)  панелью поиска, (c) вкладками или (d) floating action button. Мы поговорим обо всех 4 элементах в следующих разделах. Да, и обратите внимание: Android использует нижнюю навигацию совсем недавно, аналогично iOS – так что вы можете вообще не делать разницу между версиями приложений.

Ресурсы: панели вкладок iOS; понимание навигации Material Design

Вторичное навигационное меню

В iOS пункты навигации, которые не помещаются в нижней панели вкладок, могут (a) быть перенаправлены на универсальную вкладку «More» или (b) отображаться как действия в верхнем левом или верхнем правом углу других пунктов назначений.

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

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

Ресурсы: Material Design nav drawer

Действие «Назад»

В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

Метод навигации назад (IOS)	Контекст, в котором используется
Нажать «Назад» в верхнем левом углу экрана	Любой экран, на котором присутствует действие «Назад»
Свайп вправо от левого края экрана	Любой экран, на котором действие назад расположено в верхнем левом углу
Нажать «Готово» в верхнем правом углу экрана	Не редактируемые модальные представления
Свайп вниз по контенту	Модальные или полноэкранные представления

Что такое модальные и полноэкранные представления? Хорошо, что вы спросили.

Модальные окна – это одноэкранные задачи, которые появляются, на переднем плане, заставляя предыдущий экран отступить на задний план. Вы можете отклонить их, проведя пальцем вниз или нажав «Назад» в верхней части модального окна.

Полноэкранные окна – это медиа-файлы, фотографии или видео, которые занимают весь экран. Их можно закрыть на iOS и Android, свайпом вниз.

В Android навигация назад намного проще: для Android 10 и новее просто проведите пальцем с любой стороны экрана – это всегда будет навигация назад. Для Android 9 используйте вездесущую кнопку «Назад» в левом нижнем углу экрана.

Дизайн элементов управления iOS и Android

Основные кнопки призыва к действию

В iOS основная кнопка страницы обычно находится в правом верхнем углу.

В Android, однако, основная кнопка страницы часто отображается в правом нижнем углу, как кнопка floating action button или сокращенно FAB.

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

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

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

Ресурсы: кнопки iOS; floating action button Material Design

Поиск

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

Одно из различий в стиле поиска между iOS и Android:

• Чтобы отменить поиск, в iOS нажмите «Отмена» или «←» в Android
• Чтобы очистить текущий запрос, но остаться на экране поиска, нажмите «X» в iOS или «X» в Android

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

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

В iOS поиск обычно отображается среди основных вкладок или действий в верхней навигационной панели.

В Android вы также найдете его в контекстных действиях на верхней панели.

Ресурсы: строка поиска iOS; паттерн поиска Material Design.

Меню действий

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

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

Обе платформы имеют свои стандарты для меню действий.

В новой версии iOS (iOS 13) функция, называемая «контекстное меню», отображает связанные действия при нажатии и удержании элемента. Когда отображается контекстное меню, фон размыт.

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

Ресурсы: action sheets iOS, контекстные меню; меню, bottom sheets Android

Элементы управления выбором

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

Для выбора среди относительно небольшого числа вариантов в iOS используйте элемент управления выбора. Вы можете отображать его закрепленным внизу (как показано выше) или встроенным в контент (см. «Date Pickers» ниже).

Для выбора из нескольких вариантов на Android обычно используется раскрывающееся меню (которое отображается на месте) или модальное диалоговое окно со списком вариантов (которое отображается по центру и затемняет фон приложения).

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

Ресурсы: pickers iOS; раскрывающиеся списки, диалоговые окна Android

Средства выбора даты (Date pickers)

В iOS средства выбора даты имеют вид любого другого элемента выбора, но со столбцом для дня, месяца и года (по желанию).

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

Ресурсы: iOS picker; Android date picker (обратите внимание на различия в спецификации Material Design)

Вкладки

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

В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.

Ресурсы: сегментированные элементы управления iOS; вкладки Material Design

Отмена действия

В iOS предупреждения появляются по центру экрана, но вы также увидите, как предупреждения скользят вверх от нижней части экрана (технически называемой «панелью действий» языком iOS). Деструктивные действия (например, удаление чего-либо) имеют красный цвет.

В Android некоторые предупреждения появляются по центру экрана. Однако, когда они не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «snackbars». Snackbars – хороший выбор, потому что (а) они дают вам возможность сообщить  пользователю, что его действие было успешным, и (б) вы можете добавить к ним одно или два действия, что делает их идеальным местом для размещения действия «Отменить». Я бы предпочел, чтобы мои пользователи имели возможность отменить действие. Дважды спрашивайте пользователя каждый раз, когда он пытается принять важное решение.

Ресурсы: Undo от iOS; snackbars от Material Design

Типографика iOS и Android

Шрифт по умолчанию

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

Системный шрифт iOS называется San Francisco (SF). Это компактный шрифт, разработанный для сохранения удобочитаемости при небольших размерах текста. Вы можете скачать SF здесь.

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

Кроме того, для многих Android систем установлен собственный Google-шрифт под названием Product Sans, который недоступен для стороннего использования.

Стили текста

В другой статье, я подробно описал,  как стилизовать текст приложения под iPhone и, как стилизовать текст приложения под Android.

Ресурсы: Руководство по типографике iOS; Руководство по типографике Material Design.

Другие стандарты платформ iOS vs. Android

Размер и форма иконок приложений

Вы должны проектировать иконки приложений iPhone в следующих размерах:

Размер иконки	Где используется
180×180 px	Экран «Домой» iPhone для размеров @3x (например, 11 Pro, X, Xs, 8+)
120×120 px	Экран «Домой» iPhone для размеров @2x (например, 11, XR, 8)
1024×1024 px	App Store

В конечном счете, ваша иконка может быть сделана и в других размерах, но, если вы сделаете ее в 60px, то убедитесь, что она хорошо смотрится в размерах 120×120, 180×180 и 1024x1024px.

Проектируйте иконки Android-приложений в следующих размерах:

Размериконки	Где используется	Кратность 48×48 px
48×48 px	Основной экран (medium DPI телефоны)	1x
72×72 px	Основной экран (high DPI телефоны)	1.5x
96×96 px	Основной экран (xhdpi телефоны)	2x
144×144 px	Основной экран (xxhdpi телефоны)	3x
192×192 px	Основной экран (xxxhdpi телефоны)	4x
512×512 px	Большая версия для Google Play store (все устройства)	N/A

Поэтому: 1) создайте красивую векторную иконку с разрешением 48×48 px, 2) увеличьте изображение до 400%, чтобы убедиться, что оно по-прежнему выглядит великолепно, и 3) создайте отдельную версию с разрешением 512×512 px.

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

Ресурсы: рекомендации по иконкам приложений iOS; рекомендации по иконкам приложений Material Design (к сожалению, это ничего не говорит о размерах иконок)

Минимальный размер цели нажатия

Платформа	Минимальный размер цели нажатия
iOS	44x44pt
Android	48x48dp

Обратите внимание, что points Apple («pt») и device-independent pixels Android («dp») функционально эквивалентны. Они просто ссылаются на базовый размер (такой же, как CSS-единица «пиксель»), который измеряется независимо от разрешения экрана.

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

Язык дизайна

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

Чтобы узнать больше о проектировании для iOS, прочтите рекомендации Apple «Human Interface Guidelines».

Чтобы узнать больше о проектировании в стиле Material Design, прочтите материалы на сайте Material Design.

Заключение

Я что-то упустил? Что-то устарело? Пишите на почту [email protected]. Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и актуальным для перевода мобильных приложений для iPhone и Android.

Различие в проектировании нативных приложений iOS и Android

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

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

Различия в паттернах навигации

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

Глобальная панель навигации (Android)

С другой стороны, у Apple совсем другой подход к дизайну. Глобальная навигационная панель отсутствует, поэтому в приложениях с нативным дизайном iOS мы не можем вернуться назад с помощью глобальной кнопки «Назад». Это влияет на дизайн мобильных приложений iOS. Внутренние экраны должны иметь собственную навигационную панель с кнопкой «Назад» в ​​верхнем левом углу.

Кнопка «Назад» (iOS)

Также в приложениях для перехода на предыдущий экран Apple использует жест свайпа слева-направо. Этот жест работает практически во всех приложениях.

Свайп слева-направо – возврат назад (iOS)

Разница между iOS и Android в этом случае заключается в том, что в приложениях на устройствах iOS жест свайпа слева-направо вернет вас на предыдущий экран. Тот же жест на устройствах Android переключит вкладки. Но в отличие от iOS, на Android-устройствах есть нижняя панель навигации с кнопкой «Назад», которая вернет вас на предыдущий экран.

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

Свайп слева-направо — переключение между вкладками (Android)

Отличия навигационных паттернов приложений для iOS и Android

В Material Design Guidelines есть несколько различных вариантов навигации. Один известный навигационный шаблон, используемый в приложениях Android, представляет собой комбинацию панель навигации (navigation drawer) и вкладок.

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

Слева – ящик навигационного меню; справа – вкладки (Material Design)

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

Нижняя навигация (Material Design)

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

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

Вверху слева – сегментированный элемент управления iOS; Внизу справа – панель вкладок iOS (HIG)

Хотя есть элементы, выполняющие аналогичные функции в обеих операционных системах (вкладки и сегментированный элемент управления, панель нижней навигации и панель вкладок), навигация по-прежнему остается одним из основных различий между iOS и Android. Существуют как объективные различия, такие как глобальная панель навигации в Android и ее отсутствие в iOS, так и различия в концепции этих двух систем.

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

Собственный вид стандартных элементов управления требует дополнительных усилий и времени, и не знаком пользователям

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

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

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

Слева – стандартные элементы управления iOS; справа – стандартные элементы управления AndroidСлева стандартные элементы выбора iOS; справа – стандартные элементы выбора Android

Стили кнопок в iOS и Android

В Material Design Guidelines есть два стиля кнопок – плоские и выпуклые. Эти кнопки используются в различных ситуациях. Текст на кнопках Material Design обычно имеет верхний регистр. Иногда мы находим текст на кнопках в верхнем регистре и в нативных приложениях iOS, но чаще всего это заголовок.

Слева – стандартные кнопки Material Design; справа – стандартные кнопки HIG

Также есть еще один тип кнопок – floating action buttons на Android и кнопки призыва к действию на iOS. Floating action button представляет основное действие в приложении. Например, кнопка «Написать» в почтовом приложении или кнопка написания сообщения в приложении социальной сети могут быть floating action buttons. Аналогичным дизайном для основного действия в приложениях iOS является кнопка призыва к действию, которая расположена в центре панели вкладок.

Слева – стандартная floating action button в iOS; справа – стандартная кнопка призыва к действию в Android

Различия между нативным слоем bottom sheets в Android и слоем action sheets в iOS

В Android есть два типа нижних слоев (bottom sheets): модальные нижние листы и постоянные нижние листы. Модальные нижние слои имеют два типа контента: модальные нижние слои с различными действиями и список приложений, который появляется после того, как пользователь нажимает иконку «Поделиться». Мы можем найти аналогичные типы контента в листах действий (action sheets) iOS и (activity views). Но эти компоненты отличаются от нижних слоев Android.

Слева – стандартные нижние листы Material Design; справа –листы активности в приложении iOS

Различия в сенсорных целях и сетках

iOS и Android имеют несколько иные рекомендации для сенсорных целей (touch targets) 44px @1x для iOS и 48dp / 48px @1x для Android. Material Design Guidelines также предлагает согласовывать все элементы интерфейса с квадратной базовой сеткой 8dp.

Различия в типографике

San Francisco – системный шрифт в iOS. Roboto – стандартный шрифт в Android. Noto – стандартный шрифт для всех языков в Chrome и Android, которые не поддерживаются Roboto. Вам нужно будет обратить пристальное внимание на типографику и макеты каждой платформы.

Слева – типографика Material Design; Справа – типографика HIG

Микровзаимодействия

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

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

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

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

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

Хотя основные рекомендации по использованию микро-анимаций в Material Design Guidelines и Human Interface Guidelines весьма схожи, существуют определенные различия, которые четко определены. Пользователи привыкли к этим, специфичным для каждой платформы, переходам и воспринимают их как абсолютно естественные.

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

iOS

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

Android

В соответствии с Material Design Guidelines, в процессе перехода преобразуемые элементы интерфейса классифицируются как исходящие (outgoing), входящие (incoming) или постоянные (permanent). Категория, к которой относится элемент, влияет на то, как он преобразуется.

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

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

Пример перехода от родительского экрана к дочернему (Material Design Guidelines)

С родительского экрана встроенный дочерний элемент при касании поднимается и раскрывается.

Переход задает фокус на дочернем экране, одновременно укрепляя отношения между дочерним и родительским элементами.

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

Вкладки находятся на одном уровне и перемещаются вместе по горизонтали

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

Выводы

Конечно, есть исключения: некоторые приложения iOS следуют рекомендациям Material Design Guidelines (например, Gmail), а некоторые приложения для Android следуют рекомендациям Human Interface Guidelines (например, Instagram).

Слева – Gmail для iOS; Справа – Gmail для AndroidСлева – Instagram для iOS; Справа – Instagram для Android

Но одно очевидно: гораздо быстрее разработать мобильное приложение с использованием нативных компонентов для обеих операционных систем. Таким образом, лучше потратить время на дизайн, а не делать один макет приложения, который будет совмещать компоненты Human Interface Guidelines и Material Design, а затем потратить много времени на его разработку из-за нестандартных элементов.

SteelKiwi – компания по разработке программного обеспечения и дизайна приложений. Если вы хотите узнать, как создать собственное приложение, свяжитесь с нами! Мы следуем лучшим практикам дизайна Android и придерживаемся Human Interface Guidelines от Apple.

Хотите увидеть примеры дизайна приложений, в которых мы использовали нативные элементы, а также пользовательские интерфейсы с мощным стилем? Посетите наши страницы на Dribbble и Behance, чтобы лучше понять, на что мы способны.

iOS, Windows Phone / Habr

Это вторая часть доклада, который я прочитал на Dribbble Meetup 2013 в Москве. В первой части я подробно описал свой процесс интеграции дизайна под платформу Android. Эта часть — про интеграцию дизайна под iOS и Windows Phone, а также я вскользь упомяну про Samsung Bada 2.0. Дальше — много картинок.

iOS

Переходим к iOS. Тут всё значительно проще, чем в Android. Процесс интеграции будет разбираться на примере iPhone, но всё нижеописанное с успехом применяется и на iPad.

Как мы все знаем у iPhone есть всего два типа экрана: «Retina», «не Retina».

Metrics

Итак, папка Metrics должна содержать все тоже самое, что и для Android: размеры элементов, отступы между ними и от края экрана, цвета однотонных элементов (например, разделители) и т.д. Важно отметить (и запомнить!), что цвета для программистов надо указывать в десятеричном формате. То есть, например, RGB (255, 255, 255), а не в шестнадцатиричном — #FFFFFF.

Размеры для программистов должны быть указаны для не Retina-экранов.

А так как psd-макеты у нас делаются для Retina, то сответственно, для корректной работы заходим в Image, жмём Image Size, и выставляем значение 50%.

Можно приступить, так сказать, к «образмериванию» макета. Делать это будем с помощью уже знакомого нам PNG EXPRESS (29 $, для PS CS5/6). Всё аналогично Android.

Пример
Шаг 1. Допустим, нам надо указать размер между картинками аттачей.
Шаг 2. Просто выделяем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Расширение само нарисует размеры. Если размер получился неверным, наш дизайнерский косяк, редактируем его как обычный текстовый слой Photoshop.

Fonts

Папка Fonts должна содержать файлы со всем, что касается шрифтов: размер, цвет, начертание, Photoshop-стили и т.д.

Пример
Шаг 1. Если нам надо указать шрифт у ссылки «Подробности», то
Шаг 2. Выделяем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. Получили полное описание шрифта.

Опять сэкономили кучу времени.

Resources

Папка Res должна содержать ресурсы графики для вашего приложения. Для iPhone всё складывается в одну папку:
файлы для Retina обозначаются с @2x, то есть excel @2x.png, не Retina — просто excel.png

Опять используем расширение Cut & Slice me (бесплатное, для PS CS6).

Исходный psd-макет должен быть для Retina-экранов.

Пример
Шаг 1. Нам надо нарезать иконки для нашего приложения.
Шаг 2. Реорганизуем слои: каждую иконку помещаем в папку, в конец названия которой добавляем @. Таким образом, скрипт определяет, что эту папку надо нарезать.
Шаг 3. Переходим во вкладку iPhone, жмем Cut all assets.
Шаг 4. Расширение автоматом нарезает наши иконки с нужными именами для Retina и не Retina.

Чтобы не возникала проблема “мыльных” пикселей, все элементы должны иметь четный размер.

Samsung Bada

Третья в списке платформ — Samsung Bada. Достаточно популярная платформа в России. Но недавно компания Samsung убила эту мобильную операционную систему, официально объявив о ее закрытии. Поэтому о Bada можно либо хорошо, либо никак…

Итак, Windows Phone.

Windows Phone

Тут ситуация повторяет iOS, поэтому просто ещё раз пробежимся по процессу.

На WP мы имеем два основных типа экрана: WVGA, WXGA.

Metrics

Размеры для программистов должны быть указаны для WVGA-экранов.

С помощью PNG EXPRESS «образмериваем» макет.

Пример

Fonts

Пример

Resources

К сожалению, Cut & Slice me не поддерживает Windows Phone. Поэтому придётся вручную делать ресайз под два разрешения.

Сначала делаем графику для WVGA. Для этого в Cut & Slice переходим в третью вкладку, которая вырезает слои размером 1 к 1. По сути, заменяет массовую команду Save for Web.

Затем WVGA переводим в WXGA, в Image Size выставляем 160%.

Повторяем процесс.

Всё, теперь мы освоили интеграцию дизайна для всех основных мобильных платформ.

Дизайн приложений для iOS, проектирование и прототипирование — Лайв Тайпинг

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

Дизайн и проектирование iOS-приложений требует соблюдения устоявшейся логики взаимодействия (гайдлайнов). Если ее не соблюдать, вы получите приложение, взаимодействие с которым будет вызывать у пользователей недоумение и непонимание как этим пользоваться. Это может снизить эффективность приложения для вашего бизнеса. Поэтому мы создаем уникальные приложения, которые всегда учитывают специфику используемой платформы.

Как мы работаем

Этап 1 — Анализ

Прежде чем взяться за разработку приложения на iOS, мы занимаемся определением целевой аудитории: ее портрета, черт, характеристик, ключевых целей и задач. Собрав информацию о ЦА, расставляем приоритеты на функции, которые нужно реализовать в приложении.

Этап 2 — Проектирование

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

Этап 3 — Дизайн

Создаем концепцию дизайна iOS-приложения — определяем цвета, стиль приложения и его кнопок, какой шрифт использовать в тексте и т. д. Тем самым мы получаем готовый дизайн-макет приложения, по которому на 100% понятно, как оно будет выглядеть и работать. Этот макет, вместе с соответствующей спецификацией, передаётся разработчикам.

Наши принципы

Только целевая аудитория

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

Грамотное юзабилити

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

Согласование — залог результата

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

Дизайн-поддержка

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

Стоимость

Цены на разработку дизайна iOS-приложения зависят от сложности его функций и количества экранов. Для уточнения звоните нам или заполните форму заявки.