Projektowanie Aplikacji Komputerowych Budowa interfejsu graficznego 05/04/2003

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

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

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 05/04/2003

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 05/04/2003

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 05/04/2003

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 05/04/2003

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

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. 05/04/2003

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. 05/04/2003

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

Odległości między kontrolkami [3] Odległości (w DLUs) Marginesy okna dialogowego 7 na wszystkich krawędziach Między akapitami tekstu 7 Między etykietami a związanymi z nimi innymi elementami 3 Między związanymi ze sobą elementami 4 Między niezwiązanymi ze sobą elementami Pierwszy element w prostokącie grupującym 11 od góry prostokąta; w pionie wyrównane z tytułem prostokąta Między elementami w prostokącie grupującym 4; w pionie wyrównane z tytułem prostokąta Między przyciskami ułożonymi w pionie lub poziomie Od lewej krawędzi prostokąta grupującego 9; czyli 16 od krawędzi okna (9+7=16) Ostatni element w prostokącie grupującym 7 od dołu prostokąta Najmniejsza odległość między elementami 2 Etykieta poniżej przycisku 2 od górnej krawędzi przycisku Pola zaznaczane, listy, przyciski radiowe poniżej przycisku 05/04/2003

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 kontrolki Wysokość (w TWIPS) Szerokość (w TWIPS) Przyciski (Command buttons) 300 1200 Pola zaznaczane (Check boxes) 220 Tyle, ile potrzeba Kontrolka Odległości (w TWIPS) Marginesy okna dialogowego 120 na wszystkich krawędziach Między etykietami a związanymi z nimi innymi elementami 60 Między związanymi ze sobą elementami 80 Między niezwiązanymi ze sobą elementami 120 05/04/2003

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

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

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

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. 05/04/2003

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

Literatura Design Specifications and Guidelines - Special Design Considerations, Localization, http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch15d.asp Design Specifications and Guidelines - Visual Design, Visual Communication, http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14b.asp Design Specifications and Guidelines - Visual Design, Layout, http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/ch14e.asp 05/04/2003