Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

05/04/2003 1 Projektowanie Aplikacji Komputerowych Budowa interfejsu graficznego.

Podobne prezentacje


Prezentacja na temat: "05/04/2003 1 Projektowanie Aplikacji Komputerowych Budowa interfejsu graficznego."— Zapis prezentacji:

1 05/04/ Projektowanie Aplikacji Komputerowych Budowa interfejsu graficznego

2 05/04/ Spis treści Wizualna komunikacja Rozmieszczenie kontrolek Uwzględnienie lokalizacji oprogramowania

3 05/04/ Wizualna komunikacja [2] Aspekty interfejsu mające wpływ na komunikacje z użytkownikiem: Kompozycja i organizacja Kolor Czcionki Trzeci wymiar

4 05/04/ Kompozycja i organizacja [2] Hierarchia informacji Która informacja jest najważniejsza dla użytkownika Jaka jest kolejność czynności wykonywanych przez użytkownika Wyróżnienie lub uwypuklenie Informacja najważniejsza powinna być w jakiż sposób wyróżniona (np. kolejnością, kolorem, izolacją, położeniem) Struktura i równowaga Porządek w rozłożeniu kontrolek jest istotnym czynnikiem stanowiącym o przejrzystości i czytelności interfejsu Związki między elementami Jeżeli istnieje związek między kontrolkami interfejsu, to powinien być on wyraźnie widoczny, np. poprzez przestrzenne rozmieszczenie Czytelność i płynność Istnienie każdego elementu interfejsu powinno być uzasadnione Jeżeli okno wymaga wykonania kilku czynności, to powinno być widoczne jaka jest ich kolejność Spójność Budowa interfejsu powinna przypominać budowę interfejsów systemu operacyjnego

5 05/04/ Kolor [2] Kolor jest bardzo ważnym elementem komunikacji wizualnej Wyróżnia elementy interfejsu Grupuje elementy tworzące całość logiczną Niesie dodatkową informację Może nieść ładunek psychologiczny (ciepły i zimny) Uwagi Użycie koloru może nie być czytelne dla użytkownika Odbiór koloru jest subiektywny Niektórzy użytkownicy mogą pracować z ekranami czarno-białymi lub nieczytelnymi kolorami Około 9% męskiej populacji ma zaburzenia rozpoznawania koloru Kolory można zmienić w systemie Użycie koloru Ograniczona liczba kolorów Kolory powinny tworzyć harmonijną paletę Kolory powinny być subtelne

6 05/04/ Czcionki [2] Ograniczona liczba czcionek Wyróżnienie, pogrubienie, podkreślenie nie powinno być nadużywane Jeżeli czcionki nie stanowią elementu interfejsu ale są np. dokumentem powinna istnieć możliwość ich zmiany Złe czcionki Dobre czcionki

7 05/04/ Trzeci wymiar [2] Wiele interfejsów korzysta z cieniowania, aby stworzyć wrażenie trzeciego wymiaru Hipotetyczne źródło światła jest umieszczone w lewym-górnym rogu ekranu Uwypuklanie lub zagłębianie może służyć do grupowania kontrolek, które tworzę logiczną całość Nie należy używać trzeciego wymiaru dla elementów, które nie są interaktywne

8 05/04/ Rozmieszczenie kontrolek Pixel DLU Rozmiary kontrolek Odległości między kontrolkami

9 05/04/ Pixel Najmniejszym widocznym elementem ekranu jest jego pojedynczy punkcik ang. pixel Na ekranie może być wyświetlana różna ilość punkcików w zależności od rozdzielczości Każdy ekran ma pewną maksymalną rozdzielczość Standardowe rozdzielczości to (ilość pixeli w poziomie x ilość pixeli w pionie): 640 x 480 (najniższa podstawowa) 800 x 600 (najczęściej używana) 1024 x 768 (najczęściej używana) 1200 x 1024 Itd.

10 05/04/ DLU Położenie i rozmiar kontrolek określa się za pomocą jednostek DLU (dialog logical unit) 1 DLU w poziomie = 1/4 średniej szerokości znaków czcionki systemowej 1 DLU w pionie = 1/8 wysokości szerokości znaków czcionki systemowej Dzięki użyciu jednostek DLU wymiary i położenie skalują się automatycznie w zależności od wielkości czcionki systemowej.

11 05/04/ Rozmiary kontrolek interfejsu [3] Nazwa kontrolkiWysokość (w DLUs) Szerokość (w DLUs) Okna dialogowe lub zakładki263 max max. (dla rozdzielczości 640 x 480) Przyciski (Command buttons)1450 Pola zaznaczane (Check boxes)10Tyle, ile potrzeba Listy rozwijane (Drop-down combo box and drop-down list) 10Dostosować do wymiarów innych list rozwijanych i pól tekstowych Przyciski radiowe (Option buttons)10Tyle, ile potrzeba Pola tekstowe (Text boxes)14Dostosować do wymiarów innych list rozwijanych i pól tekstowych Etykiety (Text labels)8 dla linii tekstuTyle, ile potrzeba Napisy (Other screen text)8 dla linii tekstuTyle, ile potrzeba

12 05/04/ Odległości między kontrolkami [3] KontrolkaOdległości (w DLUs) Marginesy okna dialogowego7 na wszystkich krawędziach Między akapitami tekstu7 Między etykietami a związanymi z nimi innymi elementami3 Między związanymi ze sobą elementami4 Między niezwiązanymi ze sobą elementami7 Pierwszy element w prostokącie grupującym11 od góry prostokąta; w pionie wyrównane z tytułem prostokąta Między elementami w prostokącie grupującym4; w pionie wyrównane z tytułem prostokąta Między przyciskami ułożonymi w pionie lub poziomie4; w pionie wyrównane z tytułem prostokąta Od lewej krawędzi prostokąta grupującego9; czyli 16 od krawędzi okna (9+7=16) Ostatni element w prostokącie grupującym7 od dołu prostokąta Najmniejsza odległość między elementami2 Etykieta poniżej przycisku2 od górnej krawędzi przycisku Pola zaznaczane, listy, przyciski radiowe poniżej przycisku2 od górnej krawędzi przycisku

13 05/04/ DLU w Visual Basic W wielu nowoczesnych środowiskach dostępna jest jednostka DLU Dla Visual Basic 6.0 można użyć następującego przybliżenia: 1 DLU 21,5 TWIPS Przykładowe przeliczone odległości z DLU na TWIPS podano poniżej: Nazwa kontrolkiWysokość (w TWIPS) Szerokość (w TWIPS) Przyciski (Command buttons) Pola zaznaczane (Check boxes)220Tyle, ile potrzeba KontrolkaOdległości (w TWIPS) Marginesy okna dialogowego120 na wszystkich krawędziach Między etykietami a związanymi z nimi innymi elementami60 Między związanymi ze sobą elementami80 Między niezwiązanymi ze sobą elementami120

14 05/04/ Odległości między kontrolkami [3]

15 05/04/ Odległości między kontrolkami w prostokącie grupującym[3]

16 05/04/ Odległości między kontrolkami w Czarodzieju [3]

17 05/04/ Uwzględnienie lokalizacji oprogramowania [1] Narzędzia do budowy interfejsu użytkownika umożliwiają stworzenie słownika ze wszystkimi napisami, które pojawiają się w interfejsie w różnych językach. Dzięki temu jeden interfejs może obsługiwać wiele języków, ponieważ napisy dla każdego języka są pobierane ze słownika. Właściwością napisów jest to, że mogą one mieć różną długość w zależności od języka. Należy to uwzględnić podczas projektowania interfejsu poprzez pozostawienie marginesu odstępu dla dłuższych napisów.

18 05/04/ Uwzględnienie lokalizacji oprogramowania - Przykłady [1]

19 05/04/ Literatura 1.Design Specifications and Guidelines - Special Design Considerations, Localization, rary/en-us/dnwue/html/ch15d.asp rary/en-us/dnwue/html/ch15d.asp 2.Design Specifications and Guidelines - Visual Design, Visual Communication, rary/en-us/dnwue/html/ch14b.asp rary/en-us/dnwue/html/ch14b.asp 3.Design Specifications and Guidelines - Visual Design, Layout, rary/en-us/dnwue/html/ch14e.asp rary/en-us/dnwue/html/ch14e.asp


Pobierz ppt "05/04/2003 1 Projektowanie Aplikacji Komputerowych Budowa interfejsu graficznego."

Podobne prezentacje


Reklamy Google