Обучение ui/ux дизайну

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

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

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

Бесплатный курс по Дизайну Моб. приложений

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

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

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

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

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

Шрифт Francisco Font

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

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

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

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

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

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

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

3D Touch

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

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

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

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

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

Рекомендую: Бесплатный курс по Дизайну мобильных Приложений

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

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

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

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

Разрешения 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). Макет не масштабируется, однако расширяется на основе разрешения. К примеру, панель навигации подстраивается лишь под ширину, однако всегда имеет одинаковую высоту. Компоненты внутри панели остаются прежними.

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

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

Разрешения iPad

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Коллекция

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

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

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

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

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

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

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

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

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

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

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

Клавиатуры

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

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

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

Выбор

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

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

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

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

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

Слайдеры

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

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

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

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

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

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

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

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

Степпер

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

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

Иконки iOS

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

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

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

Resources

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

iOS 9 GUI для iPhone

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

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

iOS 9 GUI для iPad

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

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

Apple Watch GUI

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

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

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

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

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

iOS Human Interface Guidelines от Apple

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

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

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

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

Обязательно ознакомьтесь с этой информацией >>

перевод

Понравилось? Расскажите друзьям:






Комментарии:

(напишите, что вы думаете об этом)