5.3 Макеты страниц

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

Если у вас нет готового макета от дизайнера, то этим дизайнером можете стать вы сами. Предлагаю вашему вниманию онлайн инструмент Figma (кстати его мне посоветовал один знакомый дизайнер). С помощью него можно создавать разные макеты для своего приложения, не прибегая к услугам дизайнера. Работать с ним очень просто - почти как с Photoshop. Если ранее вы ничего о нём не слышали Figma - самое время с ним познакомиться, зайдя в онлайн редактор.

Есть и другие онлайн редакторы. Выберите какой вам нравится и попробуйте создать какой-нибудь макет, если раньше этого не делали.

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

Для дизайна страницы нам понадобится палитра цветов. Я обычно использую этот инструмент. Тут можно правильно подобрать цветовую гамму для всего приложения. Не стал исключением и этот сайт.

Давайте сделаем приложение в тёмно-голубых тонах:

Я выбрал 3 варианта расцветки - они обозначены красными кружочками.

Чтобы придать приложению живой вид, а также сделать его понятнее, можно добавить разнообразные картинки. В этом деле нам поможет очень удобный и популярный сервис Flat Icon. Здесь собрана просто огромная коллекция картинок на любой вкус, из которых очень много бесплатных. Это настоящая находка для UI разработчика и дизайнера: всегда можно почерпнуть свежие идеи или взять готовые. Большое удобство еще и в том, что картинки можно редактировать и скачивать в разных форматах. Мы же будем работать с форматом svg.

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

На макете присутствуют: название страницы с иконкой, ФИО пользователя, кнопка “Выйти” и разделы в виде плитки.

В разделе “Приёмы” доктор может посмотреть список приёмов клиентов у всех врачей. Также есть возможность фильтрации.

В разделе “События” находится список всех событий, которыми могут быть новости компании, несчастный случай с клиентом или запланированное совещание.

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

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

Доктор в любой момент имеет возможность просмотреть список клиентов и историю обращений любого из них.

Наконец, если нужно посмотреть информацию о коллеге - достаточно перейти в раздел “Сотрудники”.

Очередной макет выглядит так:

Здесь мы видим список всех приёмов у докторов клиники и фильтр. Полей фильтра может быть больше, я сделал четыре лишь для примера. Пользователь может установить флажок “Только я” и просматривать только те приёмы, которые будет проводить именно он. В тоже время можно указать необходимый диапазон дат, а также отыскать приёмы определённого клиента.

Создадим страницу входа в приложение, где пользователь должен ввести логин и пароль:

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

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

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