Автоматично оформление: Представяне на стекове - Flexbox за скица

Стековете променят всичко, което знаехте за отзивчивото оформление в Sketch

Актуализация: Експорт на отзивчиви HTML и CSS от скица с Anima ToolKit.
Създайте отзивчиви и интерактивни прототипи с висока Fidelity, All Inside Sketch

Точно като Flex Box в CSS, UIStackView в iOS и FlexboxLayout в Android - Auto-Layout's с новата си функция Stacks отново променя играта.

За първи път потребителите на приложението Sketch могат да прилагат технологията Flexbox директно в Sketch, без да използват CSS.

Вярваме, че предоставянето на мощни дизайнерски концепции, достъпни за дизайнерите, е от ключово значение за развитието на екосистемата на дизайна.

Flexbox промени играта и въпреки че минаха няколко години, за да я използвате, трябва да използвате CSS в браузър и следователно недостъпен за много дизайнери.

Stacks е много проста и интуитивна версия на Flexbox, като същевременно е мощна. Тя дава възможност на дизайнерите да мислят и да проектират по отношение на колони, редове и мрежи - прави дизайна по-последователен.

Какво е стек?

A Stack е специален тип група, който определя оформлението на своите дъщерни слоеве.

Иконата Stack Group има специален син цвят и индикатор за нейната посока.За подреждане на слоеве - изберете ги и щракнете върху бутона Stack в панела за автоматично разположение.
Tip Професионален съвет:
- Използването на стекове води до последователност.
- Постоянството води до яснота.
- Използването на стекове води до яснота.

Стека има 3 свойства:

  • Посока: Определя дали подреждането на детски слоеве е хоризонтално или вертикално.
Посока
  • Подравняване: Може да бъде отгоре / в центъра / отдолу / разпространение
Подравняване
  • Разстояние: Определя разстоянието между всяко ниво на дете.
Стековете могат да бъдат вложени!
Вложени стекове

Решете този пъзел!

9 от 10 дизайнери се объркват за първи път!
Колко стека са на тази снимка:
Превъртете надолу, за да разкриете отговора

Правилният отговор е 3:

Иконата на стека има специален син цвят и индикатор за неговата посока.
  1. Малка червена хоризонтална стека с 2 вътрешни позиции: звезди и брой на прегледа.
  2. Син вертикален стек със среден размер с 4 вътрешни позиции: Име на приложението, автор, категория и група 1 на стека.
  3. Най-големият зелен хоризонтален стек с 2 вътрешни елемента: икона на приложение и група 2 стека.

Някои интересни факти относно Stacks:

  • Стековете са чудесен начин да се определят ограниченията на оформлението между слоевете на братята.
  • Добавянето или премахването на слоеве в стека пренастройва своите дочервени слоеве.
  • Текстовият слой може да избута братя и сестри. Изтегли
  • Плъзгането и пускането е лесен начин за пренареждане на детските слоеве.

Ръководство за разглеждане на видео от Пабло Стенли

Flex Grid с помощта на Stack

️ Алън Рой, плодовит член на нашата бета програма, създаде система Flex Grid, използвайки Stack.

Той написа подробно обяснение, включително 10-минутно видео. Горещо препоръчваме да прочетете и гледате този страхотен урок. Това е отваряне на ума.

Нашата мисия на Anima е да дадем възможност на дизайнерите да притежават своя дизайн. Ние създаваме работен поток, който дава възможност на дизайнерите да определят, уточняват и архитектират всички битове и части, които обхващат потребителски интерфейс / опит и в крайна сметка автоматично генерират естествен код, който е 1: 1 спрямо първоначалното определение. Това позволява на дизайнерите да бъдат независими от други страни в екипа, като например инженеринг, които понякога имат различни приоритети от проектантския екип.

Вземете Anima Plugin (Автоматичното оформление вече е Anima Layout)

Ръководство и документация

Създайте отзивчиви и интерактивни прототипи с висока Fidelity, All Inside Sketch

От вашите приятели в Anima App

За дискусия не се колебайте да се присъедините към нашата Facebook група