Описание пользовательского интерфейса и программных модулей

При разработке пользовательского интерфейса нужно учитывать следующие требования:

интерфейс должен быть максимально удобен и интуитивно прост;

пользователь должен иметь «под рукой» все необходимые средства для типовой работы с данными;

информация должна в зависимости от выполняемых задач разбита на логические подгруппы в пределах одной формы (так, кнопки «назад» и «вперед» обязаны размещаться рядом) информации не должно быть слишком много, чтобы в ней было легко ориентироваться;

для визуального оформления и эстетически приятного восприятия информации следует вводить графические элементы — фоновые картинки и прочую графику, использовать различные шрифты;

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

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

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

Рисунок 1.

Нажав на боковую кнопку в верхней панели либо сдвинув экран влево пользователь увидит боков меня в котором, он сможет передвигаться по разделам, как показано на рисунке 2.

Рисунок 2.

Так же при выборе контакта пользователь сможет просмотреть данные соответствующего контакта и отредактировать их, как показано на рисунке 3.

Рисунок 3.

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

Рисунок 4. Рисунок 5.