Создание макетов: Онлайн редактор макетов

Создание макета интерфейса: 5 важных советов от Appmaster.io

Если вы читали статьи о дизайне приложений, то наверняка сталкивались с целым списком разных терминов: макет, прототип, мокап, вайрфрейм, скетч… Чем они отличаются друг от друга? На самом деле, когда речь идет о no-code разработке, это становится не так уж важно.

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

Поэтому в каком виде вы представите проект прежде, чем перейти в редактор — не так уж важно. Это может быть прототип в Figma или изображение в Photoshop, рисунок в Paint или набросок от руки, и даже схема в таблице Excel. Главное — чтобы вы четко представляли, как это должно работать.

Но есть несколько важных пунктов, которые нужно обязательно учесть.

Решите, какое приложение вам нужно: веб или мобильное

Вы можете создать две версии, которые будут взаимосвязаны — часть ваших пользователей будет работать с мобильных устройств, часть — с персональных компьютеров, данные при этом будут общими. Но дизайн в любом случае будет отличаться.

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

Определите группы пользователей

Разбейте пользователей на группы в зависимости от того, какие функции им доступны. Проанализируйте, насколько они отличаются.

При этом речь не только о делении на пользователей и администраторов. Если вашим приложением будут пользоваться клиенты с разными уровнями доступа или сотрудники разных отделов — вы можете скрывать или отображать отдельные элементы и даже целые страницы в зависимости от того, какие функции и данные доступны конкретному пользователю.

Вам нужны наглядные примеры

Найдите как можно больше приложений, максимально похожих на ваше. Возможно, вы сможете использовать одно из них как основу, добавив нужные функции. Или захотите объединить функционал нескольких приложений в одно. Составьте краткий список с описанием достоинств и недостатков — он пригодится не только при составлении макета, но и при обращении в техподдержку за консультацией, поиске исполнителей и инвесторов для проекта, да и просто для генерации новых идей.#nbsp;

Подробно опишите страницы

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

Чаще всего в приложении обязательно есть:

• Главная страница: сюда будут попадать все пользователи, независимо от того, зарегистрированы они или нет.
• Портал администратора: он будет управлять настройками и учетными записями.
• Отдельные страницы для пользователей с разным уровнем доступа.
• Всплывающие окна, которые появляются при совершении определенных действий.
• Не забудьте про сервисные сообщения для пользователей и отдельные окна с подтверждением действий (например, согласием на отправку данных).

Не забудьте про обмен данными

Продумайте, где ваше приложение будет брать данные и куда их отправлять. Вся ли информация будет поступать от пользователей? Какие процессы можно автоматизировать?

Часть данных можно брать с сайтов или выгружать из программ учета. Для упрощения входа в ваше приложение — использовать авторизацию крупных сервисов, например Google или Facebook. Для этого нужны отдельные элементы интерфейса, например кнопки «Загрузить данные» или «Войти через Facebook».

Если продумать все и сразу будет сложно — создайте макет с минимальным набором необходимых функций и отдельно напишите свои мысли по поводу того, что хотели бы добавить в будущем. А если возникнут трудности — пишите в телеграм-канал нашей техподдержки, мы всегда будем рады помочь!

от макета, собранного на скорую руку, до полнофункциональных прототипов / Хабр

Каждый дизайнер и разработчик знают, что детализированные макеты – это основа для любого цифрового проекта. Неважно, берете ли вы карандаш, чтобы быстро набросать эскиз на бумаге или же используете свои высокоточные наработки макета и начинаете писать код для первого интерактивного прототипа, инструменты по созданию прототипов помогут вам избежать бесчисленных проблем, бессонных ночей и превышения бюджета.

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

Сегодня я перечислил несколько лучших инструментов, существующих в индустрии.

Эти инструменты используют все многообразие различных методов по созданию прототипов. Они помогут вам сэкономить время и создать наилучший полнофункциональный прототип.

InVision

InVision поможет вам с любым веб- или мобильным проектом. Не важно для какой операционной системы создается проект – iOS или Android, данный инструмент работает с ними обеими. Также InVision рассчитан на работу в команде. С его помощью можно с легкостью работать над проектом и обмениваться идеями совместно с другими членами вашей команды.

Marvel

Marvel – это еще один крупный игрок на рынке инструментов по созданию прототипов. Он позволяет вам преобразовать ваши макеты, дизайны и наброски в прототипы мобильных и веб-приложений или даже в прототип приложения для Apple Watch.

Proto

Proto.io – это превосходный инструмент, который позволяет создавать полностью интерактивные прототипы мобильных приложений. Вы сможете создавать интерактивные высокоточные прототипы, которые будут выглядеть и работать именно так, как должно работать ваше приложение. И при этом данный инструмент не требует от вас навыков написания кода.

Moqup

Moqups – это еще один широко известный инструмент. Но он немного отличается от остальных. Платформа основана на HTML5, она является прекрасным инструментом для создания макетов с масштабируемой векторной графикой (SVG), которые не зависят от разрешения экрана.

Fluid

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

Prott

Prott – это инструмент для быстрого создания прототипов и для совместной работы. Он берет ваши идеи из первых набросков и переносит их в интерактивный прототип, который работает, как настоящее приложение. Также Prott является превосходным инструментом для создания дизайна и взаимодействия с другими членами команды.

Flinto

Flinto позволяет быстро и легко создать прототип, который выглядит как реальный продукт и правильно работает. Он не нарушает ваш текущий рабочий процесс, так как использует проекты того, как информация должна отображаться на экране, которые вы уже ранее создали. Flinto прекрасно находит золотую середину между быстрым созданием прототипа и реализмом.

POP

Если вам нравятся традиционные методы создания прототипа, например, создание нарисованных от руки макетов, то POP – это подходящий вам инструмент. Просто сделайте набросок идей для вашего приложения в вашей записной книжке, сфотографируйте ее и добавьте взаимосвязи между созданными таким образом макетами. После этого просто синхронизируйте прототипы вашего приложения с Dropbox и вы сможете воспроизвести приложение на смартфоне.

Pixate

Pixate – это достаточно новый инструмент. Данная платформа может быть использована для создания дизайна взаимодействий с мобильным устройством. Просто загрузите необходимые для взаимодействия слои информации и добавьте с помощью пары кликов необходимые взаимодействия с ними или их анимацию.

Axure

Axure – это инструмент для создания прототипов. Данная программа может использоваться для создания веб-приложений и приложений для настольного компьютера. Мне нравится то, что в данной программе реализован функционал перетаскивания, форматирования и изменения размера виджетов.

Framer

Framer – еще один известный инструмент. Он может быть использован для создания прототипов для iOS, Android, настольных компьютеров и веба. С использованием Framer вы сможете придумывать взаимодействия и анимацию. Вы можете интегрировать данный инструмент с Photoshop или приложением Sketch.

Webflow

Если вы хотите быстро создавать прототипы, то Webflow – это не лучшее решение. Однако он предстает во всей красе, когда прототип уже завершен. Вы можете очень быстро сделать из финального прототипа рабочий продукт всего лишь за несколько простых кликов. Также данный инструмент позволяет использовать CMS для ваших прототипов.

Mockplus

У Mockplus есть одна прекрасная особенность – он невероятно быстро работает! В основном Mockplus используется для настольных компьютеров, но он может быть с легкостью использован также и для мобильных или веб-проектов. Понятный интерфейс также позволяет вам более эффективно работать, так как вы можете сконцентрироваться на создании проекта, а не на функциях инструмента.

Justinmind

Justinmind – это один из первых появившихся на рынке инструментов для создания прототипов. Он был создан в 2008 году. За столь продолжительное время команда, создавшая данный инструмент, проделала восхитительную работу. Он очень хорошо работает! Данный инструмент – прекрасный вариант, если вам необходимо создавать веб-сайты, мобильные приложения и другие веб-проекты.

Vectr

Vectr – это новый игрок на рынке, и он все еще находится в стадии бета-тестирования. При помощи данного инструмента вы можете создавать ваши веб-приложения или приложения для настольного компьютера, использующего операционные системы Mac и Windows. К тому же он абсолютно бесплатен. Все прототипы могут быть выгружены и интегрированы в такие приложения, как Slack.

Principle

Инструмент для создания прототипов Principle доступен только для Mac. Он работает в паре с приложением для iOS, которое позволяет запускать прототипы. Principle позволяет вам экспортировать прототипы в видео или GIF-форматы. Интерфейс инструмента очень похож на интерфейс приложения Sketch. Если ранее вы пользовались приложением Sketch, то у вас не возникнет трудностей с использованием Principle.

PowerMockup

PowerMockup очень сильно отличается от других приложений. Данный инструмент – это дополнение к Microsoft PowerPoint, которое превращает эту программу в полноценный инструмент по созданию прототипов. С данным расширением вы сможете создавать макеты для любых веб-приложений или приложений для настольных компьютеров.

Atomic

Atomic – это невероятный инструмент для создания прототипов, и он формирует незабываемое первое впечатление. Atomic – это веб-приложение, которому для работы требуется Google Chrome. Если вы используете Safari, Firefox или браузеры Windows, данный инструмент может работать отвратительно. Atomic может использоваться для создания Apple Watch, Android, iOS и веб-проектов.

Balsamiq

Balsamiq – это один из самых простых инструментов. Он позволяет вам перетаскивать любой элемент на черный фон. Данный инструмент может интегрироваться с Google Docs для импорта ваших прототипов и файлов дизайна. Balsamiq доступен, как программа для Mac или Windows, а также имеет веб-версию.

Adobe Comp CC

Adobe Comp CC – это еще один великолепный инструмент от Adobe. Он позволяет вам создавать веб, мобильные и печатные проекты и далее интегрировать их с другими утилитами Adobe для создания дизайна. Например, Photoshop, Illustrator или InDesign. Также Adobe CC Comp работает с Adobe Stock, который предоставляет сотни шрифтов, картинок и графических решений.

Добавьте компоновку в проект — ArcGIS Pro

При добавлении компоновки в проект создается страница, на которой можно добавлять и настраивать элементы компоновки, такие как фреймы карты и легенды. Эту страницу можно экспортировать или распечатать. Есть три способа добавить макет в проект: создать пустой макет, выбрать файл макета из галереи «Импорт макета» или импортировать файл макета.

Создать пустой макет

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

Чтобы создать макет, выполните следующие действия:

1. На вкладке «Вставка» в группе «Проект» нажмите «Новый макет».
2. В раскрывающемся меню выберите один из следующих вариантов, чтобы создать пустой макет:
   • Предопределенный размер страницы из галереи — выберите размер ANSI, архитектурный или ISO.
   • Пользовательский размер страницы — используйте окно Свойства макета, чтобы установить размер страницы и единицы измерения страницы.
   • Выбрать страницу из принтера — выберите размер страницы из принтера. Установите флажок Включить поля принтера, чтобы нарисовать штриховой контур, определяющий область печати на странице макета.
3. Добавьте такие элементы, как фреймы карт, легенды и фреймы таблиц, чтобы завершить компоновку.

Выберите файл макета из галереи импорта

Файлы макета доступны в галерее импорта макетов, чтобы добавить отформатированные и сохраненные макеты в ваш проект. По умолчанию эта галерея содержит предварительно созданные файлы макетов из папки, установленной вместе с приложением. Вы можете настроить галерею, добавив свои собственные файлы макета в эту папку, или вы можете настроить галерею так, чтобы она ссылалась на другую папку, содержащую файлы макета. Обновление расположения папки полезно для организаций, в которых многим пользователям требуется доступ к одним и тем же файлам макета для использования в качестве шаблонов.

Файлы в галерее помечены в соответствии с их метаданными. Имя, отображаемое в галерее, — это заголовок метаданных, а не имя файла, а миниатюра в галерее — это та же миниатюра для метаданных. Чтобы изменить метаданные для файла макета, подключитесь к папке, содержащей файл макета, на панели Каталог. Разверните папку, щелкните правой кнопкой мыши файл макета на панели Каталог и выберите Редактировать метаданные. Вы также можете обновить миниатюру метаданных, щелкнув правой кнопкой мыши файл макета на панели Каталог и выбрав Создать миниатюру.

После добавления файла макета в проект он становится макетом. Редактирование метаданных макета не приводит к обновлению представления галереи. Вы должны обновить метаданные для файла макета в галерее.

Чтобы добавить макет из галереи, выполните следующие действия:

1. На вкладке «Вставка» в группе «Проект» нажмите «Импорт макета».
2. Выберите файл макета из галереи.

   Добавлен новый макет.

3. Измените существующие элементы макета и добавьте необходимые элементы для завершения макета.

Импорт макета

Существующие макеты в проекте или из другого проекта можно сохранить в виде файлов макетов и импортировать. Затем вы можете отредактировать макет по своему усмотрению. По умолчанию при импорте файла компоновки копируются все карты, на которые ссылается компоновка. Если карты уже существуют в проекте, вы можете установить флажок Повторно использовать существующие карты при импорте компоновок, который проверяет проекты на наличие карт, на которые есть ссылки в файле компоновки, и копирует только те карты, которые не существуют в проекте. Это позволяет избежать дублирования карт в проекте.

Чтобы импортировать в проект существующий файл макета, выполните следующие действия:

1. На вкладке «Вставка» в группе «Проект» нажмите «Импорт макета».
2. Выберите Импорт файла макета.
3. Найдите нужный файл макета в диалоговом окне «Импорт» и нажмите «ОК».

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

   Добавлен новый макет.

4. Измените существующие элементы макета и добавьте необходимые элементы для завершения макета.

Похожие темы

---

Отзыв по этой теме?

Приступайте к созданию макетов — Business Central

Редактировать

Твиттер LinkedIn Фейсбук Электронная почта

• Статья
• 19. 09.2022

В Business Central имеется множество встроенных макетов, которые можно использовать в отчетах. Другие макеты могли быть добавлены как часть других расширений. Но также можно создавать собственные отчеты с нуля или на основе существующего макета.

Важно

Вы также можете использовать макеты отчетов для добавления содержимого в сообщения электронной почты. Например, макеты отчетов могут сэкономить время и помочь обеспечить согласованность за счет повторного использования одного и того же содержимого при общении с клиентами. Чтобы использовать настраиваемые макеты отчетов с электронной почтой, тип файла макета должен быть Word. Вы не можете использовать тип файла RDLC. Дополнительные сведения см. в разделе Настройка повторно используемых текстов и макетов электронной почты.

Обзор

При работе с макетами отчетов полезно думать о макете как о файле, который импортируется и назначается отчету. Независимо от типа макета, способы управления макетами в Business Central в основном одинаковы. Обычно вы будете работать с

Макеты отчетов стр. Основное различие заключается в том, как вы разрабатываете макет, который выполняется с помощью прикладного программного обеспечения, на котором построен макет, например Word, Excel или SQL Server Report Builder.

Учитывая эту концепцию. в основном существует три или четыре задачи, связанные с настройкой макета отчета:

1. Выберите тип макета.
2. Экспортировать копию существующего макета для использования в качестве отправной точки.
3. Внесите изменения в файл макета в соответствующем приложении.
4. Добавьте в отчет новый файл макета.

Важно

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

Report Layouts можно определить, является ли макет расширенным макетом или определяемым пользователем макетом, просмотрев столбец Extension . Макет расширения покажет информацию об исходном расширении в столбце. Столбец Extension будет пустым для пользовательского макета.

Чтобы узнать о разнице между дополнительными макетами и пользовательскими макетами, см. Источник макета.

Начало работы

В зависимости от вашей ситуации фактические задачи могут различаться. Используйте следующую таблицу, чтобы начать работу.

Что вы хотите сделать?	См….
Выясните, какой тип макета лучше всего использовать в моей ситуации	Решите, какой тип макета вы хотите
Создайте новый макет для отчета на основе существующего макета, сохранив существующий макет как есть.	Создать новый макет
Внесение изменений в существующий макет, используемый в отчете	Изменить макет
У меня есть новая версия файла макета для отчета. Я хочу заменить существующий файл макета.	Заменить макет
Переключение текущего макета, используемого отчетом, на другой макет	Настройка макета, используемого отчетом
Изменение имени и описания макета	Переименование макета

Решите, какой тип макета вы хотите

Первое, что нужно сделать при создании макета, это решить, какой тип макета вы хотите. Вы можете выбрать Word, Excel или RDLC. Тип макета будет зависеть от того, как вы хотите, чтобы сгенерированный отчет выглядел. Кроме того, это зависит от ваших знаний прикладного программного обеспечения для создания макетов, такого как Word, Excel и SQL Server Report Builder.

• Макеты Excel, как правило, легче всего создавать и изменять, поскольку функции суммирования данных, добавления графики и стилей являются общими функциями Excel.

• Не все отчеты и документы имеют набор данных, оптимизированный для использования с макетом Excel. Например, агрегаты и сложные вычисления лучше всего работают с макетами RDLC или Word. То же самое и с документами.

• Если вы только вносите изменения в стиль, такие как тип, размер и цвет шрифта, макет Word также является хорошим выбором.

• Добавление полей данных или изменение порядка полей данных в Word или RDLC более сложны, чем в Excel.

• Макеты Word и RDLC удобно использовать для отчетов, которые в конечном итоге будут распечатаны.

• Общие принципы разработки макетов Word и RDLC аналогичны. Однако каждый тип имеет определенные конструктивные особенности, влияющие на то, как сгенерированный отчет отображается в Business Central. Один и тот же отчет может выглядеть по-разному при использовании макета Word по сравнению с макетом RDLC.

Создать новый макет

Существует два способа создания нового макета из существующего макета. Один из способов — сохранить существующий макет в копию. Другой способ — экспортировать существующий макет.

• Копирование
• Экспорт/импорт

Копирование — это быстрый способ создать новую раскладку, аналогичную существующей. Получив копию, вы сможете внести изменения, экспортировав макет.

1. Выберите значок, введите Макеты отчетов

   , а затем выберите соответствующую ссылку.

   Появится страница Report Layouts со списком всех макетов, доступных в настоящее время для всех отчетов.

2. Выберите макет, копию которого вы хотите скопировать для нового макета, затем выберите действие Изменить информацию .

   Если вы выбрали макет расширения, вас спросят, хотите ли вы отредактировать копию. Чтобы продолжить, выберите Да .

   Наконечник

   Чтобы помочь вам найти макет, используйте поле Поиск , панель Фильтр и сортировку столбцов.

3. Изменение имени макета .

4. Установите переключатель Сохранить изменения в режим копирования на Вкл. , затем выберите OK

   Новый макет отображается на странице Макеты отчетов .

5. Если вы хотите внести изменения в новый макет, см. раздел Изменение существующего макета.

Изменение макета

Выполните следующие действия, чтобы изменить существующий пользовательский макет.

1. Выберите значок, введите Макеты отчетов , а затем выберите соответствующую ссылку.

   Появится страница Report Layouts со списком всех макетов, доступных в настоящее время для всех отчетов.

2. Выберите макет, который вы хотите изменить, затем выберите действие Экспорт макета .

   Файл макета загружен на ваше устройство.

   Подсказка

   Чтобы помочь вам найти макет, используйте поле Поиск , панель Фильтр и сортировку столбцов.

3. Откройте файл макета в соответствующем приложении, например Word (для файла .docx) или Excel (для файла .xlsx).

   Для получения дополнительной информации см.:

   • Работа с макетами Word
   • Работа с макетами Excel
   • Работа с макетами RDLC

   Внесите изменения в файл и сохраните его.

4. Вернитесь на страницу Макеты отчетов , выберите существующий макет, затем выберите действие Заменить макет .

5. Выберите OK > Выберите , чтобы открыть проводник на вашем устройстве.

6. Найдите и выберите файл Excel, затем выберите Открыть .

   Выбранный файл загружается в макет, и вы возвращаетесь на страницу Макеты отчетов

   .

7. Если вы хотите увидеть, как отчет выглядит в новом макете, выберите макет в списке, затем выберите Запустить отчет .

Замена макета

Выполните следующие действия, чтобы заменить существующий файл пользовательского макета новым файлом.

1. Выберите значок, введите Макеты отчетов , а затем выберите соответствующую ссылку.

   Появится страница Report Layouts со списком всех макетов, доступных в настоящее время для всех отчетов.

2. Выберите существующий макет, затем выберите действие Заменить макет .

3. Выберите OK > Выберите , чтобы открыть проводник на вашем устройстве.

4. Найдите и выберите файл Excel, затем выберите Открыть .

   Выбранный файл загружается в макет, и вы возвращаетесь на страницу Макеты отчетов .

5. Если вы хотите увидеть, как отчет выглядит с новым макетом, выберите макет в списке, затем выберите Выполнить отчет .

Переименование макета

Выполните следующие действия, если хотите изменить имя и описание пользовательского макета.

1. Выберите значок, введите Макеты отчетов , а затем выберите соответствующую ссылку.

   Появится страница Report Layouts со списком всех макетов, доступных в настоящее время для всех отчетов.

2. Выберите макет, который вы хотите переименовать, затем выберите Изменить информацию действие.

   Подсказка

   Чтобы помочь вам найти макет, используйте поле Поиск , панель Фильтр и сортировку столбцов.

3. Измените имя макета , затем выберите OK .

См.