AppMaster.io Blog Ru

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

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

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

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

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

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


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


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


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


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


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


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

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


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


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

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