Jak utworzyć przewodnik po stylach szkicu, bibliotekę i zestaw interfejsu użytkownika

Każdy projekt może skorzystać z dobrze przemyślanego przewodnika po stylu. Skorzystaj z tego samouczka, aby zbudować zestaw interfejsu użytkownika i jednocześnie utworzyć niestandardową (i wielokrotnego użytku) bibliotekę do szybkiego prototypowania.

Niezależnie od tego, czy jesteś ekspertem od Sketch, czy nowicjuszem, projektanci przekonają się, że tworzenie przewodników po stylu w programie Sketch może być cennym źródłem ich narzędzi projektowych, które pozwala zaoszczędzić dużo czasu.

Przewodnik po stylu nie tylko pomaga zachować spójność, ale także umożliwia aktualizacje elementów, takich jak kolory i ikony w wielu dokumentach, przy znacznie mniejszym wysiłku. Ten samouczek prowadzi krok po kroku przez proces tworzenia przewodnika stylu i zestawu interfejsu użytkownika i pozwoli projektantom lepiej zrozumieć symbole szkicu, odwoływać się do biblioteki szkicu w swoich projektach oraz zapewnić sobie pewność organizacji zasobów projektowych.

Tworzenie przewodnika po stylu szkicu

„Przewodnik stylistyczny to kompleksowy„ żywy dokument ”, który śledzi wszystkie powtarzające się elementy projektu, od zasad brandingu po ilość ukosowania przycisków wezwania do działania”, zgodnie z UXPin. Przewodnik stylu może zawierać wszystko, od prostych elementów wizualnych po słownictwo i zatwierdzone obrazy. Ten samouczek obejmuje organizację, kolory, ikony, czcionki, style tekstu i zasoby.

Krok pierwszy: organizacja

1. Utwórz folder główny do przechowywania plików szkiców, wtyczek i innych niezbędnych zasobów, takich jak czcionki i ikonografia. (Wtyczki zostaną omówione na końcu samouczka.)
2. Uruchom nowy plik szkicu i nazwij go „Biblioteka nazw klientów ”. Na przykład, jeśli Twoim klientem jest Toptal, plik powinien mieć nazwę „Biblioteka Toptal”.

Krok drugi: kolory

Jeśli kolory zostały już wybrane, następnym krokiem jest przekształcenie kolorów w symbole.

1. Aby to zrobić, ułóż kwadraty o tym samym rozmiarze i odpowiednio zmień ich kolory. Kliknij „Utwórz symbol” i zapisz te elementy za pomocą systemu etykietowania color/ @color-name . Color/@pink , color/@background-grey lub color/@FFFFF to przykłady prawidłowych etykiet. Konwencje nazewnictwa są ważne dla utrzymania porządku w przewodniku stylistycznym, dlatego od samego początku należy ustalić i przestrzegać formatu dla wszystkiego.
2. Po zakończeniu dodaj je do strony przewodnika stylu.
3. Zapisz próbkę koloru w sekcji dokumentów swojej palety kolorów.

Przydatne skróty: R - narzędzie prostokąta, T - narzędzie tekstowe, alt - mierz odległość.

Krok trzeci: ikony

Przekształcenie ikon w dynamiczne symbole pozwala na łatwą zmianę ich koloru na dowolny z kolorów zapisanych w kroku drugim powyżej. Oznacza to, że po umieszczeniu ikony w projekcie kolor można zmienić za pomocą prostego menu rozwijanego, zwanego „zastąpieniem”, za pomocą „Inspektora” po prawej stronie płótna.

1. Zapisz ikonę jako symbol (jeśli to możliwe, trzymaj się pliku .svg dla typu zasobu).
2. Wejdź na stronę symboli, znajdź ikonę i zamaskuj ją domyślnym kolorem z wcześniej zapisanych kolorów. Aby to zrobić, nałóż symbol koloru na ikonę i kliknij "Mask" na pasku narzędzi (lub kliknij prawym przyciskiem myszy i wybierz "Mask" z menu podręcznego).
3. Po zamaskowaniu ikony usuń wypełnienie, odznaczając pole wyboru w sekcji „Wypełnienia” w Inspektorze.
4. Uporządkuj ikony na stronie przewodnika stylu. W tej samej sekcji pomocne jest określenie koloru aktywnych i nieaktywnych ikon oraz innych ważnych specyfikacji kolorów.

Krok czwarty: style tekstu

Po wybraniu czcionek nadszedł czas, aby określić style tekstu: H1, H2, H3, H4, H5, treść, linki, podpisy, etykiety itp. Dobrym punktem odniesienia dla typografii internetowej jest ten wpis na blogu autorstwa Typecast.

1. Wybierz rozmiar, wagę, znaki i odstępy między wierszami dla tylu stylów, ile potrzeba.
2. Napisz słowo („Wpisz coś” pojawia się automatycznie po naciśnięciu T, narzędzie tekstowe) i sformatuj je, aby odzwierciedlało wybrane szczegóły stylu.
3. Kliknij „Utwórz nowy styl tekstu”.
4. Uporządkuj style tekstu na stronie przewodnika po stylu.

Krok piąty: aktywa

Teraz czas na zabawną część. Czas połączyć wszystkie poprzednie kroki, aby utworzyć zasoby. Jeśli zasoby zostały już utworzone, dla zachowania spójności najlepiej jest odtworzyć je przy użyciu wybranych stylów tekstu, ikon i kolorów. Na przykład w roboczym dokumencie projektowym może występować wiele różnych kolorów szarości, których projekt nie uwzględnił, więc odtworzenie zasobu zagwarantuje spójność wybranego koloru. Nie zapomnij zachować spójności nazewnictwa i pamiętaj o dodawaniu zasobów do strony przewodnika stylu w miarę ich tworzenia.

Oto kilka sugerowanych zasobów do pracy:

guziki

1. Twórz te dynamiczne symbole, podobnie jak ikony, maskując przycisk w domyślnym kolorze i usuwając wypełnienie.
2. Aby tekst był zawsze wyśrodkowany, rozciągnij szerokość pola tekstowego na taką samą jak przycisk i wyśrodkuj tekst.
3. Aby zapewnić spójność, używaj zapisanych stylów tekstu.
4. Zapisz te elementy jako symbole, używając systemu nazewnictwa przycisków/ przycisków .
5. Użyj funkcji zastępowania, aby zmienić etykiety i kolory.

Wyszukaj paski

1. Zastosuj ograniczenia zmiany rozmiaru do pola wyszukiwania oraz ikon i tekstu używanego w samym polu.
2. Nie zapomnij o zastosowaniu stylów tekstu i kolorów zapisanych wcześniej w palecie kolorów dokumentu.
3. Zapisz ten element jako symbol, używając wyszukiwania jako tytułu lub, jeśli masz różne typy wyszukiwania, zastosuj się do systemu etykietowania, takiego jak wyszukiwanie/standardowe i wyszukiwanie/brak ikony .

Przyciski radiowe i pola wyboru

1. Istnieje możliwość umieszczenia symbolu w symbolu, a dobrym sposobem na jego przetestowanie jest utworzenie inteligentnych zasobów przycisków radiowych i pól wyboru.
2. Najpierw utwórz sam zasób przycisku. Zapisz ten element jako symbol, korzystając z pola wyboru/zaznaczonego i pola wyboru/odznaczonego jako przykładowego etykietowania.
3. Teraz utwórz dane wejściowe. Dodaj tekst zastępczy obok symbolu pola wyboru, a następnie przekonwertuj cały zasób na symbol. Ponieważ jest to teraz dane wejściowe, sugeruje się zapisanie zasobu jako takiego, więc dobrą etykietą będzie input/checkbox/selected i input/checkbox/odznaczony .

Krok szósty: skorzystaj z przewodnika po stylach!

Wykonanie całej tej pracy w celu stworzenia przewodnika stylu jest przydatne tylko wtedy, gdy faktycznie sprawia, że ​​projekt przebiega płynniej. Po utworzeniu wszystkich zasobów nadszedł czas na zastosowanie biblioteki do projektowanego dokumentu. W Sketch, przejdź do „Preferencje -> Dodaj bibliotekę…” i dodaj dokument biblioteki.

Po dodaniu biblioteki do pliku projektu projektu możesz uzyskać dostęp do biblioteki i jej symboli w sekcji symboli. Zauważysz bibliotekę projektu interfejsu użytkownika systemu iOS, która jest dostarczana ze szkicem jako opcją biblioteki, a także bibliotekę, która została niedawno zaimportowana.

Jeśli chcesz zaktualizować symbol, kliknij dwukrotnie sam symbol i powinien pojawić się dokument biblioteki. Po wprowadzeniu zmian wróć do dokumentu projektu i kliknij przycisk aktualizacji w prawym górnym rogu.

Bonus: Importowanie/eksportowanie stylów tekstu

Style tekstu nie są zapisywane w bibliotece, ale wtyczka Shared Text Styles dla Sketch rozwiązuje ten problem. Po pobraniu wtyczki przejdź do dokumentu biblioteki, a następnie do menu: „Wtyczki ‐> Współdzielone style tekstu ‐> Eksportuj…” Zapisz ten plik w tym samym folderze, co dokument biblioteki. Następnie w swoim dokumencie projektowym przejdź ponownie do menu: „Wtyczki ‐> Współdzielone style tekstu ‐> Importuj style tekstu…” i zaimportuj właśnie zapisany plik. Pojawią się Twoje style tekstu.

Bonus: Importowanie/eksportowanie palet kolorów

Podobnie jak w przypadku stylów tekstu, kolory dokumentu nie oszczędzają się dzięki bibliotece Sketch, ale wtyczka Sketch Palettes rozwiązuje ten problem. Podobnie jak powyżej, wyeksportuj paletę za pomocą „Wtyczki ‐> Paleta szkicu ‐> Kolory dokumentu ‐> Zapisz paletę” i zaimportuj ją za pomocą „Wtyczki ‐> Paleta szkicu ‐> Kolory dokumentu ‐> Załaduj paletę”. Pamiętaj, aby zapisać go w tym samym folderze, co inne dokumenty biblioteki.

Bonus: Czcionki

Craft by InVision to zestaw wtyczek, które przenoszą oprogramowanie Sketch na wyższy poziom. Aplikacja Craft umożliwia zastępowanie obrazów zdjęciami stockowymi, tworzenie prototypów i synchronizację z InVision, tworzenie bibliotek i nie tylko. Jeśli Craft jest pobrany, naciśnij „cmd-shift-c” w dokumencie, a zostanie wygenerowany arkusz stylów. Czcionki zostaną wymienione tutaj.

Wykonanie sześciu opisanych powyżej kroków sprawi, że zarówno duże, jak i małe projekty będą przebiegać płynniej, a efekt końcowy będzie bardziej dopracowany. Jeśli są unikalne lub bardzo specyficzne, przewodnik stylu, biblioteka i zestaw interfejsu użytkownika mogą być używane dla jednego klienta lub dla wielu projektów, jeśli standardowe elementy interfejsu użytkownika są stale tworzone, takie jak szkielety i prototypy. Poświęcenie czasu na początku, aby właściwie utworzyć te komponenty interfejsu Sketch UI, zaoszczędzi wiele czasu w dalszej kolejności i potencjalnie w wielu projektach.

Dalsza lektura na blogu Toptal Design:

• Dlaczego startupy potrzebują przewodnika po stylach
• Rzeczy, których możesz nie wiedzieć o typografii w szkicu
• Ostateczna lista 50 najlepszych wtyczek do szkicowania
• Adobe XD kontra Sketch — które narzędzie UX jest dla Ciebie odpowiednie?
• Jak zbudować efektywną strukturę projektowania (zawiera bezpłatną strukturę interfejsu użytkownika szkicu)