liquiddesign

Zasada 05

Cel na miarę palca

Mysz trafia w piksel, palec w plamę. Cel dotykowy mniejszy niż 44 na 44 piksele zamienia interfejs w test zręczności, a gęsto upakowane ikony gwarantują kliknięcia obok. Obszar celu może być większy niż ikona, wystarczy padding.

Test zręczności, którego nie powinno być

Klikaj szybko w ikony po obu stronach, najlepiej na telefonie. Kliknięcie obok celu liczy się jako pudło.

✕ Ikony 24 px bez odstępów

Trafione: 0, obok: 0

✓ Cele 44 px z przerwami

Trafione: 0, obok: 0

Reguły

  • Każdy cel dotykowy ma co najmniej 44 na 44 piksele, licząc z paddingiem, nie samą ikonę.
  • Sąsiednie cele dzieli co najmniej 8 pikseli przerwy, żeby pudło nie uruchamiało cudzej akcji.
  • Obszar klikalny obejmuje całą kartę albo wiersz, nie tylko tekst linku.
  • Akcje destrukcyjne stoją najdalej od częstych, nigdy tuż obok nich.

Wzorzec w kodzie

Ikona ma 20 px, cel ma 44, różnicę robi kontener
<button
  aria-label="Edytuj projekt"
  className="grid size-11 place-items-center rounded-lg"
>
  <EditIcon className="size-5" />
</button>
Klikalny jest cały wiersz, nie sam tekst
<li>
  <a href={path} className="flex min-h-11 items-center gap-4 px-4">
    <Avatar />
    <span className="flex-1 truncate">{project.name}</span>
    <Badge>{project.status}</Badge>
  </a>
</li>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zastosuj w moim projekcie zasadę „Cel na miarę palca" z metodologii Liquid Design.

Opuszek palca ma około 44 piksele. Wszystko, co klikalne, jest co najmniej takie i trzyma odstęp od sąsiadów.

Wymagania:
- Każdy cel dotykowy ma co najmniej 44 na 44 piksele, licząc z paddingiem, nie samą ikonę.
- Sąsiednie cele dzieli co najmniej 8 pikseli przerwy, żeby pudło nie uruchamiało cudzej akcji.
- Obszar klikalny obejmuje całą kartę albo wiersz, nie tylko tekst linku.
- Akcje destrukcyjne stoją najdalej od częstych, nigdy tuż obok nich.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/zasady/cele-dotyku