Wykonawca: PIOTR DOMALEWSKI. Termin oddania sprawozdania: 30.08

Transkrypt

1 SPRAWOZDANIE Z LABORATORIUM Przedmiot: KOMUNIKACJA CZŁOWIEK KOMPUTER Temat ćwiczenia: ZNACZENIE BARWY W PROJEKTOWANIU INTERFEJSU UŻYTKOWNIKA Kierunek: Informatyka Tryb / semestr: Zaoczne / VI Termin wykonania ćwiczenia: Grupa: III Uczelnia: WSNHiD Rok akademicki 2009/10 Wykonawca: PIOTR DOMALEWSKI Termin oddania sprawozdania: Cel ćwiczenia: Celem ćwiczenia jest zapoznanie ze znaczeniem barwy w komunikacji człowieka z komputerem. Wpływ doboru palety kolorów na zrozumienie i interpretację przekazywanych informacji. Zdobycie umiejętności poprawnego doboru barw tła, tekstu oraz elementów graficznych i innych elementów wizualnych interfejsu gwarantujących jego użyteczność oraz satysfakcję użytkowników. Celem ćwiczenia jest również zapoznanie się z narzędziami internetowymi wspomagającymi zarządzanie barwami i projektowanie kolorystyki interfejsu użytkownika. Zadania: 1. Proszę zapoznać się z materiałami zamieszczonymi na stronie a następnie odpowiedzieć na pytania: a) Na czym polega określenie barwy w systemie RGB? Co oznaczają elementy zapisu heksadecymalnego, np. CE3295? Pierwsze dwie składowe odpowiadają za kolor czerwony, następne dwie za kolor zielony a ostatnie za niebieski. Według wzoru RRGGBB

2 b) Co to są kolory bezpieczne? Jakie są ich składowe RGB? ( ) Składowe kolorów bezpiecznych muszą pochodzić ze zbioru {00, 33, 66, 99, CC, or FF}, elementy w zbiorze odpowiadają procentowemu nasyceniu danego koloru 0%,20%,40%,60%,80%,100%. 2. Korzystając z witryny przeprowadzić eksperymenty z doborem składowych R, G i B celem uzyskania dowolnej barwy. Opisać, co się dzieje z barwą wynikową przy różnych poziomach składowych RGB. W sprawozdaniu zamieścić trzy przykłady zrzuty ekranu.

3 W zależności od zmiany składowych zmieniamy barwe całego wynikowego koloru, przesuwając suwaki w lewo lub w prawo dodajemy lub odejmujemy danej barwy z/do koloru. 3. Na czym polega reprezentacja barwy w systemie HSB i jak wpływa na barwę wynikową zmiana każdego z parametrów H, S i B? Wybrać dowolną barwę bazową, zamieścić w sprawozdaniu zrzut ekranu ją obrazujący, podać wartości heksadecymalne składowych RGB oraz wprowadzać zmiany parametrów HSB (każdego z osobna). Jak zmieniają się wartości RGB? W sprawozdaniu zamieścić po 2 przykłady dla każdego zmienianego parametru.

4 4. Korzystając z witryny dla barwy bazowej z palety bezpiecznej dobrać barwy dodatkowe zgodnie z zasadami harmonii barwnej w układach: a) analogowym (barwy obok siebie na kole) b) komplementarnym (barwy naprzeciw siebie) c) triadzie kolorów (położenie barw buduje trójkąt równoboczny wpisany w koło) Zamieścić zrzuty ekranu dla każdej z zasad. Czy otrzymane w układach barwy są również bezpieczne? Uzyskane barwy dodatkowe nie są bezpieczne.

5

6 5. Korzystając z witryny dobrać kolor tła i czcionek, zamieścić zrzut ekranu i uzasadnić swój wybór. Różnica wartości którego parametru jest najistotniejsza przy doborze barwy czcionki i tła? Uważam że najważniejsze jest to aby kolor czcionki i tła dośc mocno kontrastował, nie można dobierać ciemnego tła i ciemnej czcionki ani odwrotnie (jasnych) ponieważ całość będzie nieczytelna. 6. Korzystając z witryny w myśl poznanych zasad doboru barw ustalić kolory poszczególnych składowych witryny, zamieścić zrzut ekranu i uzasadnić dobór barw. Dobrałem kolory tak aby cała koncepcja opierdała się na trzech kolorach, naglowek ma jasniejsze tlo aby jako pierwszy rzucil sie w oczy tego samego koloru sa linki na stronie poniewaz sa to elementy nawigacyjne i musza byc dobrze widoczne, część srodkowa jest jasna poniewaz na jasnym tle dobrze widoczna jest ciemna czcionka tekstu. Pasek na dole poniewaz jest mniej wazny jest w kolorze ciemnym a napisy na nim sie znajdujace umyslnie nie sa bardzo kontrastowe poniewaz elemnty na dole strony nie powinny odrywac uwagi uzytkownika od tekstu i elementow nawigacyjnych.

7

8 7. Korzystając z witryny podać URL do wybranego przez siebie obrazka, dobrać pasującą paletę kolorów i wykorzystując ją zaprojektować tło, ramkę i podpis obrazka (np. w Adobe Photoshop). W sprawozdaniu zamieścić efekt pracy i wnioski. Strona podaje nam kolory które sa dominujace na danym obrazku, za pomoca tego mozemy dobrac pozniejsza zblizona kolorystke w photoshopie, poniewaz obrazek z napisem ma byc dobrze widoczny, zastosowalem ciemniejsza ramke i jasniejsze napisy. 8. Korzystając z witryny tak dobrać kolorystykę tła i liter, by obserwator bez defektów postrzegania barw mógł odczytać tekst, natomiast by litery były nieczytelne w każdym z trzech symulowanych defektów postrzegania barw osobno. W sprawozdaniu zamieścić trzy zrzuty ekranu po jednym dla każdego defektu postrzegania barw i skomentować.

9

10 9. Pobrać z witryny program Color Doctor i przetestować dowolną stronę www z punktu widzenia wszystkich defektów postrzegania barw. Wyniki wraz z wnioskami zamieścić w sprawozdaniu. Strona najbardziej nieczytelna pozostaje w pierwszym i ostatnim przypadku poniewaz większość elementów na stronie -w tym nawigacyjnych postrzegana jest w tym samym kolorze co powoduje ze nie wiadomo który lement jest wazny a który wazniejszy oraz gdzie znajduja sie elementy nawigacyjne.

11

12