GUI - projektowanie interfejsów

Transkrypt

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

2 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.

3 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.

4 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).

5 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;

6 Rysunek: Storyboarding

7 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.

8 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.

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

10 Rysunek: Za dużo tekstu

11 Rysunek: Za mało tekstu

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

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

14 Rysunek: Źle dobrane kolory

15 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 tys. osób niepełnosprawnych, z czego ok. 59% jest w wieku produkcyjnym. Większość z nich (83%) jest bierna zawodowo.

16 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.

17 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;

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

19 Rysunek: MAGic - klawiatura Rysunek: Kontrast kolorów

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

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

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

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

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

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

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

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

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

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

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

31 Rysunek: Wersje systemu (X 2016) Źródło:

32 Rysunek: Wersje systemu (X 2017) Źródło:

33 Rysunek: Wielkość ekranu. Źródło:

34 Rysunek: Widgety w środowisku Android

35 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.

36 Rysunek: GUI - plik XML

37 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;

38 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.

39 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) (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ść 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.

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

41 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

42 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.

43 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

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

45 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.

46 Dziękuję za uwagę