Tworzenie przewodnika po stylu UI dla lepszego UX

Posłuchaj wersji audio tego artykułu

Zapewnij spójny projekt produktu i doświadczenie użytkownika

W 1976 roku Johnny Cash wydał One Piece at a Time , piosenkę opowiadającą historię pracownika samochodowego z Detroit, który spędza dwadzieścia lat na zbieraniu części do Cadillaca skradzionych z linii montażowej.

Niestety, gdy pracownik zaczyna budować swój bootleg Cadillac, stwierdza, że ​​wiele części jest niekompatybilnych, ponieważ kluczowe cechy konstrukcyjne zmieniły się na przestrzeni lat. Przy odrobinie pomysłowości niestandardowy samochód łączy się w całość, ale jest to brzydki miszmasz, który wszędzie budzi kpiny.

Tył też wyglądał trochę śmiesznie
Ale poskładaliśmy to i kiedy się udało
Cóż, wtedy zauważyliśmy, że mamy tylko jedną płetwę ogonową.

Przed podobnym wyzwaniem stoją projektanci i twórcy dzisiejszych doświadczeń cyfrowych. Upływ czasu to potężny wróg, który może siać spustoszenie w ciągłości cyfrowych produktów. Z czasem członkowie zespołu przychodzą i odchodzą, trendy ewoluują, a funkcje się zmieniają. Ponadto szybkie tempo naszego współczesnego cyfrowego krajobrazu oznacza, że ​​innowacje produktowe pojawiają się w ciągu kwartałów, a nie lat.

Jeśli firma lub zespół projektowy nie ma wspólnego rejestru, który dokumentuje zamierzony wygląd i działanie produktu, pojawią się wizualne i empiryczne niespójności, użytkownicy będą sfrustrowani, a reputacja marki ucierpi.

Przewodniki po stylu interfejsu użytkownika to narzędzie do projektowania i rozwoju, które zapewnia spójność interfejsu użytkownika i doświadczenia cyfrowego produktu. W swojej istocie:

• Zapisz wszystkie elementy projektu i interakcje, które występują w produkcie
• Wymień kluczowe elementy interfejsu użytkownika, takie jak przyciski, typografia, kolor, menu nawigacyjne itp.
• Dokumentuj ważne komponenty UX, takie jak stany najechania kursorem, wypełnienia listy rozwijanej, animacje itp.
• Zawierają aktywne elementy i fragmenty kodu, z których mogą korzystać programiści

Zanim przyjrzymy się bliżej, jak stworzyć przewodnik po stylu interfejsu użytkownika na poziomie eksperckim, ważne jest, aby zrozumieć, że nie ma jednego uniwersalnego podejścia. Wartość przewodników po stylu wykracza poza wielkie marki z dużymi zespołami produktowymi. Średnie i małe przedsiębiorstwa poszukujące spójnych doświadczeń cyfrowych również odnoszą korzyści, gdy przewodniki po stylu interfejsu użytkownika są dostosowywane do ich konkretnych potrzeb.

Uwzględnij te kluczowe elementy projektu w przewodnikach po stylu interfejsu użytkownika

Projektanci zaznajomieni z wytycznymi dotyczącymi tożsamości marki nie powinni mieć problemu z przejściem do przewodników po stylu interfejsu użytkownika, ponieważ wiele kluczowych elementów projektu, które muszą zostać uwzględnione, pokrywa się w dużym stopniu.

Pro Tip: Dokumentuj tylko istotne elementy projektu. Zbędne informacje sprawiają, że przewodniki po stylu interfejsu użytkownika są nadęte i trudne w obsłudze.

Schemat typografii

Typografia jest jednym z najczęstszych elementów projektowania interfejsu, więc nie wystarczy jedynie wymienić nazwy krojów pisma używanych w produkcie. Należy podać jasne instrukcje dotyczące tytułów, podtytułów, nagłówków (H1, H2, H3), treści i podpisów.

Dodatkowo należy podać rozmiary czcionek, wskazaną wagę i zdefiniować style. Niezbędna jest również wysokość linii i kerning. Dobrym pomysłem jest wyróżnienie czcionki, którą należy zastosować, gdy zajdą szczególne okoliczności.

Responsywne układy

Gdy produkty cyfrowe są projektowane wokół responsywnych systemów siatek, przewodniki po stylu interfejsu użytkownika muszą dotyczyć układów interfejsu w różnych rozmiarach ekranu. Oznacza to dołączenie notatek i przykładów odstępów, dopełnienia i rozmieszczenia. Pomocne jest również pokazanie nakładek systemu siatki produktu w odniesieniu do różnych rozmiarów ekranu.

Głównym celem jest zapewnienie wystarczającego kontekstu, aby zapobiec potrzebie tworzenia jednorazowych projektów ekranów. Z biegiem czasu sumują się one i podważają spójność produktu cyfrowego.

Paleta kolorów

Jednym z najszybszych sposobów na zniszczenie interfejsu jest niespójne użycie kolorów, więc kombinacje kolorów muszą być jasno określone. Lista kolorów i ich wartości (HEX, UIColor) to dobry początek, ale należy również podać konkretne pary i przykłady użycia.

Jeśli przewodnik po stylu interfejsu użytkownika odwołuje się do zestawu wytycznych dotyczących tożsamości marki, sprawdź, czy dostępny jest dodatkowy schemat jaśniejszych akcentów kolorystycznych. Jeśli nie, utwórz własny i dokument. Przydatny jest również wybór wartości szarości.

guziki

Prawie każdy interfejs zawiera przyciski, więc poświęć trochę czasu na udokumentowanie ich rozmiarów, stylów, kolorów, rozmieszczenia, odstępów i elementów typograficznych. Jeśli różne przyciski są używane w różnych kontekstach, również to wyjaśnij.

Dodatkowe składniki interfejsu użytkownika, które mogą być potrzebne

• Ikonografia
• Podpowiedzi i wyskakujące okienka
• Modals
• Elementy formularza
• Tabele danych
• Menu nawigacyjne
• Wykresy i wizualizacje danych
• Karty
• Włącznik-wyłącznik
• Dialogi
• Listy siatki treści
• Listy pionowe
• Paski narzędzi
• Selektory daty i godziny
• Wskaźniki ładowania
• Pola wyboru
• Alerty
• Rozwijane menu
• Suwaki
• Steppery
• Paginacja

Uporządkuj i skontekstualizuj instrukcje projektowe

Oprócz niezbędnych składników interfejsu użytkownika istnieje wiele praktycznych funkcji, które ułatwiają firmom i zespołom projektowym korzystanie z przewodników po stylu interfejsu użytkownika, nawigację i wdrażanie.

Spis treści

Dobrze zorganizowany i wyraźnie oznaczony spis treści to prosty sposób, aby pomóc wszystkim szybko znaleźć zawartość dokumentu.

Uwagi kontekstowe

Niemożliwe jest przewidzenie każdej problematycznej decyzji projektowej, która może pojawić się w trakcie życia produktu, więc sformułowanie uzasadnienia projektowego za często używanymi komponentami interfejsu użytkownika może ułatwić rozwiązanie nieprzewidzianych scenariuszy.

Na przykład:

„W istocie nasz produkt ma na celu pokazanie najlepszych obrazów architektury z całego świata. Z tego powodu układ naszego interfejsu przedkłada duże, rozpryskujące się obrazy nad tekstem. Zawsze, gdy to możliwe, uczyń obrazy centralnym punktem naszego produktu”.

Instrukcje dotyczące odstępów i pozycjonowania

Odstępy i pozycjonowanie są często omówione w sekcji „Układy responsywne”. W zależności od złożoności produktu cyfrowego instrukcje mogą składać się z ogólnych „zasad praktycznych” lub być dość szczegółowe.

Za I przeciw

Często pomocne może być jasne określenie nakazów i zakazów w projekcie. Na przykład:

• „ Używaj białej wersji logo naszej firmy w stopce interfejsu”.
• „ Nie używaj alternatywnych wersji kolorystycznych logotypu naszej firmy na czarnym tle.”

Nakazy i zakazy zapobiegają debacie i oszczędzają czas projektowania i opracowywania, ale zawsze najlepiej jest podać notatkę z kontekstem w następujący sposób:

„Ta lista nakazów i zakazów obejmuje szeroki zakres ważnych decyzji projektowych, ale nie uwzględnia każdego możliwego niewłaściwego wykorzystania elementów projektowych naszego produktu. Mając to na uwadze, kieruj się najlepszym osądem, gdy pojawia się niepewność, i dokonuj wyborów, które dokładnie odzwierciedlają ogólny wygląd i styl naszego produktu”.

Żywe elementy i fragmenty kodu

Wskazówki dotyczące tożsamości marki są zazwyczaj dokumentami statycznymi, ale przewodniki po stylu interfejsu użytkownika zawierają aktywne elementy, które działają tak samo, jak w produkcie końcowym — co oznacza, że ​​przyciski zachowują się jak przyciski, rozwijane menu są rozwijane, a animacje są animowane.

Fragmenty kodu umożliwiają programistom szybkie kopiowanie i wklejanie kodu aktywnych elementów do zaplecza produktu.

Uczyń przewodniki po stylu interfejsu użytkownika łatwo dostępnymi dla zespołów projektowych

Teraz, gdy rozumiemy, jak stworzyć przewodnik stylu oraz komponenty i funkcje zawarte w przewodniku stylu interfejsu użytkownika, zwracamy uwagę na udostępnianie i komunikację. A dokładniej, jakie są opcje przewodników po stylach interfejsu użytkownika?

Tradycyjnie przewodniki po stylach interfejsu użytkownika istniały jako strony internetowe. Zapewnia to projektantom i programistom łatwy dostęp i umożliwia działanie elementów projektu tak, jak w produkcie.

Niedawno pojawiło się kilka platform opartych na chmurze, które umożliwiają zespołom wspólne projektowanie, prototypowanie i testowanie produktów. Te same platformy mogą również zawierać przewodniki po stylu interfejsu użytkownika i umożliwiać członkom zespołu wymianę bieżących opinii i pomysłów.

Zobaczmy, jak kilka z tych platform opisuje swoje podejście do przewodników po stylu interfejsu użytkownika.

Figma

„Twórz systemy projektowe z połączonymi komponentami interfejsu użytkownika, z których może korzystać cały zespół. Otrzymuj aktualizacje, gdy wprowadzane są zmiany we współdzielonych komponentach”

Faza

„Biblioteki takie, jakie zawsze powinny być: kolory, właściwości i elementy… nawet czas przejścia — teraz wszystko w komponencie. Edycja na miejscu — wszystko jest mistrzem. Zastąp wszystko, czego nie potrzebujesz, na instancję”.

InVision

„Wszystkimi komponentami marki i UX — w tym dokumentacją użytkowania — zarządza się w jednym miejscu. Zmiany synchronizują się z całym zespołem, a projektanci mogą w dowolnym momencie przełączyć się na najnowszą wersję lub wycofać aktualizacje”.

Materiał.io

„Stwórz własny motyw Material i stwórz markową bibliotekę symboli, stosując zmiany stylu do koloru, kształtu i typografii. Udostępniaj, przesyłaj i prezentuj iteracje projektu w Galerii. Następnie użyj trybu inspekcji, aby uzyskać dostęp do dokumentacji dla programistów”.

Przewodniki po stylu interfejsu użytkownika powinny być łatwe w użyciu

Podczas tworzenia przewodników po stylu interfejsu użytkownika komunikacja nie może być traktowana jako oczywistość. Zespoły produktowe składają się z ludzi z różnych dyscyplin, środowisk kulturowych i doświadczeń zawodowych. Skorzystaj z tych zasad, aby zapewnić przejrzystość i łatwość użycia.

Proste układy

Przewodniki po stylu interfejsu użytkownika wymagają przejrzystych, uporządkowanych układów ekranu. Każdy ekran powinien być dobrze zorganizowany, wyraźnie oznakowany i wysoce czytelny. Przeładowywanie ekranów informacjami wizualnymi nie przynosi żadnych korzyści, dlatego kieruj się aranżacjami, które są zarówno minimalne, jak i przestronne.

Zwięzłe instrukcje

Zachowaj krótkie i słodkie instrukcje. Unikaj długich akapitów i używaj wypunktowań. Tam, gdzie to możliwe, zademonstruj za pomocą wizualizacji, a nie słów.

Informacyjne scenariusze użycia

Zastanawiasz się, kiedy użyć tego stylu suwaka nad tym? „Scenariusze użycia” rozwiązują ten rodzaj zamieszania. Ponownie, wizualizacje są tutaj silniejsze niż słowa, więc podaj przykłady, które wyraźnie pokazują zarówno scenariusz, jak i właściwą drogę naprzód.

Odpowiednie historie wersji

Produkty cyfrowe są często aktualizowane. Ponieważ zespoły produktowe starają się dopracować każdy szczegół interfejsu, ważne jest, aby na bieżąco rejestrować ewolucję komponentów projektowych. Zachowaj dyskrecję — w przypadku mniejszych firm i zespołów produktowych utrzymywanie obszernej biblioteki historii wersji może być niepraktyczne.

Przewodniki po stylu interfejsu użytkownika są cennym źródłem i potężnym narzędziem do projektowania

Współczesne zespoły projektowe i programistyczne cenią sobie wydajność i interdyscyplinarną współpracę — czego dowodem są systemy języków projektowania reklamowane przez duże marki, takie jak MailChimp, Google i Salesforce.

Systemy języka projektowania pozwalają różnym zespołom pracującym nad zaawansowanymi produktami cyfrowymi komunikować się za pomocą ustandaryzowanego języka wizualnego. Przewodniki po stylu interfejsu użytkownika są wplecione w tkankę systemów językowych projektowania i służą jako narzędzie, na którym można polegać w celu szybkiej iteracji i spójnych doświadczeń cyfrowych.

Jednocześnie projektowanie nie jest zajęciem zarezerwowanym tylko dla dużych firm. Różnorodny wachlarz zespołów produktowych i projektów cyfrowych może skorzystać z dobrze skonstruowanych przewodników po stylu interfejsu użytkownika, ale zasoby (finansowe, czasowe i talenty) różnią się w zależności od firmy.

Z tego powodu przewodniki po stylu interfejsu użytkownika są najbardziej przydatne, gdy są dostosowane do potrzeb poszczególnych firm i zespołów projektowych. Najwyższym celem każdego przewodnika po stylu interfejsu użytkownika jest równowaga przejrzystości i praktyczności, która prowadzi do niezmiennie zachwycających doświadczeń użytkownika.

Dalsza lektura na blogu Toptal Design:

• Style krojów pisma do projektowania stron internetowych i druku
• Projektowanie responsywne — najlepsze praktyki i uwagi
• Dlaczego startupy potrzebują przewodnika po stylach
• Najlepsze praktyki dotyczące użyteczności ikon i projektowania
• Skorzystaj ze swojej inspiracji – przewodnik po tablicach nastroju