SAP Build.me дизайн интерфейса, подключение mockdata
Дизайн
12/06/2020

SAP Build.me дизайн интерфейса, подключение mockdata

Реклама

Автор: Камиль Г.

Введение

Если вы не понимаете, о чем речь, прочитайте предыдущую статью про Build.me здесь. Сегодня рассмотрим тему прототипирования и подключения тестовых данных к вашему проекту.

Создание прототипа

Как говорилось в предыдущей статье, необходимо создать новый проект и нажать на кнопку New prototype, выбрав Template. Из предложенных вариантов выберем Responsive шаблон, так как там уже присутствует стандартная «шапка» и «подножье»

Создание адаптивного шаблона в Build.me

В итоге получаем вот такую страницу:

Окно управления макетом в Build me

По центру мы видим окно управления дизайном. Здесь же мы будем видеть результат нашего дизайна.

В верху страницы у нас располагается панель управления отображением. Описание иконок слева направо:

  1. Облака – это коллаборации. Здесь вы можете оставлять комментарии вашим коллегам по поводу каждой страницы приложения.
  2. Режим отображения. Десктоп, планшет, или телефон Режим отображение макета на экране и в предпросмотре
  3. Кисть – выбор темы дизайна. Представлены стандартные SAP темы.
  4. Линейка. Отображение линейки на дизайне.
  5. Масштаб
  6. Скрыть / раскрыть сайд-бары
  7. Отменить действия или выполнить вперед.
  8. Create study – создать обучалку для данной страницы
  9. Share – расшарить
  10. Иконка глаза. Это запустить предпросмотр.

В левом верхнем углу располагается панель контролов. Здесь представлены все компоненты, которые есть в Build.me и посредством Drag&Drop вы можете перетаскивать элементы на свой макет.

Также в ЛВ углу имеется несколько вкладок

Вкладки в левом верхнем углу Controls | Images | Data

Первая Controls – компоненты для макета. Images – изображения, которые можно применять на маете. Data – наша mockdata, в которой будем создавать тестовые данные.

В левом нижнем углу располагается иерархическая структура макета. Т.е. по сути отображаются все элементы, которые вы добавили на страницу.

Справа у нас находится сайд-бар управления выбранным компонентом. У каждого компоненты есть общий и свой наборы компонентов, которые можно редактировать. Например, отступы, размерности и т.п.

Макет

Накидаем элементов с левого окна компонентов на наш макет.

Макет готового приложения с контролами в дизайне

Чтобы располагать элементы горизонтально или вертикально используем компоненты Horizontal Box и Vertical Box соответственно.

Mockdata

Перейдем во вкладку Data. На этой странице мы можем импортировать данные, например, в excel файле, или можем подсоединить свой удаленный источник данных, или создать объекты с данными вручную.

Чтобы импортировать данные в Excel, нам нужно знать структуру данных. Поэтому поступим следующим образом: сначала создадим объекты с данными вручную, далее экспортируем их себе в Excel, и уже в Excel будем добавлять свои данные. Как все заполним, можем обратно импортировать файл в проект.

Окно управления данными в прототипе

Нажимаем на Create new object. Откроется окно управления объектами. «Плюсик сверху позволять создавать сколь угодно новых объектов».

Сайдбар окна управления данными в прототипе

В правом углу видим несколько вкладок: Properties – то же, что и поля в таблице, которые будут использоваться в дальнейшем; Relations – если у вас несколько объектов, то можно связать их между собой один к одному, один ко многим, многие ко многим; Samples – здесь можно управлять самими данными в объектах.

Создадим еще объект и свяжем их между собой

Окно управления объектами данных

Теперь займемся заполнением. Переходим во вкладку Samples → Edit samples. Открывается окно управления данными:

Окно управления данными в созданных объектах

Заполняем и нажимаем ок.

Теперь экспортируем объекты, чтобы до заполнить их в Excel: Samples → Export Data → Export

Открываем скачанный файл и заполняем наши объекты в Excel:

Excel файл для управления тестовыми данными

Таким же образом импортируем Excel в проект.

Использование mockdata

Теперь давайте применим наши данные к макету. Для этого определимся с компонентом, куда будем выводить данные. Пусть это будет таблица. Выделяем нашу таблицу и в сайд баре свойств меняем источник данных на наш созданный объект:

Переключение источника данных для таблицы в макете

Также переименуем Title – ы наших колонок и также в правом сайдбаре настраиваем отображение ячеек таблицы. В итоге получаем таблицу с нашими тестовыми данными.

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

Всем успехов

Вконтакте
Класснуть
Отправить
Вотсапнуть

Реклама