Projektowanie modułowych systemów interfejsu użytkownika za pomocą projektowania opartego na wytycznych stylistycznych

Używanie przewodnika stylu do kierowania rozwojem to praktyka, która zyskuje dużą popularność w rozwoju front-endu — i nie bez powodu. Deweloperzy zaczną od przewodnika po stylu , dodając nowy kod lub aktualizując istniejący kod, przyczyniając się w ten sposób do modułowego systemu interfejsu użytkownika, który jest później zintegrowany z aplikacją. Aby jednak wdrożyć modułowy system UI, musimy podejść do projektowania w sposób modułowy.

Projektowanie modułowe zachęca nas do myślenia i projektowania UI i UX we wzorcach. Na przykład zamiast projektować serię stron lub widoków, aby umożliwić użytkownikowi wykonanie zadania, rozpoczęlibyśmy proces projektowania od zrozumienia struktury systemu interfejsu użytkownika i sposobu wykorzystania jego komponentów do tworzenia przepływu użytkownika.

Dalsze czytanie na SmashingMag:

• Jak stworzyć skuteczny przewodnik po stylach
• Dogłębny przegląd narzędzi przewodnika po stylu życia
• Automatyzacja opracowywania opartego na wytycznych stylistycznych
• Bezpłatny zestaw ikon przewodników po stylach dla pisarzy i redaktorów

W tym poście wyjaśnię wartość modułowości w projektowaniu interfejsu użytkownika i sposób, w jaki wiąże się ona z procesem programowania sterowanego stylem, który usprawnia wdrażanie elastycznych i przyjaznych dla użytkownika aplikacji, pomagając jednocześnie projektantom i programistom w bardziej produktywnej współpracy.

Modułowa konstrukcja w interfejsie użytkownika

Projektowanie modułowe polega na rozbiciu projektu na małe części (moduły), tworzeniu ich niezależnie, a następnie łączeniu ich w większy system. Jeśli rozejrzymy się dookoła, znajdziemy wiele przykładów konstrukcji modułowych: Samochody, komputery i meble są modułowe. Ze względu na ich modułowość części tych systemów można wymieniać, dodawać, usuwać i przestawiać. Jest to świetne rozwiązanie dla konsumentów, ponieważ mogą dostosować system do swoich potrzeb . Czy chcesz szyberdach, mocniejszy silnik, skórzane siedzenia? Masz to! Modułowa konstrukcja samochodów pozwala na tego typu modyfikacje i wiele więcej.

Innym świetnym przykładem są meble IKEA. Na poniższych ilustracjach widać, że modułowość konstrukcji polega nie tylko na kształcie regału, który pozwala na ustawienie go w różnych kierunkach, czy na możliwości dodania wkładek w jego otworach, ale również na samym części, które tworzą sam kawałek, czyli prostokąty o różnych rozmiarach, powtarzające ten sam wzór.

Z punktu widzenia produkcji konstrukcja modułowa jest również opłacalna. Jednym z ważnych aspektów jest to, że budowanie małych, prostych części, które można później połączyć, jest łatwiejsze i tańsze niż budowanie jednego dużego, złożonego elementu naraz. Ponadto rozwiązanie można wielokrotnie wykorzystywać, maksymalizując produktywność.

Cele w tworzeniu projektu interfejsu użytkownika są podobne. Jako projektanci chcemy stworzyć system UI, który będzie wydajny zarówno pod względem budowy, jak i działania. Kiedy znajdziemy rozwiązanie problemu, chcemy mieć możliwość ponownego wykorzystania rozwiązania w wielu miejscach. To nie tylko oszczędza czas, ale także ustanawia wzorzec, którego użytkownicy mogą się nauczyć raz i ponownie zastosować w innych obszarach aplikacji. Chcemy również mieć możliwość dostosowania systemu do określonych scenariuszy bez konieczności restrukturyzowania wszystkiego.

To jest dokładnie to, co modułowość wnosi do projektowania interfejsu użytkownika: prowadzi do systemu, który jest elastyczny, skalowalny i oszczędny , ale także dostosowywalny, wielokrotnego użytku i spójny .

Przykłady projektowania modułowego

Niektóre przykłady modułowego projektowania interfejsu użytkownika można zobaczyć we wzorach, takich jak responsywne siatki, projektowanie okien kafelkowych i projektowanie kart . We wszystkich moduły są używane wielokrotnie, aby zapewnić elastyczny układ, który łatwo dostosowuje się do różnych rozmiarów ekranu. Ponadto moduły pełnią funkcję pojemników na komponenty, umożliwiając nam wstawianie różnego rodzaju zawartości i funkcjonalności, podobnie jak wkładki, które można dodać do szafki IKEA.

Czy to jest jednorodne?

Jeśli projektowanie modułowe polega na projektowaniu systemu, a systemy interfejsu użytkownika składają się w większości z tych samych części (przycisków, krojów pisma, ikon, siatek itp.), możesz się zastanawiać:

• Czy wszystkie projekty modułowe nie będą wyglądały tak samo?
• Jak to wpłynie na tożsamość marki?
• Jak sprawić, by interfejs użytkownika produktu był wyjątkowy?

Te pytania, choć ważne, rodzą podstawowe pytanie: gdzie leży innowacyjność i wyjątkowość w projektowaniu produktów? Ta debata ostatnio się nasiliła (patrz „Nieznośna jednorodność projektowania” i „W obronie jednorodnego projektowania”), ale powiedziałbym, że ponieważ projektowanie wizualne jest tym, co widzimy jako pierwsze, mamy tendencję do myślenia, że ​​innowacyjność i wyjątkowość leżą w wygląd projektu. Jednak projekt wizualny to tylko jeden z elementów. Innowacyjność i wyjątkowość w projektowaniu produktu należy uwzględnić w całym produkcie: w jego wartości wewnętrznej oraz w sposobie, w jaki ludzie go doświadczają, w tym w jego wyglądzie. Weź krzesło. Musi być krzesłem, ale nie wszystkie projekty krzeseł wyglądają, działają tak samo. W rzeczywistości projektowanie krzeseł od zawsze było obszarem innowacji w projektowaniu i materiałach. Podobnie interfejsy użytkownika mają swoje własne wymagania, a używanie sprawdzonych wzorców nie oznacza poświęcania innowacyjności i wyjątkowości. Wręcz przeciwnie, innowacyjność i wyjątkowość będą potrzebne, aby rozwiązać konkretne problemy Twoich klientów. Piękno projektowania modułowego polega na tym, że zachęca nas do podejścia do tych rozwiązań jako do systemu połączonych ze sobą części, a nie do znajdowania oryginalnych rozwiązań w odosobniony sposób, aby być innym. Innymi słowy, innowacyjny projekt zastosowany do kontrolki interfejsu użytkownika nie pozostanie zepchnięty w jedno miejsce w aplikacji, ale zamiast tego przeniknie cały system, zachowując spójność i poprawiając użyteczność.

Modułowość tworzenia przewodnika stylistycznego-napędu

Od strony wdrożenia, rozwój oparty na wytycznych stylistycznych jest również bardzo modułowy. Na początek proces rozpoczyna się od fazy odkrywania : zrozumienia problemu, który należy rozwiązać, zebrania wymagań i iteracji poprzez rozwiązania projektowe. Podczas gdy rozwiązania projektowe są zwykle przedstawiane jako cały pakiet lub funkcja, tak naprawdę powinny być połączeniem wielu części systemu udokumentowanych w przewodniku stylistycznym. Niektóre części projektu mogą być nowe, ale nadal powinny być tworzone jako moduły. Chodzi o to, aby skorzystać z przewodnika stylu, aby określić, które moduły są dostępne w systemie interfejsu użytkownika, które można ponownie wykorzystać lub rozszerzyć w celu stworzenia projektu.

(A co, jeśli nie ma przewodnika po stylu? Nie martw się! W następnej sekcji pokażę Ci, jak projektować w sposób modułowy, nawet jeśli nie korzystasz z przewodnika po stylu.)

Następnym krokiem w rozwoju opartym na wytycznych stylu jest faza abstrakcji , która jest zasadniczo ćwiczeniem polegającym na rozbiciu rozwiązania projektowego na mniejsze części. Podczas tej fazy projektanci i programiści współpracują ze sobą, aby rozeznać proponowany projekt i zidentyfikować elementy i komponenty (tj. moduły), które zostaną użyte lub ulepszone lub które będą musiały zostać stworzone do wdrożenia.

Faza abstrakcji służy również prześledzeniu planu następnego kroku: wdrożenia i dokumentacji . W tej fazie moduły są albo budowane, albo ulepszane w oderwaniu od pozostałych istniejących modułów. W tworzeniu stron internetowych oznacza to budowanie komponentu lub definiowanie stylów dla elementu niezależnego od aplikacji. Jest to ważny aspekt modułowości, ponieważ pomaga zidentyfikować wszelkie problemy na wczesnym etapie procesu, zapobiegając nieprzewidzianym zależnościom z innymi częściami systemu. Rezultatem są bardziej stabilne części, które łatwiej zintegrować w całość.

Coś wyjątkowego w rozwoju opartym na przewodniku stylu polega na tym, że wraz z postępem wdrażania ma miejsce również dokumentacja, a nie jest to refleksja. Jest to możliwe, ponieważ gdy używany jest generator przewodników po stylach, dokumentacja staje się żywym przewodnikiem po stylu , służąc zarówno jako framework, jak i sandbox do implementacji:

• Przewodnik po stylu życia służy jako struktura definicji elementów interfejsu użytkownika (takich jak nagłówki, listy, łącza, kontrolki wejściowe itp.) oraz jako biblioteka komponentów (takich jak systemy nawigacji, paski narzędzi, narzędzia wyszukiwania, tabele siatki itp. ), które są dostępne do użytku. Oznacza to, że rozwój nie zaczyna się za każdym razem od zera. Zamiast tego opiera się na istniejących definicjach w systemie interfejsu użytkownika i wnosi do niego wkład.
• Jest to również piaskownica , ponieważ służy jako przestrzeń demonstracyjna do budowania i testowania implementacji. To właśnie tam odbywa się rozwój, zanim zostanie on zintegrowany z aplikacją.

Ostatni etap rozwoju opartego na wytycznych stylistycznych, faza integracji , przypomina etap montażu w konstrukcji modułowej. Potrzebne elementy lub komponenty interfejsu użytkownika zostały opracowane i są gotowe do zintegrowania z aplikacją. Pozostaje tylko skonfigurować i dostosować je. Podczas integracji przewodnik stylu jest jak każda dobra instrukcja obsługi, która służy do montażu fizycznej konstrukcji modułowej.

Teraz, gdy zidentyfikowaliśmy podstawowe koncepcje projektowania modułowego i rozwoju opartego na wytycznych dotyczących stylu, wykorzystajmy je.

Projektowanie w sposób modułowy

Wyobraź to sobie: wymyśliłeś świetny przepływ użytkowników, stworzyłeś makiety i prototypy, aby zilustrować interakcje i udokumentowałeś każdą część. Istnieje duże prawdopodobieństwo, że Twoje projekty są już zgodne ze wskazówkami stylistycznymi, co może zapewnić Ci wielką przewagę. (Jeśli nie, nie przejmuj się!) Po prostu cofnij się i zacznij mapować główne części swojego rozwiązania projektowego na wysokim poziomie. Te części mogą być punktami interakcji, w których dokonuje się pewnych rzeczy. Na przykład proces realizacji transakcji może wyglądać tak:

Ale trzymaj broń! To jeszcze nie są moduły. Aby się tam dostać, musimy zidentyfikować elementy interfejsu użytkownika, które są trwałe w przepływie, takie jak:

• wskaźnik kroków do kasy,
• elementy formularzy służące do wprowadzania informacji,
• reprezentacja produktów w koszyku,
• przedstawienie powiązanych produktów, które kupili inni,
• zasady dotyczące zakupu,
• Tekst pomocy,
• wiadomości i alerty.

Kopiąc nieco głębiej, znajdziemy również style i wzorce interakcji:

• Style:

• kolory używane do oznaczenia:

  • komunikaty o błędach, sukcesach, ostrzeżenia i informacje;
  • działania podstawowe kontra drugorzędne;
  • stany nieaktywne versus wybrane versus wyłączone;
  • linki a zwykły tekst;
  • branding;

• typografia używana do oznaczania różnych rodzajów treści:

  • rozmiar czcionki do hierarchicznego układania informacji;
  • rodzaje czcionek do wyróżniania wiadomości lub dostarczania dodatkowych informacji;
  • listy podsumowujące informacje;

• ikonografia przekazująca znaczenie wizualne i szybkie odniesienie do typowych działań.

• Wzorce interakcji:

  • pokazywanie nadchodzących kroków (wyłączone);
  • pokazywanie poprzednich kroków (włączone, aby można było edytować informacje);
  • wyświetlanie podsumowań, które można edytować;
  • weryfikację informacji po tym, jak użytkownik wyszedł z pola;
  • dostarczanie tekstu pomocy po najechaniu myszą;
  • aktualizacja koszyka po dokonaniu wyboru.

Gdy projekt zostanie rozłożony na wszystkie te mniejsze części, w końcu będziemy mieli nasze moduły. W tym momencie łatwiej zauważyć, że wiele z nich dotyczy nie tylko procesu realizacji transakcji, ale wielu innych obszarów aplikacji. Dzięki modułowemu podejściu projektowemu, moduły te mogą być tworzone tak, aby można je było wykorzystać w tym konkretnym projekcie, a także w przyszłych.

Warto wspomnieć o projektowaniu atomowym jako metodologii, która może przyspieszyć ten proces tworzenia projektów modułowych. Ta metodologia analizuje relacje między różnymi częściami systemu i ich wzajemne relacje, używając chemii jako analogii. Przechodzenie przez te kroki jest w dużej mierze odwrotnością naszego poprzedniego ćwiczenia:

1. Zaczynamy od atomów , czyli najmniejszych modułów w systemie (w naszym przykładzie przyciski, typografia i ikonografia).
2. Moduły stają się coraz bardziej złożone, wiążąc się w molekuły , które zapewniają większą funkcjonalność (w naszym przykładzie wskaźniki kroków kasy i powiązany moduł produktów).
3. Następnie są organizmy , które są cząsteczkami zgrupowanymi w aplikacji (w naszym przykładzie nagłówek aplikacji i różne formy).
4. Opuszczając analogię z chemią, kolejnym poziomem są szablony , czyli predefiniowane struktury, w których umieszczane są organizmy.
5. Wreszcie istnieją strony , które są instancjami szablonów.

Brakujący element to sposób na udokumentowanie zidentyfikowanych modułów. To nie tylko kwestia stworzenia dokumentu specyfikacji, który uchwyciłby, w jaki sposób należy zbudować moduły, czy napisania wytycznych, które przechwytują definicje wysokiego poziomu, takie jak kolory marki i rodziny czcionek (które są typowe dla każdego standardowego przewodnika po stylu). Dokumentacja musi być raczej bardziej wyrafinowana i dynamiczna, aby kiedy te moduły się zmienią (a wiesz, że się zmienią!), dokumentacja nie stanie się przestarzała. To jest dokładnie tam, gdzie przewodniki po stylach życia wypełniają lukę!

Korzystanie z przewodnika po stylu życia

Przewodnik po stylu życia może być bardzo przydatny podczas procesu projektowania, ponieważ zawiera kilka rzeczy.

Linia bazowa do pracy

Zamiast za każdym razem zaczynać od zera, przewodnik po stylu podaje kierunek wizualny i moduły, których powinieneś użyć, aby stworzyć projekt.

Ponieważ przewodnik po stylu życia jest generowany na podstawie rzeczywistego kodu, odzwierciedla on najnowszą i najlepszą wersję zaimplementowanego projektu.

Dokumentacja rozwiązań projektowych

Wiedza zdobyta w celu rozwiązania konkretnego problemu z interfejsem użytkownika lub UX może zostać przekazana do późniejszego wykorzystania.

Pomaga to zachować spójność we wdrażaniu, zachęcając do dopasowania każdego nowego rozwiązania do części obecnego projektu.

Będziesz opracowywać wzorce, z którymi użytkownicy będą się mogli zapoznać, zwiększając w ten sposób użyteczność.

Łatwość komunikacji

Przewodnik pomaga przekazać projekt, zapewniając najbardziej aktualną reprezentację interfejsu użytkownika (w przeciwieństwie do statycznych makiet, które szybko się dezaktualizują).

Opracowano wspólny język interfejsu użytkownika, ponieważ musisz nazwać różne elementy w przewodniku stylu. Wymaga to współpracy nie tylko między projektantami interfejsu użytkownika, ale między projektantami i programistami, co jest wielką zaletą, gdy trzeba komunikować, jak projekt powinien być zaimplementowany.

Niezależnie od tego, czy masz istniejący przewodnik po stylu, czy planujesz go stworzyć, automatyzacja procesu skieruje Cię we właściwym kierunku, prowadząc proces projektowania w sposób modułowy. Tak więc, jeśli jesteś gotowy na zakup generatora przewodników po stylu życia, polecam następujące zasoby:

• „Dogłębny przegląd narzędzi przewodnika stylu życia”, Robert Haritonov, Smashing Magazine
• „Przegląd generatorów bibliotek wzorców”, David Hund, GitHub
• „Przegląd generatora przewodników stylów”, Susan Robertson, A List Apart

Nie bierz tego do skrajności!

Teraz, gdy przyjrzeliśmy się, jak dopracować proces projektowania, aby uwzględnić modułowość, a także zalety przewodnika po stylu życia, przyjrzyjmy się niektórym typowym pułapkom, które możesz napotkać po drodze.

Przewodnik po stylu nie zastępuje prac projektowych

Często zdarza się, że menedżerowie słyszą, że po ustanowieniu przewodnika dotyczącego stylu życia większość prac projektowych jest już wykonana. Podczas gdy wykonywanych jest wiele powtarzalnych i trywialnych prac (np. tworzenie prototypów różnych stanów przycisku), weź pod uwagę to:

• ciągle trzeba będzie budować nowe funkcje,
• znalezienie rozwiązania wiąże się z podjęciem decyzji projektowych.

Tak więc, posiadanie przewodnika stylu życia i podążanie za rozwojem opartym na przewodniku stylu poprawia przepływ pracy, ale nie usuwa projektanta z równania. Posiadanie narzędzia, które przyspiesza przepływy pracy i usprawnia komunikację, jest korzystne zarówno dla projektantów, jak i programistów. Ale wspaniałą rzeczą w tym podejściu jest to, że daje dużo miejsca na dostosowanie interfejsu użytkownika, co poprawia wrażenia użytkownika — a znalezienie tego jest częścią roli projektanta.

Nie podążaj za wzorcami do skrajności

Zawsze powinniśmy dążyć do wykorzystania wzorców w aplikacji. Na przykład konsekwentne stosowanie kolorów i rozmiarów czcionek może szybko wskazywać elementy użytkownika w interfejsie użytkownika, z którymi można wchodzić w interakcję. Jednak unikaj używania wzorca tylko dlatego, że został wcześniej zaimplementowany; raczej użyj go, ponieważ naprawdę rozwiązuje problem.

Na przykład, jeśli ustaliłeś wzorzec wyświetlania pasków narzędzi u góry ekranu, ten wzorzec będzie działał w większości przypadków, ale będą sytuacje, w których prezentowanie kontekstowego paska narzędzi, bliżej miejsca, w którym użytkownik podejmuje działania, ma większy sens . Dlatego zawsze kwestionuj, czy ponowne użycie wzorca przedkłada łatwość implementacji nad wrażenia użytkownika.

Nie pomijaj iteracji projektu

Wiąże się to trochę z poprzednim punktem. Nie przeocz wartości iteracji i innowacji podczas próbowania nowych wzorców i znajdowania sposobów na zaprojektowanie interfejsu, nawet jeśli na pierwszy rzut oka nie podążają one za przewodnikiem po stylu. Przewodnik po stylu nie powinien ograniczać twoich wysiłków, aby stworzyć jak najlepsze wrażenia użytkownika. Raczej, jak sama nazwa wskazuje, powinien być przewodnikiem, punktem wyjścia, który pomoże Ci rozwiązać problemy poprzez wykorzystanie wcześniejszej pracy i doświadczenia. Iteracja w fazie projektowania powinna być tak samo ważna jak zawsze i powinna zachęcać do ulepszania ustalonych wzorców.

Obciążenie konserwacyjne

Wśród miliardów rzeczy związanych z twoją pracą utrzymywanie przewodnika po stylu powinno być ostatnią rzeczą, która wydaje się być ciężarem. Aby temu zaradzić, pomocne są następujące praktyki:

• Znajdź system dokumentacji, który jest łatwy w instalacji i łatwy w regularnej interakcji.
• Aktualizuj dokumentację jako część swojego przepływu pracy, a nie zastanawiaj się, gdy implementacja jest już gotowa. Dokumentuj na bieżąco!
• Ustal wytyczne, które ułatwią wszystkim wnoszenie wkładu do dokumentacji. To rozłoży obciążenie pracą i zwiększy poczucie własności.

Zaprojektuj modułowo, aby zbudować modułowy

Stworzenie elastycznego systemu interfejsu użytkownika, który jest spójny i łatwy do dostosowania, a jednocześnie skalowalny i oszczędny, zależy nie tylko od tego, jak jest zbudowany, ale także od tego, jak został zaprojektowany. Biblioteka komponentów ma bardzo małą wartość, jeśli każdy nowy projekt jest tworzony niezależnie, ignorując ustalone standardy i wzorce.

Z drugiej strony nie chodzi o tworzenie interfejsów do wycinania ciasteczek, które wykorzystują te same style i wzory, ponieważ jest to wygodne. Dobry projekt jest skuteczny nie ze względu na swoją wyjątkowość, ale dlatego, że łączy w sobie zarówno formę, jak i funkcję, tworząc wspaniałe wrażenia . Ten cel powinien być zawsze na pierwszym miejscu, a korzystanie z metody, takiej jak programowanie oparte na wytycznych stylu, w celu wprowadzenia modułowości zarówno w projektowaniu, jak i programowaniu, powinno pomóc w stworzeniu spójnego systemu interfejsu użytkownika, który osiągnie ten cel.