Bezpłatne tłumaczenie artykułu Jakuba Linowskiego to „Dobry interfejs użytkownika”.
Dobry interfejs użytkownika ma wysokie współczynniki konwersji i jest łatwy w użyciu. Innymi słowy, jest to dobre zarówno dla biznesu, jak i dla osób, które z niego korzystają. Poniżej znajdziesz szereg praktycznych pomysłów, które możesz spróbować zastosować.
Pomysł 1: Spróbuj użyć układu jednokolumnowego zamiast wielokolumnowego
Układ jednokolumnowy pozwala lepiej kontrolować narrację. Będzie mógł kierować Twoimi użytkownikami w najbardziej przewidywalny sposób - od góry do dołu. Podejście wielokolumnowe zakłada ryzyko odwrócenia uwagi użytkownika od głównego celu strony. Poprowadź osoby z obowiązkowym wezwaniem do działania na końcu.
Pomysł 2: Spróbuj dać prezent, nie kończ sprzedaży natychmiast
Przyjazny gest, taki jak zrobienie prezentu dla klienta, jest dokładnie tym, czego potrzebujesz. Jeśli spojrzysz głębiej, prezenty są również skuteczną taktyką perswazji opartą na zasadzie wzajemności. Bez względu na to, jak oczywiste może to zabrzmieć, drobne oznaki uznania przyniosą spore korzyści.
Pomysł 3: Spróbuj połączyć podobne funkcje i nie dzielić interfejsu
W trakcie pracy możesz przypadkowo utworzyć kilka sekcji i elementów, które pełnią tę samą funkcję. Jest to powszechna entropia, gdy system z czasem staje się nieregularny. Nie używaj różnych nazw dla tych samych funkcji, aby nie zwiększać obciążenia informacyjnego klientów. Im bardziej fragmentaryczny jest interfejs użytkownika, tym bardziej stroma staje się krzywa uczenia się i tym trudniej jest klientowi zrozumieć istotę tego, co jest od niego wymagane. Przebuduj interfejs użytkownika i połącz podobne funkcje razem.
Pomysł 4: Spróbuj użyć dowodu społecznego zamiast mówić o sobie
Dowód społeczny to kolejna taktyka perswazji, która może zwiększyć konwersję.
Zalecenia dotyczące Ciebie i Twojej propozycji mogą skłonić użytkownika do podjęcia działań. Upewnij się, że te rekomendacje lub opinie są obecne.
Pomysł 5: Spróbuj powtórzyć główne wezwanie do działania, zamiast pokazywać je raz
Powtarzanie wezwania do działania jest bardziej odpowiednie dla dłuższych stron lub stosowane jest powtarzanie na wielu stronach. Oczywiście nie chcesz, aby oferta pojawiała się 10 razy na jednej stronie i drażniła ludzi. Długie strony stały się normą, a próba zmieszczenia wszystkiego na pierwszym ekranie nie jest już dobrym pomysłem. Nie ma nic złego w wykonaniu jednego połączenia na górze strony, dyskretnie przywołaj na środku i napraw na końcu. Gdy ludzie docierają do końca strony, przestają myśleć o tym, co dalej, a potem nadszedł czas, aby złożyć ofertę lub sfinalizować umowę.
Pomysł 6: Staraj się zwiększać różnice stylów między klikalnymi a wybranymi elementami, zamiast je rozmywać
Ekspresyjne narzędzia, takie jak kolor, głębia i kontrast, mogą być używane jako niezawodne markery odzwierciedlające podstawowy język nawigacji po interfejsie: gdzie jestem i gdzie mogę się udać. Aby jasno przekazać ten pomysł użytkownikom, musisz użyć innego projektu wizualnego dla elementów do różnych celów (linki, przyciski, wybrane elementy i treść), różnice te muszą być wyraźnie wyrażone i powinny być używane w ten sam sposób w całym interfejsie.
Zdjęcie pokazuje przykład, w którym wybrany jest niebieski kolor, aby zaznaczyć wszystko, co można nacisnąć, a czarny, dla wszystkiego, co zostało wybrane lub wskazuje, gdzie jesteśmy. Przy prawidłowym stosowaniu łatwiej będzie ludziom nawigować między takimi wskazówkami. Nie komplikuj życia użytkowników - nie przerywaj kodowania semantycznego.
W przypadkach, w których wyświetlanych jest kilka sugestii, dobrym pomysłem może być wyróżnienie rekomendacji produktu, ponieważ niektórzy ludzie potrzebują trochę nacisku. Istnieją badania psychologiczne, które sugerują, że im większy wybór, tym mniej prawdopodobne jest, że decyzja zostanie ogólnie podjęta i wdrożona. Aby zapobiec takiemu paraliżowi analitycznemu, spróbuj podkreślić niektóre opcje na tle innych.
Pomysł 8: Spróbuj cofnąć zamiast żądań potwierdzenia
Wyobraź sobie, że właśnie kliknąłeś prawidłowy przycisk lub link. Anulowanie jest zgodne z pierwotnymi zamiarami użytkownika, umożliwiając natychmiastowe działanie, z opcją anulowania. Prośby o pozwolenie na działanie, wręcz przeciwnie, inspirują użytkownika, że \u200b\u200bon lub ona nie wie, co robią, podważając ich intencje. Działania człowieka najczęściej odzwierciedlają jego prawdziwe intencje i tylko w rzadkich sytuacjach są losowe. Nieefektywność i nędza podpowiedzi jest szczególnie widoczna, gdy użytkownicy muszą powtarzać akcję, a podpowiedzi będą się pojawiać wiele razy: to złe doświadczenie. Postaraj się dać użytkownikom większą kontrolę: anuluj działanie i nie proś o potwierdzenie, jeśli to możliwe.
Pomysł 9: Wyjaśnij, dla kogo przeznaczony jest produkt. Nie próbuj adresować wiadomości do wszystkich
Czy jednoznacznie identyfikujesz odbiorców lub apelujesz do wszystkich jednocześnie? Pomysł zwiększenia konwersji ma na celu jasne wyjaśnienie, dla kogo przeznaczony jest Twój produkt lub usługa. Kiedy docierasz do odbiorców, zaznacz konkretne znaki swoich klientów. Sprowadzi to komunikację z nimi na nowy poziom i da pewien odcień ekskluzywności i elitarności. Możliwym ryzykiem takiej strategii jest to, że deklarując jakiekolwiek ograniczenia, możesz odciąć część potencjalnych odbiorców. W takim przypadku pomoże przejrzystość wniosku: uczciwość budzi zaufanie.
Pomysł 10: Mów prosto zamiast założeń
Możesz mówić do ludzi niestabilnym drżącym głosem lub możesz mówić to samo z przekonaniem. Jeśli kończysz każde zdanie znakami zapytania, użyj słów takich jak „może”, „byłoby świetnie”, „jesteś zainteresowany?” lub „nie chcesz próbować?”, wtedy masz każdą okazję, aby dodać perswazji do wiadomości. Kto wie, może czasem warto powiedzieć innym o tym, jak zoptymalizować konwersję?
Pomysł 11: Większy kontrast zamiast jednolitości
Im wyraźniej i ostrzejsze są wezwania do działania wśród innych elementów strony, tym lepszy będzie interfejs, tym silniejszy. Kontrast głównych działań docelowych można zwiększyć na wiele sposobów. Za pomocą nasycenia możesz przyciemnić niektóre elementy w stosunku do jasnych, używając głębi sprawiając, że obiekty będą wyglądały bliżej innych treści, które wyglądają na bardziej odległe (użyj cieni i gradientów). Na koniec możesz wybrać kolory uzupełniające z koła kolorów (na przykład żółty i fioletowy), aby uzyskać jeszcze więcej ulepszeń. Nie daj się jednak ponieść emocjom: kontrast między treścią a głównym działaniem powinien być zrównoważony.
Pomysł 12: Pokaż miejsce pochodzenia produktu zamiast uogólnień
Informacje o tobie, twoim produkcie lub usłudze pozwalają ci osiągnąć bardziej osobisty poziom w komunikacji z klientem. Dobrym sposobem na powiedzenie o sobie jest podanie kraju, stanu lub miasta pochodzenia. Jeśli możesz praktycznie zastosować tę radę, stosunek do ciebie stanie się bardziej przyjazny. Często wspominanie, gdzie powstał produkt, jest dobrym sposobem na stworzenie poczucia lepszej jakości produktu.
Pomysł 13: Zmniejsz liczbę pól, nie pytaj za dużo
Ludzie z natury nie lubią czasochłonnych zadań, a to w pełni dotyczy wypełniania pól formularza. Każde pole wymagające odpowiedzi użytkownika może sprowokować go do opuszczenia strony. Ponadto nie wszystkie urządzenia umożliwiają szybkie wpisywanie tekstu, szczególnie trudno jest to zrobić na urządzeniach mobilnych. Spróbuj zostawić tylko wymagane pola i usuń jak najwięcej pól. Jeśli naprawdę jest wiele niezbędnych pól, lepiej będzie je wypełnić po wysłaniu głównego formularza na osobnej stronie lub przy użyciu dodatkowego formularza. Rozszerzenie formularza jest łatwe, ale mniejsza liczba pól pozwala zwiększyć konwersję.
Pomysł 14: Rozwiń wszystkie opcje naraz
Każde używane menu rozwijane ukrywa zestaw działań, których znalezienie wymaga dodatkowego wysiłku. Jeśli te ukryte opcje są kluczowe dla użytkownika, aby podjąć niezbędne działanie, warto zwiększyć jego priorytet na stronie. Spróbuj stworzyć menu rozwijane dla tych opcji, które są oczywiste i nie wymagają od użytkownika nowej wiedzy: w zakresie wyboru daty i godziny (na przykład kalendarzy) lub lokalizacji geograficznej. Czasami elementy menu rozwijanego mogą działać w tych interfejsach, których działania od czasu do czasu musi wykonywać użytkownik. Zachowaj ostrożność podczas korzystania z list rozwijanych dla elementów na głównej ścieżce narracji.
Pomysł 15: Zasugeruj spójność zamiast podwójnie dolnych stron
Podwójnie dolne strony są zabójcami konwersji. Tak, wszyscy są już przyzwyczajeni do przewijania długich stron, ale ważne jest, aby nie wywoływać wśród użytkowników fałszywego wrażenia, że \u200b\u200bstrona się zakończyła, zanim się faktycznie wydarzy. Jeśli strona wymaga przewijania, ustaw wizualny lub semantyczny rytm, który będzie wyraźnie wskazywał użytkownikowi, że jest kontynuacja. Uważaj na duże luki w miejscach „zagięcia”, w których może pojawić się obramowanie ekranu (oczywiście mam na myśli strefy warunkowe, ponieważ trudno jest zapewnić wszystkie opcje dla różnych urządzeń).
Pomysł 16: Koncentruj się, nie nadużywaj linków
Umieszczenie większej liczby linków w różnych miejscach strony nie jest trudne, w nadziei zaspokojenia jak największej liczby potencjalnych klientów. Jednak podczas tworzenia strony narracyjnej, której celem jest doprowadzenie użytkownika do określonego działania docelowego, zastanów się dwa razy. Nie zapominaj, że jakikolwiek link przed głównym działaniem docelowym zwiększa ryzyko opuszczenia strony przez użytkownika i odwraca uwagę od tego, czego od niego oczekujesz. Śledź liczbę linków i, jeśli to możliwe, znajdź równowagę między stronami rozkładającymi się (z nieco większą liczbą linków) dzięki „tunelowym” stronom z mniejszą liczbą linków i większą konwersją. Usunięcie niepotrzebnych linków z pewnością zwiększy szanse na dotarcie do ważnego przycisku.
Siły zainwestowane w opracowanie modelu zachowania oprogramowania będą zmarnowane, jeśli nie przekażesz użytkownikom zasad tego zachowania. W przypadku produktów mobilnych odbywa się to za pomocą środków wizualnych - poprzez wyświetlanie przedmiotów na wyświetlaczu (w niektórych przypadkach wskazane jest użycie wrażeń dotykowych po naciśnięciu).
Celem artysty jest stworzenie obiektu, którego wygląd wywołuje reakcję estetyczną.
Projektanci tworzą obiekty, z których będą korzystać inni ludzie. Jeśli mówimy o projektantach interfejsów wizualnych, to oni szukają najlepszego pomysłu, przekazując informacje o zachowaniu programu, w projektowaniu którego biorą udział. Zgodnie z podejściem zorientowanym na cele, powinni starać się prezentować zachowanie i informacje w zrozumiały i użyteczny sposób, który wspiera cele marketingowe organizacji i cele emocjonalne postaci. Oczywiście, wizualna konstrukcja interfejsów użytkownika nie wyklucza względów estetycznych, ale takie względy nie powinny wykraczać poza ramy funkcjonalne.
Graficy są zwykle bardzo dobrze zorientowani w aspektach wizualnych i gorzej rozumieją koncepcje leżące u podstaw zachowania oprogramowania i jego interakcji z nim. Są w stanie stworzyć piękny i odpowiedni wygląd interfejsów, a ponadto - wprowadzić tożsamość korporacyjną w wyglądzie i zachowaniu oprogramowania. Dla takich specjalistów projektowanie lub projektowanie interfejsów to przede wszystkim brzmienie, styl, kompozycja, które są atrybutami marki, po drugie, przejrzystość i jasność informacji, a dopiero potem przekazywanie informacji o zachowaniu poprzez zamierzony cel.
Projektanci wizualnej części interfejsu potrzebują pewnych umiejętności, które są nierozerwalnie związane z projektantami graficznymi, ale muszą także mieć głębokie zrozumienie i właściwe postrzeganie roli zachowania. Ich wysiłki są w dużej mierze skoncentrowane na organizacyjnych aspektach projektowania. Ich uwaga skupia się na zgodności między wizualną strukturą interfejsu z jednej strony a logiczną strukturą modelu mentalnego użytkownika a zachowaniem programu z drugiej. Ponadto obawiają się, jak poinformować użytkownika o stanie programu i co zrobić z poznawczymi aspektami postrzegania funkcji przez użytkownika.
Projektanci informacji pracują nad wizualizacją danych, treści i narzędzi nawigacyjnych. Wysiłki projektanta informacji mają na celu przedstawienie danych w formie umożliwiającej ich poprawną interpretację. Wynik osiąga się poprzez zarządzanie hierarchią wizualną za pomocą narzędzi takich jak kolor, kształt, lokalizacja i skala. Wspólnymi obiektami projektowania informacji są wszelkiego rodzaju wykresy, wykresy i inne sposoby wyświetlania informacji ilościowych.
Aby stworzyć atrakcyjne i wygodne interfejsy użytkownika, projektant interfejsu musi posiadać podstawowe umiejętności wizualne - rozumienie koloru, typografii, formy i kompozycji - oraz wiedzieć, jak można je skutecznie wykorzystać do przekazywania zachowań i prezentacji informacji, aby tworzyć nastrój i stymulować reakcje fizjologiczne. Projektant interfejsu potrzebuje również dogłębnego zrozumienia zasad interakcji i idiomów interfejsu, które określają zachowanie produktu.
Wierzcie lub nie, statyczne modele i prototypy wychodzą z mody, stają się staromodne, a granica między projektantem a deweloperem zostaje zatarta. Wraz z coraz większą współpracą z innymi projektantami lub programistami zmieniają się również używane przez nas narzędzia.
Zbliża się era ekranów o wysokiej rozdzielczości, a projektanci powinni szukać coraz to nowych technik i narzędzi, które pomogłyby im stworzyć bardziej elastyczne i elastyczne układy projektowe dla różnych urządzeń.
Narzędzia do szkieletowania
Narzędzia szkieletowe znacznie ułatwiają tworzenie strony internetowej lub aplikacji, wizualizując produkt i zwracając uwagę wszystkich uczestników bezpośrednio na funkcjonalność i interaktywność układu.
Klienci muszą zrozumieć, jak powinna działać twoja aplikacja lub witryna w przyszłości. Ale proste wyjaśnienie „na palcach” lub kilka e-maili pozostawi większość funkcji na łasce ich wyobraźni. Narzędzia szkieletowe są częściej używane w celu uproszczenia komunikacji między klientem a kontrahentem.
Istnieje wiele różnych narzędzi Wireframe, które oferują różnorodną funkcjonalność: niektóre programy mogą być używane tylko do prostych szkieletów, podczas gdy inne mogą służyć do tworzenia bardziej złożonych i szczegółowych prototypów prototypów.
Makiety balsamiq
Prosty, ale świetny onlinenarzędzie szkieletowe, które zawiera bibliotekę elementów przeciągnij i upuść, listy i przyciski, stylizowany rysunek odręczny. Główną cechą tego programu jest zbliżenie makiet do stopnia „celowo niegrzecznego wyglądu i niskiej dokładności”, aby uzyskać jak najwięcej opinii. „Zaprojektowany do współpracy” - te słowa opisujące produkt na oficjalnej stronie internetowej oznaczają, że wszyscy członkowie zespołu i klienci mogą uczestniczyć w procesie prototypu.
Platforma:Win, Mac, Linux i wersja internetowa
Cena £: 89 USD (12 USD \\ miesiąc za w pełni funkcjonalny okres próbny)
Naszkicować
Szkic: elastyczne i funkcjonalne narzędzie szkieletowe ze stylowym interfejsem, które zmusi Cię do zaprojektowania wspaniałych rzeczy, ponieważ tworzenie projektu powinno być zabawą, a nie obowiązkiem. Ten produkt jest łatwy w użyciu, otrzymał intuicyjny interfejs graficzny, a także wiele zewnętrznych integracji.
Platforma: Prochowiec
Cena £:99 USD (dostępna bezpłatna wersja próbna)
Adobe Illustrator
Adobe Illustrator to potężne narzędzie do pracy z grafiką wektorową (oznacza to, że możesz tworzyć dzieła sztuki o dowolnym rozmiarze, w razie potrzeby skalować, bez utraty jakości obrazu). Jest to doskonały program do prototypowania różnych poziomów szczegółowości, tworzenia złożonych ilustracji wektorowych i pracy z typografią, a także tworzenia doskonałego UX. Świetne narzędzie do tworzenia makiet interfejsu użytkownika.
Platforma:Win i Mac
Cena £:9–49 USD miesięcznie
Adobe InDesign
Ten zestaw narzędzi do projektowania obejmuje możliwość pracy z różnego rodzaju treściami i plikami, chociaż pierwotnie był przeznaczony do układu wielostronicowych drukowanych dokumentów. Tworzenie prototypowej witryny lub aplikacji w postaci interaktywnego dokumentu PDF nigdy nie było tak proste! Ten produkt umożliwia tworzenie bibliotek komponentów strony, dzięki czemu można tworzyć liczne kolekcje różnych elementów interfejsu użytkownika, które można ponownie wykorzystać.
Platforma: Win i Mac
Cena £: 9–49 USD miesięcznie
Omnigraffle
OmniGraffle - produkt dla OS X i iOS, który płynnie przesuwa się w celu uproszczenia pracy, przenosząc się na iPada. Jest to skuteczne narzędzie do tworzenia układów ekranu, które umożliwia natychmiastowe łączenie szkieletów stron internetowych, przetwarzanie grafiki, diagramów lub konturów stron. Ty wybierasz typ projektu, a OmniGraffle buduje relacje i zależności między różnymi elementami, automatycznie łącząc linie w postaci wykresów i wyrównuje kształty i elementy w układach lub na stronach.
Platforma:Mac i iOS
Cena £:$50
UXPin
UXPin to doskonała platforma internetowa do projektowania interakcji i interfejsów użytkownika, prototypów aplikacji komputerowych, internetowych i mobilnych, które powinny być szybkie i łatwe w użyciu. Prototypy można tworzyć z wbudowanych ustawień wstępnych i bibliotek, plików Photoshop, importowanych plików Sketch lub za pomocą obszernej biblioteki interfejsów użytkownika UXPin.
Platforma: wersja internetowa
Cena: 15–40 USD miesięcznie
Narzędzia do prototypowania
Prototypy pomagają w interakcji zespołu programistów, a także upraszczają demonstrację klientowi jego przyszłego produktu. Twoi klienci mogą mieć wstępny układ przyszłego interfejsu, korzystając z narzędzi do tworzenia prototypów, możesz szybko uzyskać informacje zwrotne od klienta, sugestie dotyczące zmiany lub ulepszenia różnych problemów UX / UI, bez angażowania drogich programistów, zorganizowania demonstracji lub testowania przyszłego produktu.
Kilka słów o wyborze narzędzi do tworzenia interaktywnych prototypów: dziś szeroki wybór programów do prototypowania interfejsu użytkownika może być mylący. Oczywiście ciągłe korzystanie z niektórychte same narzędzia są praktyczne z punktu widzenia niskich kosztów opanowania tych samych technik, ale obecność nowszych i bardziej zaawansowanych narzędzi powinna zachęcić projektantów do opracowania i optymalizacji procesów projektowych. Niektóre aplikacje pozwalają tworzyć prototypy o niskim poziomie interakcji interaktywnych, takie jak połączone ekrany lub strony, animować przejścia między nimi, inne umożliwiają tworzenie bardziej złożonych prototypów z obsługą rodzimych gestów mobilnych i animacji. Najbardziej zaawansowane rozwiązania mają zarówno edytor wizualny, jak i edytor kodu, który pozwala programować prototypy.
Pixate
Pixate to internetowe narzędzie do tworzenia interaktywnych prototypów, idealne do pracy z aplikacjami mobilnymi. Prototypy są tworzone przy użyciu układów graficznych importowanych do programu, ponieważ nie ma w nim gotowych bibliotek elementów i musisz pracować z plikami graficznymi utworzonymi w programach innych firm. Nie ma w nim gotowych bibliotek elementów, musisz pracować z plikami graficznymi utworzonymi w programach innych firm. Przydatną funkcją Pixate jest możliwość testowania prototypu w czasie rzeczywistym na smartfonie lub tablecie
Platforma: web
Cena £: 0–50 USD na użytkownika miesięcznie
Axure
Oprócz tworzenia dynamicznych prototypów, Axure zapewni możliwość stworzenia interaktywnej ramy szkieletowej oraz zwiększy złożoność i szczegółowość układu. Ten generator zawiera mapy witryn, widżety, wsparcie matematyczne i narzędzia do automatycznego tworzenia dokumentacji, a także tworzenia układów HTML dla aplikacji i stron internetowych. Ponadto możesz spojrzeć na prototyp aplikacji bezpośrednio na smartfonie, korzystając z wbudowanej funkcji udostępniania.
Platforma: Win i Mac
Cena £: $289-$589
Origami
Origami to bezpłatne narzędzie, które pozwala tworzyć interaktywne prototypy. Które można uruchomić na iPhonie lub iPadzie, wchodzić z nimi w interakcję i eksportować kod odpowiedni dla programistów. Umożliwia także tworzenie połączeń między warstwami w prototypie a edytorem graficznym (Sketch lub Photoshop), po czym wszelkie zmiany na poziomie układów graficznych są aktualizowane w samym prototypie.
Platforma: Prochowiec
Cena £: jest wolny
Formularz
Form jest idealny do tworzenia natywnych interaktywnych prototypów aplikacji mobilnych, które dokładnie symulują animację i interakcję dla aplikacji iOS. Układy tworzone są za pomocą bibliotek komponentów, podzielonych na różne kategorie, a aktualizacje można monitorować za pomocą smartfona. Obsługiwana jest funkcja przeciągania i upuszczania.
Platforma:Prochowiec
Cena £: jest wolny
Invision
Invision to platforma, która łączy wiele przydatnych funkcji do nowoczesnej pracy w sieci lub interfejsie mobilnym. System współpracuje z zewnętrznymi plikami graficznymi, które można załadować do systemu lub połączyć z prototypem w celu automatycznej aktualizacji elementów graficznych bez ciągłego pobierania nowych wersji (tj. Natychmiastowych aktualizacji wersji mobilnej bezpośrednio na urządzenie). Platforma ma własny system kontroli wersji, przydatną funkcjonalność do pracy zespołowej i komentowania prototypu oraz wiele więcej.
Platforma: sieć
Cena £:15–99 USD (1 prototyp za darmo)
Podziwiać
Marvel to świetne narzędzie do prototypowania oparte na sieci Web, które wyróżnia się potencjałem, który upraszcza proces prototypowania. Narzędzie pozwala pracować z najprostszym projektem interfejsu, tworzyć interaktywne prototypy, a także umożliwia komentowanie układów w czasie rzeczywistym wszystkim uczestnikom projektu. Platforma współpracuje z wieloma obsługiwanymi typami plików, a także umożliwia importowanie plików Sketch i Photoshop. Dostępnych jest 17 wbudowanych ustawień wstępnych dla urządzeń mobilnych, dlatego możesz mieć pewność, że Twoje prototypy zostaną zoptymalizowane dla wybranego urządzenia. Najbardziej wyróżniającą się cechą tego oprogramowania jest towarzysząca mu aplikacja mobilna. Jeśli chcesz pracować ze szkicami na papierze, aplikacja mobilna umożliwia szybkie przenoszenie szkiców i pracę z nimi już na platformie.
Marvel jest łatwy w użyciu i nauce, w domenie publicznej można znaleźć wiele FAQ i samouczków, a także samouczki wideo. Ponadto program ma ogromną społeczność projektantów, którzy regularnie dzielą się swoimi projektami i pomagają wspierać innych.
Flinto dla komputerów Mac
Flinto jest idealny do tworzenia prototypów animacji lub łączenia interakcji aplikacji mobilnych i internetowych. Na początek można zbudować prototypy z wbudowanych ustawień wstępnych, które są importowane do programu. Jeśli używasz Sketch, w programie dostępna jest wtyczka, która umożliwia import plików roboczych za pomocą jednego kliknięcia.
Platforma: Prochowiec
Cena £: $99
Narzędzia do projektowania wizualnego interfejsu
Gdy prototyp jest gotowy, następnym krokiem jest stworzenie projektu wizualnego interfejsu przyszłego produktu. Każdy projektant ma swoje ulubione narzędzia, których wymiana wydaje się niemożliwa. Niektóre z nich są już dobrze znane (szybko znajdziesz je w arsenale każdego projektanta), a niektóre nie są tak popularne. Zwróć więc uwagę na 5 głównych narzędzi do tworzenia projektów wizualnych, które naszym zdaniem będą w stanie dostać się do Twojego arsenału.
Adobe Photoshop
Chociaż ten program nie wymaga opisu, jest wart kilku słów. Chociaż poprzednio Photoshop nie zawierał żadnych bibliotek komponentów interfejsu, już w wersji CC można było pracować z bibliotekami elementów, obszarami roboczymi i wiele więcej. Nawet jeśli nie korzystałeś z produktów Adobe, spisywanie wspólnych pomysłów przez grupowanie wielu warstw i komponentów nie będzie długim procesem. Możesz tworzyć nie tylko interfejs użytkownika i interfejs użytkownika, ale także scenorysy i wszelkie szkice, które możesz wymyślić.
Platforma:Win i Mac
Cena £: 9–49 USD miesięcznie
Adobe InDesign
To narzędzie do projektowania obejmuje możliwość pracy z różnego rodzaju treściami i plikami, chociaż pierwotnie było przeznaczone do układu wielostronicowych drukowanych dokumentów. Wiele osób używa go tylko do tworzenia prototypów, inne również do projektowania samego interfejsu Tworzenie prototypowej witryny lub aplikacji w formie interaktywnego dokumentu PDF nigdy nie było tak proste! Ten produkt umożliwia tworzenie bibliotek komponentów strony, dzięki czemu można tworzyć liczne kolekcje różnych elementów interfejsu użytkownika, które można ponownie wykorzystać.
Platforma: Win i Mac
Cena £: 9–49 USD miesięcznie
Adobe Illustrator
Adobe Illustrator to potężne narzędzie do pracy z grafiką wektorową (oznacza to, że możesz tworzyć dzieła sztuki o dowolnym rozmiarze, w razie potrzeby skalować, bez utraty jakości obrazu). Jest to doskonały program do prototypowania różnych poziomów szczegółowości, tworzenia złożonych ilustracji wektorowych i pracy z typografią, a także do tworzenia doskonałego interfejsu wizualnego dla różnych rodzajów produktów.
Platforma: Win i Mac
Cena £: 9–49 USD miesięcznie
Fajerwerki Adobe
Adobe Fireworks pozwala projektować układy dla aplikacji mobilnych i internetowych. Program obsługuje style CSS, różne czcionki i układy scalone typu „promień narożnika” mogą być eksportowane jako osobny styl. Istnieje również zestaw predefiniowanych ustawień wstępnych.
Niestety projekt nie jest już obsługiwany i wkrótce zostanie zastąpiony przez Adobe Experience Design.
Adobe XD został pomyślany jako kompletne (zintegrowane) rozwiązanie do projektowania interfejsu, a prace nad tym programem zostały przeprowadzone wspólnie ze społecznością profesjonalnych projektantów. Programiści zastanawiali się nad optymalizacją i poprawą interakcji użytkownika z produktem, rozszerzając aplikacje i witryny GUI. Program jest obecnie dostępny za darmo na oficjalnej stronie Adobe (tylko Mac OS X).
Platforma: Win i Mac
Cena £: nie \\ tymczasowo za darmo
Naszkicować
Szkic: elastyczne i funkcjonalne narzędzie z wygodnym i intuicyjnym interfejsem, które zmusi cię do tworzenia fantastycznych rzeczy, ponieważ tworzenie projektu powinno być zabawą, a nie obowiązkiem. Ten produkt jest łatwy w użyciu, wielu projektantów korzysta z niego, aby rozwiązać dwa problemy jednocześnie - zarówno narzędzie do prototypowania niskiego poziomu, tworzenie szkieletów, jak i końcowy projekt interfejsu wizualnego.
Platforma:Prochowiec
Cena £: 99 USD (dostępna bezpłatna wersja próbna).
Wreszcie
Teraz wybór należy do Ciebie - podejmuj tylko świadome decyzje! Które narzędzia są bardziej odpowiednie dla Ciebie osobiście?
Artyści i projektanci wizualni pracują z tymi samymi mediami wizualnymi. Zarówno ci, jak i inni powinni być wykwalifikowani i doświadczeni we wszystkim, co dotyczy tych środków, ale ich działalność służy różnym celom. Celem artysty jest stworzenie obiektu, którego wygląd wywołuje reakcję estetyczną. Tak więc sztuka wizualna jest sposobem wyrażania się przez artystę na temat, który w nim (a czasem w całym społeczeństwie) powoduje zainteresowanie emocjonalne lub intelektualne. Artysta nie jest związany prawie żadnymi ograniczeniami. Im bardziej niezwykły i osobliwy jest jego wysiłek, tym bardziej jest doceniany.
Natomiast projektanci tworzą obiekty dla inni ludzie.Podczas gdy współcześni artyści są w większości zainteresowani wyrażanie siebieprojektanci, jak zauważyli Kevin Mallet i Darrell Sano we wspaniałej książce Designing Visual Interfaces (Mullet i Sano, 1995), „są zajęci szukaniem najbardziej odpowiedniego reprezentacjaprzekazać określone informacje ”, to znaczy komunikacja.Jeśli mówimy o projektantach interfejsów wizualnych, to szukają najlepszego widoku, przekazując informacje o zachowanieprogramy, w których projektach uczestniczą. Zgodnie z podejściem zorientowanym na cele, powinni starać się prezentować zachowanie i informacje w zrozumiały i użyteczny sposób, który wspiera cele marketingowe organizacji i cele emocjonalne postaci.
Mówiąc wprost, wizualna konstrukcja interfejsów użytkownika nie wyklucza względów estetycznych, ale takie względy nie powinny wykraczać poza ramy funkcjonalne. Chociaż subiektywność jest zawsze obecna w komunikacji wizualnej, staramy się minimalizować wpływ smak.Doszliśmy do wniosku, że wyraźne wyrażenie celów emocjonalnych i celów biznesowych użytkownika jest nieocenione, nawet jeśli chodzi o zaprojektowanie tych aspektów interfejsu wizualnego, które działają na korzyść marki, są odpowiedzialne za wrażenia użytkownika i zapewniają reakcje fizjologiczne. Bardziej szczegółowo pisaliśmy o fizjologicznym poziomie przetwarzania poznawczego w rozdziale 5.
Sztuki wizualne, projektowanie wizualne interfejsów i inne dyscypliny 335
Projektowanie graficzne i interfejsy użytkownika
Projektowanie graficzne to dyscyplina, nad którą poligrafia dominowała przez wiele lat (do około drugiej połowy lat 80. ubiegłego wieku), ponieważ projektowanie sprowadzało się głównie do tworzenia opakowań, reklamy, formatowania dokumentów i aranżacji środowiska życia. Oldschoolowi graficy nie czują się komfortowo z mediami cyfrowymi, ponieważ nie są przyzwyczajeni do tworzenia grafiki na poziomie pikseli. Młode pokolenie projektantów graficznych jest przeszkolonych do obsługi „nowego” formatu i całkiem skutecznie stosuje koncepcję tradycyjnego projektowania graficznego do grafiki cyfrowej.
Graficy są zwykle bardzo dobrze zorientowani w aspektach wizualnych i gorzej rozumieją koncepcje leżące u podstaw zachowania oprogramowania i jego interakcji z nim. Utalentowanym grafikom, znającym się na zagadnieniach cyfrowych, udało się stworzyć bogate w informacje, estetyczne, imponujące interfejsy, które widzimy w Windows XP i Mac OS X, a także bogate wizualnie interfejsy do gier komputerowych i aplikacji zorientowanych na konsumentów. Są w stanie stworzyć piękne i odpowiednie wyglądinterfejsy, a ponadto - w celu wprowadzenia identyfikacji wizualnej w wyglądzie i zachowaniu oprogramowania. Dla takich specjalistów projektowanie lub projektowanie interfejsów to przede wszystkim brzmienie, styl, kompozycja, które są atrybutami marki, po drugie, przejrzystość i przejrzystość informacji, a dopiero wtedy (jeśli do tego dojdzie) jest przekazywanie informacji o zachowaniu poprzez oczekiwany cel ( patrz rozdział 13).
Projektanci wizualnej części interfejsu potrzebują pewnych umiejętności, które są nierozerwalnie związane z grafikami pracującymi w formacie cyfrowym, ale muszą także mieć głębokie zrozumienie i właściwe postrzeganie roli zachowania. Ich wysiłki są w dużej mierze skoncentrowane na organizacyjnych aspektach projektowania oraz na tym, jak przekazać użytkownikowi cechy zachowania produktu za pomocą wizualnych punktów kontrolnych i oczekiwanych miejsc docelowych. Ich uwaga skupia się na zgodności między wizualną strukturą interfejsu z jednej strony a logiczną strukturą modelu mentalnego użytkownika a zachowaniem programu z drugiej. Ponadto obawiają się, jak poinformować użytkownika o stanach programu (powiedzmy, jak odróżnić stan „dostępny do zmiany” od stanu „tylko do odczytu”) oraz co zrobić z poznawczymi aspektami postrzegania funkcji przez użytkownika (skład elementów, hierarchia wizualna) , stosunek liczby do tła, itp.).
336 Rozdział 14. Projektowanie interfejsu wizualnego
Projekt informacji wizualnej
Projektanci informacjinie działają one na funkcjach interaktywnych, ale na wizualizacji danych, treści i narzędzi nawigacyjnych. W wizualnym projektowaniu interfejsów są one niezwykle ważne, szczególnie jeśli chodzi o aplikacje intensywnie przetwarzające dane i niektóre strony internetowe, w których zawartość przeważa nad funkcjonalnością. Wysiłki projektanta informacji mają na celu przedstawienie danych w formie umożliwiającej ich poprawną interpretację. Wynik tutaj osiąga się poprzez zarządzanie wizualną hierarchią za pomocą narzędzi takich jak kolor, kształt, lokalizacja i skala.
Wspólnymi obiektami projektowania informacji są wszelkiego rodzaju wykresy, wykresy i inne sposoby wyświetlania informacji ilościowych. Edward Tufty napisał kilka przełomowych książek opisujących szczegółowo ten temat, w tym The Visual Display of Quantitative Information (Tufte, 1983).
Wzornictwo przemysłowe
Jakakolwiek dyskusja na temat wzornictwa przemysłowego wykracza poza zakres tej książki, jednak powszechne stosowanie urządzeń interaktywnych i urządzeń przenośnych doprowadziło do tego, że rola wzornictwa przemysłowego w tworzeniu interaktywnych produktów rośnie na naszych oczach. Podobnie jak w przypadku różnicy w umiejętnościach zawodowych grafików, projektantów interfejsów i projektantów informacji, istnieje podział projektantów przemysłowych na dwie kategorie: niektóre specjalizują się w tworzeniu pięknych i użytecznych form, a inne talenty odnoszą się do logicznej i ergonomicznej reprezentacji elementów fizycznych kontrolowanie metody dopasowanej do zachowania użytkownika i odzwierciedlającej zachowanie urządzenia. Ponieważ coraz więcej urządzeń zyskuje w pełni funkcjonalne wyświetlacze, rośnie znaczenie współpracy między projektantami interakcji, projektantami interfejsów i projektantami przemysłowymi w tworzeniu kompletnych i skutecznych rozwiązań.
Elementy składowe wizualnego interfejsu
Zasadniczo konstrukcja interfejsów sprowadza się do pytania, jak zaprojektować i rozmieścić elementy wizualne w taki sposób, aby wyraźnie odzwierciedlały zachowanie i prezentowały informacje. Każdy element kompozycji wizualnej ma wiele właściwości, takich jak kształt i kolor, a połączenie tych właściwości nadaje temu elementowi znaczenie. Każda pojedyncza własność rzadko ma naturalne znaczenie. Możemy raczej powiedzieć, że użytkownik ma możliwość zrozumienia
Elementy składowe interfejsów projektowania wizualnego 337
w interfejsie ze względu na różne sposoby zastosowania tych właściwości do każdego z elementów interfejsu. W przypadkach, gdy dwa obiekty mają wspólne właściwości, użytkownik przyjmie, że obiekty te są powiązane lub podobne. Gdy użytkownicy zauważą, że właściwości są różne, zakładają, że obiekty nie są połączone. Najbardziej kontrastujące przedmioty bardziej przyciągają naszą uwagę. Na długo zanim dziecko zacznie rozumieć mowę i mówić, pokazuje zdolność rozróżniania obiektów kontrastujących wizualnie. Program dla dzieci Sesame Street opiera się na tej ludzkiej zdolności, zachęcając dzieci do wybrania przedmiotu, który nie jest podobny do innych lub nie należy do grupy. Wygląd wizualny interfejsów ma podobny sens, co w praktyce daje znacznie lepszy wynik niż same słowa.
Podczas tworzenia interfejsu użytkownika przeanalizuj następujące właściwości wizualne każdego elementu lub grupy elementów. Aby utworzyć przydatny i atrakcyjny interfejs użytkownika, należy dokładnie pracować z każdą z tych właściwości.
Jaki kształt ma obiekt? Czy to jest okrągłe, kwadratowe czy ameba? Forma jest głównym znakiem istoty przedmiotu dla osoby. Rozpoznajemy obiekty po konturach; sylwetka ananasa teksturowanego z niebieskim futrem wciąż pozwala nam zrozumieć, że jest to ananas. Co więcej, rozróżnienie form wymaga większej koncentracji uwagi niż analiza koloru lub wielkości. Dlatego forma nie jest najlepszą właściwością do tworzenia kontrastu, jeśli chcesz przyciągnąć uwagę użytkownika. Słabość formy jako czynnika rozpoznawania obiektów staje się widoczna, gdy spojrzysz na Dock 1 systemu operacyjnego Mac OS X - tutaj możesz przez pomyłkę wywołać iTunes zamiast iDVD lub iWeb zamiast iPhoto. Piktogramy mają inny kształt, ale mają podobne rozmiary, kolory i tekstury.
Jak duży lub mały jest obiekt w stosunku do innych obiektów na ekranie? Większe elementy przyciągają więcej uwagi, zwłaszcza jeśli są znacznie większe niż elementy otaczające. Rozmiar jest zmienny usprawnionyi kwantyfikowalneto znaczy, ludzie automatycznie sortują obiekty według rozmiaru i mają tendencję do oceniania ich według rozmiaru; jeśli mamy tekst w czterech rozmiarach, przyjmuje się, że krewny
Specjalny element interfejsu systemu operacyjnego Mac OS X, który umożliwia uruchamianie programów i przełączanie się między nimi. - Uwaga naukowy wyd.
333 Rozdział 14. Projekt interfejsu wizualnego
znaczenie tekstu rośnie wraz z rozmiarem, a ten pogrubiony tekst jest ważniejszy niż zwykły tekst.
Dlatego rozmiar jest użyteczną właściwością do wyznaczania hierarchii informacji. Wystarczająca różnica wielkości zwykle szybko przyciąga uwagę osoby. Jacques Bertin w swoim klasycznym The Semiology of Graphics (Bertin, 1983) opisuje rozmiar jako dysocjacyjnywłasność. Oznacza to, że jeśli obiekt jest bardzo mały lub bardzo duży, trudno jest zinterpretować inne zmienne, takie jak kształt.
Jasność
Jak ciemny lub jasny jest obiekt? Oczywiście pojęcia ciemności i światła mają sens głównie w kontekście jasności tła. Na ciemnym tle ciemny tekst jest prawie niewidoczny, a na jasnym wyraźnie się wyróżnia. Podobnie jak w przypadku wielkości, wartość jasności może być dysocjacyjna; powiedzmy, że jeśli zdjęcie jest zbyt ciemne lub zbyt jasne, niemożliwe jest ustalenie, co na nim jest. Ludzie dostrzegają kontrast szybko i łatwo, więc wartość jasności może być dobrym narzędziem do zwrócenia uwagi na te elementy, które należy podkreślić. Wartość jasności również zamówionezmienna, na przykład ciemniejsze (o niższej jasności) kolory na mapie są łatwo interpretowane: wskazują na większą głębokość lub większą gęstość zaludnienia.
Kolor
Żółty, czerwony czy pomarańczowy? Różnice kolorów szybko przyciągają uwagę. W niektórych obszarach profesjonalnych kolory mają określone znaczenie i można ich użyć. Tak więc dla księgowego czerwony oznacza wyniki negatywne, a czarny oznacza wyniki pozytywne; dla tradera papierów wartościowych niebieski to sygnał kupna, a czerwony to sygnał sprzedaży (przynajmniej w USA). Kolory mają również sens w kontekstach społecznych, w których dorastamy. Dla osoby z Zachodu, która dorastała na światłach, czerwony oznacza „stop”, a czasem nawet „niebezpieczeństwo”, podczas gdy w Chinach czerwony jest kolorem szczęścia. Biel na Zachodzie kojarzy się z czystością i pokojem, a w Azji pogrzebem i śmiercią. W tym przypadku, w przeciwieństwie do wielkości i jasności, kolor początkowo nie ma właściwości uporządkowania i nie jest wyrażany ilościowo, dlatego nie jest idealny do przesyłania tego rodzaju informacji. Ponadto kolor nie powinien być jedynym sposobem przekazywania informacji, ponieważ ślepota kolorów jest dość powszechna.
Używaj kolorów mądrze. Aby stworzyć skuteczny system wizualny, który pozwala użytkownikowi zidentyfikować podobieństwa i różnice
obiekty, używaj ograniczonego zestawu kolorów - efekt tęczy przeciąża postrzeganie użytkownika i ogranicza możliwość przekazywania mu informacji. Ponadto w kwestiach związanych z kolorem mogą pojawić się konflikty między potrzebami marketingu a zadaniem odzwierciedlenia pomysłów na interfejs. Aby znaleźć kompromis w takiej sytuacji, może być potrzebny utalentowany projektant wizualny (i dyplomata zatrudniony w niepełnym wymiarze godzin).
Kierunek
Gdzie obiekt wskazuje - w górę, w dół lub na boki? Kierunek jest przydatny, gdy chcesz przesłać informacje o orientacji (w górę lub w dół, do przodu lub do tyłu). Pamiętaj, że postrzeganie kierunku może być trudne w przypadku niektórych form i małych rozmiarów obiektów, dlatego lepiej jest użyć go jako funkcji drugorzędnej. Tak więc, jeśli chcesz pokazać, że giełda spadła, możesz użyć czerwonej strzałki w dół.
Tekstura
Szorstki czy gładki, monotonna czy nierówna? Oczywiście elementy wyświetlane na ekranie nie mają faktycznej tekstury, ale są w stanie stworzyć jego wygląd. Tekstura rzadko jest przydatna do przekazywania różnic lub przyciągania uwagi, ponieważ wymaga znacznej koncentracji na szczegółach. Ponadto do transferu tekstury wymagany jest znaczny nakład pikseli. Niemniej jednak tekstura może być ważną wskazówką: kiedy widzimy obszar teksturowany przez gumę, zakładamy, że powinniśmy złapać urządzenie za ten obszar. Szeryfowe i wypukłe elementy interfejsu użytkownika zwykle wskazują, że element można przeciągnąć, a fazy lub cienie przycisku wzmacniają wrażenie, że można go nacisnąć.
Lokalizacja
Jaki jest stosunek elementu do innych elementów? Podobnie jak rozmiar, lokalizacja jest zmienną zamówionei kwantyfikowalneco oznacza przydatne do przekazywania hierarchii. Po umieszczeniu najważniejszych lub najbardziej pożądanych elementów w lewym górnym rogu, użyjemy kolejności postrzegania elementów na ekranie dla korzyści produktu. Lokalizacja może również służyć jako środek do tworzenia relacji przestrzennych między obiektami na ekranie a obiektami w świecie rzeczywistym.
Zasady projektowania interfejsu wizualnego
Ludzki mózg jest doskonałym urządzeniem do rozpoznawania wzorców. Wydobywa znaczenie z gęstych strumieni informacji wizualnej.
340 Rozdział 14. Projekt interfejsu wizualnego
narody spadają na nas dosłownie zewsząd. Nasz mózg radzi sobie z zaporą danych wejściowych, odsłaniając wzorce wizualne i tworząc system priorytetów dla obserwowanych obiektów. Ostatecznie pozwala nam to świadomie postrzegać widzialny świat. Zdolność układu wzrokowego ludzkiego mózgu do łączenia części pola widzenia w obrazy oparte na zakotwiczeniach wizualnych (podpowiedziach) pozwala nam przetwarzać informacje wizualne tak szybko i skutecznie. Wyobraź sobie, że nagle musiałeś ręcznie obliczyć tor lotu baseballu, aby przewidzieć, gdzie spadnie. Nasze oczy i mózg robią to w ułamku sekundy, bez wymaganego od nas świadomego wysiłku. Proces tworzenia projektu interfejsu wizualnego powinien opierać się na naszej naturalnej zdolności przetwarzania informacji wizualnych w celu zapewnienia przekazywania informacji użytkownikom oraz odzwierciedlenia możliwości i funkcji programu.
Jeden rozdział jest całkowicie niewystarczający do pełnego ujawnienia tematu wizualnego projektowania interfejsów. Istnieje jednak wiele ważnych zasad, które pomogą ci stworzyć interfejsy, które są tak proste, jak to możliwe dla oka i przyjemne dla oka. Jak już wspomniano, Kevin Mallet i Darrell Sano zapewniają doskonałą i szczegółową analizę tych podstawowych zasad; omówimy tylko pokrótce niektóre z najważniejszych zasad projektowania interfejsu wizualnego.
Podczas tworzenia interfejsów graficznych powinieneś:
Użyj właściwości wizualnych do grupowania elementów i cos
nadanie jasnej hierarchii;
Utwórz strukturę wizualną i utwórz logiczny mar
Shrut na każdym poziomie organizacji;
Używaj całościowego, spójnego i odpowiedniego
obrazy kontekstowe;
Integracja stylu wizualnego z funkcjonalnością ma sens
ale także sekwencyjnie;
Unikaj wizualnego „hałasu” i bałaganu.
Te zasady i niektóre inne ogólne wzorce dotyczące pracy z tekstem i kolorem w graficznych interfejsach użytkownika zostały szczegółowo omówione w poniższych sekcjach.
Użyj właściwości wizualnych, aby pogrupować elementy i stworzyć przejrzystą hierarchię.
Z reguły sensowne jest grupowanie logicznych zestawów elementów funkcjonalnych lub informacyjnych według właściwości wizualnych, takich jak kolor lub cechy przestrzenne. Konsekwentne stosowanie tych właściwości wizualnych do interfejsu pozwala tworzyć obrazy szablonów, które użytkownicy szybko nauczą się rozpoznawać. Na przykład w systemie Windows XP wszystkie przyciski są
Zasady projektowania interfejsu wizualnego 341
wypukłe, z zaokrąglonymi narożnikami, a pola tekstowe są prostokątne, lekko przygnębione, z białym tłem i niebieską obwódką. Dzięki systematycznemu stosowaniu tego obrazu nie można pomylić przycisku i pola wprowadzania, pomimo pewnych podobieństw.
Podstawą interfejsu wizualnego są elementy wizualne
wzorce podstawowe.
Projekt
Patrząc na dowolny zestaw elementów wizualnych, użytkownik nieświadomie zadaje pytanie: „Co jest tutaj interesujące?” - i prawie natychmiast: „Jaki jest związek między tymi obiektami?” Powinniśmy dążyć do tego, aby interfejs zawierał odpowiedź na oba pytania.
Tworzenie hierarchii
Na podstawie scenariuszy określ, które elementy funkcjonalne i informacyjne powinny być natychmiast postrzegane przez użytkowników, które są drugorzędne i które są potrzebne tylko w wyjątkowych sytuacjach. Ranking taki służy jako podstawa wizualnej hierarchii.
Użyj koloru, nasycenia, kontrastu, rozmiaru i pozycji, aby stworzyć widoczne różnice między poziomami hierarchii. Najważniejsze elementy powinny być większe, jaśniejsze kolory, bardziej nasycone i większy kontrast. Powinny być umieszczone nad innymi elementami lub wystające. Wyróżnione elementy najlepiej pomalować w nasyconych kolorach. Mniej ważne elementy powinny być mniej nasycone, mniej kontrastowe, drobniejsze i bardziej płaskie. Neutralne jasne kolory prowadzą ich do tła.
Oczywiście, ustawienie tych właściwości powinno być wykonane ostrożnie. Najważniejszy element nie powinien być ogromny, czerwony i wypukły. Często wystarczy zmienić tylko jedną z właściwości. Jeśli okaże się, że dwa elementy o różnym znaczeniu konkurują o uwagę użytkownika, „przymocowanie knota mniej ważnego będzie lepszym rozwiązaniem niż próba„ podpalenia ”ważniejszego. Dzięki temu masz więcej miejsca na skupienie się na najważniejszych elementach. (Oto dobra analogia: jeśli wszystkie słowa na stronie są pogrubione na czerwono, czy przynajmniej jedno z nich jest podświetlone?)
Stworzenie przejrzystej hierarchii wizualnej jest jednym z najtrudniejszych zadań w wizualnym projektowaniu interfejsów; jego rozwiązanie wymaga umiejętności i talentu. Użytkownicy prawie nie zauważają jakościowej hierarchii wizualnej - ale jej brak i wynikające z tego zamieszanie są natychmiast widoczne.
342 Rozdział 14. Projekt interfejsu wizualnego
Wizualizacja linków
Ponownie zapoznaj się ze skryptami, aby przekazać relację elementu. Konieczne jest określenie nie tylko elementów o podobnych funkcjach, ale także elementów, które są najczęściej używane razem. Elementy wspólne powinny zazwyczaj być pogrupowane w przestrzeni, aby zminimalizować ruchy myszy, natomiast elementy, które nie mogą być używane razem, ale mają podobne funkcje, mogą być grupowane wizualnie, nawet jeśli nie są pogrupowane w przestrzeni.
Grupowanie przestrzenne wyjaśnia użytkownikom, w jaki sposób niektóre zadania, dane i narzędzia odnoszą się do innych, i może wskazywać na prawidłową sekwencję działań. Dobre grupowanie lokalizacjauwzględnia kolejność zadań i podzadań oraz ruch spojrzenia na ekranie: od lewej do prawej dla języków zachodnich i, z reguły, od góry do dołu. (Omówimy ten punkt bardziej szczegółowo później.)
Elementy znajdujące się obok siebie są zwykle ze sobą połączone. W wielu interfejsach takie grupowanie jest realizowane zbyt mocno: gdziekolwiek spojrzysz, ramki, a czasami ramka zawiera tylko jeden lub dwa elementy. Często ten sam efekt można osiągnąć w bardziej kompetentny sposób odległości.Na przykład przyciski na pasku narzędzi można rozdzielić czterema pikselami. Aby oddzielić polecenia pliku („otwórz”, „nowy plik”, „zapisz”) do osobnej grupy, wystarczy zwiększyć odległość między przyciskami poleceń pliku i sąsiednią grupą przycisków do ośmiu pikseli.
Elementy oddzielone dużymi odległościami można grupować za pomocą wspólnych właściwości wizualnych, tworząc szablon, który ostatecznie zyskuje niezależne znaczenie dla użytkowników. Tak więc użycie głośności do stworzenia poczucia fizycznego oczekiwanego celu jest prawdopodobnie najbardziej skutecznym sposobem oddzielenia kontroli od danych i elementów tła (więcej szczegółów na temat oczekiwanych zadań, patrz rozdział 13). Ta strategia jest często stosowana w rysowaniu piktogramów. Mac OS X używa żywych kolorów ikon aplikacji i przyciemnionych kolorów w rzadko używanych programach pomocniczych. Zielony przycisk uruchamiania urządzenia może nakładać się z podobną animowaną zieloną ikoną wskazującą, że urządzenie działa normalnie.
Decydując się na grupy i cechy wizualne tych grup, zacznij dostosowywać kontrast między grupami - podkreślając lub odwrotnie, cieniując grupy zgodnie z ich znaczeniem w obecnym kontekście. Podświetl różnice między grupami, ale zminimalizuj różnice między elementami tej samej grupy.
Zasady projektowania interfejsu wizualnego 343
Test zezowy
Jest dobry sposób, aby upewnić się, że projekt wizualny skutecznie uwzględnia hierarchię i relacje - projektanci nazywają tę technikę testem zeza. Zamknij jedno oko i spójrz na ekran zezowanym drugim okiem. Zwróć uwagę, które elementy wystają za bardzo, które stają się rozmyte i które są połączone w grupy. Ta procedura często ujawnia nierozpoznane wcześniej problemy w składzie interfejsu.
Utwórz strukturę wizualną i wytycz logiczną trasę na każdym poziomie organizacji
Wyobraź sobie, że interfejsy składają się z elementów wizualnych i interaktywnych, które są łączone w grupy za pomocą paneli, które z kolei można grupować w ekrany, widoki lub strony. Takie grupowanie, jak wspomniano powyżej, można przeprowadzić za pomocą rozkładu przestrzennego lub przy użyciu wspólnych właściwości wizualnych. Ekskluzywna aplikacja może mieć kilka poziomów takich struktur, dlatego niezwykle ważne jest utrzymanie przezroczystej struktury wizualnej, aby użytkownik mógł łatwo przełączać się z jednej części interfejsu do drugiej zgodnie z jego przepływem pracy.
W pozostałej części tego rozdziału opisujemy szereg ważnych właściwości, które pomagają zdefiniować przejrzystą strukturę wizualną.
Wyrównanie i siatka
Wyrównanie elementów wizualnych jest jedną z głównych technik umożliwiających projektantowi prezentowanie produktu użytkownikom w sposób systematyczny i uporządkowany. Zgrupowane elementy należy wyrównać zarówno poziomo, jak i pionowo (ryc. 14.1). W ogólnym przypadku każdy element na ekranie powinien być wyrównany zgodnie z maksymalną możliwą liczbą innych elementów. Odmowa wyrównania dwóch elementów lub dwóch grup elementów musi być świadoma: jest to dopuszczalne tylko w celu uzyskania określonego efektu oddzielającego. Między innymi projektanci powinni zwrócić uwagę na:
Wyrównanie podpisu. Podpisy do kontroli, wyścigów
ułożone jeden na drugim, powinny być wyrównane wspólnie
granica. Jeśli wszystkie podpisy są w przybliżeniu tej samej długości, Ty
wyrównaj je po lewej stronie - ułatwi to użytkownikom
czytaj niż po wyrównaniu do prawej.
Wyrównanie w obrębie grupy elementów funkcjonalnych. Grupa
pa powiązane flagi, opcje lub pola tekstowe
musi przestrzegać linii standardowej siatki.
Rozdział 14. Projektowanie interfejsu wizualnego
Figa. 14.I. Adobe Lightroom bardzo skutecznie wykorzystuje wyrównanie składu. Tekst, elementy funkcjonalne i grupy elementów sterujących są bardzo wyraźnie wyrównane na siatce o stałym skoku. Należy zauważyć, że pokonanie kontrolek i podpisów elementów grupy po prawej stronie może zakłócać ich szybkie czytanie
Wyrównanie elementów ułożonych w grupy i panele.
Grupy kontrolek i inne obiekty na ekranie, tam gdzie to możliwe, powinny być powiązane z tą samą siatką.
Siatka jest jednym z najpotężniejszych narzędzi projektanta wizualnego, szybko zyskującym popularność w latach po II wojnie światowej dzięki szwajcarskim drukarkom. Siatka zapewnia jednolitość i spójność struktury kompozycji, co jest szczególnie ważne przy projektowaniu interfejsu zkilka poziomów złożoności wizualnej lub funkcjonalnej. Gdy projektanci interakcji zidentyfikują ogólną infrastrukturę aplikacji i jej elementów interfejsu użytkownika (patrz rozdział 7), projektanci interfejsów muszą uporządkować kompozycję w strukturę siatki, która odpowiednio podkreśli ważne elementy i struktury oraz pozostawi przestrzeń dla mniej ważnych elementów i przedmioty niższego poziomu.
Z reguły siatka dzieli ekran na kilka dużych obszarów poziomych i pionowych (ryc. 14.2). Jakościowo zaprojektowany
Zasady projektowania interfejsu wizualnego
Figa. 14.2 W tym przykładzie siatka kompozycji dostosowuje rozmiar i położenie różnych obszarów ekranu witryny. Zapewnia spójność różnych ekranów, zmniejszając zarówno pracę projektanta przy tworzeniu kompozycji, jak i wysiłek, jaki użytkownik musi podjąć, aby przeczytać i zrozumieć zawartość ekranu
kratka łazienkowa angażuje koncepcję krokto jest minimalna odległość między elementami. Na przykład, jeśli odstępy między siatkami wynoszą cztery piksele, wszystkie odległości między elementami i grupami muszą być wielokrotnością czterech.
W idealnym przypadku siatka powinna również określać proporcje różnych obszarów ekranu. Takie relacje są zwykle wyrażane w ułamkach. Wśród pospolitych ułamków jest znakomita „złota sekcja” (oznaczona grecką literą „phi” i równa około 1,62), która często występuje w naturze i jest uważana za szczególnie przyjemną dla ludzkiego oka; odwrotność pierwiastka kwadratowego z dwóch (około 1: 1,41), co stanowi podstawę międzynarodowego standardu formatu papieru (na przykład arkusz A4); a współczynnik 4: 3 to współczynnik kształtu większości wyświetlaczy komputerowych.
Oczywiście należy dążyć do równowagi między wyidealizowanymi zależnościami geometrycznymi a konkretnymi potrzebami przestrzennymi funkcji i informacji wyświetlanych na ekranie. Idealna implementacja złotej sekcji nie poprawi czytelności ekranu, na którym obiekty są ułożone w stos. Dobra kompozytowa siatka modułowyoznacza to, że jest wystarczająco elastyczny, aby uwzględnić wszystkie niezbędne zmiany, przy jednoczesnym zachowaniu spójności struktury tam, gdzie to możliwe. Jak u wielu
Ludzki mózg jest doskonałym urządzeniem do rozpoznawania wzorców. Radzi sobie z szeregiem danych wejściowych, odsłaniając wzorce wizualne i tworząc system priorytetów dla obserwowanych obiektów. Zdolność układu wzrokowego ludzkiego mózgu do łączenia części pola widzenia w obrazy oparte na zakotwiczeniach wizualnych (podpowiedziach) pozwala nam przetwarzać informacje wizualne tak szybko i skutecznie. Proces tworzenia projektu interfejsu wizualnego powinien opierać się na naszej naturalnej zdolności przetwarzania informacji wizualnych w celu zapewnienia przekazywania informacji użytkownikom oraz odzwierciedlenia możliwości i funkcji programu.
Podczas tworzenia interfejsów graficznych powinieneś:
- Użyj właściwości wizualnych, aby pogrupować elementy i stworzyć przejrzystą hierarchię.
- Utwórz strukturę wizualną i ułóż logiczną trasę na każdym poziomie organizacji.
- Używaj spójnych, spójnych i kontekstowych obrazów.
- Zintegruj styl wizualny z funkcjonalnością w sensowny i spójny sposób.
- Unikaj wizualnego „hałasu” i bałaganu.
Rozważmy je bardziej szczegółowo.
Używanie właściwości wizualnych do grupowania elementów i tworzenia jasnej hierarchii
Z reguły sensowne jest grupowanie logicznych zestawów elementów funkcjonalnych lub informacyjnych według właściwości wizualnych, takich jak kolor lub cechy przestrzenne. Konsekwentne stosowanie tych właściwości wizualnych do interfejsu pozwala tworzyć obrazy szablonów, które użytkownicy szybko nauczą się rozpoznawać. Zgodnie z instrukcjami dotyczącymi projektowania aplikacji na Androida zwykłe przyciski powinny być wypukłe, z zaokrąglonymi narożnikami, a pola tekstowe są prostokątne, zwykle podkreślone i płaskie, a aktywne elementy są podświetlone (patrz ryc. 3.4). Dzięki systematycznemu stosowaniu tego obrazu nie można pomylić przycisku i pola wprowadzania, pomimo pewnych podobieństw.
Patrząc na dowolny zestaw elementów wizualnych, użytkownik nieświadomie zadaje pytanie: „Co jest tutaj interesujące?” - i prawie natychmiast: „Jaki jest związek między tymi obiektami?” Powinniśmy dążyć do tego, aby interfejs zawierał odpowiedź na oba pytania.
Figa. 3.4
Podczas tworzenia hierarchii należy na podstawie scenariuszy określić, które elementy funkcjonalne i informacyjne powinny być natychmiast dostrzeżone przez użytkowników, które są drugorzędne i które są potrzebne tylko w wyjątkowych sytuacjach. Ranking taki służy jako podstawa wizualnej hierarchii.
Aby stworzyć widoczne różnice między poziomami hierarchii, użyj koloru, nasycenia, kontrastu, rozmiaru i pozycji. Najważniejsze elementy powinny być większe, jaśniejsze kolory, bardziej nasycone i większy kontrast. Powinny być umieszczone nad innymi elementami lub wystające. Mniej ważne elementy powinny być mniej nasycone, mniej kontrastowe, drobniejsze i bardziej płaskie. Neutralne jasne kolory prowadzą ich do tła.
Oczywiście, ustawienie tych właściwości powinno być wykonane ostrożnie. Najważniejszy element nie powinien być ogromny, czerwony i wypukły. Często wystarczy zmienić tylko jedną z właściwości. Jeśli okaże się, że o uwagę użytkownika konkurują dwa elementy o różnym znaczeniu, lepszym rozwiązaniem byłoby uczynienie mniej istotnym mniej zauważalnym.
Stworzenie przejrzystej hierarchii wizualnej jest jednym z najtrudniejszych zadań w wizualnym projektowaniu interfejsów; jego rozwiązanie wymaga umiejętności i talentu. Użytkownicy prawie nie zauważają jakościowej hierarchii wizualnej - ale jej brak i wynikające z tego zamieszanie są natychmiast widoczne.
Ponownie zapoznaj się ze skryptami, aby przekazać relację elementu. Konieczne jest określenie nie tylko elementów o podobnych funkcjach, ale także elementów, które są najczęściej używane razem. Udostępniane elementy powinny być zwykle pogrupowane w przestrzeni (umieszczone na osobnym ekranie), aby zminimalizować ruch między nimi.
Grupowanie przestrzenne wyjaśnia użytkownikom, w jaki sposób niektóre zadania, dane i narzędzia odnoszą się do innych, i może wskazywać na prawidłową sekwencję działań. Dobre grupowanie według lokalizacji uwzględnia kolejność zadań i podzadań oraz ruch spojrzenia na ekranie.
Elementy znajdujące się obok siebie są zwykle ze sobą połączone. Jeśli chcesz utworzyć grupowanie, wygodnie jest zaimplementować je przy użyciu odległości. Elementy oddzielone dużymi odległościami można grupować przy użyciu wspólnych właściwości wizualnych.
Decydując się na grupy i cechy wizualne tych grup, zacznij dostosowywać kontrast między grupami - podkreślając lub odwrotnie, cieniując grupy zgodnie z ich znaczeniem w obecnym kontekście.
Jest dobry sposób, aby upewnić się, że projekt wizualny skutecznie uwzględnia hierarchię i relacje - projektanci nazywają tę technikę testem zeza. Zamknij jedno oko i spójrz na ekran zezowanym drugim okiem. Zwróć uwagę, które elementy wystają za bardzo, które stają się rozmyte i które są połączone w grupy. Ta procedura często ujawnia nierozpoznane wcześniej problemy w składzie interfejsu.
Struktura wizualna i trasy logiczne
Wyobraź sobie, że interfejsy składają się z elementów wizualnych i interaktywnych, które są łączone w grupy za pomocą paneli, które z kolei można grupować w ekrany. Takie grupowanie można przeprowadzić przez rozmieszczenie w przestrzeni lub przy użyciu wspólnych właściwości wizualnych. Konieczne jest utrzymanie przezroczystej struktury wizualnej, aby użytkownik mógł łatwo przełączać się z jednej części interfejsu na drugą zgodnie z przebiegiem pracy.
Opisujemy szereg ważnych właściwości, które pomagają ustalić przejrzystą strukturę wizualną.
Wyrównanie
Wyrównanie elementów wizualnych jest jedną z głównych technik umożliwiających projektantowi prezentowanie produktu użytkownikom w sposób systematyczny i uporządkowany. Zgrupowane elementy należy wyrównać zarówno poziomo, jak i pionowo (ryc. 3.5).
W ogólnym przypadku każdy element na ekranie powinien być wyrównany zgodnie z maksymalną możliwą liczbą innych elementów. Odmowa wyrównania dwóch elementów lub dwóch grup elementów musi być świadoma: jest to dopuszczalne tylko w celu uzyskania określonego efektu oddzielającego. Między innymi projektanci powinni zwrócić uwagę na:
- Wyrównanie podpisu. Etykiety dla kontroli umieszczonych jedna nad drugą powinny być wyrównane na wspólnej granicy.
- Wyrównanie w obrębie grupy elementów funkcjonalnych. Grupa powiązanych flag, opcji lub pól tekstowych musi być zgodna z wyrównaniem standardowej siatki.
- Wyrównanie elementów ułożonych w grupy i panele. Grupy kontrolek i inne obiekty na ekranie, tam gdzie to możliwe, powinny być powiązane z tą samą siatką.
Figa. 3.5
Krata
Siatka jest jednym z najpotężniejszych narzędzi projektanta wizualnego. Siatka zapewnia jednolitość i spójność w strukturze kompozycji. Po tym, jak projektanci interakcji zidentyfikują ogólną infrastrukturę aplikacji i jej elementów interfejsu użytkownika, projektanci interfejsów powinni uporządkować kompozycję w strukturę siatki, która odpowiednio podkreśli ważne elementy i struktury oraz pozostawi przestrzeń życiową dla mniej ważnych elementów i elementów niższego poziomu.
Zazwyczaj siatka dzieli ekran na kilka dużych obszarów poziomych i pionowych. Dobrze zaprojektowana siatka obejmuje koncepcję kroku, czyli minimalnej odległości między elementami. Na przykład, jeśli odstępy między siatkami wynoszą cztery piksele, wszystkie odległości między elementami i grupami muszą być wielokrotnością czterech.
W idealnym przypadku siatka powinna również określać proporcje różnych obszarów ekranu. Takie relacje są zwykle wyrażane w ułamkach. Wśród powszechnych frakcji jest znakomita „złota sekcja” (równa około 1,62), która często występuje w naturze i jest uważana za szczególnie przyjemną dla ludzkiego oka; odwrotność pierwiastka kwadratowego z dwóch (około 1: 1,41), co stanowi podstawę międzynarodowego standardu formatu papieru (na przykład arkusz A4). W programowaniu na urządzenia mobilne nie powinieneś polegać na proporcjach wyświetlaczy, ponieważ dla urządzeń z Androidem nie ma jednego standardu dla rozmiaru ekranu.
Korzystanie z siatki w wizualnym projektowaniu interfejsów ma kilka zalet:
- Łatwość użycia. Ponieważ siatka ujednolica układ elementów, użytkownicy szybko zdobywają umiejętności znajdowania niezbędnych elementów w interfejsie. Kolejność rozmieszczenia elementów i wybór odległości między nimi ułatwia pracę mechanizmów przetwarzania wizualnego w ludzkim mózgu. Dobrze zaprojektowana siatka upraszcza obsługę ekranu.
- Estetyczny wygląd. Ostrożnie stosując siatkę i wybierając odpowiednie proporcje między różnymi obszarami ekranu, projektant może stworzyć poczucie porządku, które jest wygodne dla użytkowników i stymuluje ich pracę z produktem.
- Wydajność. Utworzenie siatki i włączenie jej do procesu na wczesnych etapach szczegółowych decyzji projektowych zmniejsza liczbę iteracji i działań w celu „ulepszenia” interfejsu. Wysokiej jakości i wyraźnie zaznaczona siatka stanowi podstawę łatwej do modyfikacji i rozszerzalnej konstrukcji, umożliwiając programistom znalezienie dobrych rozwiązań w zakresie kompozycji.
Dwa rodzaje symetrii są najczęściej używane w interfejsach: pionowa symetria osiowa (symetria wokół linii pionowej poprowadzonej przez środek grupy elementów) i diagonalna symetria osiowa (symetria wokół przekątnej). Większość aplikacji ma jeden z tych rodzajów symetrii.
