GUI - projektowanie interfejsów

Podobne dokumenty
GUI - projektowanie interfejsów

GUI - projektowanie interfejsów

GUI - projektowanie interfejsów

Programowanie aplikacji mobilnych

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

Agenda. Activity cd Layouty Jednostki Dialogi LogCat Drugie Activity i Intents Serializacja Własne widoki Menu

Wprowadzenie do programowania aplikacji mobilnych

Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło

dr Artur Bartoszewski dr Artur Bartoszewski - Aplikacje mobilne - Wykład

Dynamiczne i wydajne tworzenie interfejsu. Piotr Michałkiewicz

5.1. Światłem malowane

Wymagania edukacyjne z zajęć komputerowych w klasie 5

Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika

GUI - projektowanie interfejsów

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa VI

Programowanie aplikacji mobilnych

Programowanie aplikacji mobilnych

Aplikacje mobilne. Pliki zasobów, grafiki, menu, podpinanie zdarzeń. dr Tomasz Jach Instytut Informatyki, Uniwersytet Śląski

Zadanie II pt.: Dostawa i instalacja specjalistycznych pomocy dydaktycznych dla dzieci słabo widzących i niewidomych.

INFORMATYKA KLASA IV

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa 4 Wymagania edukacyjne na poszczególne oceny szkolne dla klasy 4

Przed skonfigurowaniem tego ustawienia należy skonfigurować adres IP urządzenia.

Zadanie I pt.: Dostawa i instalacja sprzętu komputerowego wraz z oprogramowaniem.

Oprogramowanie specjalistyczne

I. Wstawianie rysunków

Jak dodać własny szablon ramki w programie dibudka i dilustro

Dodawanie grafiki i obiektów

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji

Grafika komputerowa. Zajęcia 7

Oprogramowanie powiększające obraz na ekranie, zmniejszające zmęczenie wzroku. Podręcznik Szybkiego Startu

GUI - projektowanie interfejsów

Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika

Narzędzia informatyczne wspierające przedsięwzięcia e-commerce

Projektowanie, tworzenie aplikacji mobilnych na platformie Android

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa IV

GUI - projektowanie interfejsów cz. II

CENTRUM ROZWOJU. ul. Krótka KRAKÓW. ZNAKI I SYGNA Y DROGOWE ZAKTUALIZOWANE Pakiet EXT03 wersja 1.1

Layouty. Kilka layoutów

Lokalizacja Oprogramowania

Agenda. Implicit intents Wyświetlanie obrazków Menu Ikona aplikacji Praca z kolekcjami i ListView Własny widok

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

WSTAWIANIE GRAFIKI DO DOKUMENTU TEKSTOWEGO

Pierwsza strona internetowa

Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu?

Co to jest jest oprogramowanie? 8. Co to jest inżynieria oprogramowania? 9. Jaka jest różnica pomiędzy inżynierią oprogramowania a informatyką?

Cechy systemu X Window: otwartość niezależność od producentów i od sprzętu, dostępny kod źródłowy; architektura klient-serwer;

Pokaz slajdów na stronie internetowej

Laboratorium Systemów Mobilnych. Wykład 1

Projektowanie zorientowane na uŝytkownika

Netkata. PROCES projektowy Interfejsu Użytkownika. Spis treści. Netkata Interactive

KOMPUTEROWE SYSTEMY GRAFIKI INŻYNIERSKIEJ

Kompleksowe tworzenie aplikacji klasy Desktop z wykorzystaniem SWT i

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

EDUKACYJNE FORUM KWALIFIKACJI ZAWODOWYCH MULTIMEDIALNY KATALOG ZAWODÓW ZAWÓD: TECHNIK TYFLOINFORMATYK

Ćwiczenie Nr 6 Przegląd pozostałych najważniejszych mechanizmów systemu operacyjnego Windows

4.2. Program i jego konfiguracja

Wykład 1 Inżynieria Oprogramowania

Krótki przegląd własności języka CSS

Kurs obsługi systemu CMS. Prawie wszystkie treści wyświetlające się na stronie są zlokalizowane w dziale artykuły.

Specyfikacja techniczna po zmianach. Zadanie II: Dostawa i instalacja specjalistycznych pomocy dydaktycznych dla dzieci słabo widzących i niewidomych

Jak posługiwać się edytorem treści

Dotykowa tablica interaktywna Język gestów Zasilanie przez USB

Symulator doboru koloru i przetłoczenia bramy garażowej oraz wzoru drzwi wejściowych. do elewacji budynku klienta

JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?

KARTA INFORMACYJNA Z INFORMATYKI DO KLASY 4. Imię i nazwisko ucznia:

Analiza i projektowanie oprogramowania. Analiza i projektowanie oprogramowania 1/32

Podstawowe elementy GUI cz. 2 i 3 - zadania

Jak przygotować poster naukowy

Tematy lekcji informatyki klasa 4a styczeń 2013

Mamy najlepsze ceny na rynku!

Ikona aplikacji. Ikona aplikacji to grafika wyświetlająca się na ekranie ipada. Służy do uruchomienia aplikacji Salesbook.

Rozdział 2. Konfiguracja środowiska pracy uŝytkownika

1 Rejestrator czasu pracy

Urządzenia techniki komputerowej Identyfikacja i charakteryzowanie urządzeń zewnętrznych komputera. Budowa i zasada działania skanera

MODELE CYKLU ŻYCIA OPROGRAMOWANIA (1) Model kaskadowy (często stosowany w praktyce do projektów o niewielkiej złożonoś

WYMAGANIA EDUKACYJNE NIEZBĘDNE DO UZYSKANIA POSZCZEGÓLNYCH ŚRODROCZNYCH I ROCZNYCH OCEN Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV

Dokumentacja techniczno-użytkowa Serwis internetowy

Rozdział 5: Style tekstu

Przewodnik Google Cloud Print

Corel Draw, Adobe Illustrator grafika wektorowa

Przewodnik Google Cloud Print

Uniwersytet Jagielloński Interfejsy Graficzne. Wykład 7. Prototypy. Barbara Strug

CEL zapoznanie z programem do tworzenia rysunków i ukazanie możliwości Edytora obrazów do sporządzania rysunków i ikon.

SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)

Procesowa specyfikacja systemów IT

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

I. Raport wykonywalności projektu

Galileo v10 pierwszy program

Tworzenie stron internetowych w kodzie HTML Cz 5

Pasek menu. Ustawienia drukowania

Maskowanie i selekcja

TEST 1. Technologie Informacyjne WORD 2010

Ćw. I Projektowanie opakowań transportowych cz. 1 Ćwiczenia z Corel DRAW

Przewodnik Google Cloud Print

GM System. Solid Edge Technical Publications Oferta produktu

Dell Display Manager podręcznik użytkownika

Dokumentacja projektu Makao karciana gra sieciowa

GRAFIKA RASTROWA. WYKŁAD 1 Wprowadzenie do grafiki rastrowej. Jacek Wiślicki Katedra Informatyki Stosowanej

Moduł IV Internet Tworzenie stron www

Transkrypt:

Katedra Inżynierii Wiedzy, Uniwersytet Ekonomiczny w Katowicach Wykład 3

Prototypowanie - definicja Rozwój oprogramowania/aplikacji (gry) poprzez tworzenie kolejnych wersji prototypów. Prototypowanie szybkie przedstawienie pierwszej wersji projektu i ewentualna jego dalsza analiza / udoskonalenie; wykrycie brakujących elementów/ funkcjonalności; wykrycie potencjalnych problemów; doprecyzowanie wymagań; testowanie w trakcie budowy danej wersji.

Rodzaje prototypowania prototypowanie aplikacji prototypowanie przyrostowe - punktem wyjścia jest bardzo ogólny schemat, który w kolejnych iteracjach jest modyfikowany aż do uzyskania akceptowalnej wersji, ale: po dostarczeniu elementu systemu nie zmienia się go; prototypowanie ewolucyjne - zbliżone do przyrostowego, ale poszczególne elementy są modyfikowane w trakcie tworzenia prototypu (pewnie to podejście zostanie wybrane przez Państwa na zajęciach) ; prototypowanie z porzuceniem - rozwijanie i modyfikowanie specyfikacji tak, aby na końcowym etapie znana była pełna specyfikacja, a sam prototyp zostaje porzucony.

Prototypowanie GUI prototypowanie interfejsu pozwala ustalić docelowy wygląd aplikacji (w porozumieniu z klientem / z zespołem); klient nie zawsze narzuca wymagania wizualne (czasami chodzi tylko o spełnienie funkcjonalności); konkretne gatunki gier narzucają określone elementy interfejsu, ale wyjście poza schemat może skutkować ciekawym efektem; w przypadku gier / serwisów online dobrym pomysłem może być wybranie narzędzi do tworzenia makiet (Axure RP lub UXPin).

Storyboarding koncepcja bazuje na rysowaniu na kartce/tablicy odręcznch szkiców interfejsu wraz z ewentualnym zaznaczeniem przepływu pomiędzy funkcjami; jedna z najłatwiejszych technik projektowania interfejsu; stosowana najczęściej do elementów, których działanie jest dobrze znane;

Rysunek: Storyboarding

Prototypowanie HTML zastosowanie języka HTML do opracowania prototypu interfejsu; istotną wadą jest fakt, iż opracowane elementy niekoniecznie pojawią się dokładnie w takim samym formacie, co końcowy produkt.

Prototypowanie językowe opracowanie prototypu interfejsu w docelowym języku aplikacji; finalny produkt wizualnie będzie odpowiadał dokładnie elementom, które widoczne będą na ekranie; wadą tego podejścia jest znacznie większy nakład czasowy wymagany do opracowania prototypu.

Ocena interfejsu ocena heurystyczna - zgodność z zasadami; przegląd interfejsu z użytkownikiem; ocena interaktywna u użytkownika; formalne testowanie użyteczności.

Rysunek: Za dużo tekstu

Rysunek: Za mało tekstu

Rysunek: Niewielka funkcjonalność przy zbyt dużej liczbie opcji

Rysunek: Możliwość bezmyślnych działań użytkownika

Rysunek: Źle dobrane kolory

Tyfloinformatyka Tyfloinformatyk Specjalista z zakresu technologii wspomagającej - osoba, która ma wiedzę na temat aktualnego poziomu rozwoju tej technologii, potrafi dobrać sprzęt i oprogramowanie wspomagające do rodzaju i stopnia dysfunkcji wzroku użytkownika komputera i nauczyć efektywnego ich używania. Osoby niepełnosprawne należą do tzw. grupy ryzyka, którą cechuje niekorzystne położenie i dyskryminacja w zatrudnieniu na rynku pracy. W Polsce jest 5.457 tys. osób niepełnosprawnych, z czego ok. 59% jest w wieku produkcyjnym. Większość z nich (83%) jest bierna zawodowo.

Technologia wspomagająca Sprzęt komputerowy i oprogramowanie umożliwiające używanie komputera przez osoby niewidome i słabo widzące; programy udźwiękowiające oraz urządzenia brajlowskie; programy powiększające ekran; elektroniczne urządzenia powiększające dokumenty; notatniki brajlowskie; grafiki wypukłe.

Windows JAWS - Job Access With Speech Blind and Low Vision Group at Freedom Scientific of St. Petersburg; najpopularniejszy czytnik ekranowy na świecie; JAWS pozwala na użycie skryptów pisanych w wewnętrzym języku skryptowym JAWS; wsparcie składu HTML; wbudowany OCR rozpoznający grafiki na ekranie;

Rysunek: Windows JAWS Rysunek: MAGic - powiększanie ekranu

Rysunek: MAGic - klawiatura Rysunek: Kontrast kolorów

Rysunek: Przykład schematu kolorów z kontrastem

Rysunek: Przykład schematu kolorów z kontrastem II

Android Studio Rysunek: Producenci na rynku. Źródło: opensignal.com/reports/ Samsung posiada 43% udziałów w rynku

Rysunek: Liczba urzadzeń na rynku. Źródło: opensignal.com/reports/ Podział na konkretne modele

Rysunek: Urządzenia na rynku. Źródło: opensignal.com/reports/ Sierpień 2013

Rysunek: Urządzenia na rynku. Źródło: opensignal.com/reports/ Sierpień 2014

Rysunek: Wersje systemu Źródło: opensignal.com/reports/ Biała linia pokazuje procentowy udział wiodącej wersji

Rysunek: Wersje systemu w zależności od kraju Źródło: opensignal.com/reports/

Rysunek: Porównanie z ios Źródło: opensignal.com/reports/

Rysunek: Wielkość ekranu dostępnych urządzeń. Źródło: opensignal.com/reports/

Rysunek: To samo ale dla ios Źródło: opensignal.com/reports/

Rysunek: Wersje systemu (X 2016) Źródło: https://developer.android.com

Rysunek: Wersje systemu (X 2017) Źródło: https://developer.android.com

Rysunek: Wielkość ekranu. Źródło: https://developer.android.com

Rysunek: Widgety w środowisku Android

Właściwości Widgetów wysokość, szerokość, czcionka; wielkość elementu - match (dopasowanie do elementu rodzica); padding - margines wewnętrzny między ramką a obiektem (dlatego najpierw umieszczamy elementy wewnętrz pojemnika np. layout, a dopiero potem padding); margin - margines zewnętrzny pomiędzy ramką a sąsiednimi obiektami.

Rysunek: GUI - plik XML

View groups - LinearLayout i RelativeLayout układ w poziomie; układ w pionie; układ ustalany na podstawie parametru: android:orientation. View groups - RelativeLayout układ w odniesieniu do rodzica - np. Container; odniesienie: Bottom Parent, Top Parent, (left, right, center); położenie elementów w odniesieniu do innyc elementów;

Jak zapewnić sobie wsparcie dla różnych urządzeń? rozmiary w postaci dip (px = dp ( dip 160 )); dla tekstów używamy sp; < supports screens > - wskazujemy, jakie rozmiary ekranu są wspierane; dostarczamy różne elementy resources (dla różnych ekranów); stosujemy różne layout.

dpi, dip, dp, dps, sp? px - rzeczywiste piksele na ekranie; in - inches cale; pt - points 1 72 wielkości cala bazując na rzeczywistym rozmiarze ekranu; dpi - dots per inch (kropki na cal) - 160 (w przypadku ekranu o niższej rozdzielczości), lub 240 (w przypadku ekranu o większej rozdzielczości); pixels = dpi razy szerokość (1.5 cala), a więc odpowiednio 240 lub 360 pikseli; gęstość - 1.0 - dla ekranów o niższej rozdzielczości oraz 1.5 dla większej rozdzielczości; Denisity-independent pixels (dip,dp, dps) - 240; scale-independent pixels - zależy od ustawień dotyczących czcionki.

Rysunek: Więcej szczegółów. Źródło: stackoverflow.com

Plik strings.xml i zasoby tworzenie aplikacji wielojęzycznych; ciągi znaków (jak np. opis przycisku) nie powinny być wpisane jako stałe w pliku layout.xml; korzystanie z informacji z pliku strings.xml umożliwi przygotowanie wersji dedykowanych dla różnych języków Rysunek: Struktura katalogów dla plikow strings.xml

The Draw 9-patch tool - tworzenie elementów GUI 9 części obrazy (np. przyciski) ze specjalnym rodzajem skalowania; określenie wyglądu obramowań; używane do android:background; cały obrazek podzielony jest na 9 obszarów. 4 narożniki - statyczne; 4 obszary pomiędzy narożnikami - powielane w jednym wymiarze (na szerokość, lub na wysokość); środek - skalowalny.

Bardziej złożone struktury więcej elementów niż 9; możliwe skalowanie tylko poziomo, lub tylko pionowo; wybrane fragmenty ramki mogą być stale. Rysunek: Przykład ramki

Rysunek: Stany przycisków Interaktywność kontrolek interaktywność kontrolek; osobne grafiki dla poszczególnych stanów przycisku; nie mamy Listenera do przycisku.

Stany kontrolek android:state enabled czy element jest aktywny; android:state focused czy element ma fokus; android:state pressed czy element jest wciśnięty; android:state checked czy element jest wybrany.

Dziękuję za uwagę