Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout. Более, чем когда-либо, Apple отдает предпочтение адаптивным макетам, чтобы ваши дизайны работали хорошо на различных устройствах.

Design StackViews 80x50 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Вот как макет адаптируется с iPhone на iPad Pro. Пользовательский интерфейс больше расширяется, чем увеличивается. Для более крупных экранов, как на iPad и iPhone 6 Plus в ландшафтном режиме, вместо панели вкладок появляется панель навигации слева. Скачайте файл Keynote.

Как Fluid помогает вам настраивать дизайн на основе размера артборда. Скачайте файл Sketch.

Шрифт Francisco Font

После релиза iOS 9 и El Capitan, San Francisco стал шрифтом по умолчанию. Я советую вам посмотреть видео (работает только в браузере Safari), чтобы понять, как он влияет на дизайн iOS.

Design Typography 80x40 - Полное руководство по дизайну iOS 9 в Sketch

Трекинг шрифта SF

iOS 9 автоматически настраивает трекинг и Text/Display для San Francisco на основе размера шрифта. Благодаря этому шрифт всегда легко читаем. В размере 20 pt или более нужно использовать SF UI Display, в других случаях используйте SF UI Text. Эти значения трекинга можно применять только в Photoshop, но теперь есть формула для конвертации в Sketch.

iOS Tracking 80x65 - Полное руководство по дизайну iOS 9 в Sketch

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

3D Touch

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

Screen 3DTouch 80x47 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Точки и пиксели в iOS 9

Разработчики работают с точечными значениями, так что очень важно понимать их разницу с пикселями. Когда впервые был представлен iPhone, две единицы были одинаковыми – 1pt равнялся 1px. С появлением экранов retina, 1pt стал 2 px. Так что думайте о точках, как о значениях на оригинальном iPhone, а о пикселях – как о значениях точек в зависимости от плотности пикселей (iPhone 4,5,6 = @2x, iPhone 6 Plus = @3x).

 

Resolutions 80x83 - Полное руководство по дизайну iOS 9 в Sketch

 

Для более детальной информации, посмотрите этот урок.

Разрешения iPhone

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

Design iPhone 80x99 - Полное руководство по дизайну iOS 9 в Sketch

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

Разрешения iPad

У iPad 2 основных разрешения: 768 x 1024 pt (iPad), 1024 x 1366 pt (iPad Pro).

Design iPad 80x99 - Полное руководство по дизайну iOS 9 в Sketch

На iPad в iOS 9 появились 2 новые функции: Slide Over и Split View. Slide Over – это оверлей, который появляется с правой части экрана без изменения макета текущего приложения.

Design SlideOver 80x42 - Полное руководство по дизайну iOS 9 в Sketch

Split View позволяет пользователям использовать многозадачность, работая в 2 приложениях одновременно рядом друг с другом в портретном режиме.

Design SplitView 80x42 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Design AppIcon 80x67 - Полное руководство по дизайну iOS 9 в Sketch

Шаблон App Icon в iOS 9 GUI.

@1x-исходники больше не поддерживаются для iPhone, так что их генерировать не нужно. Иконки приложения сейчас имеют 2 разрешения: @2x и @3x. Есть 3 типа: App Icon, Spotlight и Settings. Для iPad используются разрешения @1x и @2x.

Design AppIconsRes 80x106 - Полное руководство по дизайну iOS 9 в Sketch

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

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

 

Rounded Corners 80x23 - Полное руководство по дизайну iOS 9 в Sketch

 

Иконочная сетка

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

Icon Grid 80x23 - Полное руководство по дизайну iOS 9 в Sketch

Цвета

iOS 9 использует яркие цвета для кнопок. Эти оттенки работают лучше белого или черного фона. Учтите, что цвета нужно использовать очень дозировано, для call-to-action элементов и минимальных областей брендинга, как, например, панель навигации. В целом, только 10-20% вашего дизайна должна быть представлена в таких цветах, или же дизайн будет слишком конкурировать с контентом.

Colors 80x34 - Полное руководство по дизайну iOS 9 в Sketch

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

Screen Colors 80x80 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Design Sizes 80x55 - Полное руководство по дизайну iOS 9 в Sketch

Отступы и выравнивание

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

Design SpacingAlign 1 80x44 - Полное руководство по дизайну iOS 9 в Sketch

Панель статуса

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

Design StatusBar 80x25 - Полное руководство по дизайну iOS 9 в Sketch

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

Панель навигации в iOS 9 используется для быстрой информации о скрине. Левая часть может быть использована для кнопок Back, Profile и Menu, а правая обычно используется для кнопок действия вроде Add, Edit, Done. Если вы встречается какие-то из этих системных иконок, под них не нужно создавать исходники.

Design NavigationBar 80x38 - Полное руководство по дизайну iOS 9 в Sketch

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

Панель поиска

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

Design Search 80x38 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Design Toolbar 80x25 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Tab Bar 80x11 - Полное руководство по дизайну iOS 9 в Sketch

В неактивном состоянии иконки будут просто иметь контур вместо заливки. Так они привлекают меньше внимания.

Design Tab Bar Sizes 80x25 - Полное руководство по дизайну iOS 9 в Sketch

Табличный вид

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

Design TableExamples 80x47 - Полное руководство по дизайну iOS 9 в Sketch

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

Design TableView 80x43 - Полное руководство по дизайну iOS 9 в Sketch

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

Design TableGrouped 80x25 - Полное руководство по дизайну iOS 9 в Sketch

Коллекция

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

Design CollectionExamples 80x47 - Полное руководство по дизайну iOS 9 в Sketch

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

Design CollectionView 80x44 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Alert 80x38 - Полное руководство по дизайну iOS 9 в Sketch

Диалог Activity позволяет поделиться контентом (текстом, изображениями, ссылками) с разными функциями iOS 9, такими как Избранное, Закладки или с приложениями вроде Mail, Facebook, Twitter. В то время, как вид нельзя никак изменить, опции могут меняться.

Design Share 80x66 - Полное руководство по дизайну iOS 9 в Sketch

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

Modal 80x47 - Полное руководство по дизайну iOS 9 в Sketch

Клавиатуры

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

Keyboards 80x38 - Полное руководство по дизайну iOS 9 в Sketch

Есть отличный набор Keyboard Kit для Sketch, который можно скачать.

Выбор

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

Design Picker 80x38 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Design SementedControl 80x38 - Полное руководство по дизайну iOS 9 в Sketch

Слайдеры

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

Design Sliders 80x16 - Полное руководство по дизайну iOS 9 в Sketch

Прогресс-бар

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

Design Progress 80x10 - Полное руководство по дизайну iOS 9 в Sketch

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

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

Design Switches 80x22 - Полное руководство по дизайну iOS 9 в Sketch

Степпер

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

Design Stepper 80x12 - Полное руководство по дизайну iOS 9 в Sketch

Иконки iOS

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

iOS Icons 80x27 - Полное руководство по дизайну iOS 9 в Sketch

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

Resources

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

iOS 9 GUI для iPhone

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

Mockup 02 80x60 - Полное руководство по дизайну iOS 9 в Sketch

iOS 9 GUI для iPad

Новые возможности iPad UI Kit включают устройство iPad Pro и клавиатуры в портретном и ландшафтном режимах. Все в векторе.

Mockup iPad800 80x60 - Полное руководство по дизайну iOS 9 в Sketch

Apple Watch GUI

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

Apple Watch GUI with SF Compact 80x55 - Полное руководство по дизайну iOS 9 в Sketch

Что можно и нельзя в дизайне интерфейсов

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

appledosanddonts 80x59 - Полное руководство по дизайну iOS 9 в Sketch

iOS Human Interface Guidelines от Apple

Apple представил руководство по дизайну интефейсов под iOS. Также доступен формат iBooks.

iOS Human Interface Guidelines Designing for iOS 80x49 - Полное руководство по дизайну iOS 9 в Sketch

iOS Guidelines от Ivo Mynttinen

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

The iOS Design Guidelines Ivo Mynttinen User Interface Designer 2 80x53 - Полное руководство по дизайну iOS 9 в Sketch

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: designcode.io

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

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

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

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

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

Прощай Sketch…

Часто возникает вопрос: «Какой инструмент дизайна лучший?» И долгое время ответом был Sketch, но теперь это не так.