ЛАБОРАТОРНАЯ РАБОТА №1 Проектирование графического интерфейса пользователя Цель работы: познакомиться с основными элементами управления (виджетами) и приобрести навыки проектирования графического интерфейса пользователя. Ход работы: 1. Сперва составляем навигационную схему выбранного сайта. Для примера взята карта навигации интернет-сайта VICTORIA (https://www.victoria-salon.ru/). Информация на моем сайте помогает потенциальным посетителям найти необходимые сведения о салоне, узнать о возможных услугах, ценах и адресах салонов. На сайте можно увидеть полный перечень разделов и/или всех страниц. Карту навигации можно составить в виде дерева: Главная страница Услуги Салон Для волос Адрес Для ногтей Фото Для бровей и ресниц Эпиляция Акции Мастера Новости Анастасия Воронова О нас Запись Вход Вероника Гуляева Виктория Терешкова Вакансии Валентина Шпидько Рисунок 1- Карта навигации в виде дерева Или же можно составить карту навигации в виде многоуровневого списка: 1. Главная страница 1.1. Услуги 1.1.1. Для волос 1.1.2. Для ногтей 1.1.3. Для бровей и ресниц 1.1.4. Эпиляция 1.2. Салон 1.2.1. Адрес 1.2.2. Фото 1.3. Акции 1.4. Мастера 1.4.1. Анастасия Воронова 1.4.2. Вероника Гуляева 1.4.3. Виктория Терешкова 1.4.4. Валентина Шпидько 1.5. Новости 1.5.1. О нас 1.5.2. Вакансии 1.6. Запись 2. Далее необходимо составить Макеты графического интерфейса Пользователя. Чтобы создать макет, воспользуемся программой Microsoft Visio Логотип Вход на сайт Логин Пароль Войти на сайт Забыли пароль? Помощь Вы еще не зарегистрированы у нас на сайте? Регистрация Рисунок 2 - Начальная страница 3. Теперь опишу элементы управления для каждого составленного макета. В столбце Название поля перечислю все элементы, размещённые на макете. В столбце Тип – укажу тип, т.е. чем является элемент. В столбцах Условия видимости и Условия доступности укажу кому виден и доступен каждый элемент интрефейса. В столбце Описание немного подробнее опишу для чего этот элемент, какие он действия совершает. Таблица 1 - Описание элементов управления Название поля Тип Логотип Ссылка Начальная страница Вход на сайт Логин Текстовое поле Пароль Текстовое поле Условия видимости Кнопка Забыли пароль? Помощь Ссылка Регистрация Ссылка Описание Ссылка на сайт Начальная страница Виден всем Войти на сайт Условия доступности Доступен всем Текстовое поле для ввода логина указанного при регистрации на сайте Текстовое поле для ввода пароля указанного при регистрации на сайте При правильно введенном логине и пароле пользователь может зайти на сайт Ссылка на другую страницу сайта, для восстановления пароля Ссылка на другую страницу сайта, для регистрации 4. Контрольные вопросы 1. Что такое графический интерфейс пользователя? Графический интерфейс пользователя (GUI) – разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений. 2. Какие бывают виды графического интерфейса? Можно выделить следующие виды графического интерфейса пользователя: простой: типовые экранные формы и стандартные элементы интерфейса, обеспечиваемые самой подсистемой GUI; истинно-графический, двухмерный: нестандартные элементы интерфейса и оригинальные метафоры, реализованные собственными средствами приложения или сторонней библиотекой; трёхмерный. 6. Что такое «пиктограмма». Пиктограмма - знак, отображающий важнейшие узнаваемые черты объекта, предмета или явления, на которые он указывает, чаще всего в схематическом виде. Вывод: в результате выполнения данной лабораторной работы я познакомилась с основными элементами управления (виджетами) и приобрела навыки проектирования графического интерфейса пользователя.
