Приложения - это нечто большее, чем набор представлений и элементов управления. Отличное приложение - это красивое, доступное, привлекательное, мощное и простое в использовании.
До сих пор в этом разделе вы узнали о многих инструментах UIKit, которые помогают создавать общие пользовательские интерфейсы и реагировать на взаимодействие с пользователем. В этом уроке вы свяжете эти концепции вместе, чтобы создать простые рабочие процессы и знакомые иерархии навигации.
Что Вы Узнаете
- Как разбить функцию на интуитивно понятный рабочий процесс
- Как создать иерархию навигации для приложения
- Где можно узнать больше об интерфейсных соглашениях
Терминология
Связанные ресурсы
iOS Human Interface Guidelines (Руководства по интерфейсам для iOS)
Вы узнали, что UIKit является основой для создания приложений iOS. Его соглашения определяют, как пользователи iOS взаимодействуют со своими устройствами, операционной системой и большинством приложений, которые они используют каждый день. Именно благодаря этим соглашениям многие приложения iOS сегодня кажутся знакомыми давним пользователям.
Ресурс iOS Human Interface Guidelines определяет некоторые из лучших практик для создания интуитивно понятных рабочих процессов и знакомых иерархий навигации. Как разработчик приложений, у вас есть возможность эффективно использовать эти практики.
Принципы дизайна
Имея в своем арсенале множество представлений и элементов управления, вы уже можете внедрить множество функций в свои приложения. Но для создания приложения, которое одновременно является простым и мощным, требуется овладение Руководствами по интерфейсам человека—понимание того, когда, где и как использовать объекты пользовательского интерфейса знакомым образом.
Первая страница Human Interface Guidelines включает список из шести характеристик, которые следует помнить при разработке своих приложений.
Эстетическая целостность
Внешний вид и поведение вашего приложения должны соответствовать его целям и назначению. Например, приложение, которое помогает людям выполнять серьезные задачи, может удерживать их внимание, используя ненавязчивую графику, стандартные элементы управления и предсказуемые взаимодействия. На другом конце спектра развлекательное приложение, такое как игра, может иметь захватывающий внешний вид, обещающий веселье и волнение, побуждая к исследованию.
Последовательность
Последовательное приложение включает в себя функции и поведение таким образом, как этого ожидают пользователи. По возможности используйте предоставляемые системой элементы интерфейса, хорошо известные иконки, стандартные стили текста и унифицированную терминологию—все доступно в UIKit—для обеспечения знакомого опыта.
При разработке конкретных функций изучите, как другие приложения решали аналогичные задачи. Например, если вы разрабатываете рабочий процесс для завершения заказа в приложении для электронной коммерции, взгляните на процесс оформления заказа в популярных приложениях для электронной коммерции. Не следует откровенно копировать другие приложения, но вы можете использовать хорошие примеры в качестве отправной точки для своего дизайна.
Прямое управление
Благодаря прямому управлению содержимым на экране пользователи могут видеть немедленные, видимые результаты своих действий, что как повышает вовлеченность, так и облегчает понимание. Когда ваше приложение представляет контент, который пользователи могут изменить или настроить, рассмотрите возможность предоставления способа манипулировать контентом с помощью жестов или поворота устройства. Например, многие приложения для редактирования фотографий используют жесты смахивания для настройки параметров или применения эффектов.
Обратная связь
Пользователи никогда не должны сомневаться, ответило ли приложение на их действия. Убедитесь, что ваше приложение предоставляет заметную обратную связь в форме уведомлений, анимации или других подтверждений, чтобы пользователи знали, что происходит. Если ваше приложение загружает данные из интернета, отображайте индикатор сетевой активности. Если действие, вызываемое кнопкой, недоступно, затемните кнопку.
Для хороших примеров взгляните на встроенные приложения iOS. Какими способами они подтверждают действия пользователей? Вы можете заметить, что интерактивные элементы кратковременно выделяются при нажатии, индикаторы прогресса сообщают о статусе длительных операций, а анимация и звук помогают прояснить результаты действий.
Метафоры
Пользователи быстрее осваиваются, когда объекты и действия в приложении являются метафорами знакомых им опытов — будь то из реального или цифрового мира. Вы когда-нибудь задумывались, почему главный экран на компьютере называется Рабочим столом (Desktop)? Ранние версии графических интерфейсов использовали метафору рабочего стола, чтобы помочь пользователям почувствовать себя как дома в этой новой вычислительной парадигме. Папки представляли собой директории, документы выглядели как бумажные, а корзина использовалась для удаления файлов.
Метафоры работают еще лучше в iOS, потому что люди физически взаимодействуют с объектами на экране. Интерфейсы iOS используют отчетливые визуальные слои и реалистичное движение, чтобы передать иерархию и глубину. Пользователи могут перемещать представления, чтобы обнаружить информацию. Они перетаскивают и проводят по контенту. Они переключают тумблеры, перемещают ползунки и прокручивают значения в селекторах. Они даже листают страницы книг и журналов.
Контроль пользователя
Независимо от того, насколько замечательно приложение, оно не должно брать на себя контроль. Оно может предложить курс действий или предупредить о опасных последствиях, но пользователь всегда должен иметь возможность принимать важные решения. При разработке ваших приложений старайтесь предоставить пользователям возможность принимать решения, не перегружая их уведомлениями или опциями на каждом шагу. Приложение может создать у людей ощущение контроля, сохраняя интерактивные элементы знакомыми и предсказуемыми, подтверждая деструктивные действия и делая операции легко отменяемыми — даже когда они уже начаты. Лучшие приложения находят правильный баланс между предоставлением пользователям возможности и избеганием нежелательных последствий.
Руководства по интерфейсам для iOS
Документ Human Interface Guidelines является вашим лучшим ресурсом для планирования и разработки приложений. Найдите время, чтобы прочитать несколько разделов и получить представление о типе информации, которую он охватывает.
Вот несколько отличных разделов, которые стоит проверить:
- Data Entry (Ввод данных): описывает лучшие практики для длинных экранов ввода или форм для сбора информации от пользователя.
- Color (Цвет): рассказывает о том, как использовать цвет, чтобы помочь людям понять, как взаимодействовать с элементами интерфейса.
- Tables (Таблицы): дает конкретные рекомендации по представлению информации в виде таблицы.
Будучи новым разработчиком, вы добьетесь большего успеха, если будете следовать всему, что указано в Human Interface Guidelines. Но по мере накопления опыта вы можете распознать случаи использования, которые требуют выхода за рамки. Существует много отличных приложений, которые выходят за пределы конвенций iOS. Как говорится, выучите правила как профессионал, чтобы нарушать их как художник.
Иерархия навигации
Ваша задача как разработчика заключается в реализации навигации таким образом, чтобы она поддерживала цель вашего приложения, не отвлекая пользователя. Навигация должна быть естественной и знакомой, не доминировать в интерфейсе и не отвлекать внимание от контента.
В iOS есть три основных стиля навигации: иерархическая, плоская и навигация, основанная на контенте или опыте.
Иерархическая навигация
В этом стиле пользователь делает один выбор на экране, пока не достигнет конечного пункта. Чтобы перейти к другому пункту назначения, он должен вернуться назад или начать с самого начала и сделать другой выбор. Настройки и Почта используют иерархический стиль навигации.
Для этого стиля вы обычно используете навигационные контроллеры, чтобы обеспечить навигацию через серию иерархических экранов. Когда отображается новый экран, кнопка "Назад" на переднем конце навигационной панели позволяет легко вернуться назад. (Чтобы дать пользователю контекст, панель может отображать заголовок текущего экрана.)
Рассмотрим приложение "Настройки". Пользователи открывают "Настройки", чтобы просмотреть или обновить предпочтения, которые сгруппированы в категории. Это иерархические отношения: каждая категория содержит подкатегории или отдельные настройки, которые пользователь может изменить. Интерфейс разработан с использованием той же иерархии. Когда вы открываете приложение "Настройки", перед вами появляется список категорий. Выберите категорию, и вы увидите список подкатегорий или отдельных предпочтений. Когда вы хотите вернуться к списку на уровень выше в иерархии, вы можете использовать кнопку "Назад", чтобы вернуться к предыдущему виду.
Плоская навигация
В дизайне плоской навигации пользователи переключаются между несколькими категориями контента. Музыка и App Store используют этот подход.
Для плоской навигации вы обычно используете контроллер панели вкладок, чтобы организовать информацию на уровне приложения. Панель вкладок — это хороший способ предоставить доступ к нескольким рабочим процессам или различным режимам работы. Вы также можете использовать контроллер страниц.
Рассмотрим App Store, который отображает пять категорий задач, каждая из которых представлена вкладкой: избранное на Today, просмотр игр, просмотр приложений, Apple Arcade или поиск.
Некоторые приложения комбинируют несколько стилей навигации. Например, App Store использует контроллер панели вкладок для разделения задач в плоском стиле, но полагается на иерархическую навигацию внутри каждой вкладки.
Навигация, основанная на контенте или опыте
В этом стиле пользователь свободно перемещается по контенту, или сам контент может определять навигацию. Игры, книги и другие погружающие приложения обычно используют этот тип навигации.
В этом курсе вы не будете создавать приложения, которые полагаются на навигацию, основанную на контенте.
Руководства по дизайну навигации
Важно, чтобы пользователи всегда знали, где они находятся в вашем приложении и как попасть в нужное место. Независимо от стиля навигации, путь через контент должен быть логичным, предсказуемым и легко следуемым. Общая рекомендация состоит в том, чтобы предоставлять пользователям только один путь или стиль навигации на каждом экране. Если им нужно видеть экран в нескольких контекстах или местах в вашем приложении, рассмотрите возможность использования модального представления для выполнения задачи.
При проектировании иерархии навигации вашего приложения следуйте следующим рекомендациям:
Разработайте информационную структуру, которая позволяет быстро и легко добраться до контента. Организуйте вашу информацию так, чтобы требовалось минимальное количество нажатий, свайпов и экранов.
Используйте стандартные навигационные компоненты. По возможности используйте стандартные элементы навигации, такие как панели вкладок, сегментированные контроллеры, таблицы, коллекции и разделенные представления. Пользователи уже знакомы с этими элементами и будут интуитивно понимать, как перемещаться в вашем приложении.
Используйте навигационную панель для перемещения по иерархии данных. Заголовок навигационной панели может отображать текущее положение пользователя в иерархии, а кнопка "Назад" позволяет легко вернуться к предыдущему положению.
Используйте панель вкладок для представления одноуровневых категорий контента или функциональности. Панель вкладок позволяет пользователям быстро и легко переключаться между категориями или режимами работы, независимо от их текущего местоположения.
Используйте правильный стиль перехода. Когда вы переходите на новый экран, чтобы показать больше деталей о каком-то элементе, вы должны использовать переход справа налево, используемый Show segue в навигационном контроллере. Если пользователь переключает контексты—например, от отображения контактов к добавлению нового контакта—используйте модальный переход.
Пример рабочего процесса
Если вы собираетесь создать приложение для будильника и секундомера, будет полезно спланировать функции и рабочий процесс приложения перед началом разработки. Хороший способ сделать это — с помощью простого блок-схемы, в которой описывается назначение каждого экрана, способ навигации от одного экрана к другому и общая иерархия навигации в приложении.
Для этого примера предположим, что приложению нужны следующие функции:
- Отображение будильников
- Включение и выключение будильников
- Создание будильников
- Редактирование будильников
- Изменение звука будильников
- Основные функции секундомера (отображение, запуск, круг, остановка, сброс)
Исходя из запланированных функций, можно увидеть, что в приложении есть два отдельных режима: будильник и секундомер. Контроллер панели вкладок обеспечит плоский дизайн навигации, который позволит пользователю четко видеть обе функции.
Поскольку вкладки будильника и секундомера отдельны, каждая из них может сосредоточиться на рабочих процессах, необходимых для выполнения своей функции. Функциональность секундомера может легко существовать на одном представлении. Таким образом, вкладка секундомера не требует больше, чем своей собственной вкладки.
Управление будильниками может потребовать более одного экрана. Например, может быть полезно иметь дополнительные экраны для просмотра, создания и редактирования различных будильников. Для этого можно создать представление для списка всех будильников и представить различные модальные представления, когда пользователь выбирает существующий будильник или нужно создать новый. Блок-схема ниже иллюстрирует иерархию навигации и общий рабочий процесс этого гипотетического приложения.
Лабораторная работа — Доставка пиццы
Цель
Цель этой лабораторной работы — попрактиковаться в проектировании простых и интуитивных рабочих процессов и иерархий навигации. Вы будете использовать свои знания о принципах дизайна для планирования иерархии навигации и потока для гипотетического приложения по доставке пиццы.
Шаг 1
Оформление заказа
- Изучите несколько популярных приложений для электронной коммерции, чтобы получить хорошее представление о процессах покупки и оформления заказа.
- Независимо от того, используете ли вы Keynote, Pages или бумагу, создайте блок-схему, которая описывает иерархию навигации для вашего приложения по доставке пиццы. Процесс заказа должен позволять пользователю просматривать меню, заказывать пиццу, создавать индивидуальную пиццу и переходить в корзину.
Отрывок из книги
Develop in Swift Fundamentals
Apple Education
https://books.apple.com/ru/book/develop-in-swift-fundamentals/id1581182804