Как вам помочь ?
Настройка дизайна
В статье рассмотрим подробнее о том, какие настройки дизайна возможно произвести для мобильного приложения на платформе AdvantShop. Рассмотрим последовательно:
Тема дизайнаДля мобильного приложения предусмотрено две темы дизайна: "Светлая" (рис.1) и "Темная" (рис.2).
![Настройка дизайна - 3118](files/130/MobApp/MobileApp-130-10.png)
![Настройка дизайна - 7048](files/130/MobApp/MobileApp-130-20.png)
Они представляют из себя цвет фона. Для выбора темы необходимо перейти в настройки модуля “Мобильное приложение”, в раздел "Внешний вид". Выбираем пункт "Тема" с выпадающим списком. Для переключения на одну из них, выбираем понравившуюся из списка (рис.3) и сохраняем настройки.
Рисунок 3.
Оформление кнопок, панелей меню и прочих элементов мобильного приложения сайта в каком-либо определенном цвете. Для мобильного приложения можно использовать свой цвет кнопок и текста кнопок. Для того, чтобы изменить цвет элементов меню, также необходимо перейти на вкладку “Внешний вид”, и выбрать определенный цвет. Список доступных цветовых схем представлен в виде палитры (рис. 4).
![Настройка дизайна - 1670](files/130/MobApp/MobileApp-130-40.png)
Рисунок 4.
Можно изменить основной цвет - цвет элементов меню, и цвет текста кнопок. Ниже представлены элементы меню приложения, которые меняются через цветовую схему (рис.5).
![Настройка дизайна - 5685](files/130/MobApp/MobileApp-130-50.png)
Можно использовать цветовую схему магазина (при этом дополнительные настройки цветовой схемы мобильного приложения исчезнут) (рис.6).
Рисунок 6.
Т.е. в мобильном приложении будет использоваться та цветовая схема, которая указана в настройках дизайна основного магазина (рис.7).
Рисунок 7.
Отдельно можно изменить цвет фона шапки, цвет текста в шапке, цвет фона нижнего меню, цвет выбранного пункта меню (рис.8).
Рисунок 8.
![Настройка дизайна - 2152](files/130/MobApp/MobileApp-130-90.png)
Выбранный пункт меню (рис.10).
![Настройка дизайна - 4529](files/130/MobApp/MobileApp-130-100.png)
Цвет пунктов меню (имеется ввиду цвет текста пунктов меню) (рис.11).
![Настройка дизайна - 4427](files/130/MobApp/MobileApp-130-110.png)
Логотип
Для мобильного приложения можно загрузить свой логотип, отличный от логотипа магазина.
Заметка
Рекомендуемые размеры: 480х120 px (в соотношении 3:1);
Формат: png;
Фон: прозрачный.
Для загрузки готового логотипа необходимо перейти в панель администрирования, в настройки модуля вкладка "Внешний вид" -” Логотип для мобильного приложения” - “Добавить изображение” (рис.12).
Рисунок 12.
Ниже показано как будет отображаться логотип на главной странице в приложении (рис.9).
![Настройка дизайна - 5560](files/130/MobApp/MobileApp-130-130.png)
Дополнительная настройка “Выводить логотип по центру” - логотип будет располагаться не слева, а по центру экрана (рис.10).
![Настройка дизайна - 1286](files/130/MobApp/MobileApp-130-140.png)
Рисунок 14.
Ниже вид логотипа при расположении по центру на странице приложения (рис. 11).
![Настройка дизайна - 4032](files/130/MobApp/MobileApp-130-150.png)
Квадратные фото товаров с закругленными углами
Фото в каталоге и в карточке товара будут с закругленными углами (раздел "Внешний вид" - подраздел "Каталог и товары") (рис.12).
Рисунок 16.
В клиентской части отображение будет иметь такой вид (для детального вида сделаем фон темным) (рис.13).
![Настройка дизайна - 4961](files/130/MobApp/MobileApp-130-170.png)
Фото на дополнительных страницах
Заметка
Рекомендуемые размеры данных изображений: 1000х1000 рx;
Формат: png.
При переходе на вкладку "Профиль" откроется страница ввода номера телефона. Изображение на данной странице можно изменить через настройки модуля, вкладка "Внешний вид" - "Изображение "Экран входа"- "Добавить изображение" (рис.14).
Рисунок 18.
Так может выглядеть страница авторизации в приложении после загрузки своего изображения (рис.15).
![Настройка дизайна - 2452](files/130/MobApp/MobileApp-130-190.png)
Изображение для корзины при отсутствии в ней товаров также можно изменить через настройки модуля, вкладка "Внешний вид" - "Изображение "Пустая корзина"- "Добавить изображение" (рис.16).
Рисунок 20.
Отображение пустой корзины в приложении после загрзки изображения (рис.17).
![Настройка дизайна - 3909](files/130/MobApp/MobileApp-130-210.png)
Другие статьи по теме
- Мобильное приложение App Store, Google Play и RuStore
- Настройка мобильного приложения
- Статические блоки мобильного приложения
- Статические страницы мобильного приложения
- Оформление главной страницы
Тэги: мобильное, приложение, мобильное приложение, mobileapp, mobile app, MobileApp, дизайн, App Store, Google Play, RuStore, настройка дизайна мобильного приложения