Rozpocznij projektowanie interfejsu użytkownika dzięki tym wskazówkom, aby przyspieszyć przepływ pracy

Kiedy pracujesz nad projektem, zmagasz się ze wszystkimi możliwościami, takimi jak zwiększenie lub zmniejszenie bloku tekstu lub zwiększenie (lub zmniejszenie) ilości białej przestrzeni wokół elementu. A co z tym kolorem: czy powinien być ciemniejszy, czy może jaśniejszy?

Ten artykuł dotyczy tworzenia ograniczeń i zasad, których należy przestrzegać podczas całego procesu projektowania. Istnieje nieograniczona liczba sposobów łączenia elementów w interfejsie użytkownika — musisz więc ustalić pewne zasady i granice, w przeciwnym razie proces projektowania może stać się nieprzyjemnym obowiązkiem. Możesz zmagać się ze wszystkimi możliwościami i próbować wybrać najlepszą spośród wielu „poprawnych” opcji. Ustalając (i przestrzegając) kilka podstawowych zasad, sprawisz, że Twój projekt będzie również wyglądał bardziej spójnie.

Znaczenie ujednolicenia projektu interfejsu użytkownika

Zacznijmy od samego początku. Chcesz, aby Twój projekt wyglądał dobrze i był godny zaufania, i musisz za wszelką cenę unikać chaosu. Aby tak się stało, bardzo ważne jest posiadanie systemu do pracy projektowej.

Twoi programiści również docenią system — pokochają fakt, że Twój projekt jest uporządkowany, a Ty ułatwiasz im pracę.

System zmiany rozmiaru według z góry określonego rozmiaru

Nie ma znaczenia, czy chcesz zmienić rozmiar bloku tekstu, zmienić rozmiar obrazu, czy dostosować trochę odstępu. Musisz zdecydować, jak duży będzie każdy element. I założę się, że byłeś w takiej sytuacji: czy kiedykolwiek wybrałeś rozmiar elementu i po pięciu minutach zmieniasz go, a potem jeszcze raz, a może raz za razem?

Jaki rozmiar jest idealny? To może być jeden z tych, których próbowałeś, prawda? Musisz uniknąć tej niekończącej się pułapki, która marnuje czas!

Zacznij od wyboru jednostki podstawowej: siatki 8-pikselowej

Aby cały projekt wyglądał bardziej przejrzyście, warto najpierw ustawić wartość pomiaru, która następnie określi wszystkie rozmiary. Od Ciebie zależy jaką wartość wybierzesz, ale często najlepszą opcją jest trzymanie się kilku sprawdzonych zasad. Jedną z tych zasad jest zmiana rozmiaru i przesuwanie elementów dokładnie o osiem pikseli. Ta zasada usprawni Twoje podejmowanie decyzji.

Uwaga dotycząca px kontra dp : * Oprócz pikseli (px) mogłeś słyszeć o używaniu terminu dp w projektowaniu ekranów i prototypowaniu. Jednostka dp jest skrótem od „piksela niezależnego od gęstości”. Jednostka odnosi się do ekranu o rozdzielczości 160 dpi, więc 1 dp odpowiada 1 pikselowi na ekranie 160 dpi, 2 pikselom na ekranie 320 dpi i tak dalej. Formuła wartości liczbowej to px = dp * (dpi/160) .*

Zawsze pamiętaj, że jeśli pracujesz z mniejszymi elementami lub obiektami, można również używać przyrostów o 4 piksele zamiast 8. Od czasu do czasu możesz wprowadzić dalsze korekty, gdy jest to wymagane.

Ale dlaczego dokładnie 8 pikseli?

Istnieje kilka powodów, dla których osiem często działa tutaj jak „magiczna liczba”:

• Osiem pikseli to wystarczający minimalny „skok”.
• Ósemka to wielka liczba, ponieważ jest podzielna przez cztery i dwa.
• Jeśli użyjesz ośmiu, możesz łatwo zmienić rozmiar dowolnego elementu, nie kończąc na połowie pikseli, ponieważ 8/2 = 4, 4/2 = 2 i 2/2 = 1. Jeśli z drugiej strony zaczynasz od 10, otrzymasz 5 pikseli, potem 2,5 piksela, a potem 1,25 piksela. Projektując ekran, chciałbyś jak najbardziej unikać pół pikseli. Dzięki wykorzystaniu całych pikseli elementy projektu zostaną wyrównane do precyzyjnych granic pikseli, dzięki czemu będą wyglądać wyraźniej.
• Wielokrotności ośmiu (8, 16, 24, 32, 40, 48, 56, 64, 72, 80 itd.) przeplatają się z wartościami binarnymi (1, 2, 4, 8, 16, 32, 64, 128, 256 , 512 itd.).
• Wreszcie, liczby są łatwe do zapamiętania.
  

Jakie są zalety korzystania z siatki 8-pikselowej?

• Jako projektant, Twój czas na podjęcie decyzji jest cenny. Dzięki temu będziesz szybszy i bardziej wydajny.
• Jeśli pracujesz z programistą, możesz stworzyć system, który pomoże Tobie i Twojemu zespołowi. Jeśli programista musi dokonać szybkich zmian, może dostosować wartości w krokach 8-pikselowych. Zapewni to spójność i porządek.
• Osoby korzystające z Twojej strony będą czuły się komfortowo, kiedy ją odwiedzą. Zaufają witrynie i będzie im łatwiej korzystać z interfejsu.
  

Pracuj z siatką, aby rozmieścić wszystkie elementy

Harmonia pozioma

Na pewno korzystałeś już z siatki przy projektowaniu stron internetowych. Korzystanie z siatki pomaga precyzyjnie umieścić wszystkie elementy na cyfrowym płótnie.

Siatka tworzy szkielet Twojego interfejsu i określa, gdzie możesz umieszczać elementy. Szablon zawiera kompozycję i określa wyraźne granice, dzięki czemu Twój projekt będzie bardziej spójny. Teraz łatwiej będzie Ci zdecydować, gdzie umieścić elementy. W miarę zdobywania doświadczenia możesz w razie potrzeby aktualizować granice.

Ale jak tworzysz tę siatkę? Konkrety omówimy dalej. Zasadniczo ilość i wielkość kolumn może być losowa i zależy od Twoich potrzeb. Im bardziej szczegółowy projekt, tym więcej kolumn będzie wymagać siatka. Jeśli się wahasz, poproś o pomoc doświadczonego kolegę.

Polecam również przeczytanie „Kompleksowego przewodnika po projektowaniu interfejsu użytkownika”, który powinien pomóc w zrozumieniu projektowania interfejsu użytkownika nieco bardziej dogłębnie.

Harmonia pionowa

Podobnie jak w przypadku utrzymywania harmonii poziomej, ważne jest, aby w projekcie zachować spójne odległości w pionie. Podobnie jak wiersze w arkuszu kalkulacyjnym, pomagają zachować tekst w równych odstępach czasu.

Jak duże powinny być te rzędy? Ponownie, to zależy od Ciebie. Zalecam jednak używanie 8 pikseli lub wielokrotności 8 (np. 16). Przedefiniuj granice, w których elementy lub tekst mają być wyrównane.

Wybór rozmiarów czcionek we właściwy sposób

Jeśli spojrzysz na dobrze wykonane projekty, zobaczysz spójność w rozmiarach czcionek. To nie bez powodu.

Uwaga : Pamiętaj również, że potrzebujesz tylko dwóch, może trzech czcionek w swoim projekcie. Jednak wybór odpowiednich krojów pisma i sprawienie, by współpracowały ze sobą, wykracza poza zakres tego samouczka.

Zacznij od zdefiniowania kilku kluczowych rozmiarów czcionek, które będą używane w całym projekcie. (Na przykład głupotą byłoby użycie 30, 31 i 32 pikseli. Zamiast tego połącz te trzy bardzo podobne rozmiary w jeden.)

Standardowe rozmiary czcionek przynoszą dwie korzyści:

• Twój projekt będzie bardziej spójny i elegancki.
• Przyspieszy to proces projektowania i sprawi, że będziesz bardziej wydajny.

Rozmiary czcionek

Podczas definiowania rozmiarów czcionek nie zwiększaj rozmiaru o ten sam przyrost. Kiedy powiększasz tekst, powinien on być nieliniowy. Oznacza to, że im większy tekst, który tworzysz, tym większy powinien być przyrost.

Załóżmy, że masz blok tekstowy z czcionką o rozmiarze 12 pikseli i chcesz go powiększyć. Wypróbowujesz 14 pikseli i jesteś zadowolony. Ale wyobraź sobie, że masz duży nagłówek (40 pikseli) i chcesz go powiększyć. Czy zwiększyłbyś rozmiar tylko o 2 piksele, z 40 do 42? Oczywiście nie. Optycznie tekst wymaga znacznie większej zmiany. Może być konieczne zwiększenie go o 24 piksele, co da większy 64-pikselowy nagłówek.

Krótko mówiąc, oznacza to, że im większy tekst ma być, tym większy przyrost będziesz musiał użyć. Ta bardzo prosta zasada dotyczy nie tylko tekstu, ale także rozmiaru przycisków, białych znaków i wszystkiego innego.

Zwykle opiera się na postępie geometrycznym. Oto bardzo przydatny wykres ilustrujący skalę czcionek:

Jednak w przypadku typografii używana jest jedna sprawdzona skala z rozmiarami czcionek, których będziesz chciał trzymać się na zawsze. Skala to 12, 14, 16, 18, 20, 24, 30, 36, 48, 60 i 72 piksele.

Wysokość linii tekstu

Po zdefiniowaniu wszystkich rozmiarów czcionek będziesz chciał zadbać o odstępy między wierszami. W przypadku wysokości linii ponownie użyj przyrostów co 4 piksele. Na przykład dla tekstu 16-pikselowego ustawmy wysokość linii na 24 piksele. Jeśli chcesz, aby tekst bardziej oddychał, zwiększ wysokość wiersza o 4 piksele do 28.

Zdefiniuj kolory swojego projektu

Czy wiesz, ile istnieje kombinacji kolorów? Dużo! Zmarnujesz zbyt dużo czasu, jeśli nie określisz wcześniej odcieni koloru. Nie możesz ograniczyć się do czerni, bieli i, powiedzmy, niebieskiego. Do każdego koloru potrzebne będą inne odcienie i ważne jest, aby ustawić je z wyprzedzeniem, aby odcienie były spójne w całym projekcie. Nie chcemy tworzyć chaosu w projekcie. Celuj w 5 do 10 odcieni dla każdego koloru. Wolę zdefiniować 9 odcieni dla każdego koloru.

Przyjrzyjmy się bliżej odcieniom kolorów.

Dlaczego 9 odcieni każdego koloru?

• Pierwszą zaletą jest nazewnictwo kolorów. Niezależnie od tego, czy używasz edytora graficznego, czy kodu CSS, na pewno skorzystasz z tej wskazówki. Każdemu odcieniowi zostanie przypisany numer, na przykład 100, 200, 300, 400, 500, 600, 700, 800 i 900. (Dlaczego setki? Zazwyczaj w ten sposób są również zorganizowane cięcia krojów).

• Po drugie, 9 to przydatna liczba do definiowania kolorów. Najlepszym sposobem na przygotowanie tych odcieni jest przygotowanie rzędu 9 kwadratów i wypełnienie kwadratów kolorami. Ten w środku będzie kolorem bazowym . Następnie definiujesz najjaśniejszy odcień (najbardziej po lewej) i najciemniejszy odcień (najbardziej po prawej). Następnym krokiem jest wybór odcieni pomiędzy.

Przygotuj różne rozmiary, typy i stany elementów

Podczas pracy nad projektem zwykle pracujesz z niezliczoną liczbą ikon, przycisków i innych elementów. Ponownie, dobrym pomysłem jest wcześniejsze przygotowanie dla nich kilku rozmiarów i ograniczenie opcji do jak najmniejszej liczby. Podczas procesu projektowania nie dodawaj innych rozmiarów i nie próbuj dostosowywać rozmiaru komponentów do swoich potrzeb. Zamiast tego użyj tych, które już zdefiniowałeś, a cały projekt będzie bardziej spójny i przejrzysty.

Spójrzmy na przyciski jako przykład. Kiedy zaczniesz, musisz zdefiniować ich hierarchiczną strukturę. Aby to zrobić, utwórz przycisk z główną akcją, przycisk z drugorzędną akcją i być może inny przycisk z mniej ważną akcją. Dla każdego przycisku określ jego status (aktywny, nieaktywny) oraz wariant kolorystyczny. Zawsze staraj się redukować liczbę elementów do najważniejszych.

Zdefiniuj właściwości innych elementów

Projektanci interfejsów użytkownika często wykorzystują cienie w swoich pracach projektowych. Jednak dla mniej doświadczonych projektantów cienie mogą czasem stanowić problem. Tworząc cień, musisz ustawić odległość cienia wzdłuż osi X i Y, a także promień rozmycia, kolor i przezroczystość. Dopracowanie cieni może zająć dużo czasu, dlatego warto je przygotować przed przystąpieniem do projektowania. Pomocne jest przygotowanie zestawu cieni (w ten sam sposób, co w przypadku kolorów), a następnie stosowanie ich przez cały proces projektowania.

Należy również pamiętać o wszystkich innych właściwościach elementów, z którymi będziesz pracować, takich jak promień narożnika, przezroczystość i gradienty kolorów.

Biała przestrzeń

Właściwa regulacja odstępów jest ważna. Niezależnie od tego, czy przesuwasz elementy z zewnątrz (margines), czy od wewnątrz (padding), powinieneś ponownie polegać na magicznej liczbie 8. Zwiększ przesunięcie o 8 pikseli (4 dla małych elementów). Podobnie jak w przypadku rozmiaru czcionki, im większa luka, którą chcesz, tym większy będzie musiał być przyrost (ponownie, musisz zdefiniować te przyrosty z góry).

Wniosek

Aby Twoje projekty były przejrzyste i spójne, określ pewne granice i jasną ścieżkę przez cały proces.

Pracując nad każdym elementem swojego projektu, pamiętaj o następujących kwestiach:

• Zobacz, czy użyłeś go już gdzieś w swoim projekcie. Jeśli tak, możesz po prostu skopiować ten element.
• Postępuj zgodnie z rytmem poziomym i pionowym i dostosuj rozmiar elementów, korzystając z kroków, które zdefiniowałeś na samym początku.
• Unikaj skomplikowanych decyzji i niekończących się bitew z pikselami. Mieć system na swoim miejscu.
• Nie twórz dwa razy tego samego elementu. Jeśli w Twoim projekcie będzie porządek, Twoja praca będzie lepsza i wydajniejsza, będziesz mógł szybciej iterować i łatwiej komunikujesz się z programistami. Deweloperzy ustawią zmienne, które odpowiadają Twoim stylom, więc zdefiniuj je jasno. Otrzymasz przejrzysty projekt, a programiści będą mogli tworzyć lepszy i bardziej zrównoważony kod. Wszyscy będą szczęśliwi.

Powiązane czytanie

• „Tworzenie lepszych projektów interfejsu użytkownika za pomocą siatek układu”, Nick Babich, Smashing Magazine
• "Jaka jest różnica między "px", "dip", "dp" i "sp"?, Przepełnienie stosu
• „Dlaczego projektanci interfejsu użytkownika używają „dp” zamiast „piksela” jako jednostki do projektowania aplikacji mobilnych?”, Kikahola, Medium
• „Właściwość CSS font-weight ”, dokumentacja internetowa Mozilla Developer Network
• „Przyspiesz swoją grę projektową, używając mniejszej liczby czcionek”, Jacci Howard Bear, Lifewire
• „Tworzenie cieni interfejsu użytkownika, które nie są do niczego”, Anastasia Kas, Medium
• „10 złotych zasad, których należy przestrzegać podczas łączenia czcionek: wskazówki od projektanta”, Janie Kliever, Canva
• „Projekt materiału: siatka 8 dp, siatka 4 dp”, Pomoc Google
• „Dlaczego niektóre projekty wyglądają na niechlujne, a inne nie”, Reinoud Schuijers, UX Collective