Оптимизация компоновки приложения для мобильных устройств
Просмотр приложения
Сначала вы просмотрите приложение, чтобы определить, какие элементы необходимо изменить для устройств с маленьким экраном.
- Войдите под учётной записью организации ArcGIS.
Примечание:
Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.
- На ленте щелкните кнопку приложений и выберите Experience Builder.
Подсказка:
Кроме того, вы можете напрямую перейти на сайт Experience Builder.
Появится Experience Builder. На главной странице перечислены последние созданные интерфейсы.
- Щелкните кнопку Создать новый.
Появляется список шаблонов. У шаблонов есть предварительно настроенные компоновки и виджеты, которые вы можете изменить. Вы создадите приложение, используя шаблон информационного приложения для парка, созданный для этого упражнения.
- Выберите вкладку ArcGIS Online.
- В строке поиска введите НП Грейт-Смоки-Маунтинс, владелец:Learn_ArcGIS. В списке результатов для НП Грейт-Смоки-Маунтинс (Упражнение) щелкните Создать.
Подсказка:
Правильный шаблон имеет миниатюру с фотографией парка. Вы можете увидеть полное название шаблона, указав на его имя.
Приложение создается с использованием этого шаблона. Вы попадете в редактор, где сможете внести необходимые изменения.
В приложении семь страниц, на которые можно переходить с главной страницы. Хотя приложение выглядит хорошо, оно предназначено только для экранов настольных компьютеров. Вы измените отображение, чтобы увидеть, как он выглядит для устройств с маленьким экраном.
- На летне нажмите кнопку Изменить страницу для устройств с маленьким экраном.
Примечание:
Ниспадающее меню измерений рядом с кнопкой позволяет предварительно просмотреть приложение для конкретных размеров экрана. Однако вы можете изменить расположение только для трех общих видов устройств.
Ориентация приложения изменится.
Многие элементы приложения теперь слишком малы, чтобы текст можно было прочитать, а текст заголовка больше не помещается в области заголовка.
По умолчанию заголовок и основная область приложения были настроены с использованием макета Авто-компоновка. В этой компоновке Experience Builder выполняет изменения автоматически. Вам потребуется внести несколько специальных изменений, чтобы это приложение было оптимизировано для мобильных устройств.
Редактирование основной области
Главная страница приложения состоит из двух компонентов: заголовка и основной области. Область заголовка — это верхняя часть страницы, содержащая заголовок, логотип и кнопки навигации. Основная область — это нижняя часть страницы, содержащая основной контент. Сначала вы отредактируете основную область.
- Для основной области щелкните Пользовательский.
Появится сообщение о том, что, включив пользовательский вид, вы можете вручную организовать виджеты отдельно от других режимов устройства.
- Для Вы уверены, что хотите включить? щелкните ОК.
Теперь можно производить редактирование основной области. Сначала вы измените кнопку Текущие условия. На маленьком экране ее текст обрезается.
- Щелкните виджет кнопки Текущие условия.
Появится панель с опциями редактирования виджета.
- На панели Текущие условия перейдите на вкладку Стиль.
Вы отцентрируете кнопку, настроите ее ширину и измените ее положение относительно центра основной области.
- Щелкните кнопку Горизонтальное центрирование.
- В разделе Размер и положение для Ширины введите 50. На диаграмме относительного положения щелкните по цифре и введите 5.
Изменения автоматически применяются к кнопке в предварительном просмотре. Теперь кнопка достаточно широка для отображения всего текста. Она также переместится в верхнюю часть основной области, оставляя больше места для корректировки остального содержимого.
- На ленте щелкните кнопку Сохранить.
Примечание:
Изменение размера и положения виджета для устройств с маленьким экраном не изменяет настройки для других размеров экрана. Если вы нажмете кнопку Изменить страницу для устройств с большим экраном, вы увидите, что в этой компоновке не было сделано никаких изменений. Исключение — полное удаление виджета. Удаление виджета в одном виде удаляет его для всех видов, поэтому будьте осторожны, чтобы не удалить то, что вы хотите оставить.
Затем вы зафиксируете пять карточек, которые сплюснуты на маленьком экране. Хотя вы можете попытаться переместить и изменить их размер, как в случае с кнопкой Текущие условия, они слишком громоздкие, чтобы все поместились на экране в их текущем состоянии.
Вы переместите карточки в лист ожидания. Лист ожидания — это способ скрыть виджет в одном размере экрана, не удаляя его для других размеров экрана. Лист ожидания целесообразно использовать, если вам нужны разные виджеты в разных режимах работы устройства или если вы хотите изменить настройки виджета, кроме размера или положения.
- Щелкните карточку Руководства для посетителей (самая левая карточка). На панели инструментов виджета щелкните кнопку Переместить в лист ожидания.
Виджет исчезает из вида, но не удаляется из приложения и продолжает отображаться на экранах других размеров. (Если бы вы удалили виджет, он был бы удален и с экранов других размеров).
Примечание:
Чтобы просмотреть лист ожидания, на панели виджета Вставка щелкните вкладку Ожидающие. Вы можете в любое время заново добавить виджеты из списка ожидающих.
- Переместите другие четыре карточки в лист ожидания.
Теперь, когда вы освободили место, вы добавите кнопки для замены карточек, которые вы переместили в лист ожидания. Кнопка Текущие условия не занимает много места и хорошо читается на мобильных устройствах, поэтому вы скопируете ее стиль.
- Щелкните кнопку Текущие условия. На панели инструментов нажмите кнопку Дублировать.
Появится копия кнопки с именем Текущие условия 2. Вы переименуете ее и измените ее текст.
- На панели Текущие условия 2 щелкните заголовок панели и введите Руководство для посетителей. В поле Текст замените текст на Руководство для посетителей.
Чтобы отличить эту кнопку от кнопки Текущие условия, вы измените ее внешний вид. Окно Быстрый стиль, появившееся при дублировании кнопки, предоставляет некоторые параметры стиля по умолчанию, но вы можете внести более конкретные изменения в разделе Дополнительно панели кнопки.
- На панели Руководство для посетителей в разделе Фон щелкните образец цвета Заливка.
Вы измените цвет на оттенок коричневого, используемый в Руководстве по стилю Службы национальных парков.
- В окне выбора цвета нажмите Еще. Для HEX введите #6f4930.
Затем установите ссылку на кнопку, чтобы она вела на соответствующую страницу приложения.
- На панели Руководство для посетителей щелкните Задать ссылку.
- На панели Задать ссылку для Ссылка на выберите Страница. Для Выбрать страницу выберите Руководство для посетителей.
- Нажмите OK. В окне предварительного просмотра приложения закройте окно Быстрый стиль и перетащите кнопку Руководство для посетителей, чтобы отцентрировать ее примерно на 25 процентов под кнопкой Текущие условия.
Подсказка:
Синие направляющие, появляющиеся на экране при перемещении кнопки, показывают расстояние кнопки от других элементов. Красные направляющие показывают выравнивание кнопки относительно других элементов.
- Продублируйте кнопку Руководство для посетителей четыре раза. Отредактируйте имя, текст и ссылку каждой дублированной кнопки следующим образом:
- Для первой кнопки измените имя и текст на История парка и установите ссылку на страницу История парка.
- Для второй кнопки измените имя и текст на Информация о маршруте и установите ссылку на страницу Информация о маршруте.
- Для третьей кнопки измените имя и текст на Биоразнообразие и установите ссылку на страницу Леса из болиголова.
- Для четвертой кнопки измените имя и текст на Опрос посетителей и установите ссылку на страницу Исследование удовлетворенности посетителей.
- На экране предварительного просмотра приложения перетащите каждую кнопку так, чтобы она располагалась по центру на расстоянии 5 процентов под предыдущей кнопкой.
Эти кнопки понятны и читаемы даже на маленьких экранах и имеют все те же опции навигации, что и карточки из оригинального приложения для настольных компьютеров.
- Сохраните приложение.
Редактировать заголовок
Теперь, когда вы закончили редактировать основную область, отредактируйте заголовок. Заголовок содержит три виджета: один для заголовка, один для логотипа и один со ссылками на все страницы приложения. В настоящее время виджеты обрезаны и перекрывают друг друга.
- Для заголовка выберите Настраиваемый. Для Вы уверены, что хотите включить? щелкните ОК.
- На экране предварительного просмотра приложения наведите указатель мыши на заголовок и нажмите Редактировать заголовок. Щелкните заголовок (НП Грейт-Смоки-Маунтинс).
Появится панель Заголовок Болиголов с настройками для виджета заголовка. Вы уменьшите размер шрифта.
Возможно, вы помните, что можно изменить только настройки размера и положения виджета, не затрагивая его на других устройствах. Это означает, что изменение размера текста приведет к его изменению и в настольном приложении, где изменение размера текста не нужно.
Чтобы избежать этой проблемы, вы продублируете название и переместите оригинальный заголовок в лист ожидания. Затем вы измените размер текста дублированного заголовка, чтобы сделать заголовок подходящего размера для мобильных устройств, не вызывая его изменения на других устройствах.
- На экране предварительного просмотра приложения на панели инструментов виджета заголовка нажмите кнопку Дублировать.
Дублированный заголовок выбирается по умолчанию.
- Выберите оригинальный заголовок снова. На панели инструментов виджета щелкните кнопку Переместить в лист ожидания.
- Выберите дублированный заголовок. На панели Заголовок Болиголов 2 в секции Формат текста измените размер шрифта на 16 px.
Дублированный заголовок не выровнен по центру заголовка, поэтому настройте параметры его стиля.
- На панели Заголовок Болиголов 2 щелкните вкладку Стиль. Для Ширины введите 225 px.
- Щелкните кнопку Горизонтальное центрирование. Щелкните кнопку Замкнуть наверх и выберите Центрировать по вертикали.
Заголовок отцентрирован в поле заголовка, но его перекрывают другие виджеты, что делает его нечитаемым. Далее необходимо уменьшить логотип. Нажать на логотип на предварительном просмотре приложения сложно из-за перекрытия, поэтому вы откроете список всех виджетов на странице, чтобы изменить его настройки.
- На левой панели инструментов нажмите кнопку Страница.
Появится список всех виджетов в приложении, отсортированный по страницам. По умолчанию отображается Главная страница.
- В разделе Контур под Заголовком выберите Логотип.
Логотип выбран в предварительном просмотре приложения, появляется панель его настройки. Вы хотите только изменить его размер и положение.
- На экране предварительного просмотра приложения перетащите угол логотипа, чтобы изменить его размер до ширины около 62 px. Переместите логотип слева от заголовка.
Подсказка:
Вы можете изменить размер и положение логотипа или любого другого виджета, либо используя инструменты размера и положения в панели виджета, либо изменяя размер и положение виджета на экране предварительного просмотра. Используйте любой удобный для вас метод.
Далее вы измените меню ссылок на другие страницы. Поскольку кнопки вы создали в основной части, нет необходимости отображать все ссылки и в заголовке. Вы замените текущее меню значком, адаптированным для небольших размеров экрана.
- В панели Страница в секции Контур щелкните Меню.
- На экране предварительного просмотра приложения на панели инструментов виджета щелкните Дублировать. Переместите исходное меню в лист ожидания и снова выберите дублированное меню.
- На панели Меню 2 на вкладке Содержание для Типа выберите Значок.
- Перейдите на вкладку Стиль. Измените Ширину на 30 px и переместите значок вправо от заголовка.
После изменений заголовок стал немного высоковатым. Вы уменьшите его высоту для устройств с маленьким экраном.
- На панели Страница щелкните Главная.
Появится панель Главная с опциями для главной страницы.
- На панели Главная в секции Заголовок измените Высоту на 70 px.
Примечание:
Изменение высоты заголовка может изменить положение некоторых элементов в заголовке. Если необходимо, переставьте их.
- Сохраните приложение. Опционально на ленте нажмите Просмотр в реальном времени, чтобы просмотреть и протестировать домашнюю страницу готового приложения.
В этом упражнении вы отредактировали компоновку веб-приложения, чтобы убедиться, что она оптимизирована для мобильных устройств. Вы перемещали и изменяли размеры виджетов и использовали лист ожидания, чтобы задать разные настройки для разных размеров экрана.
В этом руководстве рассматривается внесение изменений только на одной странице. Если вы хотите попрактиковаться в изменении страниц приложения для мобильных устройств, то в приложении НП Грейт-Смоки-Маунтинс есть еще шесть страниц, с которыми вы можете поэкспериментировать. Чтобы увидеть, как создатели приложения изменили каждую страницу, вы можете просмотреть готовый шаблон на своем мобильном устройстве.
Вы можете найти больше учебных пособий настранице ресурсов ArcGIS Experience Builder.
