SlideShare a Scribd company logo
1 of 15
Разработка
графического
пользовательского
интерфейса
Выполнила студентка группы ПОС-10б
Лысакова Наталья
Стартовая страница сайта
Модель GUI Studio Design
Описание стартовой страницы сайта
• На главной странице изображено две кнопки «Авторизация» и
«Регистрация»
• Если у пользователя уже есть логин и пароль, то он нажимает кнопку
«Авторизация» и переходит на форму вода логина и пароля.
• Если пользователь еще ни разу не пользовался сайтом, то он нажимает на
кнопку «Регистрация» и переходит на страницу регистрации.
Страница регистрации
Модель GUI Studio Design
Описание страницы регистрации
• На странице регистрации пользователю предложено придумать себе логин и
пароль, а также ввести действующий адрес электронной почты, который
может пригодиться в случае утери пароля.
• Пароль необходимо ввести два раза – непосредственно в поле ввода пароля
и в поле «Повтор» для того, чтобы избежать опечаток в пароле, т.к. сам
порол в поле ввода не отображается: вместо него виды маскирующие
символы.
• После нажатия на кнопку «Зарегистрироваться», в случае если все данные
верны, пользователь получает сообщение с подтверждением регистрации и
ссылку на страницу авторизации для ввода логина и пароля.
Страница авторизации
Модель GUI Studio Design
Описание страницы авторизации
• На странице авторизации пользователь вводит свой логин и пароль для
входа в систему.
• Если авторизация прошла успешно, то пользователь перенаправляется на
страницу со своим игровым полем.
Игровое поле: дополнительные фреймы
Выход из
системы
Игровое поле: навигация
Модель GUI Studio Design
Описание игрового поля
• Игровое поле состоит из нескольких частей: поле, карман и сундук.

• При нажатии кнопки «Карман» поверх рабочего поля появляется слой,
содержащий плитки, которые пользователь поместил туда.
• При нажатии кнопки «Сундук» поверх рабочего поля появляется слой,
содержащий плитки, которые пользователь поместил туда на длительное
хранение.
• По нажатию кнопки «Выход» происходит выход из системы и для повторного
еѐ использования необходимо авторизоваться заново.
• Плитки на поле группируются в зависимости от категории и имеют общий
цвет рамки.

• При клике на плитку открывается связанная с ней ссылка, либо файл.
Спасибо за внимание

More Related Content

Viewers also liked

Stroller shop магазин аксессуаров для колясок
Stroller shop   магазин аксессуаров для колясокStroller shop   магазин аксессуаров для колясок
Stroller shop магазин аксессуаров для колясокNatasha Lysakova
 
Basic administration for net scaler 9.2 workbook
Basic administration for net scaler 9.2 workbookBasic administration for net scaler 9.2 workbook
Basic administration for net scaler 9.2 workbookapshirame
 
Basic administration netscaler cns 203-3 i
Basic administration netscaler cns 203-3 iBasic administration netscaler cns 203-3 i
Basic administration netscaler cns 203-3 iapshirame
 
Τσουκαλά Βασιλική-Διπλωματική εργασία
Τσουκαλά Βασιλική-Διπλωματική εργασίαΤσουκαλά Βασιλική-Διπλωματική εργασία
Τσουκαλά Βασιλική-Διπλωματική εργασίαVassiliki Tsukala
 
2014-07-08-Speed-on-Ice
2014-07-08-Speed-on-Ice2014-07-08-Speed-on-Ice
2014-07-08-Speed-on-IceNorbert Gruen
 
лабораторная работа №4 uml
лабораторная работа №4 umlлабораторная работа №4 uml
лабораторная работа №4 umlNatasha Lysakova
 
лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0Natasha Lysakova
 

Viewers also liked (11)

Stroller shop магазин аксессуаров для колясок
Stroller shop   магазин аксессуаров для колясокStroller shop   магазин аксессуаров для колясок
Stroller shop магазин аксессуаров для колясок
 
Basic administration for net scaler 9.2 workbook
Basic administration for net scaler 9.2 workbookBasic administration for net scaler 9.2 workbook
Basic administration for net scaler 9.2 workbook
 
Basic administration netscaler cns 203-3 i
Basic administration netscaler cns 203-3 iBasic administration netscaler cns 203-3 i
Basic administration netscaler cns 203-3 i
 
JSAE-20075018-Gruen
JSAE-20075018-GruenJSAE-20075018-Gruen
JSAE-20075018-Gruen
 
วันของแม่
วันของแม่วันของแม่
วันของแม่
 
วันของแม่
วันของแม่วันของแม่
วันของแม่
 
Τσουκαλά Βασιλική-Διπλωματική εργασία
Τσουκαλά Βασιλική-Διπλωματική εργασίαΤσουκαλά Βασιλική-Διπλωματική εργασία
Τσουκαλά Βασιλική-Διπλωματική εργασία
 
2014-07-08-Speed-on-Ice
2014-07-08-Speed-on-Ice2014-07-08-Speed-on-Ice
2014-07-08-Speed-on-Ice
 
Google car
Google carGoogle car
Google car
 
лабораторная работа №4 uml
лабораторная работа №4 umlлабораторная работа №4 uml
лабораторная работа №4 uml
 
лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0лабораторная работа №3 dfd & idef0
лабораторная работа №3 dfd & idef0
 

лабораторная работа №5 GUI

  • 4. Описание стартовой страницы сайта • На главной странице изображено две кнопки «Авторизация» и «Регистрация» • Если у пользователя уже есть логин и пароль, то он нажимает кнопку «Авторизация» и переходит на форму вода логина и пароля. • Если пользователь еще ни разу не пользовался сайтом, то он нажимает на кнопку «Регистрация» и переходит на страницу регистрации.
  • 7. Описание страницы регистрации • На странице регистрации пользователю предложено придумать себе логин и пароль, а также ввести действующий адрес электронной почты, который может пригодиться в случае утери пароля. • Пароль необходимо ввести два раза – непосредственно в поле ввода пароля и в поле «Повтор» для того, чтобы избежать опечаток в пароле, т.к. сам порол в поле ввода не отображается: вместо него виды маскирующие символы. • После нажатия на кнопку «Зарегистрироваться», в случае если все данные верны, пользователь получает сообщение с подтверждением регистрации и ссылку на страницу авторизации для ввода логина и пароля.
  • 10. Описание страницы авторизации • На странице авторизации пользователь вводит свой логин и пароль для входа в систему. • Если авторизация прошла успешно, то пользователь перенаправляется на страницу со своим игровым полем.
  • 11. Игровое поле: дополнительные фреймы Выход из системы
  • 14. Описание игрового поля • Игровое поле состоит из нескольких частей: поле, карман и сундук. • При нажатии кнопки «Карман» поверх рабочего поля появляется слой, содержащий плитки, которые пользователь поместил туда. • При нажатии кнопки «Сундук» поверх рабочего поля появляется слой, содержащий плитки, которые пользователь поместил туда на длительное хранение. • По нажатию кнопки «Выход» происходит выход из системы и для повторного еѐ использования необходимо авторизоваться заново. • Плитки на поле группируются в зависимости от категории и имеют общий цвет рамки. • При клике на плитку открывается связанная с ней ссылка, либо файл.