Kompletny przewodnik po projektowaniu interfejsu użytkownika

Zawartość

• 01. Wybierz typografię
• 02. Wybierz odpowiednią paletę
• 03. Styl linków i przycisków
• 04. Twórz komponenty
• 05. Dokumentuj i współpracuj

Co to jest projekt interfejsu użytkownika? Lepszym pytaniem byłoby, co właściwie obejmuje projekt interfejsu użytkownika? Estetyka? Użyteczność? Dostępność? Wszyscy? W jaki sposób wszystkie te czynniki łączą się, aby zapewnić optymalne wrażenia użytkownika i co powinno być pierwsze?

Dostępność powinna być zawsze na pierwszym miejscu, kładąc podwaliny pod optymalną użyteczność (pomoże tutaj użycie najlepszego narzędzia do tworzenia witryn). A potem, gdy interfejs użytkownika jest zarówno dostępny, jak i użyteczny, powinien już wyglądać dość przyzwoicie pod względem estetyki (pomogą w tym narzędzia do projektowania interfejsu użytkownika). Następnie, aby upewnić się, że projekt działa na wszystkich poziomach, musisz go dokładnie przetestować, co możesz zrobić dzięki naszemu wyborowi najlepszych narzędzi do testowania użytkowników. Przyjrzyjmy się bliżej podstawowym elementom większości projektów i tym, co można zrobić, aby zapewnić spójność wizualną.

01. Wybierz typografię

Świetna typografia (podobnie jak wiele aspektów projektowania) sprowadza się do dostępności. Projekt wizualny z pewnością zwiększa ogólne wrażenia użytkownika, ale pod koniec dnia użytkownicy wchodzą w interakcję z interfejsem użytkownika, a nie postrzegają go jako sztuki. Czytelne litery zapewniają przejrzystość, a czytelne słowa pomagają użytkownikom efektywnie przyswajać treści. Obie są ważniejsze niż jakakolwiek estetyka wizualna.

Jednak dobrze zaprojektowana typografia może nadal być estetyczna. Czarno-biała czcionka Helvetica (lub podobna czcionka) może być piękną rzeczą po kilku prostych poprawkach typograficznych. Przez ulepszenia rozumiemy modyfikację rozmiaru czcionki, wysokości linii, odstępów między literami itd. - a nie czcionki czy koloru tekstu.

„Piękna” typografia jest w rzeczywistości brzydka, kiedy jest nieczytelna, ponieważ frustracja zawsze ma pierwszeństwo przed estetyką. Świetny projekt jest wyważony i harmonijny.

Podobnie jak w przypadku wielu aspektów projektowania interfejsu użytkownika, dopracowanie grafiki w celu zrównoważenia dostępności i estetyki nie jest wyzwaniem. Wyzwaniem jest zachowanie spójności w całym projekcie. Spójność ustanawia przejrzystą hierarchię między elementami o różnym znaczeniu, co z kolei pomaga użytkownikom szybciej zrozumieć interfejs użytkownika, a nawet wydajniej przetrawiać zawartość.

Jeśli chodzi o czytelność i czytelność, minimalny dopuszczalny rozmiar czcionki zgodnie z wytycznymi WCAG 2.0 dotyczącymi dostępności treści internetowych to 18 punktów (lub 14 punktów pogrubionych). Najlepszy rozmiar czcionki zależy w dużej mierze od samej czcionki, ale ważne jest, aby pamiętać o wizualnej hierarchii i tym, jak ten rozmiar podstawowy odróżnia się od podsumowań i nagłówków (tj. h1>, h2>, h3>).

Korzystając z wybranego narzędzia do projektowania interfejsu użytkownika (będziemy używać InVision Studio), utwórz serię warstw tekstowych (T), a następnie dostosuj wszystkie rozmiary, aby były zgodne z następującym szablonem:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

W programie InVision Studio (i wszystkich innych narzędziach do projektowania interfejsu użytkownika) odbywa się to poprzez dostosowanie stylów za pomocą panelu Inspektor po prawej stronie.

Następnie wybierz czcionkę, ale uważaj, ponieważ w przypadku niektórych czcionek możesz zauważyć 18 pikseli p> i 22px h3> nie wygląda zupełnie inaczej. Mamy dwie możliwości: dostosować rozmiary czcionek lub rozważyć inną czcionkę w nagłówkach. Wybierz to drugie, jeśli przewidujesz, że Twój projekt będzie zawierał dużo tekstu.

Weź pod uwagę, że:

• Projekt wizualnego interfejsu użytkownika jest często podejściem intuicyjnym
• Nic nie jest zdecydowane; wszystko może ulec zmianie

Wysokość linii

Optymalna wysokość linii zapewnia, że ​​wiersze tekstu mają wystarczające odstępy między nimi, aby uzyskać przyzwoity poziom czytelności. Jest to coraz bardziej rozpoznawane jako „standard”; Narzędzie Google Lighthouse Audit sugeruje nawet to jako ręczną kontrolę (lub nawet jako flagę, jeśli tekst zawiera linki, które mogą być zbyt blisko siebie z powodu nieoptymalnej wysokości wiersza).

Po raz kolejny WCAG pomaga nam w tym, deklarując, że wysokość linii powinna być 1,5 raza większa od rozmiaru czcionki. Dlatego w narzędziu do projektowania interfejsu użytkownika w sekcji „Linia” (lub podobnym) po prostu pomnóż rozmiar czcionki przez - co najmniej - 1,5. Na przykład, jeśli tekst podstawowy ma 18 pikseli, wysokość linii będzie wynosić 27 pikseli (18 * 1,5 - można również wykonać operację matematyczną bezpośrednio w Inspektorze). Ponownie jednak uważaj - jeśli 1,6x wydaje się lepsze, użyj 1,6x. Pamiętaj, że różne czcionki dadzą różne wyniki.

Jest za wcześnie, aby myśleć o wykorzystaniu rzeczywistych danych w naszym projekcie, ale przynajmniej powinniśmy nadal używać nieco realistycznych danych (nawet lorem ipsum). InVision Studio ma natywną aplikację do rzeczywistych danych, która pomaga nam zobaczyć, jak może wyglądać nasza typografia.

Odstępy między akapitami

Odstępy między akapitami nie są stylem, który możemy zadeklarować za pomocą Inspektora InVision Studio. Zamiast tego będziemy musieli ręcznie wyrównać warstwy za pomocą inteligentnych prowadnic (⌥). Podobnie jak wysokość linii, magiczny mnożnik wynosi 2x (dwukrotność rozmiaru czcionki). Na przykład, jeśli rozmiar czcionki to 18 pikseli, przed przejściem do następnego bloku tekstu powinno być co najmniej 36 pikseli odstępu. Odstępy między literami powinny wynosić co najmniej 0,12.

Jednak nie musimy się tym martwić, dopóki nie zaczniemy tworzyć komponentów.

Wspólne style

Jeśli Twoje narzędzie do projektowania interfejsu użytkownika to obsługuje (InVision Studio jeszcze tego nie robi), rozważ przekształcenie tych stylów typograficznych w „Style współdzielone”, aby umożliwić ich szybkie ponowne użycie, zapewniając jednocześnie spójność wizualną. Odbywa się to zwykle za pośrednictwem Inspektora.

02. Wybierz odpowiednią paletę

Wybór idealnych kolorów dla Twojego projektu wykracza daleko poza estetykę: może wpłynąć na całą hierarchię Twojej witryny.

Jeśli chodzi o projektowanie interfejsu użytkownika, kolor jest zwykle jedną z pierwszych rzeczy, którymi lubimy się bawić, ale uczymy się, że zanurzenie się bezpośrednio w projekt wizualny jest złą rzeczą. Jest to z pewnością prawda, jednak jeśli chodzi o spójność wizualną, kolor powinien być najważniejszy, ponieważ odgrywa on inne role.

Kolor w projektowaniu interfejsu użytkownika może być bardzo skuteczny, ale ponieważ niektórzy użytkownicy (a właściwie wielu) cierpi na różnego rodzaju upośledzenie wzroku, nie zawsze jest to niezawodne. Biorąc to pod uwagę, nie chodzi koniecznie o konkretny kolor, który jest używany, ale raczej o jego typ. Może to nie być prawdą, jeśli chodzi o branding, ponieważ kolor jest używany do wywierania wpływu emocjonalnego w tym zakresie, ale w projektowaniu interfejsu użytkownika kolor jest również używany do komunikowania zamiaru, znaczenia i, oczywiście, wizualnej hierarchii.

01. Sztywny
Wtyczka Stark jest kompatybilna ze Sketch i Adobe XD i pomaga sprawdzić kontrast kolorów i symulować ślepotę kolorów bezpośrednio z płótna. Wsparcie dla Figma i InVision Studio będzie dostępne już wkrótce.
02.Zabarwienie
Kolory to zestaw 90 kombinacji kolorów, które mają odpowiednią ilość kontrastu kolorów, aby spełnić Wytyczne WCAG 2.0 - niektórym z nich udaje się nawet spełnić normę AAA.
03. Projekt A11y
Projekt A11y to ogromne centrum dla wszystkich spraw związanych z dostępnością. Zawiera zasoby, narzędzia, wskazówki, samouczki i jest tworzony przez producenta wtyczki Stark i otrzymuje fundusze od InVision.

Trzy rodzaje kolorów

Kolory mają znaczenie, więc ważne jest, aby nie mieć ich zbyt wiele. Zbyt wiele znaczeń oznacza więcej rzeczy, które użytkownik musi zrozumieć i zapamiętać - nie wspominając o większej liczbie kombinacji kolorów, o które powinniśmy się martwić. Ogólnie rzecz biorąc, byłby to zalecany format:

• Kolor wezwania do działania (także główny kolor marki)
• Neutralny ciemny kolor (lepszy dla elementów interfejsu użytkownika lub trybu ciemnego)
• Dla wszystkich powyższych, nieco jaśniejsza i ciemniejsza odmiana

Umożliwia to:

• Tryb ciemny będzie łatwo osiągalny
• Nasz kolor CTA nigdy nie będzie kolidował z innymi kolorami
• W każdym scenariuszu będziemy w stanie uwypuklić i zniwelować

Skonfiguruj swoją paletę

Korzystając z wybranego narzędzia do projektowania interfejsu użytkownika, utwórz jeden dość duży obszar roboczy (dotknij A) dla każdego koloru (nazwane „Marka”, „Neutralny / Jasny” i „Neutralny / Ciemny”). Następnie w każdym obszarze roboczym utwórz dodatkowe mniejsze prostokąty wyświetlające ciemniejsze i jaśniejsze warianty koloru, a także same inne kolory.

Trochę jaśniejsze i ciemniejsze byłoby odpowiednio 10% dodatkowej bieli i 10% dodatkowej czerni. Kiedy skończysz, wyświetl kopię stylów typograficznych na każdym obszarze roboczym. Kolor tych warstw tekstu powinien być neutralny, jasny, z wyjątkiem neutralnego jasnego obszaru roboczego, gdzie powinny być neutralnie ciemne.

Kontrast

Następnie musimy sprawdzić nasze kolory pod kątem optymalnego kontrastu. Istnieje wiele narzędzi, które mogą to zrobić, na przykład wtyczka Stark dla Sketch i Adobe XD lub Contrast dla macOS - jednak rozwiązanie online, takie jak Contrast Checker lub Color Contrast Checker, wystarczy.

Sprawdź kontrast kolorów dla każdej kombinacji i odpowiednio dostosuj kolory. Jeśli nie masz pewności, jakich kolorów użyć, wypróbuj zalecenia dotyczące bezpiecznego koloru.

03. Styl linków i przycisków

Rozmiar

Przyciski i linki, podobnie jak typografia, powinny mieć kilka odmian. Przecież nie wszystkie działania mają taką samą wagę, a kolor, o czym mówiliśmy wcześniej, jest zawodną metodą komunikacji, więc nie może być głównym sposobem wpływania na wizualną hierarchię. Musimy też bawić się rozmiarem.

Test afordancji wizualnej to test użyteczności używany do określenia, czy elementy dotykowe wydają się być klikalne. Zsynchronizuj projekt ze Studio z programem Freehand (⌘⇧F), wyślij wynikowy adres URL do testerów i poproś ich, aby zakreślili elementy, które ich zdaniem są klikalne.

Użytkownicy spoza InVision Studio mogą również korzystać z programu Freehand, ale użytkownicy InVision Studio mogą bezproblemowo uruchamiać swoje projekty w programie Freehand z InVision Studio, co jest najszybszym i najbardziej wydajnym sposobem uzyskiwania wizualnych informacji zwrotnych od użytkowników.

Ogólnie zalecamy, aby tekst przycisku był zadeklarowany jako 18px (tak samo jak tekst podstawowy), ale same przyciski mają trzy warianty rozmiaru:

• Normalna: 44 piks. Wysokości (zaokrąglone rogi: 5 piks.)
• Duży: Wysokość 54 pikseli (zaokrąglone rogi: 10 pikseli)
• Bardzo duży: Wysokość 64 piks. (Zaokrąglone rogi: 15 piks.)

Dzięki temu możemy sprawić, że niektóre przyciski będą wyglądać na ważniejsze bez polegania na kolorze, a także do zagnieżdżenia przycisków (na przykład użyj przycisku wewnątrz minimalnie wyglądającego pola formularza).

Głębokość

Niezależnie od tego, czy celem dotknięcia jest przycisk, czy pole formularza, cienie powinny być używane w celu zwiększenia głębi, a tym samym sugerowania interaktywności. Jeden styl cienia dla wszystkich wariantów przycisków i pól formularzy jest w porządku.

Interaktywność

Każdy typ przycisku wymaga zmiany, aby wskazać stan najechania myszą. To wyjaśnia użytkownikowi, że to, co próbował zrobić, jest całkowicie w porządku i gwarantuje, że będzie kontynuował bez zwłoki.

W rzeczywistości jest to jeden z bardziej złożonych aspektów zachowania spójności wizualnej, ponieważ kolor jest często preferowanym stylem do zmiany, jeśli chodzi o tworzenie stanu. Na szczęście te zmiany stanu mogą być stosunkowo subtelne, więc dobrze jest zmienić kolor na nieco jaśniejszy lub ciemniejszy - do tego właśnie służą. Dotyczy to również linków.

Odstąpienie od tego spowoduje, że użyjemy koloru, który albo już ma istotne znaczenie, co spowoduje dezorientację użytkowników, albo zdecyduje się wymyślić inny kolor. Decyzja o użyciu koloru dodatkowego jest w porządku, ale powinna być zapisana na potrzeby wizualizacji marketingowych, a nie elementów interfejsu użytkownika. Mniej znaczy więcej (i łatwiej).

Pamiętaj, aby powtórzyć ten krok dla każdego obszaru roboczego. Nie umieszczaj markowych przycisków wezwań do działania na obszarze roboczym marki - później omówimy, co się dzieje, gdy pewne kombinacje nie działają.

04. Twórz komponenty

Komponenty to ogromna oszczędność czasu, a wszystkie narzędzia do projektowania interfejsu użytkownika oferują tę funkcję (np. W programie Sketch są one nazywane symbolami). W Studio możemy tworzyć komponenty, wybierając wszystkie warstwy, które powinny składać się na komponent i używając ⌘K. skrót.

Korzystanie z komponentów

Modele szkieletowe są bardzo przydatne nie tylko do projektowania interfejsów użytkownika o wysokiej użyteczności, ale także do sprawdzania, czego nasz interfejs będzie wymagał w dłuższej perspektywie. To coś w rodzaju zabezpieczenia przyszłości.

Nie oznacza to, że musimy zaprojektować mnóstwo komponentów lub być gotowym na każdy możliwy scenariusz, ale oznacza to, że musimy przyjąć postawę „A co jeśli?”.

Na przykład, jeśli nasz szkielet wymaga komponentu 3x1, ale wiemy, że treść nie jest utrwalona w kamieniu, odrobina kontemplacji może nas skłonić do zastanowienia się: „A co, jeśli te komponenty okażą się 4x1?”. Ogólna zasada brzmi: projektuj tylko dla potrzeb użytkownika, które już istnieją, ale staraj się, aby rozwiązania były stosunkowo elastyczne. W przeciwnym razie skończymy na pewnym bardzo niechlujnym „zadłużeniu projektowym”.

Teraz możemy ponownie użyć tego komponentu, przeciągając go na kanwę z Biblioteki> Dokument po lewej stronie, chociaż pamiętaj, że ten przepływ pracy może się różnić w zależności od narzędzia interfejsu użytkownika.

Ta metoda tworzenia przewodników stylów (i ostatecznie tworzenia samego projektu) działa szczególnie dobrze w przypadku układów modułowych / opartych na kartach, chociaż „obszary wspólne”, takie jak nagłówki, stopki i nawigacje, są również doskonałymi kandydatami na komponent.

Tak jak zrobiliśmy z naszymi stylami typograficznymi, kolorami i przyciskami, musimy pamiętać o starannym uporządkowaniu naszych komponentów.

Wykorzystując nasze zasady

Wcześniej zauważyliśmy, że nie używamy markowych przycisków CTA w kolorze marki, ponieważ markowe przyciski CTA muszą oczywiście wyróżniać się spośród wszystkich innych. Jak więc stworzyć markowy komponent, jednocześnie będąc w stanie użyć markowego przycisku CTA? W końcu, jeśli używamy neutralnych ciemnych przycisków do, powiedzmy, przycisków nawigacyjnych lub po prostu mniej ważnych przycisków, to po prostu nie byłaby to opcja, prawda?

Dobrze. Byłaby to więc idealna okazja do stworzenia komponentu - w szczególności kombinacji nagłówek + tekst + przycisk. Zwróć uwagę, jak utworzyłem neutralne tło „karty” z oświetleniem, aby umożliwić użycie markowego przycisku. Podobnie, neutralne pole formularza światła (pola formularza są zwykle białe ze względu na model mentalny, który historycznie był synonimem formularzy papierowych) nie wygląda niesamowicie na neutralnym jasnym tle, więc można ich używać tylko na neutralnym ciemnym tle - bezpośrednio lub wewnątrz neutralny ciemny składnik. W ten sposób uelastyczniamy nasz projekt, przestrzegając naszych zasad i zachowując spójność.

Test naprężeń

W idealnym przypadku najszybszym i najskuteczniejszym sposobem zapewnienia solidności naszego projektu jest przeprowadzenie testów wytrzymałościowych. Poddawanie projektu próbie oznacza okrucieństwo. Powiedzmy, że mamy nawigację z X liczbą elementów nawigacyjnych, ponieważ taki był wymóg; Aby naprawdę zapewnić elastyczność, spróbuj zmienić te wymagania, dodając więcej elementów nawigacyjnych lub, aby naprawdę włożyć klucz w prace, spróbuj również dodać element nawigacyjny o wyższej hierarchii wizualnej niż inne. Czy nasze zasady dotyczące rozmiaru, typografii i kolorów pozwalają na coś takiego? Czy aby zaoferować optymalną użyteczność, potrzebujemy innej reguły?

Pamiętaj, że istnieje różnica między dodawaniem reguł a ich naginaniem. Więcej przypadków brzegowych oznacza mniejszą spójność, więc przez większość czasu ze względu na użyteczność lepiej jest po prostu przemyśleć komponent.

05. Dokumentuj i współpracuj

W jaki sposób możemy ułatwić korzystanie z naszych plików projektowych zarówno nam, jak i innym projektantom, którzy mogą korzystać z naszego pliku projektu? Jak się przekonasz, bezpieczne przechowywanie ich w niezawodnym, współdzielonym magazynie w chmurze jest ważne.

Zabarwienie

Pierwszym krokiem jest zapisanie wszystkich kolorów w próbce „Kolory dokumentu”, jeśli jeszcze tego nie zrobiliśmy - ułatwi to dostęp do nich, gdy będziemy musieli zastosować je w naszym projekcie.Aby to zrobić, otwórz widżet wyboru kolorów w Inspektorze, wybierz „Kolory dokumentu” z menu rozwijanego, a następnie kliknij ikonę +, aby dodać kolor do próbki. Działa to w ten sam sposób w większości narzędzi interfejsu użytkownika.

Biblioteki udostępnione

Następnie musimy przekonwertować nasz dokument - wraz ze stylami typograficznymi, kolorami, przyciskami, obszarami wspólnymi i podstawowymi komponentami - do udostępnionej biblioteki.

Zasadniczo oznacza to, że każdy element musi być komponentem, nawet jeśli składa się tylko z jednej warstwy. Kliknij przycisk + ‌ na lewym pasku bocznym Biblioteki, a następnie zaimportuj ten dokument do nowego dokumentu. Zgadza się: nasz dokument jest teraz biblioteką i można go używać do projektowania interfejsów użytkownika z gwarantowaną spójnością.

InVision Studio jest nieco ograniczone w tym sensie, że nie synchronizuje się jeszcze z oficjalnym narzędziem InVision Design System Manager, ale dość łatwo jest przechowywać bibliotekę w Dropbox, aby inni projektanci mogli z niej korzystać i aktualizować w miarę upływu czasu. Po wprowadzeniu zmiany (lokalnie lub zdalnie) każdy plik programu Studio korzystający z biblioteki (ponownie lokalnie lub zdalnie) zapyta, czy chcesz zaktualizować kolory i komponenty. W ten sposób biblioteki projektów są utrzymywane w zespołach.

Jeśli chodzi o projektowanie interfejsów użytkownika, które są wizualnie spójne, wykorzystaj wszystko ponownie. Zaprojektuj przyciski, a następnie użyj przycisków, aby utworzyć komponenty przycisków, a następnie użyj
komponenty przycisku do tworzenia innych komponentów, takich jak alerty i okna dialogowe.

Po prostu nie twórz komponentów, które nie są potrzebne. Pamiętaj, że budowanie biblioteki to ciągły wspólny wysiłek. To nie musi być ukończone od razu, ukończone przez ciebie sam lub kiedykolwiek ukończone. Musi tylko przekazać język.

Projektuj na dużą skalę

Gdy projekt się rozwija, zarządzanie nim staje się trudniejsze. Istnieje wiele zmian, które możemy chcieć wprowadzić, aby były wydajne i łatwe w utrzymaniu, zwłaszcza że DSM firmy InVision nie współpracuje jeszcze ze Studio.

Na przykład możemy chcieć użyć warstw tekstowych, aby opisać naszą bibliotekę jako sposób wyjaśnienia przypadków użycia różnych elementów. W przypadku stylów typograficznych moglibyśmy nawet edytować tekst, aby był bardziej opisowy (np. „H1> / 1,3 / 44px”). To mówi, że h1>s powinny mieć 44 piksele i wysokość linii 1,3.

Design Handoff

Narzędzia do przekazywania projektów wyświetlają różne style używane przez każdy element projektu, dzięki czemu programiści mogą tworzyć aplikację lub witrynę internetową. Narzędzia te obejmują przegląd stylów, a także kopię próbki „kolorów dokumentu”. Programiści mogą nawet kopiować te style jako kod, co jest doskonałe, jeśli zdecydujesz się utworzyć pisemną dokumentację projektową i chcesz dołączyć reprezentacje komponentów w postaci fragmentów kodu.

Jeśli martwisz się o rozwiązywanie problemów i zarządzanie witryną, upewnij się, że masz odpowiednią usługę hostingową, ale w przypadku Twojego systemu projektowania narzędzie do przekazywania projektów InVision, Inspect, jest tym, czego powinieneś użyć. Aby go wykorzystać, klikamy przycisk / ikonę „Opublikuj w InVision” w InVision Studio, otwieramy wynikowy adres URL, a następnie stukamy, aby przejść do trybu inspekcji. To naprawdę wygodne.

Ta treść pierwotnie ukazała się w magazynie sieciowym.