Responsive Flex Grid w Sketch przy użyciu AutoLayout i Stack Group

Ulepszenie systemów projektowania dla struktury, modułowości i skali

Narzędzia takie jak FlexBox w CSS, UIStackView w iOS i FlexboxLayout w Androidzie już dawały programistom niezbędne przepływy pracy do obsługi wielu istniejących obecnie widoków adaptacyjnych i responsywnych.

Jednak dla projektantów proces projektowania układu w niektórych naszych ulubionych narzędziach do projektowania zawsze był bardziej ręczny, bardziej statyczny, bardziej nużący i ogólnie mniej matematyczny. Ale dzięki niesamowitej pracy ludzi w Anima możemy wkrótce mieć strukturę i elastyczność, których potrzebujemy, aby lepiej wypełnić tę lukę.

Dzięki nowej funkcji stosów, która jest dołączona do najnowszej wtyczki Auto-Layout, mamy teraz przepływ pracy, który lepiej dostosowuje dane wyjściowe interfejsu użytkownika i pozwala nam osiągnąć większą spójność i łatwość konserwacji w naszych systemach projektowych. (Zastrzeżenie - Ta koncepcja jest wciąż na wczesnym etapie. Nie każdy typ układu skorzysta z tego systemu, więc łącz i dopasowuj według własnego uznania).

Demo

W poniższym filmie zestawiłem układ elastycznej siatki typu proof-of-concept, aby pokazać niesamowitą jakość stosów. Jest to obszar roboczy, który odzwierciedla strukturę podstawowej strony internetowej.

Na wczesnym etapie eksploracji w szablonie umieszczono następującą funkcjonalność:

  • Z komputera na urządzenie mobilne za pomocą kilku kliknięć.
  • Obszary robocze można zmieniać, a wyrównanie / rozmieszczenie siatki nie ulega uszkodzeniu
  • Siatka uporządkowana według:
  • Ciało
     - Nagłówek
     - Główny
     - -Sekcje
     - - - grupy rzędów (ma warstwę wielkości pudełka dla rodzeństwa)
     - - - - rzędy
     - - - - - kolumny
     - - - - - - moduły
     - - - - - - - komponenty (symbole zagnieżdżone z logiką wewnętrzną)
     - Stopka
  • Użyj zagnieżdżonych symboli, zdefiniowanych przez kombinację właściwości zmiany rozmiaru szkicu, przypinania Autolayout i grup stosów, aby stworzyć modułowy system wymiennych komponentów.
  • Układ dostosowuje się do szerokości obszaru roboczego (treść ma maksymalną szerokość 1200 pikseli, a urządzenie mobilne ma wbudowane rynny).
  • Różnorodność rozkładów kolumn i łatwe składanie / modyfikowanie rynien.
  • i
    rosną i kurczą się niezależnie od
    .
  • Zmiany wysokości w
    popychają
    w dół w obszarze roboczym, jednocześnie utrzymując marginesy i wypełnienia nienaruszone jak na stronie internetowej.
  • Wysokość można regulować, aby wpływać na wysokość kolumn potomnych
  • Wyrównanie kolumn (góra, środek, dół, rozciągnięcie) można zdefiniować na poziomie wiersza.
  • Dodanie nowej kolumny (lub usunięcie jednej) z wiersza automatycznie dostosowuje szerokość kolumn rodzeństwa, aby odpowiednio je dopasować.
  • Dodanie nowego modułu potomnego w kolumnie spowoduje, że kolumna będzie rosła w pionie (moduły zawierają dowolną liczbę typów treści, takich jak obrazy, tekst, listy, tabele, grupy i symbole)
  • Wyrównanie modułów (lewy, środkowy, prawy, rozciągliwy) można zdefiniować na poziomie kolumny.
  • symbol zamień komponenty, aby zastąpić zawartość lub przypiąć nowe warstwy do istniejącego komponentu.
  • Obszar roboczy pulpitu został skonfigurowany do korzystania z 8-punktowej siatki bazowej.

Plik szkicu

Oto jest. Możesz go w jakikolwiek sposób ulepszyć i dać mi znać.
* WAŻNE * - plik NIE będzie działał, chyba że masz najnowszą wersję Auto Layout z obsługą stosów (od wersji .0.2.0)

https://cl.ly/2v2I373P2E1f

Kilka ostatnich myśli

Mam nadzieję, że było to przydatne dla niektórych ludzi. Wiem, że będę głębiej badał możliwości Autolayout i stosów. W tej wersji zauważyłem kilka drobnych dziwactw z zaokrąglaniem matematyki, ale mam nadzieję, że zostaną one rozwiązane z czasem. Wśród niektórych próśb, które zasugerowałem deweloperom, myślę, że mogą one być cenne.

  • Możliwość dodania tła do stosu grupy (nadrzędny wiersz kolumn) bez wpływu na logikę stosu. W HTML / CSS można tego dokonać na poziomie lub „div”, ale Sketch nie pozwala na to w tej chwili.
    Istnieje podejście do robienia tego w tej chwili, które polega na zgrupowaniu warstwy tła z ułożoną grupą i przypięciu bg do górnej / lewej / 100% szerokości i wysokości, a podczas gdy tło rośnie, aby pomieścić zawartość, nie kurczy się, gdy treść jest usuwana. Myślę, że kurczenie się jest już na liście DO ZROBIENIA zespołu.
  • Wprowadzenie punktów przerwania w obszarze roboczym i zamiana symboli na podstawie obszaru roboczego (zamiana 4-elementowej nawigacji z ikoną hamburgera, gdy obszar roboczy <400px lub jeszcze lepiej, przy użyciu podejścia do zapytań kontenerowych.
  • W przypadku wspomnianych punktów przerwania zdolność przełączania między poziomymi a pionowymi grupami, tak że kolumny układają się jeden na drugim, gdy nie ma wystarczającej ilości miejsca. I do zawijania kolumn, jeśli jest określony.
  • Możliwość określenia procentowej szerokości na kolumnę.
    (Aktualizacja - wersja tego pomysłu została właśnie zaimplementowana we wtyczce za pomocą funkcji Wagi)
  • Chociaż niekoniecznie musiałoby to zależeć od zespołu Anima, Sketch powinien również wprowadzić obsługę zmiennych, zwłaszcza teraz z właściwościami takimi jak odstępy, wysokości minimalne i maksymalne oraz inne wartości, które powinny być spójne na kilku warstwach. Zmienne te mogą być dalej wykorzystane do mapowania również na kolory i wspomagania procesu przekazywania Sass.

Cóż, to wszystko co mam! Chciałem jeszcze raz wykrzyknąć zespół w Anima. Są niesamowicie utalentowani, responsywni i zachęcający, dlatego pamiętaj, aby wesprzeć ich ciężką pracę! Dołącz do ich strony na Facebooku.

Jeśli masz jakieś pytania lub (miłe!) Komentarze, nie krępuj się napisać poniżej lub skontaktować się z nami na Twitterze.