Макет пользовательского интерфейса

Нажмите, чтобы скопировать

5 важных советов по созданию макета пользовательского интерфейса.


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

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

Но есть несколько важных моментов, которые необходимо учесть:

Определите, какое приложение вам нужно: веб- или мобильное.

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

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

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

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

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

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

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

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

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

Обычно заявка включает в себя:

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

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

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

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

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