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

Как создавать типографику, цвета и макет для iOS

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

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

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

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

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

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

Пиетет

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

Упрощайте

Ваш UI должен быть обязательно урезан до ключевой эстетики.

Всегда, когда вы добавляете какой-то элемент, спрашивайте себя: “А это точно необходимо?”. Если только ваша программа не игра или тема, избегайте применения 3D-эффектов, тяжелых текстур и множества окон. Лучше сконцентрируйте дизайн на красивой типографике, функциональных цветах и гармоничных градиентах.

Как создавать типографику, цвета и макет для iOS

Максимизируйте контент

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

Как создавать типографику, цвета и макет для iOS

Цвета

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

Как создавать типографику, цвета и макет для iOS

Типографика — это контент

Из-за упрощения UI и фокуса на контенте типографика будет занимать 50-90% экрана. Таким образом, крайне важно выбрать красивый шрифт и настроить высоту строк, жирность и цвет для текстов, чтобы было приятно глазу, а также максимально комфортно для чтения.

Как создавать типографику, цвета и макет для iOS

Негативное пространство

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

Как создавать типографику, цвета и макет для iOS

Состояния иконок

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

Как создавать типографику, цвета и макет для iOS

Ясность

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

Делайте текст читабельным

На дисплеях Retina, типографика должна быть как минимум 11pt. Идеальный размер для чтения — приблизительно 16pt.

Как создавать типографику, цвета и макет для iOS

Применяйте понятные иконки

Иконки точно не должны быть двусмысленными. Они должны очень четко отображать свое предназначение. Желательно сопровождать иконку текстом.

В случае если иконка уже используется, не нужно повторно использовать вариант той же иконки для другого функционала. Это просто запутает пользователей. Не используйте также бессмысленные тексты вроде “Submit” или “Back”, вместо этого вносите конкретику: “Back to Home” или же «Sign up a new account».

Как создавать типографику, цвета и макет для iOS

Наглядные экраны

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

Как создавать типографику, цвета и макет для iOS

Смысл в цветах

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

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

Как создавать типографику, цвета и макет для iOS

Глубина

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

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

“Равнодушие касательно людей и реальности, где они живут — это единственный смертный грех в современном дизайне”.
– Дитер Рамс

Переходный интерфейс

Я считаю это наиболее уникальным и захватывающим нюансом iOS. Каждый из экранов переходит из одного в другой. Так домашний экран переходит в папку, а затем в приложение. Обычно такую технику реализовать сложно, но благодаря Xcode, ее сегодня сделали доступнее, нежели когда-либо. Данные техники поясняются в разделе анимации.

Размытый фон

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

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

Сделайте дизайн приятным

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

Анимация

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

Жесты

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

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

Звуки

Звуки применяются в программах по минимуму, однако именно посредством их можно превратить весьма скучную задачу в приятное и комфортное времяпровождение. Пользователи могут узнавать вашу программу, даже не видя ее.

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

Три правила

В случае если вы игнорируете все прочее, то, как минимум, учитывайте три важных правила в дизайне iOS: разрабатывайте интерфейс под сенсорное управление, делайте текст хорошо читаемым, а также оптимизируйте всю графику под iPhone 5, 6, 6 Plus.

Сенсорный дизайн

Кнопки нужно сделать легко кликабельными пальцами. Их габариты должны быть 30-60pt в ширину. Идеальный размер — 44 pt.

В редких случаях применяйте 22pt для ссылок внутри текстов, однако используйте этот размер с осторожностью, поскольку в подобные мелкие объекты трудно попасть пальцем. Даже в различных текстовых кнопках сенсорная область — приблизительно 30pt.

Как создавать типографику, цвета и макет для iOS

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

Типографика должна быть минимум 11pt. Идеальный размер шрифта для чтения — примерно 16pt. Применяйте высоту строки 120-145%, чтобы читать было еще комфортнее.

Как создавать типографику, цвета и макет для iOS

Адаптивный макет

Вы должны учитывать три разрешения: 320x480pt,375x667pt, а также 414x736pt. Используйте все пространство по максимуму, продумывайте, как можно расширить конкретный контент в зависимости от размеров экрана. Поскольку вы будете готовы к обновлениям, то просто не сможете попасть впросак”.

Как создавать типографику, цвета и макет для iOS

Альбомный режим

iPhone 6 Plus набирает популярность, в особенности в Китае (почти 40%). Программы в альбомном режиме отображаются иначе. Слева будет находиться дополнительное меню, очень похожее на то, что вы можете видеть на iPad. Таким образом, многие программы начинают поддерживать такой режим.

Как создавать типографику, цвета и макет для iOS

За счет Size Classes в Xcode, изменение макета на базе ориентации устройства реализуется очень легко. Поэтому не бойтесь использовать это для своих дизайнов.

Шрифт San Francisco

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

Как создавать типографику, цвета и макет для iOS

3D Touch

Как создавать типографику, цвета и макет для iOS

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

Как создавать типографику, цвета и макет для iOS

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

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

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

Apple Watch

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

Кроме того, Apple Watch — это отличный гаджет для уведомлений. В случае если вы создаете календарь, приложение для фитнеса или контроля за здоровьем, это маленькое дополнение значительно повысит комфорт использования. Хорошая новость в том, что создание программы под Apple Watch стоит совсем недорого. И что наиболее приятное, требуется совсем чуть-чуть визуального дизайна.

Как создавать типографику, цвета и макет для iOS

Что бы еще почитать?

iOS Human Interface Guidelines by Apple

Важные материалы от компании Apple, даже просто для ознакомления с данной темой. Формат iBooks доступен.

Как создавать типографику, цвета и макет для iOS

Ресурсы для дизайна под iOS

Дизайн под iOS 9 — довольно новая тема, которая будет регулярно пополняться новыми ресурсами.

Как создавать типографику, цвета и макет для iOS

перевод

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






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

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