Чуйна гнучка сітка в ескізі за допомогою функції автоматичної розстановки та групи стеків

Удосконалення систем проектування структури, модульності та масштабу

Такі інструменти, як FlexBox в CSS, UIStackView в iOS та FlexboxLayout в Android, давно дають розробникам необхідні робочі процеси для обробки безлічі адаптивних та чуйних поглядів, які існують сьогодні.

Однак для дизайнерів процес дизайну макетів у деяких наших улюблених інструментів дизайну завжди був більш ручним, більш статичним, виснажливим і, як правило, менш математично точним. Але завдяки чудовій роботі людей з Аніми, ми можемо незабаром мати структуру та гнучкість, які нам потрібні, щоб краще усунути цей пробіл.

Завдяки новій функції Stacks, яка вбудована в останній плагін Auto-Layout, тепер у нас є робочий процес, який краще відповідає виходу інтерфейсу користувача і дозволяє нам досягти більш узгодженості та ремонтопридатності в наших системах проектування. (Відмова від відповідальності. Ця концепція ще знаходиться на ранній стадії. Не кожен тип компонувань виграє від цієї системи, тому змішуйте та співпадайте, як вважаєте за потрібне).

Демонстрація

На відео нижче я зібрав схему гнучкої сітки, що підтверджує концепцію, щоб продемонструвати дивовижність стеків. Це вікно мистецтва, яке відображає структуру основної веб-сторінки.

Ще на ранніх дослідницьких етапах наступна функціональність вкладається в шаблон:

  • Робочий стіл для мобільних пристроїв у декілька кліків.
  • Структурні панелі можна змінювати, і вирівнювання / розподіл сітки не порушується
  • Сітка структурована:
  • Тіло
     - Заголовок
     - Основна
     - —розділи
     - - - групи рядків (має прошивний розмір коробки)
     - - - - рядки
     - - - - - стовпці
     - - - - - - модулі
     - - - - - - - компоненти (вкладені символи з внутрішньою логікою)
     - Футер
  • Використовуйте вкладені символи, визначені комбінацією властивостей Sketch Resize, автоматичного закріплення і встановлення груп стеків для створення модульної системи компонентів, що можна змінювати.
  • Макет підлаштовується під ширину артбордів (вміст має максимальну ширину 1200 пікселів, а мобільний має вбудовані жолоби).
  • Різноманітність розподілів стовпців та легке згортання / модифікація жолобів.
  • і
    ростуть і скорочуються незалежно від
    .
  • Зміни висоти на
    підштовхують
    внизу в області обкладинки, зберігаючи поля недоторканими, як веб-сторінки.
  • Висоту можна регулювати, щоб впливати на висоту дочірніх стовпців
  • Вирівнювання стовпців (верхній, середній, нижній, протяжний) можна визначити на рівні рядків.
  • Додавання нового стовпця (або видалення його) з рядка автоматично регулює ширину стовпців братів та сестер відповідно до відповідної відповідності.
  • Додавання нового дочірнього модуля в стовпчик зробить цей стовпчик вертикально (модулі містять будь-яку кількість типів вмісту, таких як зображення, текст, списки, таблиці, групи та символи)
  • Вирівнювання модулів (лівий, центр, правий, розтягнутий) можна визначити на рівні стовпця.
  • символ поміняти компоненти, щоб замінити вміст або прикріпити нові шари до існуючого компонента.
  • Стільниця робочого столу створена для використання 8-кратної сітки базової лінії.

Файл ескізу

Ось. Сміливо вдосконалюйте його будь-яким способом і повідомте мене.
* ВАЖЛИВО * - Файл НЕ буде працювати, якщо у вас не буде останнього випуску автоматичної розкладки з підтримкою стеків (.0.2.0 з моменту написання)

https://cl.ly/2v2I373P2E1f

Кілька заключних думок

Я сподіваюся, що це було корисно для деяких людей. Я знаю, що я буду вивчати можливості авторозмикання та стеки глибше. Щодо цієї версії, я помітив кілька невеликих химерностей із математичним округленням, але, сподіваємось, вони будуть впорядковані в часі. Серед деяких запитів, які я запропонував дияволам, я думаю, що вони можуть бути цінними.

  • Можливість додавати фон до складеної групи (батьківський рядок стовпців), не впливаючи на логіку стека. У HTML / CSS це було б просто зроблено на рівні або «div», але ескіз не дозволяє зробити це так, як зараз.
    Існує підхід до цього прямо зараз, який передбачає групування фонового шару з складеною групою та закріплення bg вгору / вліво / 100% ширини та висоти, і хоча фон росте для розміщення вмісту, він не скорочується, коли вміст видалено. Я вважаю, що скорочення вже в списку TO-DO команди.
  • Введення точок перерви в обкладинці та заміни символів на основі обкладинки (заміна 4-елемента елемента навичкою на піктограму гамбургера, коли артборд <400px, а ще краще, використовуючи підхід до запитів контейнерів.
  • За допомогою зазначених точок розриву можливість перемикання між горизонтальними та вертикальними складеними групами, таким чином, що стовпчики укладаються один на одного, коли не вистачає місця. І для стовпців, щоб обгортати, якщо вони вказані.
  • Можливість вказувати процентну ширину на стовпець.
    (Оновлення. Версія цієї ідеї щойно реалізована в плагіні за допомогою функції "Ваги")
  • Хоча це не обов'язково потраплятиме до команди Anima, Sketch також повинен запровадити підтримку змінних, особливо зараз із властивостями, такими як інтервал, min та max-висоти та інші значення, які слід підтримувати в декількох шарах. Ці змінні можуть бути також використані для відображення кольорів та надання допомоги у процесі передачі Sass.

Ну, це все, що я маю! Просто хотів ще раз вигукувати команду в Анімі. Вони неймовірно талановиті, чуйні та запрошені, тому будь ласка, не забудьте підтримати їхню наполегливу працю! Приєднуйтесь до їхньої сторінки у Facebook.

Якщо у вас є якісь запитання або (приємні!) Коментарі, будь ласка, не соромтесь розміщувати нижче або звертатися до Twitter.