Дизайн iphone x: Дизайн для iPhone X / Хабр

Дизайн для iPhone X / Хабр

iPhone X (или iPhone 10) уже официально представлен, и его выпуск назначен на 3 ноября этого года. Данное устройство может смело похвастаться одной из своих характеристик: Super Retina Display (жидкокристаллический дисплей) с разрешением 1125 × 2436 пикселей. Кроме того, в верхней части экрана будет предусмотрена специальная выемка – очередная футуристическая особенность разблокировки нового iPhone, благодаря которой устройство идентифицирует вас по чертам вашего лица.

Разработка дизайна приложений для iPhone X может показаться разработчикам нелегкой задачей, однако, с другой стороны, новый iPhone дает им возможность воплотить свои самые смелые идеи в жизнь. Ширина экрана устройства в вертикальном режиме такая же, как у iPhone 6, 7 и 8, но высота экрана была увеличена на 145pt, в результате чего экран визуально увеличивается на 20%. Для создания @ 1x-макетов вам необходим артборд со следующими параметрами: 375×812px.

Дизайн приложение для iPhone 8, расположенном слева, автоматически адаптируется для iPhone X (тот, что справа)

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

Давайте уже начинать

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

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

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

Учитывайте обновления, внесенные в строку состояния. В результате того, что в новом iPhone сенсоры расположены в верхней части дисплея, строка состояния также претерпела изменения: теперь она разбита на две части. Если интерфейс вашего приложения каким-либо образом использует данное пространство – которое до недавнего времени составляло 20pt, а сейчас – 44pt – то вам придется обновить интерфейс, поскольку в iPhone X он будет длиннее. Также убедитесь в том, что интерфейс не будет изменяться во время телефонного звонка или при использовании других приложений (например, навигационного приложения), что для предыдущих версий iPhone является распространенной проблемой.

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

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

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

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

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

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

Больше цветов. Новый дисплей Super Retina Display обеспечивает еще больше цветов: цветовая модель P3 заменила sRGB, а это значит, что цвета стали еще ярче и насыщенней. Такое нововведение будет особенно хорошо заметно при просмотре видео или фотографий.
(впервые цветовую модель P3 стали использовать в iPhone 7; эта идея принадлежит Marcelo Ávalos)

Будьте внимательны при настройке пользовательских жестов. Поскольку в iPhone X уже не будет кнопки «home», пользователям придется взаимодействовать с данным устройством (больше, чем когда бы то ни было) только с помощью жестов. При касании пальцами экрана пользователь переходит в главное меню или в многофункциональный режим. Кроме того, при перемещении home-индикатора влево или вправо пользователь может переключаться между открытыми приложениями в многофункциональном режиме. Для того чтобы перейти в раздел «Уведомления» (Notification) или в Центр управления просто потяните экран вниз. Для игр могут быть предусмотрены свои специальные жесты, отменяющие стандартные iOS-жесты.

Вы также можете задать свои собственные жесты в «edge protect» – особенности нового iPhone, благодаря которой вы можете задавать свои уникальные жесты поверх жестов, стандартных для iOS (тем не менее, только единожды). Однако используйте данную особенность таким образом, чтобы ваше приложение не казалось пользователям чересчур сложным.

Face ID. В предыдущих версиях iPhone была предусмотрена превосходная функция – Touch ID – благодаря которой пользователи могли разблокировать свои устройства, а также задать для некоторых приложений пароль, разблокировка которого происходила с помощью их отпечатков пальцев. Данный сенсор был размещен в кнопке «home». Поскольку такой функции уже нет в iPhone X, разработчики Apple решили представить своим фанатам более безопасную и эффективную замену – Face ID. Для создания такой особенности разработчики задействовали поистине умопомрачительные алгоритмы, с помощью которых устройство определяет черты лица своего владельца. Несомненно, такая особенность внесет много всего нового в интерфейс приложений.

Постарайтесь использовать такое нововведение при работе с вашими (не бедствующими) клиентами – счастливыми обладателями iPhone X. Также постарайтесь не ссылаться на Touch ID в меню вашего приложения – замените его Face ID.

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

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

TL;DR

• Phone X будет на 145pt длиннее, так что для разработки дизайна применяйте 375×812pt  вместо 375x667pt.
• В iPhone X применяется @ 3x.
• Разрабатывайте полноэкранные приложения – не стоит скрывать уникальные характеристики нового устройства.
• Располагайте важный контент посередине для того, чтобы сенсоры и углы устройства не заслоняли его.
• Новая строка состояния теперь стала длинней, она разделена на две части, а ее длина составляет 44pt вместо 22pt.
• Обновите полноэкранные изображения для их соответствующего отображения на новом устройстве.
• Не располагайте кнопки внизу экрана устройства, рядом с home-индикатором.
• Не скрывайте home-индикатор: такое решение стоит применять только в случае крайней необходимости.
• Теперь вы можете насладиться более яркими и насыщенными цветами благодаря P3.
• Задавайте пользовательские жесты для кнопок, располагающихся рядом с строкой состояния или home-индикатором, таким образом, чтобы пользователи не путали их с привычными нативными жестами.
• Поскольку Face ID заменил Touch ID, вам необходимо обновить ваш UI: удалите все упоминания об Touch ID.
• При разработке пользовательской клавиатуры не добавляйте Emoji- и кнопки диктовки.
• Более длинная навигационная панель особенно хорошо подходит к удлиненному дисплею iPhone X.

Как заранее проверить свое приложение?

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

Создавая дизайн для iPhone X. Руководство по дизайну для iOS 11

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

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

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

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

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

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

Вырез

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

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

http://ux.pub/dizajn-dlya-iphone-x-kak-ispolzovat-vyrez-pod-datchiki-i-kameru/

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

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

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

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

http://ux.pub/dizajn-dlya-iphone-x-nizhnie-elementy-upravleniya/

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

При создании дизайна для 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). Чтобы лучше понять разницу между точками и пикселями, я настоятельно рекомендую посмотреть это видео.

http://ux.pub/rukovodstvo-dizajnera-po-dpi-i-ppi/

Разрешения iPhone

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

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

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

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

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

@ 1x размер больше не поддерживаются для iPhone, поэтому вам не нужно их генерировать. Иконки приложений теперь имеют 2 размера: @ 2x и @ 3x. Существует 3 типа: иконка приложения, 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 – очень распространенный паттерн для размещения содержимого. Большинство приложений используют форму Table View. Это потому, что он может быть очень простой или настраиваемый вплоть до самых маленьких элементов.

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

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

Разделы

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

Collection View

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

Сетки Collection View

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

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

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

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

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

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

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

Клавиатуры

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

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

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

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

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

Слайдеры

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

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

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

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

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

Stepper

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

Иконки iOS

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

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

Ресурсы

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

UI Kit от Apple

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

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

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

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

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

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

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

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

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

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

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

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

---

Перевод статьи designcode

iPhone X: как его спроектировал Джони Айв из Apple

Apple помогла принести персональные компьютеры в дом с помощью своих первых компьютеров Mac, произвела революцию в том, как мы слушаем музыку с помощью iPod, и сделала суперкомпьютер доступным каждому с помощью iPhone. В 2017 году компания из Купертино, штат Калифорния, снова обратилась за смартфоном со своим iPhone X, одним из 25 лучших изобретений года по версии TIME.

Это самое большое изменение, которое Apple внесла в iPhone за последние годы, и необходимое для самого ценного бренда в мире. Apple по-прежнему получает львиную долю прибыли в индустрии смартфонов: по оценкам Strategy Analytics, в третьем квартале 2017 года на долю Apple приходилось 70% мировой доли операционной прибыли смартфонов. Но за последние несколько лет ее iPhone в основном получали дополнительные обновления, такие как как более быстрые процессоры, улучшения камеры и водонепроницаемость. Тем временем производители телефонов Android были заняты экспериментами с более интересными концепциями, такими как экраны без рамок и дизайны, рассчитанные на будущее.

iPhone X с его стеклом от края до края и системой распознавания лиц, несомненно, будет рассматриваться как ответ критикам, которые периодически ставят под сомнение способность Apple к инновациям. (Это также произносится как «iPhone 10».) Но iPhone X меньше отвечает на эти насущные вопросы — опередит ли телефон конкурентов, таких как Samsung, и даст ли он продажи блокбастеров на фоне сообщений о производственных проблемах. Руководители Apple говорят, что iPhone X — это наметка курса, по которому будут двигаться продукты Apple. «Этот телефон действительно хорошо настраивает нас на следующие 10 лет, — говорит Дэн Риччио, старший вице-президент Apple по разработке аппаратного обеспечения.

Достижение этого означает отказ от некоторых вещей, к которым мы привыкли в наших смартфонах. Например, чтобы сделать экран iPhone X максимально широким, не увеличивая при этом сам телефон, Apple пришлось избавиться от кнопки «Домой». «Необходимо было решить эти необычайно сложные проблемы, — говорит Джонатан Айв, главный дизайнер Apple.

Среди этих задач было решить, как именно заменить кнопку, которая была общей для всех iPhone за последние десять лет. Вырезание этого круглого ключа из дизайна iPhone X означало, что Apple пришлось переосмыслить, как выполнять основные задачи, такие как разблокировка телефона, вызов Siri и запуск Apple Pay, среди других действий. Поскольку кнопки «Домой» нет, Apple внедрила серию жестов в программное обеспечение iPhone X для навигации по его интерфейсу. Но попасть туда не всегда легко. Когда дизайнеры Apple не могут решить ту или иную проблему, они обращаются за помощью к прошлому. «Обращение внимания к тому, что произошло в прошлом, на самом деле помогает вам поверить в то, что вы найдете решение», — говорит Айв, тихий 50-летний англичанин. «Вера не является суррогатом инженерной компетентности, но она, безусловно, может помочь укрепить веру в то, что вы найдете решение. И это важно».

Apple склонна отказываться от устаревших технологий до того, как мир будет готов отказаться от них. Решение убрать круглую кнопку под экраном iPhone было принято после того, как Apple убрала 3,5-мм разъем для наушников в прошлогоднем iPhone 7. Еще в 1998 году Apple была одним из первых производителей компьютеров, отказавшихся от флоппи-дисковода.

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

Он не ошибся: некоторые так сильно восприняли решение Apple удалить порт для наушников в прошлом году, что петицию о сохранении этого решения распространяли в Интернете. (В настоящее время у него более 300 000 подписей.) Некоторые обозреватели iPhone X раскритиковали новые навигационные функции, созданные Apple для замены кнопки «Домой». (Fast Company назвала телефон «кошмаром пользовательского опыта», обозреватель Quartz посетовал на «простоту нажатия кнопки».) Я знаю об этих последствиях. «Это не обязательно самое удобное место, когда вы верите, что есть лучший путь», — признает он. «[Потому что] это означает переход от того, что казалось успешным».

За этими изменениями и сокращениями часто скрывается фанатичное внимание Apple к деталям. Даже если иногда за это приходится платить. Например, когда компания отказалась от разъема для наушников, она предложила альтернативу за 159 долларов в виде беспроводных наушников AirPod, которые мгновенно подключаются к телефону, как только вы открываете корпус наушников. Разговаривая с Айвом, становится ясно, откуда взялась эта одержимость деталями. Он говорит, что учитывает не только элементы, которые пользователи сразу заметят, такие как Face ID в iPhone X, но и те, которые они не заметят. «Есть определенные вещи, о которых вы, как пользователь, очень хорошо осведомлены, и другие вещи, о которых вы знаете, но подсознательно», — говорит Айв. «Возможно, подсознательный пример — это просто природа того, как дисплей iPhone X интегрирован в корпус из нержавеющей стали и стекла».

iPhone X стал первым среди смартфонов Apple, помимо того, что стал первым смартфоном без кнопки «Домой». Это также первый iPhone с OLED-экраном (который производители телефонов Android, такие как Samsung, используют на своих устройствах в течение многих лет), и это первый iPhone, который стоит 999 долларов, что делает его таким же дорогим, как MacBook Air. Для Айва логика проста: лучшая технология просто дороже. «Как и следовало ожидать, интеграция огромной вычислительной мощности в такое маленькое устройство имеет финансовые последствия», — говорит он.

Apple указывает на менее дорогих братьев и сестер iPhone X, iPhone 8 и 8 Plus, а также на другие более старые смартфоны, которые она продает, как на доказательство того, что она понимает, что не все готовы платить 1000 долларов за новый телефон. «Наша цель всегда состоит в том, чтобы предоставить то, что мы считаем лучшим из возможных продуктов, а не всегда самую низкую стоимость», — говорит Риччио.

Говоря о цене, Айв напомнил мне, как мир воспринимал первый iPhone, когда он был представлен в 2007 году. В то время 500 долларов были высокой ценой для смартфона. Но это потому, что Apple всегда воспринимала iPhone как нечто большее, чем просто телефон. Джобс представил это устройство, назвав его «iPod, телефон и интернет-коммуникатор». «Люди не обязательно имели дело с продуктом, потому что в названии продукта было слово «телефон», — говорит Айв.

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

Свяжитесь с нами по телефону по адресу [email protected].

Дизайн для iPhone X — Блог Marvel

iPhone X ( читать: iPhone ten ) официально здесь, ну, это будет 3 ноября. Он предлагает дисплей Super Retina от края до края с разрешением 1125×2436 пикселей. Он также имеет вырез в верхней части экрана, где вы можете найти некоторые футуристические функции разблокировки лица. Дизайн для iPhone X принесет новые вызовы, но также и новые возможности для дизайна.

Ширина устройства в портретном режиме такая же, как у iPhone 6, 7 и 8, но на 145 pt выше, что приводит к увеличению вертикального пространства на ± 20%. При разработке дизайна для iPhone X @ 1x вам понадобится артборд размером 375×812 пикселей. Вы не будете экспортировать изображения в формате @ 2x, как на iPhone 8, но в формате @ 3x, как на iPhone 7-8 Plus, благодаря новому дисплею Retina.

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

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

Приступим к дизайну iphone X

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

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

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

По центру и вставка важной информации .

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

Новая строка состояния.

Из-за датчиков в верхней части дисплея новая строка состояния разделена на 2 части. Если ваш пользовательский интерфейс делает что-то особенное с этим пространством (ранее высота 20pt, теперь 44pt), вам нужно будет обновить свой интерфейс, потому что он будет выше на iPhone X. Убедитесь, что его можно динамически изменять по высоте. Замечательно то, что высота не изменится, если пользователь звонит по телефону или использует навигационное приложение, как это было раньше на других iPhone. 9разделенная и более высокая строка состояния

Покажите новую строку состояния.

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

Полноэкранные изображения.

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

Не размещайте интерактивные элементы управления внизу экрана.

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

Не скрывать индикатор дома (постоянно).

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

Другие цвета.

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

(Обновление: цветовая гамма P3 была добавлена ​​после выхода iPhone 7, спасибо Марсело Авалосу)

Проведите пальцем вверх, будьте внимательны при использовании жестов.

Поскольку физической кнопки «Домой» больше нет, вы взаимодействуете со своим iPhone (больше, чем когда-либо) с помощью жестов. Когда вы проводите пальцем вверх, вы возвращаетесь домой или переходите к режиму многозадачности. Проводя пальцем влево и вправо по домашнему индикатору, вы переключаетесь между открытыми многозадачными приложениями. Проведя пальцем вниз от верхней части экрана, вы попадете в Центр уведомлений или Центр управления. Более того, в играх вы можете использовать собственные жесты, которые могут переопределять собственные жесты iOS. Вы можете использовать свои собственные жесты, внедрив «защиту краев», которая представляет собой функцию, которая сначала будет отдавать предпочтение конкретному жесту приложения, а не жесту ОС, но только один раз. Используйте это с осторожностью, потому что пользователю будет сложнее использовать системные функции.

Идентификатор лица.

Предыдущий iPhone имел замечательную функцию Touch ID, которая позволяла пользователям разблокировать свое устройство или выполнять действия, заблокированные паролем, в приложениях с помощью отпечатка пальца. Этот датчик был спрятан внутри кнопки «Домой», поскольку он ушел в iPhone X, Apple заменила его более продвинутым и безопасным способом разблокировки вашего устройства. Войдите в Face ID, он использует несколько действительно отличных алгоритмов для определения вашего лица и разблокировки вашего устройства. Это покажет новый пользовательский интерфейс в приложениях, убедитесь, что вы реализовали его для своих (богатых) пользователей, у которых есть iPhone X. Также убедитесь, что вы больше не ссылаетесь на Touch ID в своем онбординге или меню, замените его на Face ID .

Пользовательские клавиатуры.

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

Большие панели навигации.

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

TL;DR

• iPhone X на 145pt выше , поэтому дизайн для 375×812pt вместо 375x667pt
• iPhone X использует @ 3x активов .
• Создайте полноэкранный режим , не скрывайте уникальные функции устройства.
• Центрируйте важное содержимое вашего пользовательского интерфейса, чтобы убедиться, что оно всегда видно и не скрыто датчиками или углами устройства.
• A новый более высокий, разделенный на два строка состояния , ранее 22pt, теперь 44pt.
• Полноэкранные изображения могут/должны быть обновлены для полного отображения.
• Не добавлять кнопки внизу экрана, рядом с индикатором Home.
• Не прячьте индикатор дома , только когда это действительно необходимо.
• Более богатые и насыщенные цвета благодаря цветовому спектру P3.
• Имейте в виду пользовательских жестов рядом с индикатором «Домой» и строкой состояния, не путайте с ожидаемыми родными жестами пользователя.
• Face ID заменяет Touch ID, обновляет пользовательский интерфейс и заменяет текстовые ссылки на Touch ID.
• Пользовательские клавиатуры не требуют добавления кнопок эмодзи и диктовки.
• Большие панели навигации будут отлично смотреться и анимироваться на этом высоком дисплее.

Или посмотрите видео Apple на Дизайн для iPhone X .

Как просмотреть пользовательский интерфейс приложения?

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

Где я могу найти ресурсы для дизайна iOS 11 и iPhone X?

Вам повезло, у Apple есть отличные новые ресурсы для Sketch, Photoshop и Adobe XD. Вы можете найти их здесь: Apple Design Resources.

Примечание. Большая часть этой информации взята из руководства Apple по пользовательскому интерфейсу.

Первоначально эта статья была опубликована в блоге In The Pocket.

Об In The Pocket

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