UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Полное руководство по дизайну iOS 9 в Sketch
Редакція
Редакція

Опубліковано • Оновлено

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

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

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

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

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

Шрифт Francisco Font

После релиза iOS 9 и El Capitan, San Francisco стал шрифтом по умолчанию. Я советую вам посмотреть видео (работает только в браузере Safari), чтобы понять, как он влияет на дизайн iOS. https://developer.apple.com/videos/images/ogg\_bumper\_no\_tv.ogv Шрифт Francisco Font ios 9

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

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

3D Touch

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

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

Разработчики работают с точечными значениями, так что очень важно понимать их разницу с пикселями. Когда впервые был представлен iPhone, две единицы были одинаковыми - 1pt равнялся 1px. С появлением экранов retina, 1pt стал 2 px. Так что думайте о точках, как о значениях на оригинальном iPhone, а о пикселях – как о значениях точек в зависимости от плотности пикселей (iPhone 4,5,6 = @2x, iPhone 6 Plus = @3x). Resolutions Для более детальной информации, посмотрите этот урок. http://ux.pub/rukovodstvo-dizajnera-po-dpi-i-ppi/

Разрешения 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). Макет не масштабируется, но расширяется на основе разрешения. Например, панель навигации подстраивается только под ширину, но всегда имеет одинаковую высоту. Элементы внутри панели остаются неизменными. Разрешения iPhone iPhone 6 Plus – это единственный iPhone, который ведет себя больше как iPad в ландшафтном режиме. Другими словами, левая панель навигации появится, заменяя необходимость наличия панели вкладок.

Разрешения iPad

У iPad 2 основных разрешения: 768 x 1024 pt (iPad), 1024 x 1366 pt (iPad Pro). Разрешения iPad На iPad в iOS 9 появились 2 новые функции: Slide Over и Split View. Slide Over – это оверлей, который появляется с правой части экрана без изменения макета текущего приложения. Slide Over и Split View Split View позволяет пользователям использовать многозадачность, работая в 2 приложениях одновременно рядом друг с другом в портретном режиме. Split View позволяет пользователям использовать многозадачность

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

Иконка приложения используется для брендинга вашего приложения. Это первое, что видит пользователь. Иконка появляется на домашнем экране, в App Store, в Spotlight и меню Settings. Иконка приложения ios 9 Шаблон App Icon в iOS 9 GUI. @1x-исходники больше не поддерживаются для iPhone, так что их генерировать не нужно. Иконки приложения сейчас имеют 2 разрешения: @2x и @3x. Есть 3 типа: App Icon, Spotlight и Settings. Для iPad используются разрешения @1x и @2x. Иконки приложения сейчас имеют 2 разрешения: @2x и @3x http://ux.pub/dizajn-v-1x-idealnyj-rabochij-process-v-sketch-dlya-dizajnera/

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

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

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

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

Цвета

iOS 9 использует яркие цвета для кнопок. Эти оттенки работают лучше белого или черного фона. Учтите, что цвета нужно использовать очень дозировано, для call-to-action элементов и минимальных областей брендинга, как, например, панель навигации. В целом, только 10-20% вашего дизайна должна быть представлена в таких цветах, или же дизайн будет слишком конкурировать с контентом. iOS использует яркие цвета для кнопок http://ux.pub/osmyslennyj-vybor-cveta-v-dizajne/ iOS 9 часто использует нейтральные цвета в качестве фона или областей меню. Хорошо контрастирующий черный текст на белом фоне используется для комфортной читабельности. Наконец, пастельный синий оттенок используется для выделения кнопок. iOS часто использует нейтральные цвета в качестве фона или областей меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Коллекция

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

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

Диалог алертов используется для подачи критической информации или быстрых подсказок. Алерты (оповещения) должны быть сведены к минимум, и выход из них должен быть четко обозначен в макете. Модальные окна ios Диалог Activity позволяет поделиться контентом (текстом, изображениями, ссылками) с разными функциями iOS 9, такими как Избранное, Закладки или с приложениями вроде Mail, Facebook, Twitter. В то время, как вид нельзя никак изменить, опции могут меняться. Диалог Activity Когда представляемая информация не короткая, вы можете создать модальное окно в полном размере, появляющееся через анимации slide, fade, flip или page. Как и другие модальные окна, нужно реализовать возможность легко его отменить. Размер должен быть по возможности минимизирован. вы можете создать модальное окно в полном размере

Клавиатуры

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

Выбор

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

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

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

Слайдеры

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

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

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

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

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

Степпер

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

Иконки iOS

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

Resources

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

iOS 9 GUI для iPhone

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

iOS 9 GUI для iPad

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

Apple Watch GUI

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

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

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

iOS Human Interface Guidelines от Apple

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

iOS Guidelines от Ivo Mynttinen

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


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

Топ коментарі (0)