Pięć decyzji o odstępach, które naprawiają większość interfejsów

Kiedy interfejs sprawia wrażenie nieudanego, a trudno powiedzieć dlaczego, odpowiedzią zwykle są odstępy. Nie paleta, nie krój pisma – przerwy. Odstępy to niewidzialny system, który mówi oku, co należy do siebie, co jest osobne i co liczy się najbardziej, a zawodzi po cichu: żaden domyślny linter nie zgłasza przerwy 13px, żaden recenzent nie napisze „rytm jest zepsuty”. Po latach audytowania własnych interfejsów i cudzych niemal każda poprawka odstępów, jaką wprowadzam, jest jedną z tych samych pięciu decyzji.

TL;DR

• Warto przyjąć skalę i odrzucać wszystko, co poza nią wykracza. 4, 8, 16, 24, 32, 48, 64. Przerwa 13px nie jest decyzją projektową; to dryf.
• Odstęp między grupami musi przewyższać odstęp wewnątrz grup. Ta jedna reguła Gestalt zastępuje większość obramowań i ramek.
• Każdy kontener powinien mieć jedną wartość paddingu, wyprowadzoną z jego roli (komponent 16, karta 24, sekcja 32-48), zamiast dobierania każdej krawędzi na oko.
• Niech hierarchię buduje biała przestrzeń, zanim sięgnie się po separatory. Obramowania to odstępy, które się poddały.
• Rytm pionowy należy naprawić na poziomie tekstu – line-height minimum 1.5, mniejszy odstęp po nagłówku niż przed nim – inaczej nic powyżej nie uratuje strony.

1. Przyjąć skalę, a potem odrzucać wszystko, co poza nią wykracza

Wybór konkretnych wartości to mniejsza połowa pierwszej decyzji; większą jest zgoda co do tego, że istnieje zbiór wartości. Mój opiera się na bazie 4px: 4, 8, 16, 24, 32, 48, 64 – siedem wartości, każda z własnym tokenem. (Gęste powierzchnie, takie jak tabele danych i paski narzędzi, czasem uzasadniają 12; jeśli tak jest w danym projekcie, warto zrobić z tego token. Zbrodnią jest wartość bez nazwy, a nie ósmy token.)

Konkretne liczby znaczą mniej niż samo odrzucenie. Wartości przypadkowe (13px, 7px, 22px) łamią rytm w sposób, który oko rejestruje jako niechlujstwo, nie potrafiąc go nazwać. Reguła, której się trzymam: każda wartość odstępu pochodzi ze skali albo ma udokumentowane uzasadnienie. W praktyce udokumentowane wyjątki niemal nigdy nie przechodzą przeglądu, bo „wtedy wyglądało dobrze” to dokładnie ten dryf, któremu skala ma zapobiegać. W tekście Systemy projektowe dla startupów jeden niezdefiniowany token odstępu zniwelował margines podtytułu i przesunął układ podczas ładowania.

Skala redukuje też liczbę decyzji. Bez niej każda przerwa jest osobnym osądem podejmowanym w tempie implementacji; z nią większość przerw ma dokładnie jeden sensowny token, a przegląd projektu spiera się o ciekawe przypadki zamiast o arytmetykę. 16 studiów przypadku projektowania odnajduje ten sam efekt w Linear i Notion, gdzie jedno świadome ograniczenie eliminuje całe kategorie decyzji projektowych.

2. Odstęp między grupami > odstęp wewnątrz grup

Jeśli z tego tekstu zostać ma jedno zdanie: przerwa między grupami musi być widocznie większa niż przerwa wewnątrz nich. To zasada bliskości z psychologii Gestalt wykonująca pracę nośną – oko odczytuje względną odległość jako relację, automatycznie i przed słowami.

Formularz, w którym etykieta stoi 8px od swojego pola, a pola dzieli 24px, nie potrzebuje żadnych ramek, separatorów ani przebarwień tła: grupowanie jest oczywiste samo z siebie. Wystarczy spłaszczyć te odległości do jednolitych 16px, a ten sam formularz zmienia się w mgłę równo rozstawionych wierszy, które użytkownik musi analizować świadomie. Te same trzy pola, dwa razy:

grouped (8 within / 24 between)     flattened (16 everywhere)

Name                                Name
[______________]
                                    [______________]

Email                               Email
[______________]
                                    [______________]

Phone                               Phone
[______________]
                                    [______________]

Po lewej każda etykieta bez wątpliwości należy do swojego pola. Po prawej każda wewnętrzna etykieta unosi się w równej odległości od dwóch pól – bliskość przestała głosować, a czytelnik ustala przynależność z kolejności czytania, a nie ze wzroku. Kanon formularzy dodaje regułę układu, którą ten przykład zakłada: jedna kolumna, etykiety nad każdym polem, zawsze widoczne.

Typowa awaria to niemal zawsze kompresja na złym poziomie: projektant zacieśnia przerwę między grupami, żeby zmieścić więcej nad linią zgięcia, proporcja się załamuje, a potem – czując, że grupowanie się rozpływa – dodaje obramowania, żeby je przywrócić. Co prowadzi do decyzji czwartej. Ale najpierw:

3. Jeden padding na kontener, wyprowadzony z roli

Kontenery gromadzą asymetryczny padding tak, jak kuchnie gromadzą szuflady z rupieciami – drobna korekta tutaj, żeby zmieścił się przycisk, poprawka tam ze względu na ikonę, aż karta ma 18px u góry, 14px z lewej i nikt nie pamięta dlaczego. Lekarstwem jest stała reguła wyprowadzania: padding kontenera wynika z jego roli, a nie z jego zawartości.

• Komponenty (przyciski, pola, chipy): 16px
• Karty i zgrupowana treść: 24px
• Sekcje: 32-48px
• Obszary na poziomie strony i sekcje hero: 48-64px

Kiedy treść nie mieści się w paddingu wynikającym z roli, to treść nie pasuje do kontenera – należy ją podzielić, skrócić albo awansować kontener o poziom. Dopasowanie paddingu, by ratować jedno niesforne dziecko, psuje rytm całemu rodzeństwu, a asymetria czyta się jak błąd nawet dla użytkowników, którzy nigdy o niej nie wspomną.

4. Biała przestrzeń przed obramowaniami

Większość separatorów to przeprosiny. Obramowanie pod każdym wierszem listy, ramka wokół każdej sekcji formularza, włoskowata linia między kartami – każde z nich to odstęp, który się poddał. Granice rzeczywiście tworzą grupy (gestaltowska zasada wspólnego obszaru jest prawdziwa), ale to mocny lek: głośny wizualnie, addytywny i kumulujący się. Każde obramowanie to kolejna linia, którą oko musi przetworzyć.

Moja kolejność pracy: najpierw proporcja bliskości (decyzja druga). Jeśli grupy nadal się nie rozdzielają, warto spróbować zmiany tła zamiast kreski – przebarwienie tworzy obszar bez dodawania linii, to grupowanie przez wspólny obszar w najcichszej postaci i wygrywa z obramowaniem zawsze, gdy grupa potrzebuje spójności, ale nie krawędzi; naprzemienne pasy w tabelach to ta sama reguła w najbardziej znanej odsłonie. Po obramowania należy sięgać wtedy, gdy obszary naprawdę wymagają twardych krawędzi – tabele, obszary edytowalne, zagnieżdżone karty – i wówczas trzymać się ich konsekwentnie. Interfejs, który raz grupuje białą przestrzenią, a raz obramowaniami, czyta się jak dwa design systems w sporze.

Test, który stosuję podczas przeglądu: usunąć każde obramowanie, które nie oznacza usankcjonowanej twardej krawędzi – tabele, pola edytowalne – i spojrzeć na to, co zostało. Grupowanie, które przetrwa, było prawdziwe; to, co się rozpłynie, było długiem odstępów, który obramowania obsługiwały.

5. Rytm pionowy naprawić na poziomie tekstu

Systemy odstępów umierają od dołu. Jeśli tekst główny ma line-height 1.2, żadna ilość odstępów między sekcjami nie uratuje strony – same akapity czytają się ciasno, a wszystko, co na nich zbudowano, dziedziczy to napięcie. Minimum: tekst 16px, line-height 1.5 (do 1.75 przy długich formach) i szerokość łamu około 65ch. Część dotycząca line-height jest tą empiryczną: wytyczne dostępności nie bez powodu wskazują 1.5, a ciasna interlinia to najczęstszy zabójca rytmu w sieci. Limit 65ch to raczej praktyka niż prawo: długie wiersze potrafią wypaść dobrze w izolowanym teście, ale powrót wzroku do kolejnego wiersza staje się trudniejszy do trafienia, a czytelnicy napotykają ścianę tekstu na długo przed napotkaniem argumentu. Skale typograficzne omawiają 13-stopniową skalę tej witryny i jej tekst główny: 16px przy line-height 1.7.

Powyżej akapitu obowiązuje reguła, która porządkuje całą resztę: nagłówek stoi bliżej treści, którą wprowadza, niż treści, po której następuje. Odstęp przed większy niż odstęp po – zwykle dwukrotnie. Nagłówek unoszący się w równej odległości między sekcjami nie należy do żadnej z nich; to asymetria wiąże go z jego własną treścią. Ten sam nagłówek, dwa razy:

bound (before wide / after tight)   floating (equal both sides)

...end of previous section.         ...end of previous section.


Shipping address                    Shipping address
[Street___________]
[City_____________]
                                    [Street___________]
                                    [City_____________]

Po lewej nagłówek widocznie posiada swoje pola. Po prawej wisi między sekcjami, a czytelnik przypisuje go zwyczajowo, a nie wzrokiem. To znów decyzja druga, działająca wewnątrz kolumny tekstu, i o to właśnie chodzi: rytm pionowy nie jest osobną dyscypliną, to reguła bliskości zastosowana w najmniejszej skali.

Audyt

Pięć decyzji sprowadza się do listy kontrolnej, którą przechodzę przy każdym ekranie:

1. Czy każda przerwa pochodzi ze skali? (Warto sprawdzić te dziwne – zawsze są przypadkiem.)
2. Czy każda przerwa między grupami jest większa niż przerwy wewnątrz tych grup?
3. Czy każdy kontener ma jeden padding wyprowadzony z roli?
4. Czy któreś obramowanie dałoby się usunąć po naprawieniu odstępów, które za nim stoją?
5. Czy kolumna tekstu utrzymuje własny rytm – line-height 1.5 lub więcej, nagłówki związane ze swoją treścią?

Większość ekranów oblewa dwa lub trzy z tych punktów, a ich poprawienie zmienia odbiór bardziej niż jakakolwiek zamiana palety czy kroju pisma. We własnych aplikacjach na iOS pierwsze pytanie egzekwowane jest mechanicznie: zanim commit trafi dalej, bramka przeglądu przeszukuje diff pod kątem surowych liczb paddingu, a wszystko, co nie jest tokenem z kitu, musi mieć nazwany powód, żeby przetrwać. Gust to system techniczny traktuje takie kontrole jak ta jako zakodowany gust, każdą wywiedzioną z jakiegoś wzorca awarii. Odstępy to miejsce, w którym kryje się rzemiosło, właśnie dlatego, że nikt nie potrafi ich wskazać palcem.

Często zadawane pytania

Jakiej skali odstępów powinien używać design system?

Skala o bazie 4px – 4, 8, 16, 24, 32, 48, 64 – pokrywa niemal każdą potrzebę interfejsu. Dokładne wartości znaczą mniej niż wyłączność: każda przerwa pochodzi ze skali albo ma udokumentowane uzasadnienie. Wartości przypadkowe (7px, 13px, 22px) łamią rytm wizualny w sposób, który użytkownicy czują, ale nie umieją nazwać.

Jak grupować elementy interfejsu bez obramowań?

Za pomocą proporcji bliskości: odstęp między grupami musi widocznie przewyższać odstęp wewnątrz nich. Przerwa 8px między etykietą a polem oraz 24px przed kolejną etykietą grupuje formularz zupełnie bez ramek. Obramowania warto zarezerwować dla obszarów wymagających twardych krawędzi – tabel, obszarów edytowalnych – a jako krok pośredni wybierać zmianę tła.

Ile paddingu powinny mieć karty i przyciski?

Należy go wyprowadzić z roli kontenera: ~16px dla komponentów (przycisków, pól), 24px dla kart, 32-48px dla sekcji i więcej dla sekcji hero. Jedna wartość na kontener – jeśli treść nie mieści się w paddingu wynikającym z roli, lepiej zmienić treść albo awansować kontener, niż ręcznie dobierać krawędzie.

Czym jest rytm pionowy w typografii?

To spójny wzorzec odstępów w dół kolumny tekstu: tekst główny co najmniej 16px z line-height 1.5-1.75, około 65 znaków w wierszu i nagłówki umieszczone bliżej treści, którą wprowadzają, niż tej, po której następują. Wszystko, co większe, dziedziczy z tego poziomu – jeśli akapity są ciasne, żaden odstęp między sekcjami nie naprawi strony.