Kilka dekad temu użytkowanie komputerów było o wiele bardziej skomplikowane, a dziś jednym kliknięciem jesteśmy w stanie uruchomić chociażby połączenie wideo. Aktualnie rynek oferuje konsumentom szeroki zakres sprzętu, który obsługiwany jest przez różne systemy operacyjne. To właśnie od tych systemów zależne jest to, w jaki sposób designerzy będą tworzyć swoje projekty. Dziś prostota interfejsu daje użytkownikom ogromne możliwości.
Graphical User Interface
Graphical User Interface (GUI) to środowisko graficzne lub graficzny interfejs użytkownika. Zagadnienie odnosi się do sposobu, w jaki informacje prezentowane są przez urządzenie, oraz do wszystkich interakcji z użytkownikiem. Projektowanie interfejsu zgodnie z wykorzystywaniem GUI, czyli bibliotek charakterystycznych dla danego systemu operacyjnego, polega w głównej mierze na stosowaniu domyślnych rozwiązań wizualnych, statycznych i animowanych. Gdybym miał wytłumaczyć, na czym polega projektowanie interfejsu zgodnie z GUI, powiedziałbym, że podczas projektowania – dla przykładu – kalendarza określenie jego wizualnego wyglądu będzie zależało od Ciebie. Jednak okienko, wyświetlające się po najechaniu na daną datę, będzie musiało mieć taki sam wygląd, jak inne okienka systemowe.
Zalety projektowania z wykorzystaniem GUI
Jeśli jesteś na początku swojej drogi projektowej, musisz wiedzieć, że używanie GUI pozwoli na przyswojenie dobrych praktyk projektowania i na wyczucie odpowiedniego balansu pomiędzy wielkościami w projektowanym interfejsie. Pamiętaj jednak, że tylko tzw. nieistotne zmiany (jak kolor paska tytułowego) są możliwe podczas projektowania z wykorzystaniem GUI. Jeśli dokonasz poważniejszych zmian, np. zmiany typografii czy przezroczystości, automatycznie przestajesz używać GUI.
Dużą zaletą użytkowania GUI w formie natywnej jest ułatwienie pracy deweloperom. Dlaczego? Ponieważ skraca to czas poświęcany na zadanie, skoro można korzystać z biblioteki wybranego systemu operacyjnego i opierać się na niej podczas budowania danej aplikacji.
Jako projektanci możemy pobrać GUI do oprogramowania, na którym pracujemy, i z niego korzystać podczas projektowania produktów cyfrowych. Dzięki sprawnemu operowaniu GUI można sprawić, że interfejs będzie bardziej atrakcyjny w odbiorze oraz łatwiejszy w produkcji, ale również nie będzie obciążał systemu.
Dzięki projektowaniu z wykorzystaniem bibliotek charakterystycznych dla danego systemu operacyjnego możesz projektować szybciej, jeśli na początku określisz w wymaganiach, że wybrane przez Ciebie elementy wykorzystują GUI.
Dwa rodzaje GUI, które musisz znać
Apple Human Intarface Design
W Apple design ma ogromne znaczenie, dlatego tak ważne są instrukcje przekazywane projektantom i deweloperom, ponieważ to właśnie dzięki nim produkty stają się przyjazne odbiorcom i ułatwiają im życie. Apple udostępnia stronę developer.apple.com, na której zawarto imponującą bazę wiedzy i zasobów dla urządzeń z systemem iOS. W zakładce design znajdują się treści przeznaczone dla designerów: parametry techniczne poszczególnych urządzeń, rozdzielczości, animacje, typografia i wiele innych.
Co musisz wiedzieć o projektowaniu dla iOS, czyli motywy iOS.
Przejrzystość:
- czytelny tekst w każdym rozmiarze,
- projekt nastawiony na funkcjonalność, nieliczne i subtelne ozdobniki,
- wyróżnianie/podświetlanie ważnej treści,
- precyzyjne i przejrzyste ikony,
- przekazywanie interaktywności.
Szacunek:
- treść wypełnia ekran,
- więcej podpowiedzi dzięki przezroczystości,
- oszczędne stosowanie cieni i ramek, które nadaje interfejsowi lekkości i uwydatnia zawartość.
Głębia:
- odrębne warstwy wizualne,
- realistyczny ruch, służący przekazywaniu hierarchii.
Celem jest maksymalizacja zasięgu. W przypadku projektowania dla iOS ważna jest estetyczna integralność, czyli sposób, w jaki wygląd i zachowanie integrują się i działają z daną funkcją. Tutaj to połączenie jest równoznaczne z dobrą zabawą, angażującym designem, pozwala ono skupić się na ważnych funkcjach dzięki projektowi nastawionemu na użyteczność. Podczas projektowania dla iOS kluczowa jest konsekwencja, przez którą należy rozumieć znormalizowane elementy tekstowe, używanie znanych ikon oraz funkcji, których oczekują użytkownicy. Pamiętajmy również o zasadach bezpośredniej manipulacji, do których zaliczymy efekt uzyskany po obróceniu ekranu, użycie gestów wpływających na przedstawioną zawartość oraz widoczną od razu informację zwrotną. Metafory używane w projektach dla iOS to m.in. przeniesienie ekranu dla odsłonięcia zawartości, użycie przełączników i mechanizmów suwakowych, które są znane z rzeczywistości, czy udzielenie użytkownikowi kontroli. Podczas projektowania dla iOS musisz również pamiętać, aby umożliwić łatwe anulowanie działań (nawet po ich uruchomieniu) oraz stosować znajome i przewidywalne dla użytkowników elementy.
Google Design
Drugim systemem bibliotek jest Google Design. Podczas projektowania natywnych rozwiązań na urządzenia z Androidem koniecznie zapoznaj się z katalogiem stworzonym przez Google, w którym (podobnie jak w przypadku Apple’a) zostały zawarte zasoby i narzędzia dla spójnego projektu. Google zadbał oto, aby w swoich wytycznych podać informacje na temat sposobów komunikowania się z użytkownikami, metod interakcji, typografii, wyglądu i wielu innych. Dedykowaną stroną jest strona www.material.io, ale wiele rad na temat projektowania zostało zawartych także na stronie www.design.google. Google Design został stworzony po to, aby ujednolicić interfejsy aplikacji we wszystkich produktach, a wyodrębnić można tu trzy główne zasady, pryncypia.
- Materiał jest metaforą
Google przedstawia nam związek zachodzący między przestrzenią a ruchem. Technologia, jaką wykorzystują, zainspirowana została papierem oraz atramentem. Google zachęca projektantów, aby nie myśleli o projektowaniu jako wirtualnych przedmiotach, a czerpali z pierwowzorów, czyli przedmiotów fizycznych. - Wyrazisty, graficzny, uniwersalny
Elementy i komponenty takie, jak siatki, typografia, kolory i obrazy tworzą specyficzną hierarchię i architekturę informacji. Dzięki odpowiedniej strukturze możliwe jest uwidocznienie i nacisk na różne akcje i treści, które powinny zostać wykonane lub dostrzeżone przez użytkownika. Ten sposób przedstawiania treści wyraźnie nawiązuje do materiałów drukowanych. Po zachłyśnięciu się technologią wracamy zatem do korzeni. - Ruch ma znaczenie
Ludzie zwracają uwagę na animacje, które są bardzo ważne podczas projektowania. Animacje pozwalają użytkownikom lepiej rozumieć produkt cyfrowy, dzięki nim skupiamy uwagę odbiorców i utrzymujemy ją poprzez nienarzucające się sprzężenia zwrotne i spójne przejścia. Dzięki dołożeniu ruchu do aplikacji otrzymujemy zwartą całość, która prowadzi użytkownika od jednego etapu do drugiego.
Przedstawiłem Ci, czym jest Graphical Interface Design, a także opowiedziałem, dlaczego warto z niego korzystać. Pamiętaj, że projektowanie zgodnie z tymi bibliotekami systemowymi może znacząco przyspieszyć i ułatwić nie tylko Twoją pracę, czyli pracę designera, ale również pracę wielu innych osób, a odbiór takich aplikacji jest często dużo lepszy niż w przypadku projektów zewnętrznych.