Дизайн ios приложений: 32 отличия дизайна мобильного приложения под iOS и Android — Дизайн на vc.ru — DesignLessons – все о дизайне

Содержание

Полные иллюстрированные гайдлайны по дизайну под iOS 13

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

Возможно, вы уже спроектировали с десяток приложений, но ищите лучшие примеры. Руководство Apple «Human Interface Guidelines» просто ужасно.

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

Размеры экранов iPhone

В течение 5 или 6 лет после выпуска первого iPhone размеры экрана были вполне управляемыми. Если ваш дизайн работал на экране с разрешением 320×480, вы были великолепны. Теперь это дикий запад. Только за последние 3 года добавилось 3 новых размера экрана!

Вот полный список размеров экранов iPhone (добавьте эту ссылку в закладки; или скачайте PDF-файл ниже).

Устройство	Размер артборда	Масштаб экспорта
11 Pro Max, XS Max	414 x 896	@3x
11 Pro, X, XS	375 x 812	@3x
11, XR	414 x 896	@2x
6+, 6S+, 7+, 8+	414 x 736	@3x*
6, 6s, 7, 8	375 x 667	@2x
5, 5s, 5c, SE	320 x 568	@2x
4, 4s	320 x 480	@2x
1, 2, 3	320 x 480	@1x

Предстоящие воркшопы

*Технически дисплей телефона 2.61x

Размер артборда. Это «размер точки» или «@ 1x» размер данного устройства. Я настоятельно рекомендую проектировать артборды такого размера. (Ниже я объясню, чем отличаются точки от пикселей)
Масштаб эскпорта. Это как сделать растровое изображение (PNG, JPG) намного больше при экспорте, чтобы максимально использовать преимущества более высокого разрешения некоторых устройств.

Артборд какого размера мне следует использовать для дизайна iPhone?

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

Если вы записываете аналитику в своем текущем приложении или веб-сайте, отметьте их * для наиболее распространенных размеров экрана вашей аудитории
Если вы проектируете приложение для широкой аудитории, используйте общий самый популярный размер экрана iPhone: 375x667 pt
Если вы проектируете приложение для тех, кто разбирается в технологиях или дизайне, самым популярным размером экрана iPhone, скорее всего, будет новейший 375x812 pt.

* Google Analytics записывает это в Audience > Mobile > Devices, затем перейдите на ярлык «Primary Dimension» и установите для него «Screen Resolution».

Дизайн, который хорошо работает на более узком экране (375pt), почти наверняка будет хорошо работать на более широком экране (414pt) – но не наоборот. Поэтому всегда лучше сначала спроектировать более узкие экраны, а затем перепроверить и настроить их для более крупных экранов. Поскольку высота не является ограничением, не так важно, имеют ли ваши артборды высоту 667 или 812 пикселей.

iOS Точки vs. Пиксели

«Точка» (point) – это показатель, по которому дизайнеры могут сравнивать размеры шрифтов и элементов интерфейса на iOS девайсах. «Пиксель» (pixel) – это крошечный квадрат света, из которых состоит экран вашего iPhone. Меньшие пиксели означают более четкое изображение, и это здорово. Но если вы просто уменьшите свои пиксели, все на экране тоже уменьшится! Чтобы сбалансировать это, дизайнеры измеряют размер элементов на экране в точках. Если пиксели

в два раза меньше изначальной высоты / ширины, мы можем просто использовать квадрат 2×2 пикселя для каждой точки (это называется масштаб @ 2x). А если пиксели составляют примерно треть изначальной высоты / ширины, мы можем использовать квадрат 3х3 пикселя для каждой точки.

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

Руководство дизайнера по DPI и PPI

iPhone Layout

Хотя разные iOS-приложения имеют разный Layout, многие стандартные страницы будут иметь Layout, подобный следующему:

Примечание: в разделе загрузок в конце статьи у меня есть шаблон iPhone для Sketch, у которого есть линейки, разделяющие эти области страницы, а также строка состояния и индикатор «Домой». Это позволяет очень быстро заполнять этот фреймворк страницы.

Строка состояния

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

Строка состояния содержит индикаторы времени, сигнала, Wi-Fi и батареи, и может быть написана (текст и иконки) черным или белым цветом.

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

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

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

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

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

Только начиная с iPhone X появилась «челка» и закругленные углы на границе. Старые iPhone (и все iPad) имеют более короткую и компактную строку состояния.

Панель навигации

В навигационной панели приложение отображается навигация (сюрприз!), заголовок страницы, основные действия страницы и (часто) поиск.

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

В моем Sketch-шаблоне интерфейса iPhone, я разместил направляющие во всех местах, где обычно располагаются эти строки.

Строка состояния: 44pt в высоту
Первая строка: 44pt в высоту
Вторая строка: 54pt в высоту
Третья строка: 48pt в высоту

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

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

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

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

Но, если вам нужно показать поиск, то понадобиться третья строка (даже, если первая строка оставлена пустой!).

На скриншотах выше показано только pre–scrolled поведение. Как только пользователь начинает скроллить, iOS начинает вести себя следующим образом.

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

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

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

Обратите внимание, что переходы между состояниями очень плавно анимированы – небольшая, но характерная деталь стиля iOS.

Панель вкладок

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

Давайте отметим несколько особенностей стиля:

Выбранная иконка обозначается цветом заливки темы приложения.
Фон может быть слегка полупрозрачным и размытым – эффект «матового стекла», в стиле навигационной панели
Метки имеют текст 10-11pt в SF, шрифт по умолчанию

И несколько замечаний о поведении панели вкладок и ее кнопок:

Различные вкладки запоминают свое состояние. Если вы путешествуете в определенное место назначения на одной вкладке, переключаетесь на другую вкладку, а затем переключаетесь обратно на первую вкладку, вы будете там, где остановились в этой вкладке, а не на ее «главном экране»
Если вы нажмете на активную вкладку, вы вернетесь к «главному экрану» для этой вкладки
Панель вкладок всегда видна внутри приложения, за исключением: 1) момента, когда отображается клавиатура 2) когда открыто модальное окно (во время критически важных задач пользователь должен сосредоточиться на текущей задаче, а не переходить к другим частям приложения)

Всего должно быть 2-5 вкладок. Если вам нужно отобразить больше 5 вкладок, пятой иконкой должно быть «More», чтобы показать другие пункты назначения на экране выбора при нажатии.

Индикатор «Домой»

Все новые iPhone (X и более поздние версии) имеют индикатор «Домой» (home indicator) – тонкую закругленную полоску, всегда присутствующую внизу экрана. За исключением тех случаев, когда вы уже на главном экране.

Он черный на всех светлых экранах, но может быть белым на темных экранах.

Слегка перетаскивая его, вы можете перемещаться между приложениями и главным экраном:

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

Обычно индикатор «Домой» имеет свою собственную «рамку» высотой 34pt, в которой другие фиксированные элементы не отображаются.

Но прокручиваемые списки могут отображаться при скролле под индикатором «Домой» – и вы даже можете выбрать нажатием элемент под ним. Индикатор «Домой» реагирует только на свайп вверх.

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

2 первых способа обычно применяются к одним и тем же экранам.

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

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

Поиск

В iOS-приложениях есть 3 основных точки входа:

Панель поиска в навигационной панели
Иконка поиска на навигационной панели
Иконка поиска на панели вкладок

Однако, независимо от того, где находится точка входа в поиск, процесс поиска выглядит довольно схожим:

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

Модальные окна (Modal Sheets)

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

Теперь в iOS 13 для этого у нас есть идеальный элемент интерфейса – Modal sheet.

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

Modal sheet можно закрыть:

Нажатием на действие «Закрыть» вверху («Отмена» в верхнем правом углу)
Свайпом вниз по самой модальной карточке

Элементы интерфейса и элементы управления

Списки (AKA Табличные представления)

Помните: «90% мобильного дизайна – это списки». Если вы хотите научиться проектировать приложения для iPhone, узнайте, что Apple думает о своих списках (или, как они их называют, «Табличные представления»)

Всякий раз, когда вы создаете список на iPhone, вам нужно задать себе три вопроса:

Какой текст я хочу отобразить?
Хочу ли я добавить иконку / изображение?
Что расположено в правой половине клетки?

Давайте рассмотрим каждый из них по очереди.

Какой текст вы хотите отобразить в каждом элементе списка? Вы можете выбрать:

Только основной текст (17pt обычный)
Основной текст (17pt обычный) со вторичным текстом (15pt обычный)
Кастомный макет – например, основной текст (17pt обычный), вторичный текст (15pt обычный, НО СВЕТЛЕЕ) и третичный текст (15pt обычный, НО СВЕТЛЕЕ)

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

Наконец, есть несколько вариантов для правой части элемента списка:

(Указывающий направо) шеврон. Почти по умолчанию он позволяет пользователям понять, что при нажатии они перейдут на другой экран
Текст и шеврон. Это означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет здесь показано
Галочка. Позволяет пользователю выбирать один из элементов списка в этой группе (Примечание: не множественный выбор, как веб-списки с флажками)
Переключатель. Позволяет пользователю включать или отключать свойство, на которое ссылается элемент списка.
Текстовые кнопки. Используйте системный цвет для ссылки на другую страницу или сценарий. Используйте красный текст для обозначения «разрушительного действия» – выключения или удаления чего-либо и т. д.

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

Кнопки

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

Тем не менее, iOS также имеет кнопки на странице.

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

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

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

Текстовые поля

Поле ввода текста выглядит как элемент списка с подсказкой, которая исчезает при наборе текста.

Переключатели (Switches)

Переключатели появляются внутри элемента списка с меткой слева и переключателем двоичного выбора справа.

Выбор даты и / или времени

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

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

Экраны выбора

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

Итак, ингредиенты:

(1) Один элемент списка с меткой, значением и шевроном приводит к (2) странице с множеством вариантов в списке, один из которых может быть выбран, и выбор отображается с помощью галочки.

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

Типографика

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

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

Элемент	Стиль
Заголовок страниц (unscrolled)	34pt полужирный #000
Заголовок страницы (scrolled)	17pt средний #030303
Простой текст, Заголовки элементов списка, Ссылки	17pt нормальный #000
Вторичный текст	15pt нормальный#8A8A8E
Третичный текст, Подписи	13pt нормальный #8D8D93
Кнопки, Элементы ввода текста	17pt нормальный, разные цвета
Метки панели действий	10pt обычный #8A8A8E

Текст заголовка

Заголовки страниц пишутся двумя разными способами в приложениях для iPhone.

Когда пользователь еще не прокрутил (или прокрутил, но затем прокрутил обратно вверх):

Размер: 34pt
Вес шрифта: полужирный
Цвет: #000
Цвет темной темы: #FFF
Выравнивание: по левому краю

Когда пользователь прокрутил вниз:

Размер: 17pt
Вес шрифта: средний
Цвет: #030303
Цвет темной темы: #FFF
Выравнивание: по центру

Текст по умолчанию

«Стиль по умолчанию» для текста в приложениях на iPhone – это:

Размер: 17pt
Вес шрифта: нормальный
Цвет: #000
Цвет темной темы: #FFF

Вы можете многого добиться, сделав небольшие изменения в этом базовом стиле.

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

Аналогично, текстовые кнопки ссылок в основном являются текстом по умолчанию, но с разными цветами.

И текст подсказки для поля поиска – это текст по умолчанию, но светло-серый.

Вторичный текст

iOS-приложения имеют стандартизированный стиль для любого вспомогательного «вторичного» текста.

Размер: 15pt
Вес шрифта: нормальный
Цвет: #8A8A8E
Цвет темной темы: #8D8D93

Третичный текст и подписи

Любые пояснительные «подписи» делаются еще меньше и легче, чем вторичный текст.

Размер: 13pt
Вес шрифта: нормальный
Цвет: #6D6D72
Цвет темной темы: #8D8D93

Минимальный размер текста

Просто определив минимальный размер текста вы сможете избежать головной боли с любой дизайн-системой. Для iOS-приложений это метки на панели действий с размером 10pt:

Размер: 10pt
Вес шрифта: нормальный
Цвет: #999 (когда не выделен)
Цвет темной темы: #757575 (когда не выделен)

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

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

Вы можете сделать это следующим образом.

(Если вы используете Sketch, вы можете сделать это довольно просто с помощью их шаблона – File > New from Template > iOS App Icon)

Однако, если вы похожи на меня, вы захотите убедиться, что учтены наиболее распространенные (или более новые) размеры дисплеев устройств. В конце концов, разве вся суть этого @3x масштаба не в том, что отдельные пиксели слишком малы, чтобы их видеть?

Вот план дизайна иконки iOS-приложения 80/20 от Эрика:

Создайте квадратную иконку, которая будет хорошо смотреться с разрешением 60x60px (и убедитесь, что она хорошо выглядит в маске с помощью Apple superelljpse *)
Увеличьте ее до @ 2x (120x120px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
Увеличьте ее до @ 3x (180x180px) и, при желании, настройте ее так, чтобы она была настолько идеальной, насколько вам хочется
Увеличьте ее до 1024x1024px
Экспортируйте все 4 размера в формате PNG. Готово ?

Суперэллипс iOS (AKA «Squircle») Форма иконки

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

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

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

Как создать в Sketch Apple-иконку в форме суперэллипса

Создайте квадрат, используя меню «Insert» или клавишу «r».
Измените радиус угла на длину одного размера, умноженную на 0,222
Измените «Radius (Round Corners)» на «Radius (Smooth Corners)»

Как создать в Figma Apple-иконку в форме суперэллипса

Создайте квадрат, используя пункт меню «Rectangle» или клавишу «r»
Измените радиус угла на длину одного размера, умноженную на 0,222
Откройте меню «Independent Corners» (справа от настройки радиуса угла)
Откройте меню «Corner Smoothing» (иконка «…») и установите для него индикатор «iOS» на 60%.

Другие особенности iOS

Есть пара вещей, о которых вам, вероятно, стоит знать, если вы проектируете приложение для iPhone. Я просто перечислю их здесь:

Размер цели нажатия (Tap Target Size)

Все, что пользователь должен иметь возможность нажимать – каждая кнопка, каждый ползунок, каждый элемент управления вводом – должны иметь размер не менее 44×44 pt.

Единственное исключение, когда нарушать это правило простительно – это текстовые ссылки. В тексте абзаца каждая строка текста, вероятно, будет немного короче, чем 44pt. Это означает, что (a) ваши ссылки будут иметь цель нажатия размером менее 44pt и (b) если в двух последовательных строках текста есть ссылки в одной и той же позиции, пользователям будет довольно сложно точно их нажать. Хотя этого не всегда можно избежать, стоит знать, что нужно стараться это минимизировать.

Даже Apple не всегда соблюдает строгие правила, касающиеся цели нажатия, хотя, я и советую вам их не нарушать

Темная тема

Начиная с iOS 13 появилась поддержка темной темы на уровне ОС. Приложения имеют (как правило) темный фон и светлый текст вместо светлого фона и темного текста.

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

Цвета текста инвертированы. Черный текст становится белым, темно-серый текст становится светло-серым, а средний серый текст остается в основном таким же. Если вы посмотрите на приведенные выше стилитипографики, вы заметите, что iOS фактически отбрасывает несколько дополнительных оттенков и упрощает цвета текста для своей темной темы. Если вы не знаете, нужно ли делать серый цвет средней яркости темнее или светлее, выберите вариант с более контрастным текстом по отношению к фону.
Цвет фона смещен. В отличие от текста, где более темные цвета становятся более светлыми, фоновые цвета просто смещаются в темную сторону. Если цвет фона был светлее в светлой теме, он все еще светлее в темной. Почему? Потому что свет падает с неба. Если вы осознаете это, вы поймете, что мы полагаемся на цвет фона для глубинных сигналов (в отличие от текста). И поэтому он работает совершенно по-другому.
Тематические цвета видны на темном фоне. Любые акцентные цвета, которые вы ранее использовали на светлом фоне, теперь должны аналогичным образом выделяться на темном фоне. Поскольку яркость белого составляет 100%, а черного – 0%, это часто означает, что вы будете снижать яркость ярких цветов (и, в моей более широкой теории регулировки цветов, повышать их насыщенность).

Цвета взяты из iOS System Colors

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

Ресурсы

Я создал несколько ресурсов. Ссылки и описания ниже ?

Таблица размеров экранов iPhone

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

? Скачать бесплатно

Шаблон дизайна iPhone 11

Этот файл Sketch (который вы также можете открыть в Figma) включает артборд iPhone 11 с (а) линейками для выделения общих участков экрана, (б) маской с «челкой» и закругленными углами и (в) строкой состояния, которую легкой перекрасить. Скачав его, откройте в Sketch и выберите File > Save as Template для быстрого доступа.

? Скачать бесплатно

Дополнительные ресурсы

Руководство Apple «Human Interface Guidelines» для iOS. Известно, что стандарты Apple трудно читать. Сначала вам нужно пройтись по их абстрактным принципам, и вы постоянно будете сталкиваться с их нестандартной терминологией (почему списки называются «Таблицами» (Tables ) и расположены в разделе «Представления» (Views) !? Разве это не должно быть в разделе «Элементы управления»? Нет, но по-видимому, простой текст является «элементом управления» – просто посмотрите раздел «Метки» (Labels). В любом случае, я скажу, что, как только вы перестроите свое мышление, руководство Apple обретет больше смысла. Кроме того, если вы проектируете приложение для iPhone, вам все равно придётся его прочитать. Лучше всего к этому привыкнуть.

iOS vs. Android App UI Design: Полное руководство. Хорошо, допустим, вы решите, что в какой-то момент будете делать версию своего приложения для Android. Лучше всего начать думать о некоторых конструктивных различиях уже сейчас. Кто знает, в конечном итоге возможно вы позаимствуете ряд идей из принципов дизайна Android.

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

iOS дизайн рекомендации от Ivo Mynttinen. Самое полное руководство, которое я смог найти, по созданию приложений для iPhone, написанное понятным языком (помимо этой статьи ?).

Подводя итог

Я что-то упустил? В чем-то ошибся? Напишите мне [email protected]. Я буду обновлять это руководство для повышения его точности и читабельности.

Последнее примечание ?

Вас также могут заинтересовать:

Learn UI Design, мой полноформатный онлайн-видео курс по дизайну пользовательского интерфейса
The Design Newsletter, информационная рассылка, на которую уже подписалось более 30 000 человек. Она содержит оригинальные статьи о дизайне, нацеленные на предоставление вам тактических советов по улучшению ваших UX / UI навыков.

Справочник по дизайну приложений для iPhone и iPad (iOS)

Всем кто решит заниматься дизайном iOS приложений, в первую очередь, следует ознакомиться с Apple HIG (Apple HIG на русском – в заметке)

Хотите стать дизайнером? Следите за моими заметками! Помимо этого справочника по дизайну для iOS, у меня на сайте доступен справочник по дизайну для Apple Watch (на русском). Сейчас я пишу обучающие статьи для начинающих дизайнеров. Чтобы всегда первым получать информацию о новых статьях, подписывайтесь на меня в twitter и facebook.

Если вы когда-либо сталкивались с созданием интерфейса для приложения, вы определенно знаете что это не самая легкая задача. Чтобы помочь разработчикам и дизайнерам делать более качественные и дружественные интерфейсы, компания Apple выпустила и обновляет руководство по созданию интерфейсов (iOS Human Interface Guidlines (HIG)). HIG не представлен на русском языке, и это сразу отсекает тех кто не владеет английским языком на достаточном уровне.

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

Этот справочник является упрощенной версией Human Interface Guidelines с комментариями и дополнениями. За основу был взят HIG от Apple и свод правил немецкого дизайнера Иво Минттинена . Здесь вы найдете основные рекомендации по созданию дружественных и интуитивно понятных пользователям интерфейсов для iOS устройств (iPhone, iPad).

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

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

Устройство	Retina	Портрет	Альбом
iPhone 7+6+, 6S+, 7+	Retina HD	1080 x 1920	1920 x1080
iPhone 76, 6S, 7	Retina	750 x 1334	1334 x 750
iPhone 55, 5S, 5C	Retina	640 x 1136	1136 x 640
iPhone 44, 4S	Retina	640 x 960	960 x 640
iPhone1, 2 и 3 поколение	No	320 x 480	480 x 320
iPad Air / Retina iPad1 и 2 поколение / 3rd & 4th	No	1536 x 2048	2048 x 1536
iPad Pro	No	2048 x 2732	2732 x 2048
iPad Mini2 и 3 поколение	Retina	1536 x 2048	2048 x 1536
iPadMini, 1 и 2 поколение	No	768 x 1024	1024 x 768

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

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

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

Устройство	Экспорт	PPI	Размер экрана
iPhone 7+6+, 6S+, 7+	@3x	401	5.5
iPhone 76, 6S, 7	@2x	326	4.7″
iPhone 55, 5S, 5C	@2x	326	4.0″
iPhone 44, 4S	@2x	326	3.5″
iPhone1, 2 и 3 поколение	@1x	163	3.5″
iPad Air / Retina iPad1 и 2 поколение / 3rd & 4th	@2x	264	9.7″
iPad Pro	@2x	264	12.9″
iPad Mini2 и 3 поколение	@2x	326	7.9″
iPad Mini1 поколение	@1x	163	7.9″
iPad 1 и 2 поколение	@1x	132	9.7″

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

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

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

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

Если ваша иконка имеет белый фон, то серая 1px обводка будет применена к ней чтобы сделать её более выделяющейся. Это будет сделано только для иконок которые будут находиться в разделе «Настройки» устройства (если ваше приложение представлено там).

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

В данный момент, системным шрифтом является San Francisco Font. Этот шрифт стал основным начиная с iOS 9. До этого, системным шрифтом был Helvetica Neue. В дополнение к основному системному шрифту, доступно достаточно много других стандартных шрифтов , а также есть возможность подключить любой сторонний шрифт. Использовать шрифты всегда необходимо с умом и не забывать о лицензиях (особенно если используете сторонние шрифты).

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

Стандартная Apple палитра выглядит следующим образом:

Если вам нравятся цвета которые использует Google в своих дизайнах, то советую ознакомиться с неплохой подборкой советов по дизайну в стиле Google на Behance. Во второй части есть очень подробная таблица всех используемых цветов Google. Часть 1,Часть 2.

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

Пиктограммы используемые в Tab Bar всегда имеют два состояния: Стандартное состояние (в стиле обводки, с шириной обводки в 1 или 1.5 поинта) и Активное состояние (с заливкой цветом).

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

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

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

Системная панель (Status Bar) содержит в себе основную системную информацию, такую как доступность связи, текущий оператор связи, статус подключения к Wi-Fi/3g/LTE, текущее время, статус Bluetooth, будильник, заряд батареи. Данный элемент есть на большинстве основных современных операционных систем для мобильных устройств (iOS, Android, Windows Phone).

Статус бар визуально соединен с панелью навигации (Navigation Bar) и использует его фоновую заливку (начиная с iOS7). Для соответствия визуальному стилю вашего приложения и гарантирования читаемости, «внутренности» системной панели представлены в двух стилях оформления: темном и светлом. Размер статус бара составляет 20 поинтов (т.е. 20 пикселей для iPhone младше 4 версии; 20х2=40 пикселей для @2x Retina дисплеев iPhone 4, 4S, 5, 5S, 6; 20х3=60 пикселей для @3x Retina HD дисплея iPhone 6 Plus).

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

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

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

Следует уточнить, что панель навигации все же присутствует не всегда. В некоторых приложениях она может отсутствовать на определенных экранах (Pinterest), а в других эта панель может прятаться при скролле (прокрутке) вниз и снова появляться при скролле вверх (Instagram, Facebook). Это делается для того что бы дать больше места для контента и акцентировать внимание пользователя именно на контенте.

Элементы панели навигации всегда должны располагаться в определенных местах:

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

Панель инструментов содержит набор действий для управления или взаимодействия с контентом текущего экрана. На iPhone эта панель всегда располагается у нижнего края экрана, в то время как на iPad она может находиться у верхнего края экрана.

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

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

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

Пока текст не был введен в поле поиска, там будет находится заданный по умолчанию текст (Поиск, Search).
Как только пользователь начинает вводить поисковый запрос, текст «Поиск» или «Search» исчезает, а кнопка очистки введенного текста появляется у правого края.

Иногда панель поиска содержит подсказку – короткое предложение которое описывает возможности поиска. Например: «Введите название книги, автора или часть текста для поиска».

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

Панель вкладок может содержать только определенное количество вкладок. Если вкладок больше чем может быть отображено на панели вкладок, то последняя вкладка заменяется на вкладку «Еще» которая будет вести к списку спрятанных вкладок с возможностью изменения порядка отображаемых вкладок. Например, в приложении “Музыка”:

Максимальное количество отображаемых вкладок на iPhone – пять. На iPad их количество может достигать семи.

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

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

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

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

Простая Таблица

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

Группированная Таблица

Группированная таблица позволяет объединить строки в группы. Каждая группа может иметь заголовок (здесь можно указать название группы) и описание (можно использовать для подсказки, описания и т.п.). Группированная таблица должна содержать как минимум одну группу и каждая группа должно состоять как минимум из одной строки.

Для обеих видов таблицы доступно несколько стилей:

Стандартный

Таблица содержит изображение (или не содержит) расположенное слева и заголовок строки.

С подзаголовком

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

С значением

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

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

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

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

Данный тип используется для выполнения определенного действия со списка возможных действий или для подтверждения/отказа совершенного пользователем действия

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

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

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

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

Вы можете добавить какое-либо текстовое сообщение если необходимо. Также есть возможность добавить поле ввода (до двух) одно из которых может быть шифрованным (для пароля или PIN кода, например).

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

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

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

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

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

Обычно модальные окна предоставляют:

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

Доступно три разных стиля модального окна:

Полноэкранный: занимает весь экран.
Страничное модальное окно (Page Sheet): в портретной ориентации, модальное окно покрывает частично контент который лежит под ним и оставляет видимой небольшую часть контента (при этом используя полупрозрачную черную заливку поверх нижележащего контента). В альбомной ориентации, данный стиль модального окна выглядит и функционирует как полноэкранное модальное окно.
Форма (Form Sheet): в портретной ориентации, модальное окно появляется в центре экрана, оставляя видимым окружающий контент с применением черной полупрозрачной заливки на него. Расположение данного стиля окна изменяется автоматически когда появляется клавиатура. В альбомной ориентации, данный стиль окна функционирует как полноэкранное модальное окно.

На изображении выше показаны 2 вида модальных окон: полноэкранное модальное окно и страничное модальное окно.

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

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

Рекомендации по созданию модальных окон:

Создавайте модальные окна простыми, короткими и понятными.
Всегда предоставляйте понятный и безопасный способ покинуть модальное окно.
Если решение задачи требует иерархию модальных окон, убедитесь, что пользователь понимает, что произойдет после нажатия кнопки “Готово” на любом из уровней иерархии.
Не показывайте модальные окна поверх всплывающих окон (Popovers).
Следуйте общему стилю приложения при создании модальных окон.
Старайтесь показывать заголовок модального окна, чтобы пользователь понимал где он находиться и что сейчас делает.
Используйте подходящую анимацию для появления и скрытия модального окна.
Если вы используете различные виды анимации и переходов для модальных окон в приложении, делайте это таким образом, чтобы это имело смысл для пользователя.

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

Кнопки

Наиболее распространенный вид контрола. В iOS7 вид кнопки подвергся значительным изменениям по сравнению с предыдущими версиями iOS и собственно теперь кнопки выглядят не совсем как кнопки, а скорее как просто привлекающий внимание выделенный текст.

Кнопки имеют огромное количество настроек внешнего вида которые позволяют изменять и настраивать вам практически все: стиль текста, тени, иконки и т.п.

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

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

Picker (Пикер, контрол выбора)

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

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

Segment control

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

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

Slider (Слайдер, ползунок)

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

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

Stepper (Степпер)

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

Визуально, степпер очень хорошо настраиваем:

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

Switcher (Переключатель, включатель.выключатель)

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

Keyboard (Клавиатура)

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

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

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

Peek:

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

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

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

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

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

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

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

Старайтесь не использовать элементы визуально похожие на кнопки внутри peek. Если пользователь уберет палец с экрана, чтобы нажать кнопку, peek исчезнет (закроется).

Предоставляйте возможность быстрых действий для peek. Внутри peek, пользователь может свайпнуть вверх (провести не отрывая пальца снизу вверх), чтобы увидеть доступные действия, относящиеся к этому элементу. Например, быстрые действия внутри приложения Почта включают в себя “Ответить всем”, “Переслать” и “Переместить сообщение”. Быстрые действия для peek не обязательны. Добавляйте их, только если в этом есть необходимость, и они будут полезны пользователю.

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

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

Быстрые действия должны предоставлять доступ только к основным и наиболее полезным функциям приложения. Например, карты позволяют пользователю искать по близлежащим местам или построить путь домой, не открывая предварительно приложение карт. Каждое приложение должно иметь как минимум одно быстрое действие. Максимум можно добавить 4 быстрых действия.

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

Не используйте быстрые действия как способ уведомления пользователя. Пользователи iOS ожидают получать уведомления из приложений другими способами (более детально читайте на сайте Apple в разделе Notifications).

Используйте простой и понятный заголовок для действия, а также подходящую по смыслу иконку. Заголовок должен четко указывать на результат, который получит пользователь по нажатию на быстрое действие. Например: “Проложить Путь Домой”, “Создать Новый Контакт”, “Новое Сообщение”. Вы можете использовать дополнительный подзаголовок (не обязательно). Не добавляйте название вашего приложения либо другую бесполезную информацию в заголовок и подзаголовок. Также стоит помнить, что люди могут использовать ваше приложения на различных языках, поэтому стоит заблаговременно позаботиться о локализации.

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

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

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

Основные

iOS Human Interface Guidelines Руководство по созданию пользовательских интерфейсов от Apple

UIKit User Interface Catalog Элементы iOS интерфейса

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

Прототипирование

Principle В данный момент, наилучший инструмент (на мой взгляд) для создания анимированных прототипов. Обладает очень широкими функциональными возможностями и очень низким входным барьером. Единственный минус – доступен только на Mac

Origami Фреймвёрк для Quartz composer от Facebook (Отличный, но может быть сложным для начинающих + Доступен только на Mac)

Pixate Прекрасный мощный инструмент для создания анимированных прототипов. Я перешел на него с Origami и не пожалел. Origami более функционален, но и прототипы делаются гораздо дольше. Я пользовался Pixate вплоть до выхода Principle. Pixate был недавно приобретен компанией Google и стал бесплатным. Это всё еще прекрасный инструмент у которого хорошее будущее

InVision Инструмент в котором я делал свои первые прототипы, очень легкий в использовании, но достаточно ограниченый

Marvel Инструмент на любителя. Почему-то у меня не пошел

UXPin Достаточно хороший и удобный инструмент

Исходники для Photoshop и Sketch

iOS 9 GUI для iPhone (PSD) Легендарный набор исходников для Photoshop от ребят из студии TeehanLax, которая теперь является частью Facebook

iOS 9 GUI для iPhone (Sketch) Не менее легендарный набор для Sketch от TeehanLax (теперь Facebook)

iOS 9 GUI для iPhone (Sketch) Набор Sketch исходников для iPhone от дизайнера Meng To

iOS 9 GUI для iPad (Sketch) Набор Sketch исходников для iPad от дизайнера Meng To

Галереи паттернов (Скриншотов экранов из приложений)

Моя галерея на Pinterest Большая и качественная галерея c разбивкой мобильных интерфейсов (и не только) по категориям. Постоянно обновляется

Mobile Patterns Крупная галерея паттернов. Периодически обновляется

Pttrns Хорошая галерея паттернов. Обновляется достаточно часто.

Полезные вещи

UIStencils Ребята продают прекрасные инструменты для UI дизайнеров (Mobile, Web). От скетчбуков до металических трафаретов. Очень советую

DotGrid Продают хорошие альбомы и скетчбуки

Rotring Если механический карандаш, то только Rotring. Металические, очень хорошего качества и с самым оптимальным весом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[impact_text include_button=»yes» button_style=»standard» title=»Получить оценку» href=»#contact_form_pop» color=»accent» target=»_self» position=»cta_align_right» alt_background=»none» width=»1/1″ el_position=»first last»]

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

[/impact_text]

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

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

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

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

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

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

Руководство по созданию интерфейсов 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 предлагает прекрасную коллекцию готовых для использования элементов, которые очень облегчают жизнь разработчикам и позволяют достаточно быстро создавать интерфейсы. Многие из элементов могут настраиваться и изменять внешний вид. Если стандартные элементы не покрывают потребностей разработчика, то можно написать собственные элементы либо дополнить функциональностью уже существующие.

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

[impact_text include_button=»yes» button_style=»standard» title=»Отправить заявку» href=»#contact_form_pop» color=»accent» target=»_self» position=»cta_align_right» alt_background=»none» width=»1/1″ el_position=»first last»]
Заказать разработку дизайна вашего мобильного приложения
[/impact_text]

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

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

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

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

[impact_text include_button=»yes» button_style=»standard» title=»Отправить заявку» href=»#contact_form_pop» color=»accent» target=»_self» position=»cta_align_right» alt_background=»none» width=»1/1″ el_position=»first last»]
Заказать создание дизайна вашего мобильного приложения
[/impact_text]

32 отличия дизайна мобильного приложения под iOS и Android | by Futura by red_mad_robot

8. Способы верхнеуровневой навигации

Начнем с самого верха. iOS рекомендует только один способ верхнеуровневой навигации — через Tab bar. У Android-а в ответ есть три способа: Navigation Drawer, Bottom Navigation Bar и Tabs.

Если количество верхнеуровневых страниц больше 5, используем Navigation Drawer. Если меньше — Bottom Navigation Bar. Tabs нечасто применяют для данной навигации, но способ нам доступен. Однако Material рекомендует не совмещать Tabs и Bottom Navigation Bar, так как взаимодействие с данными компонентами влияет на контент страницы и пользователь может запутаться.

9. Отличия в поведении Tab Bar-а и Bottom Navigation Bar-а

Это отличие предлагает Material.

Если вы в iOS перейдете от материнской страницы к дочерней, потом через Tab Bar переключитесь на другую материнскую страницу, то по возвращении на первую материнскую страницу вы все также будете находиться на дочерней. В Android все строже — при переключении через Bottom Navigation Bar вы всегда переключаетесь между материнскими страницами. Если до этого вы были на дочерней, она сбросится.

Наши разработчики Android уверены, что такое поведение андроида неверное. В случае переключения по Bottom Navigation стоит сохранять открытые дочерние страницы, как на iOS.

10. Особое поведение Tabs у Android

Tabs у Android в отличие от Segmented Controls iOS имеют такое свойство: по табам можно перемещаться с помощью свайпа влево и вправо.

Это потому, что страницы табов находятся на одной высоте (elevation).

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

В целом, эти два компонента не заменяют друг друга полностью. Segmented control — это control, который управляет контентом страницы. А Tabs — это инструмент навигации. Поэтому стоит советоваться с разработчиками перед тем, как при адаптации рассматривать их как равноценные компоненты. Иногда корректнее заменять андроидовские Tabs на Page Control. Все зависит от контекста.

11. Отличия в появлении дочернего экрана

В iOS появление дочернего экрана (не считая модалок) происходит только одним образом: дочерняя страница появляется справа поверх материнской с эффектом slide in. Возвращение на материнский экран происходит с эффектом slide out.

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

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

12. Особый паттерн вызова Navigation Drawer

При проектировании приложения с Navigation Drawer важно помнить, что этот компонент «забирает» себе жест edge swipe слева вправо. Поэтому не стоит добавлять этому жесту другую логику.

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

13. Поведение контента при скролле

По HIG контент в iOS при скролле ведет себя так: Navigation Bar уменьшается в ширине, исчезает Tool Bar. Но в целом iOS разработчики могут настроить любое поведение контента и bar-ов при скроле.

Material предлагает больше вариантов поведения при скролле. Например, Bottom Navigation Bar, Search и Bottom App Bar при скроле могут исчезать.

Top App Bar может либо исчезать, либо подниматься выше основного контента.

14. Разное поведение поиска

Интересно, что HIG относит поиск к bar-ам и называет его Search Bar. В Material мы находим поиск в разделе Navigation, не в Components. То есть для Material поиск — это еще один способ навигации. Как в iOS, так и в Android поиск может статично присутствовать на экране и, как правило, прибит к Navigation Bar/Top App Bar.

На обеих платформах поиск может быть в виде иконки, только в iOS иконка раскрывается в самостоятельный компонент Search Bar, а в Android поиск раскрывается внутри Top App Bar.

Особенностью поиска iOS является то, что его можно «спрятать» под Navigation Bar и вызывать по жесту Swipe down. Такой же жест типичен и для рефреша (pull to refresh), поэтому не стоит вызывать поиск и рефреш по этому одному действию.

15. Каких компонентов нет в iOS

В iOS нет многих нативных компонентов Android. Пробежимся по ним.

a. Navigation Drawer

iOS в принципе не признает бургер-меню. Как говорили раньше, в iOS верхнеуровневая навигация только по Tab Bar

b. Backdrop

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

Сам Material любит этот компонент. Посмотрите, например, на победителей Material Design Award 2019.

c. Banner

Banner не найти среди нативных компонентов iOS. С помощью Banner-а мы сообщаем пользователю важную информацию и предлагаем связанные с ней действия.

d. Snackbar

Как и Banner, Snackbar не является нативным для iOS. Snackbar применяют, чтобы донести до пользователя короткое сообщение о результате его действия.

e. Chips

Chips также отсутствует среди нативных компонентов iOS. Они используются для ввода информации, описания и действия.

f. Bottom App Bar

Тут можно поспорить, что у iOS есть похожий компонент как Tool Bar. Но они разные вот почему: Toolbar — это bar для контекстных действий. Например, при редактировании списка сообщений в Messages появляется Tool Bar с действиями Read All и Delete. Bottom App Bar в свою очередь — это, по сути, перемещение Top App Bar вниз с теми же действиями верхнего уровня: открытие Navigation Drawer, вызов поиска и так далее. Еще в Bottom App Bar мы размещаем FAB.

g. FAB

Да, FAB-а тоже нет в iOS. FAB — это кнопка для совершения основного действия на экране. Например, в почтовом приложении FAB будет создавать новое письмо.

Если вы используете в Android FAB для основного действия на экране, то в iOS это основное действие стоит разместить наверху в Navigation Bar справа (см. пример: iMessages).

h. Bottom Navigation Drawer

Разновидность Navigation Drawer-а, типичная только для Android. Вызывается нажатием кнопки бургер-меню в Bottom App Bar.

i. Side Sheet

Хоть Material и разрешает использовать этот компонент в мобильном приложении, я бы рекомендовал заменить его на более привычный Bottom Sheet.

j. Expanding Bottom Sheet

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

k. Standard Bottom Sheet

Standard Bottom Sheet является разновидностью Bottom Sheet, и его нет среди компонентов iOS.

16. Каких компонентов нет в Android

Теперь рассмотрим, каких компонентов не найти в библиотеке Android.

a. Page Controls

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

b. Toolbar

Toolbar привычен только для iOS.

c. Steppers

Steppers — стандартный control iOS, не описан в Material. Используем его для ввода небольших значений. Пример, количества копий при печати.

d. Popover

Popover — это всплывающая панель, которая в основном используется на iPad.

В iOS есть одно стандартное применение Popover — настройка текста в ридерах или браузерах.

17. Разные Status Bar-ы

На обеих платформах Status Bar выполняет одинаковую задачу: сообщает о времени, уровне заряда, качестве мобильной связи и Wi-Fi. Они отличаются расположением этих индикаторов внутри Status Bar-а и в целом взуальным решением.

Дизайн мобильных приложений: разработка UX/UI дизайна под Android, iOS приложения

Студия KitApp предоставляет услуги по созданию дизайна мобильных приложений на Android и iOS. Мы работаем с заказами из Украины, стран СНГ и Европы. Большой практический опыт позволяет нам находить индивидуальные решения для каждого проекта.

Платформы iOS и Android имеют свои особенности, которые обязательно следует учитывать при выполнении дизайнерских работ. Более того, их требования постоянно меняются. Наши специалисты обладают глубокими знаниями в сфере разработки эргономичного и инновационного дизайна интерфейса и для iPhone, и устройств на операционной системе Андроид. Работая над проектом, мы придерживаемся паттернов и используем стиль Material Design.

Проектирование, тестирование, дизайн

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

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

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

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

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

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

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

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

Дизайн мобильных приложений | Закажите дизайн для iOS & Android

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

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

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

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

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

Дизайн мобильных приложений и игр для iOS и Android

Отвечаем на часто задаваемые вопросы:

В: На какую целевую аудиторию ориентирована ваша услуга «дизайн мобильных приложений»?

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

В: Какие основные этапы включает в себя разработка дизайна мобильного приложения?

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

В: Какие материалы необходимо предоставить для разработки дизайна приложения?

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

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

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

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

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

Руководство по дизайну приложений для iOS: принципы и вдохновляющие примеры

Создаете прототип приложения для iOS? Вдохновляйтесь этими главными советами и 20 потрясающими примерами дизайна приложений для iOS!

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

Создание интерактивных прототипов для дизайна вашего приложения для iOS

Скачать бесплатно

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

11 главных советов по дизайну приложений iOS

1. Тщательно выбирайте цветовую палитру

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

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

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

2. Используйте цвет для демонстрации взаимодействия

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

3. Адаптируйте свою цветовую схему к светлому и темному образу.

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

4. По возможности используйте пользовательскую типографику iOS.

В отношении типографики нет жестких правил, хотя HIG рекомендует использовать два пользовательских шрифта iOS: San Francisco (без засечек) и New York (с засечками) . Apple разработала эти гарнитуры с учетом как масштабируемости, так и адаптируемости.

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

5. Когда использовать Сан-Франциско и Нью-Йорк

Для текста абзаца и функционального текста (например, для навигации или инструкций) мы рекомендуем использовать гарнитуры San Francisco или New York, поскольку большинство пользователей приложений iOS привыкли читать этот шрифт.

В дополнение к этому существует до шести различных шрифтов для гарнитуры San Francisco, поэтому вам не нужно беспокоиться о различении текстовых иерархий для вашего пользователя. Между тем, шрифты Apple New York с засечками служат дополнительным шрифтом для Сан-Франциско и отлично подходят для заголовков.

6. Не занимайте место логотипом

Apple’s HIG рекомендует укрепить ваш бренд, но вам нужно убедиться, что ваш логотип не занимает слишком много места на экране.Это может мешать как контенту, так и навигации в ущерб пользовательскому опыту.

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

7. Не создавайте собственные настройки внешнего вида для светлого и темного цветов

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

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

8. Обеспечьте адекватную контрастность в темноте.

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

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

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

9. Соблюдайте нормы жестов iOS

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

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

10. Выберите элементы, использующие тактильные ощущения iOS

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

11.Создание навигации внутри приложения

Как вы, наверное, знаете, приложения iOS, в отличие от приложений Android и других ОС, не имеют доступа к встроенной панели навигации. Вместо этого сами приложения должны обеспечивать базовую навигацию пользователя в приложении. HIG рекомендует всегда размещать эту панель навигации в верхней части дизайна приложения iOS и включать кнопку «Назад» (← или <) вместе с заголовком предыдущего экрана.

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

20 потрясающих примеров дизайна приложений для iOS

1. Дизайн приложения iOS для доставки посылок

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

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

2. Поиск застройщиков

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

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

3. Приложение для социальных сетей для iOS

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

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

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

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

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

5. Концепция приложения для iOS в социальных сетях

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

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

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

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

Эта «сложная» концепция приложения для выставления счетов отлично справляется с задачей сделать навигацию и пользовательский интерфейс максимально простыми. Четкий пользовательский интерфейс и простая навигация превращают вашу дебиторскую и кредиторскую задолженность в эпизод из «Тома и Джерри».

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

8. Городские путеводители Дизайн приложения для iOS

Городские путеводители — это интересный дизайн приложения для iOS, вдохновленный бумажным приложением Facebook 2014 года. Он использует элементы карты для отображения знаковых изображений со всего мира и текст отрывка, чтобы вкратце рассказать о месте. Что нам нравится, так это простая концепция, лежащая в основе дизайна этого приложения для iOS: мощные изображения с простой навигацией.

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

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

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

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

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

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

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

Во всем приложении дизайнер использует обычный шрифт San Francisco sans serif для функциональных, навигационных функций, но затем переключается на брутальный жирный шрифт, который создает такое же впечатление, как и на традиционных печатных билетах. Стратегическое использование жирных цветов в этом приложении для iOS привлекает внимание и привлекает внимание пользователя к представляемому контенту.Эти цвета, которые используются в дизайне этого приложения для iOS, также можно использовать для усиления цветов в палитре брендинга.

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

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

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

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

Интересно, что это также показывает, что мы не только ограничены использованием шрифтов Сан-Франциско и Нью-Йорка — это приложение для iOS также включает стиль Roboto из Google Fonts.

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

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

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

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

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

16. Детское приложение для чтения

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

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

17. Концепция приложения «Школа барабанщиков»

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

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

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

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

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

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

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

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

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

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

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

Заключительные мысли — дизайн приложения для iOS

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

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

Полное руководство по дизайну мобильных приложений — Smashing Magazine

Об авторе

Ник Бабич — разработчик, технический энтузиаст и любитель UX. Последние 10 лет он проработал в индустрии программного обеспечения, специализируясь на … Больше о Ник ↬

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

( Это спонсируемая статья ). Как никогда раньше, люди используют свои телефоны в решающие моменты. Средний пользователь из США проводит 5 часов в день на мобильном телефоне. Подавляющее большинство этого времени проводится в приложениях и на веб-сайтах.

Разница между хорошим приложением и плохим приложением обычно заключается в качестве его взаимодействия с пользователем (UX). Хороший UX — это то, что отличает успешные приложения от неудачных. Сегодня мобильные пользователи ожидают от приложения многого: быстрой загрузки, простоты использования и удовольствия от взаимодействия.Если вы хотите, чтобы ваше приложение было успешным, вы должны рассматривать UX как не второстепенный аспект дизайна, а как важный компонент стратегии продукта.

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

Минимизировать когнитивную нагрузку

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

Избавление от беспорядка

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

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

Четкая панель вкладок (справа) намного лучше, чем загроможденная (слева). (Изображение: Apple)

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

Интерфейс открывает больше возможностей после взаимодействия. (Источник изображения: Ramotion)

Задачи разгрузки

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

Разбивайте задачи на небольшие фрагменты

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

Разделение на части делает форму менее загруженной, особенно когда вы запрашиваете у пользователя много информации. (Источник изображения: Мурат Мутлу)

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

Поиск фильма и покупка билетов в кино. (Источник изображения: Антон Скворцов)

Используйте знакомые экраны

Знакомые экраны — это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска» стали де-факто стандартами для мобильных приложений. Они не требуют дополнительных объяснений, потому что пользователи уже знакомы с ними. Это позволяет пользователям использовать предыдущий опыт для взаимодействия с приложением без необходимости обучения.

Экран профиля пользователя в приложении Quora

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

Минимизировать ввод данных пользователем

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

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

Практическое правило дизайна формы — чем короче, тем лучше.Объедините несколько полей в одно поле, удобное для заполнения. (Источник изображения: Люк В.)

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

(Изображение предоставлено Джошем Морони)

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

Встроенная проверка (Источник изображения: Baymard)

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

Подберите клавиатуру для ввода необходимого текста. (Изображение: ThinkWithGoogle)

Прогнозирование потребностей пользователей

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

Непонятно, где пользователь может найти штрих-код. Краткий текст справки рядом с полем ввода был бы очень полезен. (Источник изображения: Hotjar)

Используйте визуальный вес для передачи важности

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

Крупные предметы привлекают внимание и кажутся важнее мелких.Кнопка «Запросить Lyft» привлечет внимание пользователя.

Избегайте жаргона

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

Неизвестные термины или фразы увеличивают когнитивную нагрузку на пользователя. (Источник изображения: ThinkWithGoogle)

Сделайте дизайн согласованным

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

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

Вот несколько практических рекомендаций о том, как сделать дизайн согласованным:

Соблюдайте правила платформы. В каждой мобильной ОС есть стандартные рекомендации по дизайну интерфейса: Apple Human Interface Guidelines и Google Material Design Guidelines. При разработке для собственных платформ следуйте руководящим принципам разработки ОС для обеспечения максимального качества. Причина, по которой следование руководящим принципам важно, проста: пользователи знакомятся с шаблонами взаимодействия каждой ОС, и все, что противоречит руководящим принципам, вызовет трения.
Не имитируйте элементы пользовательского интерфейса других платформ. При создании приложения для Android или iOS не переносите элементы пользовательского интерфейса с других платформ. Иконки, функциональные элементы (поля ввода, флажки, переключатели) и шрифты должны иметь естественный вид. По возможности используйте собственные компоненты, чтобы люди доверяли вашему приложению.
Согласование мобильного приложения с веб-сайтом. Это пример внешней согласованности. Если у вас есть веб-сервис и мобильное приложение, убедитесь, что оба они имеют схожие характеристики.Это позволит пользователям без проблем переходить между мобильным приложением и мобильным Интернетом. Несогласованность в дизайне (например, другая схема навигации или другая цветовая схема) может вызвать путаницу.

Предоставьте пользователю контроль

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

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

Кнопка «Назад» должна работать правильно

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

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

Значимые сообщения об ошибках

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

В качестве примера возьмем экран состояния ошибки из Spotify. Это не помогает пользователям понять контекст и не помогает им найти ответ на вопрос: «Что я могу с этим поделать?» На экране ошибки

Spotify просто указано «Произошла ошибка» и не дается никаких конструктивных рекомендаций по устранению проблемы.

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

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

Для получения дополнительной информации об обработке ошибок рекомендуется прочитать «Как проектировать состояния ошибок для мобильных приложений».

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

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

Помните о дальтонизме

4,5% мирового населения страдает дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0,6% страдают дальтонизмом. слепые (1 из 188 человек). Легко забыть, что мы проектируем для этой группы пользователей, потому что большинство дизайнеров не испытывают таких проблем.

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

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

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

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

Сделайте анимацию необязательной

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

Сделайте навигацию простой

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

Используйте стандартные компоненты навигации

Лучше использовать стандартные шаблоны навигации, такие как панель вкладок (для iOS) и панель навигации (для Android).Большинство пользователей знакомы с обоими шаблонами навигации и интуитивно знают, как обойти ваше приложение.

Боковой ящик (Android). (Источник изображения: Material Design) Панель вкладок (iOS). (Источник изображения: Ramotion)

Для получения дополнительной информации о шаблонах навигации прочтите статью «Основные шаблоны для мобильной навигации: плюсы и минусы».

Назначьте приоритет опциям навигации

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

Не смешивайте шаблоны навигации

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

Сделайте навигацию видимой

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

Сообщите текущее местоположение

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

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

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

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

Функциональная анимация может эффективно направлять внимание пользователя и упрощать понимание сложных переходов. (Источник изображения: Jae-seong, Jeong)

Будьте осторожны с использованием жестов в пользовательском интерфейсе

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

Как отмечает Томас Джус в своей статье «Помимо кнопки: использование интерфейса, управляемого жестами», самым большим недостатком использования жестов в пользовательском интерфейсе является кривая обучения. Каждый раз, когда видимый элемент управления заменяется жестом, кривая обучения приложения возрастает. Это происходит потому, что жесты хуже обнаруживаются — они всегда скрыты, и люди должны иметь возможность идентифицировать эти параметры, чтобы использовать их.Вот почему важно использовать только широко распространенные жесты (те, которые пользователи ожидают от вашего приложения).

Когда дело доходит до использования жестов в пользовательском интерфейсе, следуйте нескольким простым правилам:

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

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

Сосредоточьтесь на первом опыте

Первый опыт — это важная составляющая мобильных приложений. У вас есть только один шанс получить первое впечатление.А если вы потерпите неудачу, велика вероятность, что пользователи больше не запустят ваше приложение. (Исследование Localytics показывает, что 24% пользователей никогда не возвращаются в приложение после первого использования.)

Избегайте стенок входа

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

Pinterest просит пользователей создать новую учетную запись или войти в систему при первой загрузке.

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

Дизайн — хороший опыт адаптации

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

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

Duolingo есть руководство пользователя, состоящее из быстрого теста.

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

Пустое состояние в Expensify успокаивает пользователей, рассказывая им, с чего начать.

Рассмотрите возможность чтения «Роль пустых состояний в адаптации пользователей» для получения дополнительной информации об адаптации.

Не спрашивайте заранее информацию о настройке

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

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

Избегайте запроса разрешений с самого начала

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

Шаблоны запросов на разрешение, предложенные Google. (Изображение: Material Design)

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

Приложения должны запрашивать разрешения в контексте и сообщать значение, которое предоставит доступ. Предлагать пользователям принимать разрешения только тогда, когда они пытаются использовать эту функцию. (Изображение: Cluster)

Советы :

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

Сделайте ваше приложение быстрым и отзывчивым

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

Чем быстрее ваше приложение, тем лучше будет впечатление от него.(Источник изображения: Google)

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

Сосредоточьтесь на загрузке содержимого в видимой области экрана

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

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

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

Рекомендуем прочитать «Рекомендации по анимированным индикаторам выполнения» для получения дополнительной информации об индикаторах загрузки.

Предложите визуальное отвлечение

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

Внимание к тонкому движению может приятно удивить пользователя. (Изображение предоставлено UI8)

Совет : помните о долговечности. Даже хорошая анимация может раздражать, когда ею злоупотребляют. Создавая анимацию, спросите себя: «Будет ли анимация раздражать при сотом использовании или она универсально ясна и ненавязчива?»

Скелетные экраны

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

Скелет экрана сразу показывает экран. Заполнители заменяют любые элементы в макете, содержимое которых еще не доступно. (Изображение: Slack)

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

Скелет экрана заполняет пользовательский интерфейс по мере постепенной загрузки содержимого. (Источник изображения: Tandem Seven)

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

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

Сделайте текст читаемым и разборчивым

Когда мы думаем о содержании, в большинстве случаев мы имеем в виду типографику. Как утверждает Оливер Райхенштейн в своем эссе «Веб-дизайн на 95% состоит из типографики»:

«Оптимизация типографики — это улучшение читабельности, доступности, удобства использования (!) И общего графического баланса».

Ключ к мобильной типографике — читаемость и разборчивость.Если пользователи не могут прочитать ваш контент, вообще нет смысла предлагать контент.

Во-первых, несколько практических рекомендаций по удобочитаемости:

Размер шрифта Как правило, все, что меньше 16 пикселей (или 11 точек), сложно читать на любом экране.
Семейство шрифтов Большинство пользователей предпочитают четкий, легко читаемый шрифт. Безопасный вариант — это шрифт системы по умолчанию (Apple iOS использует шрифт San Francisco; Google Android использует Roboto).
Контрастность Светлый текст (например, светло-серый) может выглядеть эстетично, но пользователям будет сложно его читать, особенно на светлом фоне. Убедитесь, что между шрифтом и фоном достаточно контраста для удобства чтения. Рекомендации WC3 по доступности веб-контента содержат рекомендации по контрастности изображений и текста.

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

А теперь несколько рекомендаций по удобочитаемости:

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

Ограничьте длину текстовых строк. Хорошее практическое правило — использовать от 30 до 40 символов в строке для мобильных устройств.

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

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

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

Изображения HD-качества и правильное соотношение сторон

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

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

Последняя проблема, с которой сталкиваются многие мобильные дизайнеры, — это оптимизация пользовательского интерфейса для iPhone X. Для проектирования iPhone X требуется другой размер монтажной области, чем для любого другого iPhone (вам понадобятся изображения с разрешением 375 x 812 точек при 3-кратном увеличении).

(Изображение предоставлено Apple)

Прочтите «Разработка приложений для iPhone X: что должен знать каждый UX-дизайнер о последнем устройстве Apple» для получения дополнительной информации о разработке для iPhone X.

Видеоконтент оптимизирован для портретного режима

Видео быстро становится стандартным методом потребления контента для многих пользователей. По данным YouTube, потребление мобильного видео ежегодно растет на 100%. К 2020 году более 75% мирового трафика мобильных данных будет составлять видеоконтент. Это означает, что очень важно оптимизировать видеоконтент для портретного режима.

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

Facebook Live позволяет смотреть видео на временной шкале Facebook. (Источник изображения: Giphy)

Design For Touch

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

Дизайн для пальцев, а не курсоров

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

Маленькая цель с касанием увеличивает шанс ошибочного выбора. (Источник изображения: Apple)

При разработке сенсорной мишени вы можете положиться на исследование MIT Touch Lab (PDF), чтобы выбрать правильный размер для интерактивных элементов. Это исследование показало, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончиков пальцев — от 8 до 10 мм, что делает 10 на 10 мм оптимальным минимальным размером мишени для прикосновения.

10 на 10 мм — хороший минимальный размер сенсорной мишени. (Источник изображения: UXmag)

Важен не только размер цели, но и наличие правильного расстояния между целями.Если несколько целей касания находятся рядом друг с другом (например, кнопки «Согласен» и «Не согласен»), убедитесь, что между ними достаточно места.

Пример пробела между кнопками. (Источник изображения: Material Design)

Учитывайте зону большого пальца

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

Зоны большого пальца, согласно исследованию Скотта Херффа. (Источник изображения: Smashing Magazine)

Чем больше дисплей, тем труднее доступен доступ к большей части экрана.

Зоны большого пальца для правши, согласно исследованию Скотта Херффа.

При разработке дизайна для мобильных устройств учитывайте все зоны:

Зеленая зона — лучшее место для опций навигации или частых интерактивных действий (например, кнопок с призывом к действию).
Красная зона — лучшее место для возможных вариантов опасности (таких как «Удалить» или «Стереть»). У пользователей меньше шансов случайно активировать эту опцию.

Обратная связь о взаимодействии

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

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

Гуманизируйте цифровой опыт

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

Персонализированный опыт

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

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

Мобильное приложение

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

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

Восхитительная анимация

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

Использование восхитительных деталей — это возможность создать эмоциональную связь с вашими пользователями.(Изображение предоставлено Сергеем Ханущаком)

Оптимизация push-уведомлений

Раздражающие уведомления — причина номер 1, по которой люди удаляют мобильные приложения (по мнению 71% респондентов).

(Источник изображения: Appiterate Survey)

Не отправляйте push-уведомления только потому, что можете. Каждое уведомление должно быть ценным и своевременным.

Push The Value

Когда пользователь начинает использовать ваше приложение, он не возражает против получения уведомлений, если получаемое им значение значительно превышает значение прерывания.Почти 50% пользователей благодарны за интересующие их уведомления. Очень важно персонализировать контент, чтобы вдохновлять и восхищать. Netflix — отличный пример компании, которая «повышает ценность». Он тщательно использует данные просмотра для представления рекомендаций, которые кажутся индивидуальными.

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

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

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

Время ваших уведомлений

Важно не только то, что вы говорите, но и то, когда вы это говорите. Не отправляйте push-уведомления в непонятные часы (например, посреди ночи). Лучшее время для push-уведомлений — часы пик использования мобильной связи: с 18:00 до 22:00.

(Источник изображения: comScore)

Рассмотрите другие каналы для доставки вашего сообщения

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

Выберите подходящий тип уведомления в зависимости от срочности и содержания. (Изображение: Appboy)

Оптимизация для мобильных устройств

Дизайн для прерывания

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

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

Воспользуйтесь возможностями устройства

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

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

(Изображение предоставлено Business Insider)

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

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

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

Приложение Chase Mobile позволяет входить в систему в одно касание.

Совет : практические рекомендации по использованию Apple Face ID можно найти в нашей статье «Разработка приложений для iPhone X: что должен знать каждый дизайнер UX о новейшем устройстве Apple.

Используйте Face ID при входе на iPhone X (вместо пароля). (Источник изображения: Tesco)

Стремитесь создать многоканальный опыт

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

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

Адаптируйте мобильный дизайн к развивающимся рынкам

По данным Google, в ближайшие пару лет ожидается, что в Интернет выйдет миллиард новых пользователей. И подавляющее большинство из них будет с развивающихся рынков (или из так называемых стран, ориентированных на мобильные устройства, таких как Индия, Индонезия, Бразилия и Нигерия).Они получат доступ через мобильный телефон. У этих пользователей будет совсем другой опыт и ожидания, чем у тех, кто находится в США и Европе.

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

Плохое подключение к Интернету

В США и Европе пользователи привыкли к повсеместному подключению. Но это определенно не так во всем мире. Продукты на развивающихся рынках должны работать при медленном или прерывистом подключении.В зависимости от местоположения человека сеть может переключаться с Wi-Fi на 3G на 2G и вообще не подключаться, и ваш продукт должен это учитывать.

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

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

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

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

Google News & Weather — еще один отличный пример приложения, которое было разработано с учетом плохих подключений. В приложении есть функция под названием «Облегченный режим» для людей, использующих соединения с низкой пропускной способностью. Когда этот режим активирован, он сокращает контент до необходимого, чтобы приложение загружалось быстрее. Согласно Google, этот режим использует менее одной трети обычных данных и активируется автоматически, когда приложение обнаруживает медленную сеть.

Limited Data

Примерно в 95% развивающихся рынков люди почти полностью полагаются на дорогие предоплаченные мобильные данные.Люди покупают фиксированный объем данных, и многие могут позволить себе не более 250 МБ данных в месяц.

Эти пользователи ценят прозрачность, когда дело доходит до понимания их потребления данных. Они также ценят возможность контролировать, загружает ли продукт через Wi-Fi или использует данные.

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

YouTube Go позволяет предварительно просматривать видео и выбирать размер файлов перед их сохранением в автономном режиме для последующего просмотра.

Ограниченные возможности устройства

Смартфоны в странах, ориентированных на мобильную связь, имеют возможности, резко отличающиеся от возможностей Pixel и iPhone, популярных в США. Большинство устройств на развивающихся рынках стоят ниже 100 долларов и могут иметь ограниченную память и вычислительную мощность. Убедитесь, что разрабатываемый вами продукт совместим со старыми недорогими устройствами и программным обеспечением.

Местная эстетика

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

Особенности региона

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

Тестирование и обратная связь

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

Петля обратной связи

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

Дизайн — это бесконечный процесс

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

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

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

Удивительно, сколько мобильных приложений не проходят проверку AA.Не будь одним из них! Важно проверить доступность цветового контраста. Используйте средство проверки цветового контраста WebAIM для проверки цветовых сочетаний.

WebAIM Color Contrast Checker

UI Kits для Adobe XD

Хорошо продуманный пользовательский интерфейс сделает ваше приложение ярким. Здорово, когда вы можете разрабатывать пользовательский интерфейс не с нуля, а на прочной основе, например, UI-ките. В Adobe XD есть пять наборов пользовательского интерфейса, которые вы можете загрузить совершенно бесплатно. Эти наборы повысят ваш творческий потенциал и помогут создавать визуально интересные дизайны пользовательского интерфейса.

Navigo Transportation UI Kit (Изображение предоставлено Adobe)

Заключение

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe.Adobe XD создан для быстрого и гибкого процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Создавайте, создавайте прототипы и делитесь ими — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы оставаться в курсе последних тенденций и идей в области дизайна UX / UI.

(ra, al, il)

иллюстрированные шаблоны (+ бесплатные шаблоны)

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

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

Вот что мы рассмотрим сегодня:

Размеры экрана устройства
Макет страницы
Типографика
Навигация
UI элементов
Значки приложений
Другие соглашения iOS
Загрузки
Дополнительная литература и ресурсы

Размеры экрана iPhone

В первые 5 или 6 лет выпуска iPhone размеры экрана были вполне приемлемыми.Если ваш дизайн работал на экране 320×480, вы были золотыми. Теперь , это дикий запад. Всего за последние 3 года появилось 3 новых размера экрана!

Вот полный список для справки (перетащите эту ссылку в закладку; получите загружаемый PDF-файл ниже)

Устройство	Размер артборда	Масштабирование экспорта
11 Pro Max, XS Max	414 х 896	@ 3x
11 Pro, X, XS	375 х 812	@ 3x
11, XR	414 х 896	@ 2x
6+, 6S +, 7+, 8+	414 x 736	@ 3x *
6, 6s, 7, 8	375 х 667	@ 2x
5, 5s, 5c, SE	320 x 568	@ 2x
4, 4с	320 x 480	@ 2x
1, 2, 3	320 x 480	@ 1x

* дисплей на телефоне технически 2.61x

Размер артборда . Это «размер в пунктах» или «@ 1x» для данного устройства. Я настоятельно рекомендую проектировать монтажные области такого размера для данного устройства. (Вот объяснение точек и пикселей)
Масштабирование экспорта . Насколько больше можно сделать растровое изображение (PNG, JPG) при экспорте, чтобы максимально использовать преимущества более высокого разрешения некоторых устройств.

Монтажную область какого размера следует использовать для дизайна iPhone?

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

Если вы записываете аналитику для своего текущего приложения или веб-сайта, проверьте их * для наиболее распространенных размеров экрана вашей аудитории
Если вы разрабатываете приложение для широкой аудитории, используйте самый популярный размер экрана iPhone: 375×667 pt
Если вы разрабатываете приложение для технически подкованной аудитории, наиболее популярным размером экрана iPhone, вероятно, будет более новый 375×812 pt

* Google Analytics записывает это в разделе Аудитория> Мобильные устройства> Устройства, а затем перейдите к метке с надписью «Основной параметр» и установите для него значение «Разрешение экрана»

Дизайн, который хорошо работает на более узком экране (375pt), почти наверняка будет хорошо работать на немного более широком экране (414pt) — , но , наоборот, неверно .Поэтому всегда лучше сначала разработать дизайн для более узких экранов, а затем перепроверить и настроить для более крупных экранов. Поскольку высота не является ограничением, не имеет значения, будут ли ваши артборды, скажем, 667 или 812 пикселей в высоту.

баллов iOS против

пикселей
«Точка» — это мера, с помощью которой дизайнеры сравнивают размеры шрифтов и элементов пользовательского интерфейса на устройствах iOS. «Пиксель» — это крошечный квадрат света, из которого состоит экран вашего iPhone. Меньшие пиксели означают более четкое изображение , и это здорово.Но если вы просто сделаете пиксели меньше, все на экране тоже станет меньше! Чтобы сбалансировать это, дизайнеры измеряют размер элементов на экране в точки . Как только пиксели будут на и половину от их высоты / ширины, мы могли бы просто использовать квадрат 2×2 пикселей для каждой точки (это называется @ 2x). И как только пиксели составили примерно /3 высоты / ширины с начала, мы могли бы использовать квадрат 3×3 пикселей для каждой точки.
балла — это единица измерения, которая позволяет нам иметь экраны с более высоким разрешением без сжатия всех элементов на странице.Ура, очка ! При этом иногда дизайнеры используют эти термины как синонимы, и вам просто нужно знать из контекста, что они означают. Бу, дизайнеры.
Макет страницы iPhone
Хотя разные приложения для iOS имеют разную компоновку, у многих стандартных страниц компоновка будет примерно такой:
Примечание. В разделе загрузок ниже у меня есть шаблон iPhone Sketch, в котором есть линейки, разделяющие эти области страницы, а также строка состояния и индикатор домашней страницы.Это позволяет очень быстро приступить к заполнению этого каркаса страницы.
Если вас интересует определенный раздел страницы, вы можете перейти к нему:
Строка состояния iOS
Строка состояния отображается вверху каждой страницы, за исключением некоторых полноэкранных изображений, видео или мультимедиа.
Строка состояния содержит индикаторы времени, сигнала, Wi-Fi и заряда батареи и может быть написана (текст и значки) черным или белым цветом.
Фон строки состояния может быть любого цвета или даже прозрачным.Чтобы найти вариации цвета, подходящие для контраста с белым, используйте генератор доступных цветов.
Если вы используете строку состояния для чего-либо, кроме самых светлых изображений, вы, вероятно, захотите использовать белый текст.
Или, если вам нужна минимальная строка состояния поверх множества изображений, используйте размытие фона .
Эта строка состояния в стиле «матового стекла» не добавляет никаких дополнительных цветов, границ или ненужных привлекающих внимание элементов к интерфейсу — она просто размывает все цвета под ней, делая текст более читабельным.
В приведенном выше примере светло-серый цвет фона страницы является цветом «по умолчанию» для матового стекла, то есть текст над ним должен быть черным, а не белым.
Только с iPhone X у iPhone есть «выемка» и закругленные углы по краям. Старые iPhone (и все iPad) имеют более короткую и компактную строку состояния.
Панель навигации iOS
Панель навигации — это место, где приложение отображает навигацию (сюрприз!), Заголовок страницы, действия на основной странице и — часто — поиск.
Вы можете представить себе панель навигации iOS как , состоящую из трех «строк» .
В моем шаблоне эскиза пользовательского интерфейса iPhone я включил все эти руководства, определяя, где обычно располагаются эти строки.
Строка состояния: высота 44 пункта
Первый ряд: 44pt высотой
Второй ряд: 54pt в высоту
Третий ряд: высота 48 пунктов
(Эти измерения не всегда точны, и приложения iOS по умолчанию несколько отклоняются от них, но они помогут вам начать)
Таким образом, приложение для iPhone будет отображать одну, две или три строки, в зависимости от (а) потребностей страницы и (б) состояния прокрутки.
Используйте одну строку, если вам просто нужно компактно отобразить некоторые действия страницы (даже заголовок страницы не является обязательным).
Однако, если вы можете позволить себе место, макет страницы приложения iOS по умолчанию содержит две строки : одну для действий страницы, а вторую для большого заголовка страницы.
Но если вам нужно показать поиск , тогда вам понадобится третья строка (даже если первая строка останется пустой!).
Теперь на снимках экрана выше показано только поведение с предварительно прокрученной прокруткой.Как только пользователь начинает прокрутку, iOS указывает на какое-то интересное поведение.
Если панель поиска важно видеть постоянно, она просто перемещается вверх из третьей строки во вторую строку во время прокрутки приложения.
Если он менее важен, он полностью исчезнет — его можно будет увидеть только тогда, когда пользователь окажется в самом верху страницы.
Когда строки навигационной панели iOS исчезают при прокрутке, они будут снова появиться, когда пользователь прокрутит назад к началу .
Обратите внимание, что переходы между состояниями анимированы полностью плавно — небольшая, но характерная деталь стиля iOS.
Панель вкладок iOS
В приложениях iOS основных пунктов назначения в приложении перечислены в виде вкладок внизу.
Отметим несколько моментов по стилю:
Выбранный значок обозначается темой приложения цветом заливки
Ярлыки — это текст размером 10-11 пунктов в SF, шрифт по умолчанию
Фон может быть очень слегка полупрозрачным и иметь размытие фона — эффект «матового стекла», как панель навигации
И несколько примечаний о поведении панели вкладок и ее кнопок:
Различные вкладки запоминают свое состояние.Если вы отправитесь в определенный пункт назначения на одной вкладке, переключитесь на другую вкладку, а затем вернетесь к первой вкладке, вы окажетесь там, где остановились на этой вкладке, а не на «главном экране» для этой вкладки
Если вы коснетесь активной вкладки, вы вернетесь на «главный экран» этой вкладки.
Панель вкладок всегда видна в приложении, за исключением следующих случаев: ** Когда отображается клавиатура ** Когда модальное окно открыто (во время критических задач пользователь должен сосредоточиться на текущей задаче, а не переходить к другим частям приложения)
Всего должно быть 2-5 вкладок.Если вам нужно отобразить более пяти, пятый значок должен быть универсальным, который при нажатии показывает другие пункты назначения на экране квази-выбора.
Индикатор главного экрана iOS
Новые iPhone (X и более поздние модели) имеют индикатор Home — тонкую закругленную полоску, вездесущую в нижней части экрана. Ну, вездесущий, за исключением тех случаев, когда вы уже находитесь на главном экране.
Он черный на всех светлых экранах, но может быть сделан белым на более темных экранах.
И, перетащив его немного вверх, вы можете перемещаться между приложениями и на главный экран:
Перетащите немного вверх: перейдите на экран переключения приложений
Перетащите долгий путь вверх: перейдите на главный экран
Обычно индикатор домашней страницы «владеет» собственным «квадратом» высотой 34 пт, в котором не могут отображаться никакие другие фиксированные элементы.
Но прокручиваемые списки можно отображать прокручивающимися под индикатором главного экрана — и вы даже можете выбрать элемент непосредственно под индикатором главного экрана, нажав. Индикатор домашнего экрана реагирует только на смахивание вверх.
Навигация в приложениях iOS
Основные назначения приложений
Перемещение между основными областями приложения описано в разделе «Панель вкладок».
Переход назад
В iOS вы можете перемещаться назад 4 различными способами в зависимости от контекста.
Метод возврата назад Контекст, в котором это работает
Нажмите Действие «Назад» в верхнем левом углу экрана Любой экран, на котором отображается действие «Назад».
Проведите вправо от левого края экрана Любой экран, на котором отображается действие «Назад».
Нажмите «Отмена» или «Готово» действие в верхней части экрана Модальные виды
Проведите вниз по содержимому экрана Модальный или полноэкранный режим (например,грамм. photos, other media) просмотров
Два верхних способа обычно применяются к одним и тем же экранам.
На большинстве экранов вы можете вернуться назад, (1) нажав верхнее левое действие или (2) проведя пальцем вправо от левого края.
Подробнее о том, как отойти от них, см. В разделе модальных окон ниже.
Поиск iOS
Есть 3 основные точки входа для поиска в телефонных приложениях:
Строка поиска в панели навигации
Значок поиска на панели навигации
Значок поиска на панели вкладок
Однако независимо от того, где находится точка входа в поиск , поиск выглядит примерно одинаково:
При желании вы можете отображать популярные или недавние поисковые запросы под полем поиска.В моем курсе по разработке интуитивно понятных, простых в использовании приложений «Изучите UX-дизайн» я расскажу о некоторых передовых методах поиска.
Модальные листы iOS
Некоторые задачи включают один экран или линейную серию экранов, которые вы хотите, чтобы пользователи выполняли, полностью не выходя из контекста, в котором они находились.
В iOS 13 у нас теперь есть идеальный элемент пользовательского интерфейса для этого: модальный лист.
Модальный лист — это обычная страница, которая (а) скользит снизу вверх, покрывая почти всю предыдущую страницу, но (б) оставляет предыдущую страницу видимой, но утопленной на заднем плане.
Модальные окна могут быть отклонены по:
Нажатие кнопки «закрыть» вверху (вверху — «Отмена» в правом верхнем углу)
Проведение вниз по самой модальной карте
Элементы пользовательского интерфейса и элементы управления
Списки iOS (также известные как «Табличные представления»)
Помните: «90% мобильного дизайна — это список». Если вы хотите хорошо разрабатывать приложения для iPhone, узнайте, как Apple думает о своих списках (или, как они говорят, «Табличные представления»).
Каждый раз, когда вы составляете список на iPhone, вам нужно задавать себе три вопроса:
Какой текст я хочу отобразить?
Мне также нужен значок / изображение?
Что идет в правой половине клетки?
Давайте рассмотрим каждый из них по очереди.
Какой текст вы хотите отображать в каждом элементе списка? Вы можете выбрать:
Только основной текст (17 пунктов, обычный)
Основной текст (17 пунктов, обычный) со второстепенным текстом (15 пунктов, обычный)
Пользовательский макет — например, основной текст (обычный 17 пунктов), дополнительный текст (обычный текст 15 пунктов, НО ЛЕГЧЕ) и третичный текст (обычный текст 15 пунктов, НО ЕЩЕ ЛЕГЧЕ)
Слева от текста можно дополнительно отобразить значок или изображение.
Наконец, есть несколько вариантов для правой части элемента списка:
A (направленный) шеврон .Почти по умолчанию это позволяет пользователям знать, что они будут переходить на другой экран
Текст и шеврон . Это означает, что пользователь может перейти на другой экран, чтобы выбрать значение, которое будет здесь отображаться
Галочка . Позволяет пользователю выбирать между одним из элементов списка в этой группе (Примечание: , а не с множественным выбором, как списки веб-флажков)
Переключатель . Позволяет пользователю включать или выключать свойство, к которому относится элемент списка.
Текстовые кнопки . Используйте системный цвет для ссылки на другую страницу или поток. Используйте красный текст для обозначения «деструктивного действия» — выключение чего-либо, удаление, удаление и т. Д.
Есть и другие парадигмы iOS для того, что вы можете делать со списками, которые здесь не рассматриваются, но это обзор некоторых из наиболее распространенных способов использования списков. Для получения дополнительной информации ознакомьтесь с элементами управления вводом.
Кнопки iOS
Обычно мы думаем о кнопках как о цветных прямоугольниках с центрированным текстом — и приложения для iPhone определенно используют такие типы.Но если вы приехали из мира веб-дизайна, вы можете быть удивлены, узнав, что многие кнопки на iOS представляют собой просто (а) значки или (б) цветной текст — либо (а) на панели навигации (вверху). экрана) или (б) панель действий (внизу экрана).
Однако в iOS есть и кнопки на странице.
Поскольку действия на всей странице появляются в фиксированных меню (панель навигации или панель действий), многие кнопки на странице применяют только к определенной части страницы — и, следовательно, будут отображаться на карточках.
Элементы управления вводом на iOS
Одна неочевидная вещь о том, как приложения iOS выполняют элементы управления вводом, — это , они почти все стилизованы как элементы списка .
Текстовые поля iOS
Ввод текста выглядит как элемент списка с подсказкой, которая исчезает при вводе текста.
Коммутаторы iOS
Переключатели отображаются в элементе списка с меткой слева и переключателем двоичного выбора справа.
Выбор даты и / или времени iOS
Сначала он выглядит как элемент списка с меткой слева и значением справа, но если вы нажмете на элемент списка, он превратится в специальный элемент управления «прядильщик».
Вы можете изменить это, чтобы выбрать (а) только время, (б) только дату, (в) и время, и дату, или (г) другое настраиваемое значение. При этом я не рекомендую использовать это как универсальную замену выпадающим спискам. Вместо этого на мобильных устройствах вы часто захотите использовать шаблон «экран выбора» — отличный вводный курс
Экраны средства выбора iOS
Если у вас когда-либо возникало искушение использовать раскрывающийся список (чего не должно быть, но давайте притворимся), вам, вероятно, следует использовать шаблон экрана выбора в приложениях для iPhone.Вся идея в том, что у вас есть что-то похожее на элемент списка, но на самом деле это ведет на другую страницу, где вы выбираете значение.
Итак, ингредиентов:
(1) Один элемент списка с меткой, значением и шевроном ведет к (2) странице с множеством опций в списке, один из которых может быть выбран, и будет отображать это состояние с галочкой .
После того, как вы сделали свой выбор, вы можете вернуться назад, проведя пальцем по экрану или нажав кнопку в верхнем левом углу.
Типографика в приложениях iOS
Чтобы узнать больше о типографике iOS (и, в частности, о размерах шрифтов), прочтите мою полную статью об этом здесь.
iOS имеет отличительную парадигму стилизации текста. Возможно, самый удивительный урок заключается в том, что , где многие системы дизайна используют стиль с размером или прописными буквами, стили iOS с весом или цветом . В этом уроке мы рассмотрим многие стили текста в приложениях для iPhone. Вот краткая справка, если вы хотите пропустить:
Тип элемента Стиль
Заголовок страницы (без прокрутки) 34pt жирным шрифтом # 000
Заголовок страницы (прокручивается) 17pt, средний # 030303
Текст абзаца,
Заголовки пунктов списка,
Ссылки 17pt нормальный # 000
Дополнительный текст 15pt нормальный # 8A8A8E
Третичный текст,
Подписи 13pt нормальный # 8D8D93
Кнопки,
Элементы управления вводом текста 17pt нормальное, разные цвета
Этикетки панели действий 10pt стандартный # 8A8A8E
Стилизация текста заголовка для приложений iPhone
Заголовки страниц в приложениях для iPhone пишутся двумя разными способами.
Когда пользователь еще не прокрутил (или прокрутил , но затем прокрутил обратно наверх ):
Размер: 34pt
Плотность шрифта: полужирный
Цвет: # 000
Цвет темного режима: #FFF
Выравнивание: слева
Когда пользователь прокрутил вниз :
Размер: 17pt
Плотность шрифта: средняя
Цвет: # 030303
Цвет темного режима: #FFF
Выравнивание: по центру
Стиль текста по умолчанию для приложений iPhone
«Стиль по умолчанию» для текста в приложениях для iPhone:
.
Размер: 17pt
Плотность шрифта: обычная
Цвет: # 000
Цвет темного режима: #FFF
Вы можете много работать, внеся небольшие изменения в этот базовый стиль.
Например, в то время как обычные элементы списка написаны с использованием стиля текста по умолчанию, приложение «Почта» показывает отправителей электронной почты полужирным шрифтом — так как это помогает выделить имя отправителя из строки темы и предварительного просмотра.
Точно так же текстовые кнопки ссылок — это в основном текст по умолчанию, но с разными цветами.
И текст подсказки поля поиска является текстом по умолчанию, но более светлым серым цветом.
Дополнительный стиль текста для приложений iPhone
Приложения
для iPhone имеют стандартный стиль для любого вспомогательного «вторичного» текста.
Размер: 15 пунктов
Плотность шрифта: обычная
Цвет: # 8A8A8E
Цвет темного режима: # 8D8D93
Третичный стиль текста и подписей для приложений iPhone
Любые пояснительные «подписи» обработаны еще меньше и легче, чем второстепенный текст.
Размер: 13pt
Плотность шрифта: обычная
Цвет: # 6D6D72
Цвет темного режима: # 8D8D93
Минимальный размер текста в приложениях для iPhone
С любой дизайн-системой можно избавиться от головной боли, просто определив минимальный размер.Для приложений iPhone это ярлыки панели действий, 10pt:
.
Размер: 10 пунктов
Плотность шрифта: обычная
Цвет: # 999 (когда не выбран)
Цвет темного режима: # 757575 (когда не выбран)
Значки приложений iOS
Если вы создадите значок приложения такого размера, чтобы он отображался во всех возможных местах для всех возможных iPhone и iPad, вам в конечном итоге придется создать дюжину вариантов одного и того же значка.
Добро пожаловать.
(Если вы используете Sketch, вы можете сделать это довольно просто с их шаблоном — Файл> Создать из шаблона> Значок приложения iOS)
Однако, если вы похожи на меня, вы бы предпочли убедиться, что охватываются более распространенные размеры на более распространенных (или более новых) устройствах, и позвоните им. В конце концов, разве весь смысл этого бизнеса @ 3x в том, что отдельные пиксели слишком малы, чтобы их можно было увидеть?
Вот план дизайна значка приложения 80/20 для iPhone от Эрика:
Создайте квадратный значок, который хорошо выглядит с разрешением 60×60 пикселей (и убедитесь, что он хорошо выглядит замаскированным с помощью Apple superelljpse *)
Увеличьте изображение до @ 2x (120×120 пикселей) и, при желании, настройте его так, чтобы оно было максимально точным по пикселям
Увеличьте изображение до @ 3x (180×180 пикселей) и, при желании, настройте его так, чтобы он был как можно более точным по пикселям
Увеличить размер до 1024x1024px
Экспортируйте все 4 размера как PNG.Готово
Форма значка iOS Superellipse (также известная как «Squircle»)
Несмотря на то, что вы всегда должны экспортировать значки в виде квадратов, Apple будет вырезать углы, используя форму, называемую суперэллипсом.
Суперэллипс — или прямоугольник — очень похож на нормальный прямоугольник с закругленными углами. На самом деле разница практически незаметна невооруженным глазом. Обоснование Apple для переключателя: (а) суперэллипс, более плавный переход от прямой части к изогнутой части , что приводит к более органичной форме в целом, и (б) это лучше совпадает с углами оборудования Apple. устройств.
Это действительно имеет значение только в том случае, если у вашего значка есть граница, и в этом случае ваша форма границы должна определяться суперэллипсом, а не прямоугольником с закругленными углами. Вот как создать суперэллипс / прямоугольник в Sketch и Figma:
Как создать суперэллипс / прямоугольную иконку Apple в эскизе
Создайте квадрат с помощью меню «Вставка» или сочетания клавиш «r»
Измените радиус угла на длину, равную единице, умноженной на 0,222
Измените «Радиус (скругленные углы)» на «Радиус (ровные углы)»
Как создать суперэллипс / прямоугольник значка Apple в Figma
Создайте квадрат с помощью пункта меню «Прямоугольник» или сочетания клавиш «r»
Измените радиус угла на длину, равную единице, умноженной на 0.222
Откройте меню «Независимые углы» (справа от настройки радиуса угла)
Откройте меню сглаживания углов (значок «…») и установите для него индикатор «iOS», расположенный на 60%
Другие условные обозначения iOS
Есть еще пара вещей, о которых вам, вероятно, следует знать, если вы разрабатываете приложение для iPhone. Я просто перечислю их здесь:
Целевой размер касания iOS
Все, что пользователь должен иметь возможность нажимать — каждая кнопка, каждый ползунок, каждый элемент управления вводом — должно иметь размер не менее 44×44 pts .
Единственное исключение, где действительно простительно разрывать, — это текстовые ссылки. В тексте абзаца каждая строка текста, вероятно, будет немного короче 44pt. Это означает, что (а) ваши ссылки будут иметь размер касания менее 44pt и (б) если есть ссылки в одной и той же позиции в двух последовательных строках текста, пользователям будет довольно сложно точно нажимать на них. Хотя этого не всегда можно избежать, стоит знать об этом как о чем-то, что можно свести к минимуму.
Даже Apple не строго придерживается своих рекомендаций по целевому охвату — хотя я советую вам это делать в любом случае.
Руководство по дизайну iOS в темном режиме
Начиная с iOS 13, iOS имеет настройку «темного режима» на уровне ОС, при которой участвующие приложения имеют (как правило) темный фон и светлый текст вместо светлого фона и темного текста.
Хотя iOS автоматически перейдет в темную версию, если вы используете собственные элементы управления и цвета, вы должны понимать общие принципы темного режима для любого пользовательского интерфейса, который вы используете. Вот несколько простых рекомендаций:
Цвет текста инвертирован .Это немного упрощает, но черный текст становится белым, темно-серый текст становится светло-серым, а средний серый текст остается в основном прежним. Если вы посмотрите на стили оформления выше, вы заметите, что iOS фактически отбрасывает несколько дополнительных оттенков и упрощает цвета текста для своей темной темы. Если вы не можете сказать, следует ли сделать серый цвет средней яркости темнее или светлее, выберите вариант с более высокой контрастностью текста по сравнению с его фоном.
Цвет фона сдвинут на .В отличие от текста, где более темные цвета становятся светлее, все цвета фона просто становятся темнее. Если цвет фона был светлее в светлом режиме, он все еще светлее в темном режиме . Почему? Потому что свет исходит с неба. Если вы это понимаете, вы поймете, что мы полагаемся на цвет фона для определения глубины (в отличие от текста). И так это работает совершенно по-другому.
Цвета темы переведены на контрастный оттенок . Любые акцентные цвета, которые вы ранее использовали на светлом фоне, теперь должны так же выделяться на темном фоне.Поскольку белый имеет яркость 100%, а черный — 0%, это часто означает, что вы понизите яркости ярких цветов (и, согласно моей более широкой теории настройки цвета, повысите их насыщенность).
Цвета взяты из системных цветов iOS.
Создание темного пользовательского интерфейса — это отдельная тема, заслуживающая отдельного руководства, и это одна из вещей, которые я более подробно освещаю в «Learn UI Design».
Загрузки
Я создал несколько ресурсов для удобства.Ссылки и описания ниже 😎
Шпаргалка по размеру экрана iPhone
Пикселей, точек, дюймов, о боже. Это краткое руководство по размеру и разрешению экрана iPhone каждой версии.
🔗 СКАЧАТЬ БЕСПЛАТНО
Шаблон дизайна для iPhone 11
Этот файл эскиза (который вы также можете открыть в Figma) включает артборд iPhone 11 с (а) линейками для разделения общих частей экрана, (б) маской с выемкой и закругленными углами и (в) простой -чтобы перекрасить строку состояния.После загрузки откройте его в Sketch и выберите «Файл»> «Сохранить как шаблон» для быстрого доступа.
🔗 СКАЧАТЬ БЕСПЛАТНО
Дополнительные ресурсы по дизайну приложений для iPhone
Руководство Apple по интерфейсу пользователя для iOS . Собственные стандарты Apple, как известно, трудно читать. Сначала вам нужно пройти через их абстрактные принципы, и вы постоянно сталкиваетесь с трудной борьбой против их избитой терминологии (почему списки называются «Таблицы» и хранятся в «Представлениях» !? Разве это не должно быть в «Контролях»? Нет, но очевидно, простой текст — это «элемент управления» — просто посмотрите в разделе «Ярлыки»!).В любом случае, я скажу, что как только вы измените свое мышление, Apple cool-aid станет намного более понятной, и — давайте посмотрим правде в глаза — если вы разрабатываете приложение для iPhone, вы все равно будете здесь. Лучше привыкнуть к этому.
iOS и Android Дизайн пользовательского интерфейса приложения: полное руководство . Хорошо, допустим, вы думаете, что в какой-то момент собираетесь создать Android-версию своего приложения для iPhone. Лучше всего начать думать о некоторых конструктивных отличиях прямо сейчас. Кто знает — вы можете в конечном итоге украсть отличные идеи из принципов дизайна Android.Эта статья на самом деле охватывает несколько парадигм дизайна iOS, о которых я здесь не говорил. Стоит прочитать!
Рекомендации по размеру шрифта iOS . Одна из самых неожиданных составляющих успеха в дизайне пользовательского интерфейса — это разработка интуитивного понимания того, какие размеры шрифтов использовать . Итак, чтобы помочь с этим, я написал самое полное в мире руководство по размерам шрифтов. Одна часть — это одно приложение для iOS, и если вы зашли так далеко, вам, вероятно, стоит прочитать и это.
Рекомендации Иво Минттинена по дизайну iOS .Самое полное руководство, которое я смог найти, помимо этого, по созданию удобочитаемых руководств для приложений iPhone (помимо этого 😉). Фантастическое чтение.
Завершение
Я что-то пропустил? Что-то не так? Свяжитесь со мной по адресу [электронная почта защищена]. Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и понятным для человека руководством в Интернете по созданию приложений для iPhone.
Одна последняя нота 😎
Если вы здесь впервые, возможно, вас заинтересует:
Learn UI Design, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
The Design Newsletter, информационный бюллетень для более чем 40 000 человек с оригинальными статьями по дизайну, цель которых — дать вам тактические советы по улучшению ваших навыков UX / UI.
Некоторым людям есть что сказать о информационном бюллетене.
Благодарность за информационный бюллетень по дизайну
Спасибо за ваш информационный бюллетень. Возможно, это лучший информационный бюллетень, который я получал с 1999 года, когда я начал работать фрилансером.
Триша Литтлфилд
Основатель, TheSimpleWeb
Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт, это чертовски блестяще », и прочитал все это.
Жан-Филипп
UX Strategist, Freelance
Подписано более 40 000 человек.
Нет спама. Отпишитесь в любое время.
Размеры и разрешения экрана мобильного приложения для iOS и Android Дизайн
Точно ли ваше приложение отображается на любом устройстве пользователя? Вы работали с оптимизированным интерфейсом? Когда дело доходит до графики, разработчики обычно следуют правилу «один размер подходит больше всего», что не является правильным решением.Несомненно, это самый простой способ, но он может подавить визуальную привлекательность приложения. Чтобы ваше приложение выглядело идеально, оно должно быть адаптировано к экранам конкретных устройств. Лучшая графика идеально загружается во время работы и в целом обеспечивает приятное взаимодействие с пользователем. Да, речь идет об управлении визуальным языком в соответствии с конкретной платформой.
Вот почему вам следует опасаться размеров и разрешения мобильных приложений. Даже опытные дизайнеры, которые постоянно изучают дизайн мобильных устройств или других экранов, не понимают, сколько размеров и разрешений имеют.В этой статье мы поговорим об условиях экрана, размерах приложения, плотности, которые необходимо учитывать при разработке мобильных приложений. Купите путь, и если вы подумываете о том, чтобы найти разработчика для своего приложения, мы советуем вам прочитать статью «Скрытая правда о найме надежного разработчика мобильных приложений».
Вы должны знать несколько основных терминов о размерах и разрешениях экрана мобильных устройств:
Пиксели — наименьший адресный элемент во всех адресных точках устройства отображения;
Размеры экрана — физический размер области, в которой отображаются изображения и видео.Размер экрана обычно описывается его диагональной длиной, которая представляет собой расстояние между противоположными углами, обычно в дюймах.
Разрешения — количество отдельных пикселей в каждом измерении, которое может отображаться. Например, 720wx1080h
DPI означает «Точек на дюйм». Количество точек (или пикселей), отображаемых в интерфейсе на один дюйм.
Density Independent Pixels — абстрактное измерение для Android.
Очки — это абстрактное измерение для iOS.
Выбирая платформу для своего мобильного приложения или игры, у вас будет всего два варианта. iOS и Android — основные операционные системы. Давайте посмотрим на конкретный размер экрана для дизайна мобильного приложения, который должен подходить для дизайна приложений iOS и Android:
Хотите создать мобильное приложение и ищете профессиональных разработчиков?
Пиксель
Это наименьший управляемый элемент (обычно красный, зеленый, синий) изображения, представленного на экране, с использованием элементов с разной интенсивностью, различными цветами и диапазоном яркости, которые могут быть созданы.Если все точки выключены, цвет черный. Точно так же белый цвет может образовываться при одновременном освещении красного, зеленого и синего цветов. Пиксели — это физические огни на экране, благодаря которым вы можете видеть то, что отображается на экране мобильного телефона. Их непросто распознать по отдельности, не присмотревшись.

Размер экрана — это длина экрана по диагонали или от одного угла до другого.
Разрешение
Разрешение означает количество отображаемых пикселей.Например, дисплей с разрешением 720 x 1280 пикселей намного выше, чем дисплей с разрешением 480 x 800 пикселей. Разрешение не определяет физический размер. Например, один дисплей 480 x 800 может иметь диагональ 3,0 дюйма, а другой дисплей 480 x 800 — 4,5 дюйма. Однако дисплей с большим физическим размером не будет выглядеть так хорошо, как физически меньший.
DPI
означает «точек на дюйм». DPI используется для измерения разрешения экрана.Чем выше DPI, тем больше деталей можно показать на изображении.

Более высокое значение DPI означает, что каждый отдельный пиксель должен быть меньше по размеру для настройки в данном пространстве, что делает экран четким и включает более высокий уровень детализации, чем фактическая емкость экрана.
Создание изображений
Мы уже обсуждали пиксели, плотность, размер экрана и разрешение. Мы узнаем, как рисуются изображения, но прежде вы должны знать точки и пиксели, не зависящие от плотности (DP).
баллов (для iPhone)
Чтобы объяснить, в чем суть, мы должны вернуться к истории iPhone. Давным-давно первый iPhone имел разрешение экрана 320х480. Затем появился iPhone 4 с экраном Retina. Экран Retina удвоил DPI, сохранив при этом тот же размер экрана — это означает, что количество пикселей, которые помещаются в одно и то же пространство, увеличилось в четыре раза (вдвое больше пикселей по горизонтали и вдвое больше пикселей вниз). Разрешение первого Retina iPhone составляло 640 × 960 пикселей.
Старая графика должна быть создана того же размера на телефоне с более высокой плотностью. Если бы телефон выполнял всю графику в масштабе 1: 1, все было бы нарисовано в четверть от нового размера экрана, что сделало бы все приложения устаревшими. Чтобы предотвратить разрушение всех этих приложений, Apple начала использовать точки и отделять рисунок графики от плотности экрана.

Точка была создана как единица расстояния, которая позволяет масштабировать графику независимо от разрешения телефона, на котором она работает.В настоящее время каждая графика iOS может быть нарисована в соответствии со своими баллами и преобразована для правильного отображения на новом экране.
Этот размер всегда один и тот же независимо от разрешения телефона и исходит из 163 точек на дюйм исходного iPhone.
Преобразование между пикселями и точками
Пикселей и точек — постоянные измерения — их могут изменить любые факторы:
1 пиксель всегда равен 1 пикселю и представляет собой наименьшую часть экрана, которая может отображать цвета.
1 балл — это всегда 1 балл и является определенной единицей.
Точки отличаются от пикселей, потому что они меняют размер в зависимости от DPI:
На iPhone 1 точка равна 1 пикселю при разрешении 163DPI. Так было со всеми iPhone до эпохи Retina.
При 326DPI, как в iPhone 4, 5 и 6, 1 точка равна 2 пикселям, 2 пикселям или 4 пикселям в сумме.
Это означает, что ваше изображение размером 100 × 100 будет отображать четверть размера на устройстве Retina, если оно визуализируется только путем подсчета пикселей.
При 401DPI, как у iPhone 6+, 1 точка равна 3 пикселям по горизонтали и 3 пикселям вниз, или 9 пикселей в целом.
iPhone обработанных пикселей
Когда ОС отображает экран, логические пиксели преобразуются в отображаемые пиксели. Преобразование логических пикселей в отображаемые пиксели происходит с использованием отношения пикселей устройства. Это соотношение определяет, сколько логических пикселей соответствует количеству отображаемых пикселей для каждого устройства. Это не обязательно должно быть четное значение. Поскольку логические пиксели не являются фактическими пикселями, это просто единица длины, один логический пиксель может быть преобразован в 1.5 пикселей рендеринга.
Отображаемые пиксели дают вам число, когда вы используете несколько устройств (1x, 2x, 3x) для измерения размера экрана в точках. Если вы хотите нарисовать изображение в максимальном разрешении, то вам следует придерживаться этого размера.
iPhone Физические пиксели
Физических пикселей — это фактическое разрешение экрана. В iPhone 11pro разрешение изображения больше на экране с меньшим количеством физических пикселей, поэтому возникает необходимость изменить его размер. Это значение важно с точки зрения деталей, но оно не должно влиять на структуру вашего дизайна.
Разрешение и дисплей в iPhone в 2020 году
Форма для значков приложений

Закругленные углы устарели. Apple создала новую форму под названием суперэллипс. Для него нет официального шаблона. Вы можете использовать неформальные шаблоны, которые помогут вам создать его реплику. Каждое приложение должно предоставлять небольшие значки для использования на главном экране и во всей системе после установки приложения, а также более крупные значки для отображения в App Store.
Сетка
Apple установила сетку золотого сечения, согласно которой вы можете правильно определять размеры и согласовывать элементы.Однако дизайнеры раскритиковали шаблон сетки и не следовали ему полностью. Создайте дизайн, который лучше всего подходит для просмотра значков, даже если это означает, что вам не следует использовать сетку.
А как насчет DP?
пикселей, независимых от плотности, также известных как пиксели, не зависящие от устройства, помогают поддерживать одинаковый физический размер элементов пользовательского интерфейса на устройствах с разной плотностью при сохранении резкости элемента. Чем плотнее экран, тем больше пикселей требуется для сохранения того же физического размера.Это эквивалентно , примерно 160 пикселей, сжатых на 1 дюйм экранного пространства, по сравнению с 163 в iOS. Других отличий нет.
☝
Официальное определение гласит:
Независимый от устройства пиксель (также: независимый от плотности пиксель, DIP, DP) — это физическая единица измерения, основанная на системе координат, поддерживаемой компьютером, и представляет собой абстракцию пикселя для использования приложением, которое затем преобразуется в физические пиксели.
Когда и зачем их использовать?
При разработке макетов для Android используются DP и точки при разработке макетов для iOS. Независимые от плотности пиксели и точки iOS — это фактические пиксельные единицы, которые вы должны использовать при определении макета пользовательского интерфейса, чтобы передавать размеры или положение макета независимым от плотности способом.
Как конвертировать между пикселями и точками
Размеры в Android
Посмотреть размеры
Сенсорные элементы пользовательского интерфейса имеют значение 48 единиц DP, а расстояние между каждым из этих элементов составляет 8 dp.
Диапазон применимых экранов
Прямо из Android 1.6, были открыты различные размеры и плотность экрана, предлагая различные конфигурации экрана, которые может поддерживать устройство. Вы можете ИСПОЛЬЗОВАТЬ ОСОБЕННОСТИ ПОЛЬЗОВАТЕЛЯ системы Android, чтобы наилучшим образом оптимизировать пользовательский интерфейс вашего приложения для каждой конфигурации экрана, чтобы убедиться, что дизайн выдающийся для приложения, а также удобство работы пользователя для каждого экрана.
Команда Android рассмотрела различные доступные экраны и создала 6 сегментов логической плотности для группирования экранов с разной плотностью.Будет перечислено только 5, потому что 1 из них, ведро с низкой плотностью (~ 120 точек на дюйм) больше не очень распространено: mdpi (medium) ~ 160dpi; hdpi (высокое) ~ 240 dpi; xhdpi (сверхвысокое) ~ 320 dpi; xxhdpi (extra-extra-high) ~ 480 dpi; xxxhdpi (extra-extra-extra-high) ~ 640 dpi. Унифицированные размеры и плотности включают базовую конфигурацию, которая включает в себя нормальный размер и плотность mdpi (средняя).
Ковш средней плотности — это базовая плотность, плотность 1x, а все остальные плотности рассчитываются с использованием ~ 160 точек на дюйм в качестве базовой линии.
В качестве иллюстрации два устройства, которые соответствуют требованиям к размеру экрана и фактически соответствуют фактическим размерам экрана и соотношению сторон, можно слегка измерить вручную. Обратите внимание, что Android делает эти варианты абстрактными для приложений, чтобы отображать пользовательский интерфейс в соответствии с общими размерами и плотностями, и оставляет систему для внесения каких-либо окончательных корректировок, если это необходимо.
По мере того, как вы разрабатываете различные пользовательские интерфейсы на нескольких экранах, вы обнаружите, что каждый дизайн требует минимального количества места.Таким образом, каждый обобщенный набор требует минимального разрешения, которое хорошо отмечается системой. Эти минимальные размеры также указаны в единицах dp, чтобы исключить любые проблемы при изменении плотности экрана.
Экраны Xlarge: минимум 960dp x 720dp
Большие экраны: минимум 640dp x 480dp
Обычные экраны: минимум 470dp x 320dp
Маленькие экраны: минимум 426dp x 320dp
Во время выполнения система использует наиболее подходящий ресурс для вашего приложения в соответствии с обобщенным размером или плотностью экрана конкретного устройства.Система предоставляет мощные согласованные функции, которые могут регулировать большую часть работы вашего приложения на нескольких экранах, учитывая, что ваши методы пользовательского интерфейса позволяют легко изменять размер.
Использование векторных ресурсов
Векторная графика дает множество преимуществ, особенно при разработке для мобильных устройств в постоянно расширяющемся массиве экранов различных размеров и соотношений пикселей:
Четкое изображение независимо от разрешения или соотношения пикселей
Меньший размер файла (по большей части)
Конечно, векторные форматы подходят только для не растрового содержимого, например.г., иконы.
Векторные изображения плавно изменяют размер; они описывают изображение по размеру абстрактного холста. Вы можете масштабировать этот холст вверх или вниз, а затем перерисовать изображение в этом размере.
Поскольку векторные ресурсы плавно изменяют размер, вы можете включить один ресурс, зная, что он будет работать с любой плотностью экрана.
В этой статье мы хотели дать вам общее представление о размерах и разрешении для дизайна приложений iOS и Android. Его можно использовать в качестве руководства для успешного изменения внешнего вида вашего приложения на различных конфигурациях экрана и обеспечения оптимального взаимодействия с пользователями.Сделать мобильное приложение или заказать его разработку зависит от вас. Здесь вы найдете информацию о том, сколько будет стоить мое приложение в 2020 году?
Устали от технических характеристик? Хотите получить консультацию у нашего разработчика?

✔ Как можно использовать разные размеры экрана?
Если вы создадите приложение только с одним типом экрана, это негативно повлияет на работу пользователей с другими устройствами.Плохой пользовательский опыт повредит вашей прибыли, чего вы хотите избежать. Вот еще кое-что, о чем следует помнить. Ваше приложение и другие изображения должны по-прежнему загружаться безупречно, независимо от того, как пользователь держит свое устройство. Таким образом, помимо размеров и разрешений экрана, вам также необходимо обеспечить плавный переход между портретным и альбомным режимами. В зависимости от размера экрана пользователи склоняются к одной ориентации, а не к другой. Например, если мы говорим об устройствах с размером экрана более 9 дюймов, количество пользователей, использующих альбомный режим, значительно возрастает.Итак, мы можем предположить, что люди по большей части предпочитают использовать альбомную ориентацию на своих планшетах. Тем не менее, вам все равно нужно протестировать свое приложение, изображения и элементы дизайна для обеих ориентаций и убедиться, что оно оптимизировано для всех разрешений.
Различия в дизайне iOS и Android — Полное руководство для приложений
8. Методы навигации верхнего уровня
Давайте начнем с самого начала. iOS рекомендует только один метод навигации верхнего уровня: через панель вкладок.С другой стороны, в Android есть три метода: панель навигации, нижняя панель навигации и вкладки.
Если имеется более пяти страниц верхнего уровня, мы используем панель навигации. Если их меньше, мы используем нижнюю панель навигации. Вкладки нечасто используются для такой навигации, но этот метод тоже доступен. Однако Material рекомендует не комбинировать вкладки и нижнюю панель навигации, поскольку взаимодействие с этими компонентами влияет на содержимое страницы, и пользователь может запутаться.
9. Различия в поведении панели вкладок и нижней панели навигации
Это различие подсказано материалом.
В iOS, если вы перейдете с материнской страницы на дочернюю страницу, а затем перейдете на другую материнскую страницу через панель вкладок, если вы вернетесь на первую материнскую страницу, вы все равно будете на дочерней странице. На Android все намного строже — если вы переходите через нижнюю панель навигации, вы всегда будете перемещаться между материнскими страницами. Если до этого вы были на дочерней странице, она будет сброшена.
Наши разработчики Android убеждены, что поведение Android в этом отношении некорректно. Если пользователь переходит через нижнюю панель навигации, он должен сохранить открытые дочерние страницы, как на iOS.
10. Особое поведение вкладок в Android
В отличие от сегментированных элементов управления в iOS, вкладки Android имеют особую функцию: вы можете переходить от вкладки к вкладке, проводя пальцем вправо или влево.
Это потому, что страницы вкладок находятся на одной высоте.
Это важно знать, потому что при использовании вкладок на Android мы не должны добавлять в дизайн элементы с похожими жестами (например, карусель изображений или взаимодействие с картами с помощью свайпов).
Как правило, эти два компонента не являются полностью взаимозаменяемыми. Сегментированное управление — это метод управления содержимым страницы. Вкладки — это инструмент навигации. Поэтому вам следует поговорить с разработчиками, прежде чем рассматривать эти компоненты как эквивалентные во время адаптации. Иногда правильнее заменить вкладки Android на Управление страницей. Все зависит от контекста.
11. Различия в поведении дочерних страниц
В iOS дочерние страницы (не считая модальных окон) отображаются только одним способом: дочерняя страница появляется справа и вверху материнской страницы со «вставкой внутрь» эффект.Возврат на исходную страницу происходит с эффектом «скольжения».
Материал рекомендует показывать пользователю иерархическую взаимосвязь между материнской и дочерней страницами с помощью преднамеренной анимации.
Компонент, с которым пользователь взаимодействует для перехода на дочернюю страницу, открывается и закрывает материнскую страницу. Таким образом, пользователь понимает, где они находятся и откуда пришли, а также почему это произошло и куда они пойдут, если нажмут кнопку «Назад». Этот переход происходит с использованием стандартного ослабления.
12. Специальный шаблон для вызова панели навигации
При разработке приложения с помощью панели навигации важно помнить, что этот компонент «берет на себя» жест «смахивание края слева направо». Так что не добавляйте к этому жесту никакой другой логики.
В iOS этот жест имеет обычный шаблон перехода с дочерней страницы на материнскую. Этот шаблон постепенно распространился и на многие приложения для Android.
13. Поведение содержимого при прокрутке
Согласно HIG, содержимое на iOS во время прокрутки ведет себя следующим образом: панель навигации уменьшается по ширине, а панель инструментов исчезает.Но в целом разработчики iOS могут настроить любое поведение для контента и полос во время прокрутки.
Материал предлагает больше вариантов поведения при прокрутке. Например, нижняя панель навигации, панель поиска и нижняя панель приложения могут исчезнуть во время прокрутки.
Верхняя панель приложения также может исчезать или перемещаться над основным контентом.
14. Другое поведение поиска
Интересно, что HIG относит поиск к полосам и называет это панелью поиска. В Материалах мы находим поиск в разделе «Навигация», а не в разделе «Компоненты».Другими словами, для Материалов поиск — это просто еще один метод навигации. Как на iOS, так и на Android поиск может быть статически представлен на экране и, как правило, привязан к панели навигации / верхней панели приложения.
На обеих платформах поиск может отображаться в виде значка, но в iOS значок расширяется в независимый компонент панели поиска, а в Android — в верхней панели приложения.
Одной из особенностей поиска в iOS является то, что он может быть «спрятан» под панелью навигации и вызван жестом «смахивания вниз».Тот же жест типичен для обновления (потяните, чтобы обновить), поэтому вы не хотите активировать поиск и обновление, используя одно и то же действие.
15. Какие компоненты отсутствуют в iOS
Многие из собственных компонентов Android отсутствуют в iOS. Давайте пробежимся по ним.
a) Панель навигации
В принципе, iOS не распознает меню бургеров. Как мы упоминали ранее, iOS имеет навигацию только верхнего уровня через панель вкладок.
б) Фоновые изображения
Фоновые рисунки, на мой взгляд, самый удивительный компонент в Материалах.На момент написания этой статьи Android все еще только планирует реализовать фоновые изображения в качестве собственного компонента. Как правило, при изучении компонентов Материала проверяйте, доступны ли они для использования.
Сам материал любит этот компонент. Например, просто посмотрите на победителей конкурса Material Design Award 2019.
c) Баннеры
Баннеры не входят в число встроенных компонентов iOS. Используя баннер, мы можем донести до пользователя важную информацию и предложить действия, связанные с ней.
d) Snackbars
Как и баннеры, Snackbar не встроен в iOS. Снэкбары используются для предоставления пользователю кратких сообщений о результатах его действий.
e) Микросхемы
Микросхемы также не являются собственными компонентами iOS. Они используются для ввода информации, описаний и действий.
е) Нижняя панель приложения
В этом случае мы можем утверждать, что в iOS есть компонент, похожий на панель инструментов. Но на самом деле они разные, и вот почему: панель инструментов — это панель для контекстных действий.Например, при редактировании списка сообщений в Сообщениях появляется панель инструментов с действиями «Прочитать все» и «Удалить». С другой стороны, нижняя панель приложения — это, по сути, просто верхняя панель приложения, которая была перемещена вниз вместе с теми же действиями верхнего уровня, включая открытие панели навигации, вызов поиска и т. Д. Мы также можем поместить FAB в Нижняя панель приложений.
г) FABs
Нет, в iOS тоже нет FAB. FAB — это кнопка для выполнения основного действия на экране.Например, в приложении электронной почты FAB создаст новое электронное письмо.
Если вы используете FAB для основного действия на экране в Android, в iOS основное действие должно быть расположено вверху, в правой части панели навигации (см., Например, iMessages).
h) Нижняя панель навигации
Это еще одна версия панели навигации, типичная для Android. Он вызывается нажатием кнопки меню бургера на нижней панели приложения.
i) Side Sheet
Хотя Material также позволяет использовать этот компонент в мобильных приложениях, я бы рекомендовал заменить его более знакомым Bottom Sheet.
j) Раскрывающийся нижний лист
Этот очень красивый компонент Android не является одним из собственных компонентов iOS. Расширяющийся нижний лист — это поверхность, прикрепленная к нижней части страницы. Если пользователь коснется этой поверхности, она развернется в полноценную страницу.
k) Стандартный нижний лист
Стандартный нижний лист является разновидностью нижнего листа и не является компонентом iOS.
16. Какие компоненты отсутствуют в Android
Теперь давайте посмотрим, какие компоненты отсутствуют в библиотеке Android.
a) Элемент управления страницей
Элемент управления страницей показывает, на какой странице находится пользователь. Это не собственный компонент Android.
б) Панели инструментов
Панели инструментов доступны только на iOS.
с) Степперы
Степперы — это стандартный элемент управления iOS, не описанный в Материалах. Мы используем их для ввода небольших значений, таких как количество копий при печати.
г) Всплывающие окна
Всплывающее окно — это всплывающая панель, которая используется в основном на iPad.
Есть одно стандартное приложение для Popovers на iOS: настройка параметров текста в ридерах или браузерах.
17. Различные строки состояния
Строка состояния выполняет одну и ту же функцию на обеих платформах: она показывает время, уровень заряда батареи, а также уровни мобильного и Wi-Fi подключения. Эти индикаторы находятся в разных местах в строке состояния, и их общие визуальные стили также различаются.
iOS и Android Дизайн: чего избегать
Сколько в среднем людей вы видели, использующих устройства iOS и Android одновременно ? Официальные цифры согласно этому исследованию колеблются от 10% до 20%, но эта цифра также включает пользователей Mac, а не только мобильных пользователей.На практике люди склонны использовать только один телефон или планшет в течение определенного периода времени. Если они используют два устройства, чаще всего они работают под одной и той же ОС.
Это означает, что нет необходимости делать точные по пикселям копии дизайна пользовательского интерфейса приложения, пытаясь приспособить обе платформы, с десятками различных размеров экрана, соотношений сторон и разрешений (давайте даже не будем поднимать метки, статус панели, панели навигации, аппаратные кнопки и т. д.).
Напротив, даже если пользователь просматривает одно и то же приложение на iOS и Android, скорее всего, он предпочел бы испытать нативное ощущение на обоих из них.Вот почему подход, используемый многими менеджерами проектов и владельцами продуктов в мобильной разработке, часто оказывается неоптимальным и требует доработки.
Почему это все еще проблема?
Но почему заинтересованные стороны и менеджеры по-прежнему принимают решения, которые часто ухудшают пользовательский опыт, тем самым подрывая их собственные продукты? Это было понятно в начале десятилетия, когда все еще разбирались в разработке для iOS и Android, но эта досадная проблема сохраняется и по сей день.
Основной причиной возникновения такой ситуации может быть обеспокоенность руководителей проектов и разработчиков мобильных приложений, что их пользователи могут запутаться, если они увидят то же приложение на другой платформе и поймут, что оно не дает того же ощущения и пользовательского интерфейса. . Справедливо сказать, что в определенной степени такое мышление имеет смысл, поскольку некоторая степень сходства необходима и приветствуется. Однако зайти слишком далеко и, в крайних случаях, создать точные копии приложений для разных платформ, на самом деле, как правило, гораздо больше вреда, чем пользы.
Конечная цель должна заключаться в достижении правильного баланса — не добиваться идеальной согласованности пикселей, а придерживаться общих дизайнерских идей и сохранять одинаковую навигационную карту вашего приложения для обеих платформ; предоставить те же функции и тот же рабочий процесс, но старайтесь по возможности придерживаться нативного поведения.
Все любят настраиваемые кнопки или причудливую анимацию здесь и там, но люди привыкли к собственным элементам, которые им проще и интуитивно понятнее использовать.
Внимание к пользователям, а не на внешности
Чтобы найти хороший подход к решению этой дилеммы, мы должны начать с конца строки — конечного пользователя.Исследования показывают, что пользователи Android и iPhone — очень разные люди, и если мы стремимся к оптимальному UX, мы должны попытаться понять их шаблоны использования.
Исходя из среднего бюджета люди решают тратить на технологии в месяц ( iPhone: 100,88 долларов, Android: 50,83 долларов ) , учитывая количество селфи, которые они делают в день iPhone: 12, Android: 7 и Получая сообщения, которые они отправляют каждый день iPhone: 57, Android: 26 , легко заметить, что различия существенны, вплоть до такой степени, что мы можем сделать вывод, что существует расхождение в поведении, которое определяет способ использования людьми своих устройств .
Итак, на чем мы должны сосредоточиться при разработке приложений для обеих платформ одновременно?
Прежде всего, по возможности используйте собственные элементы. Даже если вы используете кросс-платформенный фреймворк, большинство компонентов основано на чистых собственных представлениях; так что, если вам действительно не нужно что-то нестандартное, придерживайтесь основ. Людям нравится использовать то, к чему они привыкли, и вы сэкономите время на разработку для более важных функций (и обзоров кода!).
Пользовательские представления определенно могут привнести характер и уникальность в ваше приложение, если они сохранят те же общие идеи и ощущение использования, что и общие: слишком мало и ваше приложение скучно, слишком много, оно излишне яркое и сложное в использовании.
Иногда даже небольшое прикосновение к немного иному пользовательскому представлению может изменить правила игры для вашего приложения, но если вы заполните все экраны новыми элементами, которые пользователи смогут изучить, они могут быть перегружены и потеряться в поисках важной информации. . Неслучайно эти мелкие штрихи называют «полировкой»!
Как подходить к разным компонентам дизайна
Как правило, всегда помните, что каждая платформа имеет свои собственные рекомендации по проектированию. Набор подходов Android основан на материальном дизайне, в то время как Apple доверяет дизайну интерфейса пользователя.Переходя к конкретным компонентам, которые мы должны учитывать при планировании нашего дизайна, следует сосредоточить внимание на нескольких основных частях:
Общий стиль: , если мы не говорим о кроссплатформенном приложении, нам следует подумать о следовании общим рекомендациям по стилю для каждой платформы. В целом дизайн iOS, как правило, более плоский, в то время как Android использует более многоуровневый подход.
Исторически сложилось так, что мобильные платформы влияли друг на друга в течение десяти или более лет, и вы легко можете обнаружить некоторые концепции Android в iOS и наоборот.Например, когда в мобильном мире начали появляться датчики отпечатков пальцев, производители ( и все еще ) экспериментировали с размером и расположением датчика, пытаясь сделать его удобным для как можно большего числа пользователей. В то же время дизайнеры и разработчики также приспосабливались к новой функции, поэтому в итоге визуальные элементы и обратная связь в основном идентичны на обеих платформах (за исключением некоторых экзотических подходов).
Особенности оборудования и шаблоны навигации: это, вероятно, один из самых ярких примеров отрицательных сторон прямого клонирования вашего приложения.Большинство устройств Android по-прежнему имеют удобную дополнительную панель навигации (будь то аппаратное или программное обеспечение на разных устройствах), включая кнопку возврата. Поскольку iOS не предоставляет этого, приложения должны учитывать, где и когда предоставлять кнопку «Назад», обычно в верхнем левом углу каждого экрана.
Кнопка меню (в данном примере квадратная кнопка) также может обеспечивать дополнительные функции для приложений Android. Где это актуально? Например, при открытии меню настроек или аналогичной функции навигации.
До недавнего времени на iPhone также была традиционная кнопка «Домой» от Apple, но с момента появления iPhone X она была отодвинута на второй план, и теперь поток операций в iOS основан на жестах. Если смахивание является важной частью вашего приложения, убедитесь, что между краем контейнера приложения и областью смахивания достаточно подушки, чтобы избежать сложных совпадений смахиваний.
Если ваше приложение зависит от аппаратных функций, таких как Bluetooth, NFC или проводные наушники, вы всегда должны учитывать диапазон различных технических характеристик оборудования, которые вы поддерживаете.Постарайтесь предоставить пользователю надлежащую обратную связь, когда он попытается взаимодействовать с определенной функцией. Если по какой-то причине вам нужно предоставить аппаратную функцию только для одной из двух платформ, обязательно сообщите своим пользователям о различиях.
Глобальные элементы (строки состояния, заголовки и т. Д.): Компоненты, которые появляются на всех страницах вашего дизайна, такие как строка состояния, заголовок навигации и т. Д., Должны быть строго нацелены на создание естественного ощущения, поэтому мы не должны изменять высоту и стиль этих полос.Есть незначительные различия в том, как стилизованы глобальные элементы на обеих платформах. Например, Android использует текст с выравниванием по левому краю, а iOS — заголовок по центру. Строка состояния является встроенным компонентом, поэтому вам не нужно беспокоиться об этом, но помните о различных выемках и соотношении сторон экрана при планировании верхней части вашего приложения.
Navigation: Старые добрые рекомендации Google по материальному дизайну предлагают использовать навигацию по выдвижному меню в приложениях Android, при этом нижняя навигация отстает, но все же остается жизнеспособным вариантом.iOS имеет тенденцию использовать только панель вкладок, которая может ограничивать ваши возможности навигации верхнего уровня, но обеспечивает четкое представление обо всех их сразу. В этом случае обе операционные системы предоставляют аналогичные компоненты, которые могут использоваться в зависимости от сложности вашего приложения, но визуальная разница в двух системах, естественно, должна вас направлять — например, глобальная панель навигации в Android и ее отсутствие в iOS.
Быстрое развитие мобильного оборудования в последние годы привело к появлению множества переменных и неизвестных: полноэкранные телефоны, выемки разных форм и размеров, более широкое использование жестов для навигации по всему устройству и так далее.Все эти изменения предоставляют пользователю беспрецедентные возможности, но могут вызвать боль, когда мы пытаемся выяснить все варианты использования данного экрана в нашем приложении. Учитывая эти опасения, хороший способ избежать путаницы для наших пользователей — сохранить простые и согласованные шаблоны навигации, не перегружая приложение слишком большим количеством жестов, полос и вариантов прокрутки в разных направлениях.
Типография: обе платформы имеют свои шрифты по умолчанию — San Francisco для iOS и Roboto для Android.Если вы не собираетесь использовать собственный шрифт, точно соответствующий вашему общему стилю приложения, вам следует придерживаться значений по умолчанию. Имейте в виду, что пользователи могут изменить свой системный шрифт по умолчанию, и это не повлияет на представления, которые вы настроили с помощью определенного шрифта.
Например, пользователям с дислексией может быть не самое лучшее время в вашем приложении, если они заменили шрифт по умолчанию шрифтом, который специально соответствует их потребностям. Если вы поддерживаете пользователей, которые могут использовать нелатинские шрифты (например, кириллица, арабский и т. Д.)), убедитесь, что ваши пользовательские шрифты также содержат эти дополнительные символы. Если вы увлекаетесь играми, вы, вероятно, видели таблицы лидеров с высокими результатами, достигнутыми российскими игроками, имена которых выделяются своим другим шрифтом. Это всего лишь небольшая ошибка, допущенная на этапе разработки, а не «функция» для конкретных игроков, и хотя она, вероятно, не заставит пользователей отказаться от вашего приложения, она определенно может привести к ухудшению пользовательского опыта или привести к жалобам или плохим отзывам.
Другие компоненты: кнопки, переходы между экранами, анимация, микровзаимодействия, листы действий, предупреждения и все другие типы элементов управления потоком выходят за рамки этой статьи, но они должны соответствовать общему принципу, который мы применили к другому дизайну. элементы — обе платформы не поощряют чрезмерное количество настраиваемых элементов, поскольку они могут отвлекать и сбивать с толку пользователя; Когда дело доходит до дизайна, первое впечатление обычно остается последним для многих пользователей, и поэтому так важно с самого начала привлечь внимание пользователей и заставить их чувствовать себя, так сказать, как дома.
В реальном мире вы можете увидеть некоторые очень популярные исключения из правил, которые мы обсуждали — приложения iOS, которые следуют рекомендациям по материальному дизайну, а некоторые продукты Android соответствуют рекомендациям Apple по человеческому интерфейсу, но эти приложения имеют свой собственный, проверенный стиль. Пользователи знакомы с приложениями и их дизайном, и для них имеет смысл придать немного более индивидуальный вид.
Кросс-платформенный подход реализован правильно
С другой стороны, если ваш проект основан на кроссплатформенном решении (например, React Native, Flutter, Xamarin и т. Д.)), вам следует подумать о том, на какой основной платформе вы хотите сосредоточиться, и начать с нее.
В последние годы эти новые фреймворки значительно повысили производительность при разработке кроссплатформенных приложений. Все больше и больше компаний переходят на эту парадигму разработки, поскольку она обеспечивает более короткое время выхода на рынок, превосходную рентабельность и меньше технических барьеров, а ключевыми недостатками являются ограниченная поддержка функций и в некоторых случаях неоптимальный UX.
Хотя практически все старые решения для кроссплатформенной разработки основывались на веб-представлениях и поэтому испытывали серьезные проблемы с быстродействием на многих устройствах, в настоящее время мы можем использовать собственные компоненты даже в кросс-платформенных подходах.Это серьезное улучшение повлияло на рынок во многих отношениях и приблизило все мобильные платформы на один шаг к унификации визуального опыта пользователя на различных устройствах и платформах.
Если вы решили перейти на кроссплатформенное решение, вы можете начать как в стандартном нативном приложении, построив каркас своего приложения. После того, как у вас есть основные приоритеты и они работают (настройка базовых зависимостей, построение MVP, достижение конкретных этапов проекта, выпуск вашей первой версии и т. Д.), вы можете легко разделить свои основные проекты для двух приложений, используя инструменты для конкретной платформы, которые предоставляет каждая платформа. В зависимости от размера вашей команды и доступных временных рамок вы можете даже подумать о включении этих настроек в версию 1, чтобы избежать путаницы в будущем, когда в данной версии платформы все будет выглядеть иначе.
После того, как все сказано и сделано, вы должны оценить, какой из этих принципов будет применим для вашего приложения. Как и в любом другом начинании в нашей отрасли, вы должны стараться следовать инструкциям, слегка изменяя их в соответствии со своими потребностями.Например, если навигация по ящику — это то, что действительно имеет смысл для вашего простого пятиэкранного приложения, вам не нужно придумывать сложные решения для каждой платформы. Сделайте очевидным и легким для пользователя распознавание ваших настраиваемых кнопок и инструментов, независимо от того, являются ли они ключевыми компонентами или просто незначительными настройками.
Хороший дизайн соответствует привычкам пользователей
Подводя итог, мы можем повторить то, что мы уже знаем: хороший дизайн — это дизайн, который учитывает привычки пользователей в каждой операционной системе.Небольшая доработка в конце может помочь отличить среднее приложение от отличного.
Часто ваше приложение не предоставляет достаточно уникальных функций, чтобы привлечь пользователей одним лишь контентом. Большинство людей описывают свое решение выбрать один продукт, а не другой, «интуитивно». Эта категория пользователей основывает свой выбор в первую очередь на том, как они чувствуют себя при использовании приложения, неявно оценивая отзывчивость, общий выбор стиля, цветовую палитру и отдельные визуальные компоненты, которые они видят на экране.
Поэтому постарайтесь, чтобы ваш продукт выделялся не только своими удивительными характеристиками, но и высококачественной упаковкой, соответствующей качеству предоставляемых услуг.
Дизайн для собственных приложений iOS и собственных приложений Android | автор: Kshitija purohit
Finmagix был родным приложением, и перед тем, как начать любой процесс UX, я ознакомился с рекомендациями по материалам и рекомендациями по человеческому интерфейсу iOS. Ниже я перечисляю некоторые важные моменты, которые следует учитывать при разработке любого нативного приложения.
Gestures,
Так у вас есть слайдер? Расскажите нам о сведении, перетаскивании, масштабировании, повороте, встряхивании, шестидюймовых смартфонах, левшах, наведении курсора мыши, кинетике, обнаружении движения.
IOS GestureAndroid Gesture
Typography,
Android: Roboto
IOS: SF Pro (San Francisco)
Typography for IOS and Android
Navigation,
Back navigation для приложений Android и IOS. Перемещение между экранами — обычное действие в мобильных приложениях.Внизу устройств Android есть универсальная панель навигации. Использование кнопки «Назад» на панели навигации — это простой способ вернуться к предыдущему экрану или шагу, и он работает почти во всех приложениях Android.
Android Navigation
Глобальной панели навигации нет, поэтому мы не можем вернуться назад с помощью глобальной кнопки «Назад» в собственном дизайне приложения для iOS. В собственном приложении должна быть панель навигации с кнопкой возврата в верхнем левом углу.

Метод возврата назад	Контекст, в котором это работает
Нажмите Действие «Назад» в верхнем левом углу экрана	Любой экран, на котором отображается действие «Назад».
Проведите вправо от левого края экрана	Любой экран, на котором отображается действие «Назад».
Нажмите «Отмена» или «Готово» действие в верхней части экрана	Модальные виды
Проведите вниз по содержимому экрана	Модальный или полноэкранный режим (например,грамм. photos, other media) просмотров

Тип элемента	Стиль
Заголовок страницы (без прокрутки)	34pt жирным шрифтом # 000
Заголовок страницы (прокручивается)	17pt, средний # 030303
Текст абзаца, Заголовки пунктов списка, Ссылки	17pt нормальный # 000
Дополнительный текст	15pt нормальный # 8A8A8E
Третичный текст, Подписи	13pt нормальный # 8D8D93
Кнопки, Элементы управления вводом текста	17pt нормальное, разные цвета
Этикетки панели действий	10pt стандартный # 8A8A8E

Полные иллюстрированные гайдлайны по дизайну под iOS 13

Размеры экранов iPhone

Предстоящие воркшопы

Артборд какого размера мне следует использовать для дизайна iPhone?

iOS Точки vs. Пиксели

iPhone Layout

Строка состояния

Панель навигации

Панель вкладок

Индикатор «Домой»

Навигация

Основные пункты назначений приложений

«Назад»

Поиск

Модальные окна (Modal Sheets)

Элементы интерфейса и элементы управления

Списки (AKA Табличные представления)

Кнопки

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

Текстовые поля

Переключатели (Switches)

Выбор даты и / или времени

Экраны выбора

Типографика

Текст заголовка

Текст по умолчанию

Вторичный текст

Третичный текст и подписи

Минимальный размер текста

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

Суперэллипс iOS (AKA «Squircle») Форма иконки

Как создать в Sketch Apple-иконку в форме суперэллипса

Как создать в Figma Apple-иконку в форме суперэллипса

Другие особенности iOS

Размер цели нажатия (Tap Target Size)

Темная тема

Ресурсы

Таблица размеров экранов iPhone

Шаблон дизайна iPhone 11

Дополнительные ресурсы

Подводя итог

Последнее примечание ?

Справочник по дизайну приложений для iPhone и iPad (iOS)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифты

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

Пиктограммы

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

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

32 отличия дизайна мобильного приложения под iOS и Android | by Futura by red_mad_robot

Дизайн мобильных приложений: разработка UX/UI дизайна под Android, iOS приложения

Проектирование, тестирование, дизайн

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

Дизайн мобильных приложений | Закажите дизайн для iOS & Android

Дизайн мобильных приложений и игр для iOS и Android

Отвечаем на часто задаваемые вопросы:

Руководство по дизайну приложений для iOS: принципы и вдохновляющие примеры

Создаете прототип приложения для iOS? Вдохновляйтесь этими главными советами и 20 потрясающими примерами дизайна приложений для iOS!

11 главных советов по дизайну приложений iOS

1. Тщательно выбирайте цветовую палитру

2. Используйте цвет для демонстрации взаимодействия

3. Адаптируйте свою цветовую схему к светлому и темному образу.

4. По возможности используйте пользовательскую типографику iOS.

5. Когда использовать Сан-Франциско и Нью-Йорк

6. Не занимайте место логотипом

7. Не создавайте собственные настройки внешнего вида для светлого и темного цветов

8. Обеспечьте адекватную контрастность в темноте.