Apple гайды по дизайну

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

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

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

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

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

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

Шрифт Francisco Font

После релиза El Capitan и iOS 9, San Francisco стал стандартным шрифтом.

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

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

Такие значения трекинга можно использовать исключительно в Photoshop, однако теперь есть специальная формула для конвертации в Sketch.

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

3D Touch

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

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

Воспринимайте функцию 3D Touch как специальные горячие клавиши на Mac — они помогают намного быстрее выполнять различные повторяющиеся задачи.

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

Пиксели и точки в iOS 9

Разработчики работают с точечными значениями, поэтому крайне важно понимать их разницу с пикселями. Когда был впервые представлен iPhone, то две единицы были одинаковыми. То есть 1pt равнялся 1px.

С появлением дисплеев Retina, 1pt стал 2 px. Поэтому думайте о точках, как о значениях на iPhone, а о пикселях – как о особых значениях точек в полной зависимости от плотности пикселей.

Разрешения iPhone

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

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

Разрешения iPad

У iPad есть два главных разрешения: 1024 x 1366 pt (iPad Pro) и 768 x 1024 pt (iPad).

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

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

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

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

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

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

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

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

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

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

Цвета

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

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

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

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

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

Выравнивание и отступы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Коллекция

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

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

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

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

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

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

Клавиатуры

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

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

Выбор

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

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

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

Слайдеры

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

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

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

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

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

Степпер

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

Иконки iOS

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

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

Resources

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

iOS 9 GUI для iPhone

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

iOS 9 GUI для iPad

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

Apple Watch GUI

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

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

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

iOS Human Interface Guidelines от Apple

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

Курс: Дизайн мобильных приложений

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

Источник