Как вам помочь ?

Настройка дизайна

Статья актуальна для версии магазина: 13.0 | 12.0

В статье рассмотрим подробнее о том, какие настройки дизайна возможно произвести для мобильного приложения на платформе AdvantShop. Рассмотрим последовательно:

Тема дизайна 

Для мобильного приложения предусмотрено две темы дизайна: "Светлая"  (рис.1) и  "Темная"  (рис.2).

Настройка дизайна - 3118
Рисунок 1.
Настройка дизайна - 7048
Рисунок 2.

Они представляют из себя цвет фона. Для выбора темы необходимо перейти в  настройки модуля “Мобильное приложение”, в раздел "Внешний вид". Выбираем пункт "Тема" с выпадающим списком. Для  переключения на одну из них, выбираем понравившуюся из списка (рис.3) и сохраняем настройки. 

Настройка дизайна - 3669
Рисунок 3.

Цветовая схема 

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

Настройка дизайна - 1670
Рисунок 4.

Можно изменить основной цвет - цвет элементов меню, и цвет текста кнопок. Ниже представлены элементы меню приложения, которые меняются через цветовую схему (рис.5).
 

Настройка дизайна - 5685
Рисунок 5.

Можно использовать цветовую схему магазина (при этом дополнительные настройки цветовой схемы мобильного приложения исчезнут) (рис.6).

Настройка дизайна - 7995
Рисунок 6.

Т.е. в мобильном приложении будет использоваться та цветовая схема, которая указана в настройках дизайна основного магазина (рис.7).

Настройка дизайна - 6588
Рисунок 7.

Отдельно можно изменить  цвет фона шапки, цвет текста в шапке, цвет фона нижнего меню, цвет выбранного пункта меню (рис.8).

Настройка дизайна - 4977
Рисунок 8.

Покажем на пример, как будет выглядеть мобильное приложение при изменении цвета шапки и нижнего меню (рис.9).
Настройка дизайна - 2152
Рисунок 9.

Выбранный пункт меню  (рис.10).
Настройка дизайна - 4529
Рисунок 10.

Цвет пунктов меню (имеется ввиду цвет текста пунктов меню) (рис.11).

Настройка дизайна - 4427
Рисунок 11.

Логотип

Для мобильного приложения можно загрузить свой логотип, отличный от логотипа магазина. 

Заметка

Рекомендуемые размеры: 480х120 px (в соотношении 3:1);
Формат:  png;
Фон:  прозрачный.

Для загрузки готового логотипа необходимо перейти в панель администрирования, в настройки модуля  вкладка "Внешний вид" -” Логотип для мобильного приложения” - “Добавить изображение” (рис.12).

Настройка дизайна - 1180
Рисунок 12.

Ниже показано как будет отображаться логотип на главной странице в приложении (рис.9).

Настройка дизайна - 5560
Рисунок 13.

Дополнительная настройка “Выводить логотип по центру”  - логотип будет располагаться не слева, а по центру экрана (рис.10).

Настройка дизайна - 1286
Рисунок 14.

Ниже вид логотипа при расположении по центру на странице приложения (рис. 11).
 
Настройка дизайна - 4032
Рисунок 15.

Квадратные фото товаров с закругленными углами

Фото в каталоге и в карточке товара будут с закругленными углами (раздел "Внешний вид" - подраздел "Каталог и товары") (рис.12).

Настройка дизайна - 4585
Рисунок 16.

В клиентской части отображение будет иметь такой вид (для детального вида сделаем фон темным) (рис.13).
 

Настройка дизайна - 4961
Рисунок 17.
 
Фото на дополнительных страницах

Заметка

Рекомендуемые размеры данных изображений: 1000х1000 рx;
Формат:  png.

При переходе на вкладку "Профиль" откроется страница ввода номера телефона. Изображение на данной странице можно изменить через настройки модуля, вкладка "Внешний вид" -  "Изображение "Экран входа"- "Добавить изображение" (рис.14).

Настройка дизайна - 3158
Рисунок 18.

Так может выглядеть страница авторизации в приложении после загрузки своего изображения (рис.15).

Настройка дизайна - 2452
Рисунок 19.

Изображение для корзины при отсутствии в ней товаров также можно изменить  через настройки модуля, вкладка "Внешний вид" -  "Изображение "Пустая корзина"- "Добавить изображение" (рис.16).

Настройка дизайна - 2207
Рисунок 20.

Отображение пустой корзины в приложении после загрзки изображения (рис.17).

Настройка дизайна - 3909
Рисунок 21.
Готово. Мы рассмотрели основные настройки дизайна мобильного приложения.

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: мобильное, приложение, мобильное приложение, mobileapp, mobile app, MobileApp, дизайн, App Store, Google Play, RuStore, настройка дизайна мобильного приложения

Мы используем cookies. Подробнее...