Шаблон мобильного дизайна

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

Цель

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

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

Настройка

Разрешение имеет решающее значение для мобильных приложений из-за широкого диапазона размеров экранов на разных устройствах. В настоящее время приложение предлагает два варианта настроек для мобильных устройств: «Мобильный альбомный режим» и «Мобильный книжный режим». Для новых мобильных устройств мы рекомендуем использовать разрешения 19,5:9 в книжном режиме и 19,5:9 в альбомном режиме.

Обзор функций

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

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

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

Последним шагом в этом разделе является шаг «Типографика», в котором определяются размеры и стили шрифтов для заголовков и текста абзацев. Для мобильных приложений рекомендуется использовать размер шрифта не менее 20px и обеспечить высокую контрастность с фоном для лучшей читаемости.

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

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

Дополнительная информация

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

Чтобы узнать больше о разработке приложений для мобильных устройств, ознакомьтесь с обсуждением в сообществе, посвященным лучшим практикам в области мобильного UI/UX.