Дизайн для iPhone X

Руководство по проектированию приложений для iOS 11.

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

Более высокий экран

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

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

Если сравнивать с оригинальным iPhone, то мы получим увеличение высоты на 332 pt, что эквивалентно семи навигационным панелям. Будущее выглядит фантастическим для контента и мрачным для гамбургер-меню.

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

Вырез

Возможно, самый спорный аспект нового дизайна находится в верхних 10% экрана. Корпус датчика, также известный как «ушко», представляет собой отвлекающий элемент, который не дает экрану iPhone X стать по-настоящему безрамочным. Технологически без него пока невозможно обойтись, ведь в нем находятся Face ID, камера и динамик. Это мудрое дизайн-решение — один из самых больших компромиссов, на которые Apple пошла за последние годы. Но, посмотрев, как другие производители телефонов решают эту проблему, не могу сказать, что только Apple пришлось идти на компромисс.

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

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

Как использовать вырез под датчики и камеру

Большие заголовки

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

Большая строка состояния

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

Рекомендации по планированию безопасной зоны

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

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

iPhone X в альбомной ориентации

В альбомной ориентации строка состояния скрыта, чтобы контент максимально заполнял пространство. Панель навигации уменьшена до 32 pt, панель вкладок — до 30 pt, а индикатор кнопки «Домой» — до 23 pt. Большинство пользователей не переключаются в альбомный режим на iPhone X, однако все равно существуют важные сценарии его использования.

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

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

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

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

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

Закругленные углы

Ещё одна проблема — обрезание контента в угловых зонах экрана iPhone X. Если вы не скрываете строку состояния или индикатор кнопки «Домой», то не столкнетесь с ней. Но для приложений, которые в основном используются в полноэкранном режиме — вроде камеры, — важно обеспечить в этих зонах достаточные отступы. Чтобы кнопки соответствовали закругленным углам, рекомендуется использовать радиус около 16 pt.

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

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

Смерть меню-«гамбургера»

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

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

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

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

IPhone X использует панель вкладок. Если в приложении несколько разделов, нет причин её не использовать. В альбомном режиме iOS 11 она занимает еще меньше места.

Меню-«гамбургер» широко распространено в интернете, и это, возможно, одна из причин того, почему мобильный веб-опыт не догнал нативный опыт. Даже React Native использует собственные средства управления. Однако в iOS, особенно для iPhone X, стоит использовать панель вкладок.

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

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

Stack Views

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

Apple рекомендует сначала использовать Stack Views, затем Auto Layout

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

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

Разрешения iPhone

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

iPhone 8 Plus — единственный iPhone (автор забыл про модели 6 Plus, 6s Plus, 7 Plus — прим. переводчика), который больше похож на iPad в альбомном режиме. То есть, может появиться левая панель навигации, заменив панель вкладок.

Иконка приложения

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

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

@1x-размер больше не поддерживается для iPhone. Иконки приложений теперь имеют два размера: @2x и @3x. Существует три типа: иконка приложения, Spotlight и «Настройки». Для iPad используются в размерах @1x и @2x.

Суперэллипс

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

Сетка иконки

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

Цвета

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

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

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

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

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

Общее правило — 44pt для кнопок и 12pt для небольшого текста, 17pt для основного текста и 20pt и более для заголовков.

Интервалы и выравнивание

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

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

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

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

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

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

Строка поиска

Если у вас много контента, добавляйте функцию поиска.

Панель инструментов

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

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

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

Состояния

Неактивные вкладки можно помечать серым, чтобы они не привлекали к себе внимания.

Таблицы (Table View)

Table View — очень распространенная панель для размещения контента. Большинство приложений используют такую форму, потому что она очень проста и может настраиваться вплоть до самых маленьких элементов.

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

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

Разделы

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

Collection View

Для отображения контента сеткой можно использовать Collection View.

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

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

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

Диалоговое окно «Действия» позволяет обмениваться контентом (текстом, изображениями, ссылками) с функциями iOS, такими как Airdrop, «Избранное», «Закладки» и «Приложения» (а именно Mail, Facebook, Twitter). Настраивать внешний вид диалогового окна нельзя.

Модальное окно на весь экран

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

Клавиатуры

Клавиатура используется для ввода информации в текстовые поля, такие как «Поиск», «Чат» или «Логин». Она настраивается для URL, электронной почты, контактов и даже эмодзи. Можно выбрать светлое или темное оформление, а также настроить названия кнопок действий.

Подборщик (Picker)

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

Сегментированный элемент управления

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

Слайдеры

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

Индикатор выполнения

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

Переключатель

Используйте его только для быстрого включения и выключения.

Stepper

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

Иконки iOS

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

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

Ресурсы

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

UI Kit от Apple

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

UI Kit от Apple IOS 11 ОТ Great Simple Studio

Наиболее полный UI Kit iOS 11 со множеством элементов.

Векторные макеты устройств

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

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

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

Что не стоит делать

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

iOS-рекомендации от ivomynttinen

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

0
32 комментария
Написать комментарий...
Alex Chalov

WWWWWHHHHHHHHHHYYYYYYYYYYYYYYYYYYYY

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Mike Kosulin

Так может не стоит делать скругления?

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Yury Molodtsov

Уши вполне себе используются во многих случаях.

Ответить
Развернуть ветку
Alex Chalov

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

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

Ответить
Развернуть ветку
Yury Molodtsov

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

Ответить
Развернуть ветку
Yury Molodtsov

Ну а как еще экран вписать в переднюю панель?

Ответить
Развернуть ветку
Mike Kosulin

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

Ответить
Развернуть ветку
int3lligent

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

Ответить
Развернуть ветку
Владимир

Apple просто не могла сделать нормально, как другие производители, нет, у неё своё виденье, надо сделать монобровь, чтобы все мучались, и дизайнеры, и разработчики и пользователи. Всех удачней у Xiaomi Mi MIX имхо.

P.S. не слезу с седьмого, пока не пофиксят это недоразумение %)

Ответить
Развернуть ветку
Yury Molodtsov

Удачнее это странный динамик и фронталка внизу?

Ответить
Развернуть ветку
Mike Kosulin

Если так необходимо, то можно перевернуть, нет?

Ответить
Развернуть ветку
Yury Molodtsov

Действительно, люди всегда же так чатятся.

Ответить
Развернуть ветку
Mike Kosulin

Чатятся с постоянно включенной фронталкой?

Ответить
Развернуть ветку
Yury Molodtsov

Ну вот как ты себе это представляешь?
— Ой, у меня звонок, надо телефон перевернуть.

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

Ответить
Развернуть ветку
Mike Kosulin

Кто-то серьезно пользуется видеозвонками внезапно?

Ответить
Развернуть ветку
Yury Molodtsov

Куча людей на самом деле, даже на улице часто встречаю, особенно в Европе — там вообще не стесняются.

Ответить
Развернуть ветку
Mike Kosulin

Внезапный видеозвонок? Серьезно?)

Ответить
Развернуть ветку
Worldwide

Да, у меня, например, друг так общается очень часто...

Ответить
Развернуть ветку
Ника Бойе

я тоже не понимаю любителей внезапных видеозвонков; но такие люди и правда есть :)

Ответить
Развернуть ветку
AS

И сенсор для пальца сзади :D

Ответить
Развернуть ветку
Artem Ilyin

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

Ответить
Развернуть ветку
Жаннур Кенжеханулы

Так скорее всего они и не будут фиксить, а наоборот масштабируют.
https://tjournal.ru/62129-smi-apple-v-2018-godu-predstavit-tri-novyh-iphone-bez-knopki-domoy
И если так будет, то iPhone 7 ещё пару лет будет самым продаваемым смартфоном в мире.

Ответить
Развернуть ветку
AS

Ну хер знает… Монобровь — спорное решение, но этот пациент в реальности, а не на рендерах выглядит действительно как китаец за 15к. Я хз, стоковый это ланчер или нет, если да — то к ним походу старые дизайнеры самсунга перебежали, такую безвкусицу из 2010 надо ещё умудриться сделать (нахер юзать симпатичные круглые иконки как в Пикселе?)
Про отступы дизайнеры тоже не слышали ничего, видимо.

Ответить
Развернуть ветку
Alexander Matveev
Веб-сайты в альбомном режиме

Отдельные правила пилить под iPhone X теперь?

Ответить
Развернуть ветку
Mike Kosulin
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Mike Kosulin

Поэтому телеграм так долго обновляли)

Ответить
Развернуть ветку
Yury Molodtsov

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Sergey Belikov

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

Ответить
Развернуть ветку
Dmitry Smolensky

всеми конечностями за отказ от гамбургера!!! а вообще отличная статья получилась!

Ответить
Развернуть ветку
Слон Петрович

Кто вы все такие? Инопланетяне метрового роста с крошечными ручонками?

Ответить
Развернуть ветку
Undisputed

*удалено

Ответить
Развернуть ветку
Николай Лукин

Очень круто все разъяснено, емко и понятно.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
29 комментариев
Раскрывать всегда