Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



Лабораторна робота №3 Тема роботи: прототипування інтерфейсів веб-сайтів

Лабораторна робота №3 Тема роботи: прототипування інтерфейсів веб-сайтів




Дата конвертації16.03.2017
Розмір52.9 Kb.
ТипЛабораторна робота

Лабораторна робота № 3
Тема роботи: прототипування інтерфейсів веб-сайтів.

Мета роботи: ознайомлення з принципами створення прототипів веб-сайтів в Microsoft Expression Blend 3 з використанням інструменту SketchFlow.
Теоретичні відомості
Прототипування – процес побудови робочої моделі системи.

Microsoft Expression Blend - WYSIWYG (What You See Is What You Get (англ. що бачиш, те й отримуєш) - інструмент для проектування користувацького інтерфейсу застосунків, що створюються на основі Windows Presentation Foundation. Blend також можна розглядати як ефективний візуальний редактор для формату XAML.

SketchFlow – інструмент в структурі Microsoft Expression Blend для швидкого створення інтерактивних прототипів

Microsoft Silverlight - це розширення до веб-оглядачів, яке дозволяє відображати на сторінці анімацію, векторну графіку, а також програвати звук та відео, що є характерною рисою RIA.
Контрольний приклад

Прототип інтернет магазину по продажу автомобілів та комплектуючих.
Хід роботи


  1. Створюємо новий проект Silverlight SketchFlow Aplication з іменем проекту lab3. Мова програмування: С#.

  2. Створення першого екрану з іменем Welcome SketchFlow Map.



  1. Розміщуємо на екрані Welcome картинку.

  • Project/Add existing Itemдодає об’єкт до проекту, яка зберігається разом з файлами проекту (панель Projects)

  • Клавіша Shift при розтягуванні об’єкту дозволяє зберігати пропорції.

  • ПКМ / AutoSize / Fill – заповнює робоче вікно вибраним об’єктом.



  1. Розміщуємо на екрані Welcome кнопку «Увійти на сайт».

  • Assets / Styles / Sketch Styles / Button Sketch





  1. Створюєм нове вікно Index в SketchFlow Map.

  • ПКМ / Create a screen – створення нового вікна у SketchFlow Map.




  1. Створюємо у новому вікні Index панель з 4 кнопками (Автомобілі, Колеса, Про компанію, Інформація).

  • Assets / Styles / Sketch Styles / Rectangle – створення панелі.




  1. Створюєм нове вікно Auto в SketchFlow Map для кнопки автомобілі.

  2. Для перенесення меню з вікна Index в вікно Auto створюємо новий компонент (принцип include) з назвою menu для того щоб поточні зміни відображались на всіх сторінках.

  • Виділяємо необхідні об’єкти / ПКМ / Make Into Component Screen




  1. Підключаємо новий компонент menu до сторінки Auto (Insert a component screen).





  1. Встановлюємо навігацію для кнопки «Автомобілі» у вікно Auto.

  • ПКМ / Navigate to




  1. Доробляємо всі вікна в SketchFlow Map та робимо відповідну навігацію (відповідно до п. 7-10).




  1. Повертаємось до сторінки Index та вставляємо на ній текст.

  • Assets / Styles / Sketch Styles / TextBox – додавання тексту

  • Assets / Styles / Sketch Styles / TextBlock – додавання тексту з можливістю редагування в прототипі.

  1. Додамо кнопку «Назад» та «Онлайн чат».




  1. Створюємо функціонал кнопки «Онлайн чат».

  • Додаємо панель Assets / Styles / Sketch Styles / Rectangle

  • Додаємо в прямокутник «Лог спілкування з менеджером» та «Повідомлення» в текстовий блок, а також кнопку «ОК»



  • Виділяємо всі компоненти створеного вікна та створюємо компонент chat

  • Робимо компонент chat скритим (Propertis / Opacity -> 0% )

  • Додаємо новий стан компонента chat_off (States / Add state). Кнопка state recording показує, що стан записується.

  • Додамо стан компонента chat_on, робимо його Opacity -> 100% і переходимо в Base, щоб зняти запис.

  • Активуємо кнопку (ПКМ /Activate State / chat_on )

  • Компілюєм проект (F5).





  1. Заповнюємо вікно «Про компанію» та кнопку «Інформація»: додаємо заголовок (Title Text) та будь-який текст.



16.Заповнюємо сторінку «Шини».



  • Додаємо TextBox-Scetch (Assets / Styles / Sketch Styles / TextBlock) на верх сторінки з написом «Текст про колеса».

  • Створюмо панель (Assets / Styles / Sketch Styles / Rectangle).

  • Додаємо кнопку «Замовити»



  • Додаємо в проект 3 картинки з рисунком коліс (Project/Add existing Item).

  • Додаємо картинки «стрілки прокрутки».



Додаємо TextBlock з надписом «ціна 600 грн» і робимо його прозорим (Properties/Opacity – 0%).

- Додаємо в панель прямокутник, в який вставляємо текст «600 грн» і кнопку «Видалити» і робимо їх прозорими.



  • Записуємо анімацію (додаємо новий кадр і змінюємо прототип). Використовуємо вікно SketchFlow Animation і нажимамо «+» для створення першого кадру, в якому переміщаємо курсор на колесо.

Кадр 2. (+ в правому верхньому вікні). В цьому кадрі збільшуємо середнє колесо і робимо видимою ціну над ним. Встановлюємо тривалість кадру 0 сек. Компілюємо і запускаємо проект.

  • Наступний крок по анімації – перетягування колеса в корзину і висвітлення його ціни. Записуємо ще один кадр, при цьому ціну робимо невидимою. При цьому колесо в панелі має бути напівпрозорим.



  • Додаємо ще один кадр на якому зменшуємо в корзині колесо і робимо видимою панель з кнопкою і ціною.

17 .Заповнюємо сторінку «Автомобілі».



  • Виводимо список всіх автомобілів за допомогою компонента ListBox:Sketch, вставляємо прямокутник (Rectangle) і кнопку «Замовити».



  • Завантажуємо в ListBox дані за допомогою вкладки Date (Project->Add Sample Data Sourse->Difine New Samples Data).

Даємо назву cars і отримуємо створене джерело даних з двома полями текстовим і булевим.



Змінуємо тип і назву полів: Property1 (image) – тип Image, та за допомогою кнопки Brouse вибираємо папку з фотографіями автомобілів. Property2 (description) - тип String.



Для того щоб заповнити ListBox сформованими даними перетягуємо Collection у поле ListBox



Для того щоб змінити розмір скористоаємо ПКМ/Edit Edditional Template/Edit General Item / Edit Current. Збільшуємо рисунок автомобіля та змінюємо колір текста.



17. Створюємо сторінку Cat («Корзина») із зв’язками з Tyres i Auto.



Створюємо на сторінці кнопку “Назад» та кнопку «Оформити» а також поля для введення ПІБ, та стану замовлення. Перетягуємо Collection у створений ListBox





  1. На сторінках Автомобілі і Шини при натисненні кнопки «Замовити» ротимо перехід в корзину.



  1. Додаємо сторінки CheckOutOK (замовлення успішне) і CheckOutError (помилка при замовленні).



  1. Редагуємо сторінку CheckOutOK.



  1. Редагуємо сторінку CheckOutError



  1. Додаємо до сторінок CheckOutOK і CheckOutError кнопку «Назад».

  2. Для розміщення прототипу на веб-сторінці виконуємо File/Package ScetchFlow Project



  • Теоретичні відомості Прототипування
  • SketchFlow
  • Контрольний приклад Прототип інтернет магазину по продажу автомобілів та комплектуючих.
  • Project/ Add existing Item
  • ПКМ / AutoSize / Fill
  • Assets / Styles / Sketch Styles / Button Sketch
  • Assets / Styles / Sketch Styles / Rectangle
  • Виділяємо необхідні об’єкти / ПКМ / Make Into Component Screen
  • Assets / Styles / Sketch Styles / TextBox
  • Opa c ity -> 100%
  • Assets / Styles / Sketch Styles / TextBlock