Jak zbudować efektywną strukturę projektowania (zawiera bezpłatną strukturę interfejsu użytkownika szkicu)

Jeśli od jakiegoś czasu jesteś w świecie projektowania, prawdopodobnie słyszałeś te terminy: framework projektowy, framework UI, zestaw UI lub biblioteka wzorców. Wszystkie odnoszą się do tego samego — systemu standardów projektowych, szablonów, wzorców interfejsu użytkownika i komponentów, które są używane w całym produkcie i służą jego językowi projektowania.

Jeśli nie stworzyłeś wcześniej struktury projektowej, rozpoczęcie jej może wydawać się przytłaczające i czasochłonne, ale przyspieszy to pracę projektową i sprawi, że będzie ona ogólnie bardziej wydajna.

Nakreślmy główne problemy, które rozwiązuje framework projektowy, dlaczego jest on potrzebny, oraz komponenty, które będziesz musiał stworzyć podczas tworzenia takiego. W dalszej części artykułu znajdziesz bezpłatną platformę Sketch UI do pobrania, która umożliwia tworzenie własnych ram projektowych.

Co to są ramy projektowe?

Każdy projekt interfejsu użytkownika zaczyna się od pustego obszaru roboczego, a każdy projektant ma proces, którego używa do przekształcenia pustego płótna w w pełni funkcjonalny produkt. Proces ten obejmuje wszystkie stworzone małe elementy projektu oraz kroki, przez które przechodzi projektant, aby zbudować spójną całość, od kolorów po przyciski i wszystko pomiędzy.

Często praca ta jest powtarzalna i można ją skonsolidować i usprawnić, tworząc system powiązanych ze sobą wzorów i komponentów. Innymi słowy, ramy projektowe .

Frameworki projektowe rozwiązują kilka problemów, w tym:

• Eliminacja niespójności w projekcie produktu.
• Zwiększenie współpracy, wydajności i komunikacji między zespołami projektowymi i produktowymi.
• Dokonywanie aktualizacji projektu na późniejszym etapie procesu projektowania jest mniej frustrujące.

Pierwszy problem: niespójność produktu

Spójność zmienia dobry projekt w świetny projekt. Spójność poprawia UX, ogólną użyteczność i wydajność, z jaką użytkownicy mogą korzystać z produktów cyfrowych. Niezależnie od tego, czy jest to mała witryna internetowa, aplikacja, czy duży produkt SaaS, niespójności w projekcie wpływają na wygląd, styl, wiarygodność i wrażenia użytkownika produktu.

Niespójności często zdarzają się, gdy zespół lub projektant robi rzeczy zbyt szybko lub wprowadza zmiany w locie. Czasami projektant odpowiada klientowi lub interesariuszowi, prosząc o coś innego, szybko pokazując im, jak te zmiany miałyby wyglądać. Nagle zespół projektowy znalazł się w czterech różnych odcieniach zieleni i nikt nie jest pewien, który z nich jest głównym kolorem przycisku.

Ramy projektowe rozwiązują ten problem, ustanawiając spójne standardy.

Drugi problem: współpraca i luki w komunikacji

Często podczas procesu rozwoju, gdy wielu członków zespołu zaangażowanych jest w pracę nad projektem w różnych punktach procesu, może to być mylące, jeśli nie ma zestawu standardów, które pokierują zespołem.

Ramy projektowe zwiększają współpracę i wydajność, usprawniając proces komunikacji i zapewniając jasne standardy i kierunek. Koniec z marnowaniem czasu na bieganie w tę i z powrotem, próbując dowiedzieć się, który kolor lub czcionka jest odpowiednia.

Trzeci problem: zmiany projektowe na późnym etapie

Ile razy projektanci muszą dokonać pojedynczej zmiany koloru w pliku projektu, mając już opracowanych 120 obszarów roboczych? Ile razy trzeba zmienić ikonę będącą częścią 200 komponentów?

Zmiana jest nieunikniona w całym procesie projektowania, to sposób, w jaki produkt się poprawia, ale często dzieje się to później, niż by sobie tego życzyli projektanci. Struktura projektowa sprawia, że ​​zmiany na późnym etapie są znacznie mniej bolesne, ponieważ są zbudowane na systemie komponentów zorientowanych obiektowo. Zmień to raz, a będzie falować przez cały projekt.

Jak stworzyć ramy projektowe

Teraz, gdy wiemy, czym jest framework do projektowania i jakie problemy rozwiązuje, porozmawiajmy o jego stworzeniu (i co znajduje się w zestawie do pobrania Sketch UI Kit, który znajduje się w dalszej części artykułu).

Struktura projektowa użyta w tym artykule to pojedynczy plik szkicu, który jest ułożony przy użyciu określonej hierarchii komponentów, znanych w szkicu jako „symbole”. Te symbole ułatwiają wprowadzanie zmian w całym pliku za pomocą jednego kliknięcia. Jedna zmiana w składniku „głównym” — „symbolu” — jest natychmiast odzwierciedlana we wszystkich innych przypadkach.

Hierarchia ram projektowych

Aby stworzyć dobrze działającą strukturę projektową, zacznij od ustalenia solidnej hierarchii wizualnej. Zaprojektuj najpierw najbardziej wszechobecne elementy, takie jak kolor i typografia. Następnie przejdź do mniejszych, takich jak przyciski i elementy wejściowe. Pomyśl o tym jak o budowaniu domu — najpierw zbuduj fundament, a następnie dodawaj kolejne elementy w miarę postępu projektu.

Kolor

Kolor jest najważniejszym elementem w hierarchii struktury projektowania interfejsu użytkownika — każdy składnik w projekcie używa koloru. Kolor wywołuje u ludzi silne reakcje i emocje oraz określa ogólny wygląd, odczucia i ton produktu.

Dobrą praktyką jest podzielenie kolorów na grupy:

1. Kolory podstawowe to główne kolory marki, zwykle używane do tworzenia ogólnej kolorystyki projektu oraz do kluczowych elementów, takich jak przyciski.
2. Kolory dodatkowe uzupełniają paletę podstawową — często są to różne odcienie, nasycenia lub odcienie kolorów podstawowych. Skala szarości jest powszechnie używana do typografii lub tła. Gdzieś od pięciu do ośmiu poziomów szarości powinno wystarczyć.
3. Kolorystyka systemowa to ważna grupa, o której projektanci często zapominają. Te kolory wyświetlają komunikaty systemowe, w tym alerty, ostrzeżenia i powiadomienia.

Siatka: przestrzeń projektowa

Po wybraniu kolorów następnym krokiem jest ustawienie siatki. Siatka utrzymuje wszystkie pozostałe elementy na stronie we właściwym miejscu i porządku. To jest ogólna przestrzeń projektowa.

Istnieją dwa rodzaje siatek: pionowa i pozioma .

Siatka pionowa jest najczęściej używana i utrzymuje wszystko wyrównane w poziomie. Istnieje wiele popularnych systemów siatek, takich jak Bootstrap lub starsza siatka 960 pikseli.

Siatka pozioma nie jest tak powszechna. Do typografii używana jest siatka pozioma. Tworzy pionowy rytm dla akapitów i jest często spotykany w gazetach.

Modyfikatory: zasady stylistyczne

Oprócz koloru i siatki istnieje jeszcze jeden składnik, który znajduje się wysoko w hierarchii struktury projektowania: modyfikatory. Nie mogą być używane jako autonomiczne komponenty — służą do modyfikowania lub stylizowania innych.

Grupa ta wnosi styl do projektu i obejmuje komponenty odpowiedzialne za estetykę, takie jak kształty czy cienie ; ich indywidualna zmiana w późniejszych fazach projektu może być uciążliwa.

Traktuj modyfikatory jako parametry dla wszystkich kolejnych bloków konstrukcyjnych. Twórz symbole szkicu z trzech różnych kształtów: prostokąta, zaokrąglonego prostokąta i koła. Użyj tych kształtów, aby utworzyć każdy pojedynczy składnik interfejsu użytkownika, w tym przyciski, składniki wejściowe, pola formularzy itp. oraz elementy tła.

Ta technika pozwala projektantom skupić się bardziej na UX niż na wyglądzie komponentów interfejsu użytkownika. Ułatwia również powrót do podstawowego kształtu, zmianę jego stylu (na przykład promień narożnika), a wszystko, co jest połączone, zaktualizuje się automatycznie.

Typografia: Treść

Typografia jest ostatnim ważnym elementem struktury projektowania. Można go podzielić na dwie grupy: statyczne kopie strony, takie jak nagłówki i akapity; i interaktywne kopiowanie komponentów, takich jak przyciski, nawigacja lub pola wejściowe.

Zaprojektuj styl i rozmiar wszystkich nagłówków (H1, H2, H3 itp.) oraz akapitów. Kopia strony statycznej zwykle nie ma wielu odmian stylistycznych (koloru lub gramatury). Jedyną odmianą — związaną ze statycznym stylem kopiowania strony — jest to, czy jest na jasnym czy ciemnym tle. Dlatego najlepiej jest utworzyć dwa zestawy kolorów, aby upewnić się, że statyczna kopia strony działa na obu.

Kopia, która pojawia się na interaktywnych składnikach, takich jak przyciski lub komunikaty zwrotne systemu, może mieć wiele odmian. Na przykład komunikaty zwrotne systemu mogą być wyświetlane na czterech różnych kolorach tła w zależności od typu komunikatu (ostrzeżenie, błąd, sukces itp.) — etykiety przycisków mogą również znajdować się na różnych tłach.

Włączenie tej grupy do ram projektowych jest pomocne przy globalnym myśleniu o typografii. Najpierw utwórz zwykły tekst etykiety przycisku, a po drugie utwórz jego odmiany; pomoże to uniknąć zbyt wielu rozmiarów czcionek. Podczas tworzenia nowych komponentów interfejsu użytkownika we frameworku, zawsze sprawdzaj, czy istnieje istniejący styl typografii, który pasuje.

Ikony

W systemie projektowania istnieją dwie grupy ikon: ikony informacyjne i ikony interfejsu użytkownika. Pierwsza grupa jest zwykle częścią systemu ilustracyjnego i nie jest używana w przypadku żadnych składników interakcji interfejsu użytkownika (takich jak przyciski). Druga grupa — ikony interfejsu — nadają znaczenie bardziej złożonym elementom: przyciskom, etykietom lub tabelom, jednocześnie zajmując bardzo mało miejsca. Ikony w interfejsie użytkownika mogą być również używane jako wyzwalacze funkcji, takie jak „edytuj”, „kopiuj”, „pobierz” i „usuń”.

Zacznij od prostych ikon używanych do interakcji w interfejsie użytkownika, takich jak strzałki, „dodaj” (+) lub „zamknij” (x). Dobrą praktyką jest projektowanie ich w różnych rozmiarach (12px, 16px, 24px 32px).

składniki

guziki

Przyciski są bezsprzecznie jednym z najważniejszych elementów projektowania interfejsu użytkownika, a przez lata przeszły wiele zmian, ponieważ trendy w projektowaniu pojawiały się i znikały.

Projektując przyciski, pamiętaj, aby zaprojektować ich indywidualne „stany”. Z reguły przycisk ma wiele stanów i zapewnia wizualną informację zwrotną dla użytkowników, aby wskazać bieżący stan (bezczynny, najechanie kursorem, wciśnięty, wyłączony, aktywny itp.).

Można to zrobić na dwa sposoby: pierwszy to zaprojektowanie wyglądu przycisków osobno dla każdego stanu (zwykły, aktywny, najechany i naciśnięty). To rozwiązanie może być czasochłonne, ale daje dużą elastyczność. (Ta metoda została użyta w darmowym frameworku Sketch UI zawartym poniżej.)

Drugim sposobem jest zaprojektowanie wszystkich stanów w oparciu o stan początkowy. Na przykład utwórz jeden symbol szkicu, który zmieni kolor, nasycenie lub jasność każdego stanu.

Aby to zrobić, umieść symbol jako nakładkę przycisku z jednym z trybów mieszania Szkicu: barwa, nasycenie lub nakładka. Użyj czarnego prostokąta z trybem mieszania odcieni nad zwykłym przyciskiem, aby zmienić jego nasycenie. Późniejsza zmiana przezroczystości nakładki sprawia, że ​​jest ona mniej lub bardziej nasycona.

Komponenty wejściowe

Wejścia pozwalają użytkownikowi komunikować się z aplikacją i przesyłać dane. Wykorzystanie komponentów takich jak pola wejściowe wraz z przyciskami pozwala na stworzenie prostej aplikacji internetowej. Podobnie jak w przypadku przycisków, najlepiej jest tworzyć komponenty wejściowe o różnych stanach. Zależy to od struktury projektowej, ale przynajmniej rozważ utworzenie stanów pustych, wypełnionych i błędów.

Złożone komponenty

Na tym etapie ramy projektowe można uznać za kompletne, ponieważ zawierają wszystko, co jest potrzebne do stworzenia działającego produktu. Jednak często warto poświęcić trochę więcej czasu na tworzenie bardziej złożonych komponentów interfejsu użytkownika dla struktury interfejsu użytkownika, takich jak karty, tabele, selektory dat, wykresy i formularze.

Sekcje

Na tym etapie ramy projektowe można dalej rozwijać, tworząc najpopularniejsze sekcje aplikacji lub stron internetowych. Projektując takie rzeczy jak nawigacja, nagłówki, sekcja „o nas” i galerie, projektant może zaoszczędzić czas w późniejszych fazach projektu. Stworzenie kilku odmian różnych sekcji produktu ułatwi dostosowanie do różnych projektów w dalszej kolejności.

Najlepsze praktyki w zakresie projektowania

Nieustannie testuj ramy projektowe

Testowanie powinno być uwzględnione w każdym procesie projektowania lub rozwoju. Unikaj błędów i brakujących komponentów, tworząc małe elementy projektu i „testując je w warunkach skrajnych”. Na przykład sprawdź, czy zmiana komponentu utworzonego na początku zmienia również ostatnio dodany komponent.

Twórz proste komponenty interfejsu użytkownika

Zachowaj prostotę komponentów, myśląc z wyprzedzeniem o jak największej liczbie przypadków użycia projektu, aby w przyszłości można było uwzględnić dowolny styl. Najlepiej jest tworzyć komponenty interfejsu użytkownika o prostych kształtach, dzięki czemu są wystarczająco elastyczne, aby można je było łatwo dostosować do dowolnego projektu.

Nie skupiaj się na jednym stylu

Ramy projektowe powinny być uniwersalne, więc zamiast skupiać się na konkretnym stylu, skup się na komponentach, które można wykorzystać do stworzenia stylu.

Stwórz własne ramy projektowe

W następnym projekcie poświęć trochę czasu na początku, aby przemyślanie skonstruować ramy projektowe. Przekonasz się, że poprawia ogólny proces projektowania, zwiększa wydajność i poprawia spójność projektu produktu, co poprawia użyteczność. Zaoszczędzisz czas, skuteczniej przekażesz pomysły projektowe i uszczęśliwisz klientów i interesariuszy, gdy te pomysły zostaną wprowadzone w życie w ciągu zaledwie kilku sekund na 120 obszarach roboczych Sketch.

Czy jesteś gotowy, aby rozpocząć własne ramy projektowe?

Pobierz plik szkicu tutaj. Zawarte są instrukcje, jak z niego korzystać.

Inspirujące systemy projektowania i frameworki UI

Jednym z najlepszych sposobów, aby lepiej zrozumieć frameworki projektowe, jest zbadanie, jak duże, ugruntowane firmy z nich korzystają. Śledź tego typu firmy i poznaj ich podejście.

Google Material Design – obecnie jeden z najpopularniejszych frameworków do projektowania na świecie. Dowiedz się, jak Google nakłada na siebie cały proces projektowania i tworzy użyteczną hierarchię komponentów.

Język projektowania IBM — IBM udostępnia cały proces projektowania, w tym szczegółowe wyjaśnienie każdego szczegółu. Udostępniają również wiele zasobów z ich języka projektowania, od prostych ikon po bibliotekę animacji interfejsu użytkownika.

Atlassian – kolejny świetny materiał edukacyjny. Ich przewodnik po stylu produktu to świetny system projektowania do nauki. Udostępniają swój pakiet Web GUI, plik Sketch z mnóstwem komponentów i koncepcji.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika