SAP Build.me Дизайн приложений
Дизайн
11/06/2020

SAP Build.me Дизайн приложений

Реклама

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

О чем статья?

Всем привет! Сегодня рассмотрим мощный инструмент для прототипирования и UX дизайна приложений в экосистеме SAP. Что такое SAP? – в данной статье рассказывать не буду, возможно в будущем напишу для этого отдельную статью. Все, что нам нужно знать — это огромная экосистема, в которой разрабатывают программные продукты для сектора B2B. SAP имеет свои framework-и для front-end разработки и есть такой инструмент как Build.me, который позволяет прототипировать приложения, используя mockdata (тестовые данные) внутри верстки.

Ограничения

  • В данной статье не будет затронута тематика UI дизайна. Так как в SAP все используемые компоненты стандартизированы и по рекомендации самой SAP менять их нежелательно, но можно.
  • В SAP имеется огромное количество стандартных компонент, которые применяются во всех приложениях, но к сожалению в Build.me не все они присутствуют, хоть время от времени и обновляют библиотеку.

Build.me

Build.me – это бесплатный онлайн сервис с доступом через браузер. Также имеется платная подписка для увеличения возможностей или создания неограниченного количества проектов, прототипов и т.п. В Build.me имеется общий доступ управления проектом, т.е. если вы не единственный UX дизайнер, то можете расшарить (share) свой проект для совместной модерации другим пользователям. На сайте также бесплатная регистрация.

Интерфейс

Интерфейс Build.me очень простой и легко усваиваемый. У вас будут доступны 6 основных вкладок: Workspace, Pricing, Gallery, Learning, Blog, Community

Workspace

После регистрации / авторизации пользователь попадает на Workspace (рабочую область)

Workspace рабочая область Build me

Так как у вас пока нет проектов, вы увидите надпись «You have no projects yet». На этой же странице в дальнейшем вы сможете создавать, открывать и редактировать все свои проекты.

Pricing

Pricing ценообразование Build me Платная и бесплатная подписка

Эта страница управления типом аккаунта. Здесь вы можете приобрести версию «Enterprise», которая на начальном этапе вам не нужна. Здесь же описаны возможности и преимущества версий.

Возможности Trial:

  1. Создавать до 3-х проектов
  2. Создавать до 2-х прототипов на 1 проект
  3. Создавать прототипы с использованием шаблонов Fiori и компонентов UI5
  4. Проводить тестирование среди пользователей
  5. Генерировать готовый код верстки для копирования проекта в Web IDE (среда разработки приложений SAP)

Возможности Enterprise:

  1. Создавать и управлять своей компанией
  2. Создавать неограниченное количество проектов и прототипов
  3. Использовать свои API напрямую в прототипе
  4. Расширенные возможности взаимодействия команды разработчиков
  5. Использовать мощное пользовательское тестирование, например, проведение исследований на внешних прототипах HTML

Gallery

Gallery Галерея готовых проектов в Build me

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

Learning

Learning обучающие материалы правилам работы в Build me

Это библиотека с обучалками по build.me и дизайна в целом. На главном экране перед нами предстает граф с описанием полного цикла разработки приложений. Данный граф делится на 3 составляющие: идея, дизайн, разработка. Сам цикл состоит из 9 шагов:

  • Определение объема и цели
  • Исследование
  • Синтез
  • Включение воображения
  • Прототипирование
  • Утверждение
  • Реализация
  • Тестирование
  • Развертывание проекта

На каждый пункт цикла работ у Build.me есть обучающие видео и описания шагов, что очень круто. Также на данной странице имеются 10 ссылок на полные курсы разработки дизайна и прототипирования приложений для системы SAP.

Blog

Blog блог обзора возможностей и описание релизов в Build.me

Как следует из названия – это блог Build.me. Здесь они размещают различные обзорные статьи и описывают нововведения в релизах.

Community

Community сообщество пользователей Build me, где вы найдете ответы на все воросы

Одна из самых полезных вкладок, где, собственно, я и учился пользоваться Build.me на полную мощность. Здесь рассмотрены все самые главные проблемы, которые могут возникнуть при разработке. Если у вас появляются вопросы, то смело бегите сюда и ищите по ключевым словам. В 70% случаев я находил ответ на нужный вопрос именно здесь. Также никто не отменял Google или же задать свой вопрос в Build.me – Community.

Как создать и использовать проект?

На вкладке Workspace нажимаем Create New Project

Создание проекта в Build me Создание и обзор проекта в Build me

После чего открывается наш проект, где его можно переименовать и дать ему описание. Во разделе What do you want to do first? – вы можете добавить Персон (Persona), создать прототип из ваших нарезок или начать создавать полноценный дизайн, также можно создать обучалки, чтобы показать пользователям как использовать ваше приложение, а они в свою очередь могут оставлять отзывы и комментарии к дизайну.

Дополнительные возможности добавления модераторов и загрузки файлов проекта в Build.me

Также можно добавить людей в команду разработчиков и прикрепить необходимые файлы к проекту. Например, FS (Functional specification) или TT (Technical task)

Persona

По сути persona – это ваша ЦА. (целевая аудитория). Вы создаете несколько человек, добавляете фотографию, чтобы понять как он должен выглядеть (при необходимости), указываете пол, возраст, увлечения, деятельность, нужды и пр.

Persona ЦА целевая аудитория проекта в Build.me

Прототип из нарезок

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

Прототип из наризок рукописного рисунка в build me

На бумаге ничего не ясно. Выбираете пункт Start With File, далее Drag&Drop в браузер ваших нарезок и делите каждый лист на логические блоки, соединяя их между собой

Результат прототипирования приложения из нарезок в build me

Теперь можно запускать Preview и демонстрировать идею на проекторе или предоставить доступ по ссылке.

Прототипирование из шаблона

Template прототипирование из готового шаблона в build me

Шаблоны разделены на темы. Можете выбрать любую из них или начать с пустого шаблона. Все шаблоны редактируются.

Изменение элементов при использовании готового шаблона в Build me

При создании проекта из шаблона вы можете к нему подключить свою mockdata (тестовые данные), которые оформляются в виде Excel таблицы. Далее на необходимые компоненты добавляете источником свою mockdata. Теперь приложение начало оживать. Также можно строить иерархические данные и назначать зависимости для разных таблиц. Подробнее про mockdata в Build.me будет рассказано в одной из следующих статей.

Обучалки

Обучалки позволяют вам держать контакт с вашими пользователями.

Study обучалки для пользователей, которым будет презентован проект в build me

Вы сами напрямую можете создавать вопросы для пользователей и добавлять поля для отзыва, например, может быть текстовое поле, опросник или аннотация на слайде. Далее у пользователя слева будет отображаться окно с вашим проектом, справа он может взаимодействовать с вами:

Как выглядят обучалки studies для конечных пользователей в Build me

В конце прохождения обучалки Build.me вежливо поблагодарит пользователя за участие.

Закрывающее окно для пользователей после прохождения обучалки Study в Build me

Итог

Мы обозрели основные возможности мощного и полезного инструмента как Build.me. Особенно будет полезно тем, кто только начинает работать с SAP и дизайном. Есть еще много вещей в дизайне SAP приложений, которые можно разобрать. Пишите комментарии, какие темы вам бы было интересно читать. Спасибо!

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

Реклама