Чувствителна гъвкава мрежа в скица, използвайки AutoLayout и Stack групи

Подобряване на дизайнерските системи за структура, модулност и мащаб

Инструменти като FlexBox в CSS, UIStackView в iOS и FlexboxLayout в Android отдавна дават на разработчиците необходимите работни процеси, за да се справят с множеството адаптивни и отзивчиви гледни точки, които съществуват днес.

За дизайнерите процесът на проектиране на оформлението в някои от любимите ни инструменти за дизайн винаги е бил по-ръчен, по-статичен, по-досаден и като цяло по-малко математически прецизен. Но благодарение на невероятната работа на хората от Анима, скоро можем да имаме структурата и гъвкавостта, от която се нуждаем, за да преодолим по-добре тази празнина.

С новата функция Stacks, която е вградена в най-новата приставка за автоматично разположение, сега имаме работен процес, който по-добре побира изхода на потребителския интерфейс и ни позволява да постигнем повече последователност и поддръжка в нашите дизайнерски системи. (Отказ от отговорност - Тази концепция все още е в начален етап. Не всеки тип оформление ще се възползва от тази система, така че смесете и съвпадайте, както сметнете за добре).

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

Във видеото по-долу събрах доказателство за концепция на гъвкавата мрежа, за да демонстрирам страхотността на стековете. Това е артборд, който отразява структурата на основна уеб страница.

Докато са все още в ранните етапи на проучване, следната функционалност е изпечена в шаблона:

  • Работен плот за мобилни устройства с няколко кликвания.
  • Дъските са с възможност за промяна на размера и подравняването / разпределението на мрежата не се нарушава
  • Мрежа, структурирана от:
  • тяло
     - Заглавие
     - Основна
     - - секции
     - - - групи от редове (има слой за оразмеряване на кутия)
     - - - - редове
     - - - - - колони
     - - - - - - модули
     - - - - - - - компоненти (вложени символи с вътрешна логика)
     - Footer
  • Използвайте вложени символи, дефинирани от комбинация от свойства на Sketch Resize, фиксиране на автоматичен изход и групи от групи, за да създадете модулна система от сменяеми компоненти.
  • Оформлението се приспособява към ширината на таблото (съдържанието е с максимална ширина 1200px, а мобилните имат вградени улуци).
  • Разнообразие от разпределения на колони и лесно свиване / модифициране на улуци.
  • и
    растат и се свиват независимо от
    .
  • Промените във височината на
    натискат
    надолу в таблото, като същевременно запазват маржовете и подплънките непокътнати, както би направила уеб страница.
  • Височината на може да се регулира, за да повлияе на височината на дъщерните колони
  • Подравняването на колоните (отгоре, в средата, отдолу, участък) може да бъде определено на нивото на реда.
  • Добавянето на нова колона (или изтриване на такава) от реда автоматично настройва ширината на колоните на братята, за да съответства съответно.
  • Добавянето на нов модул в колоната ще накара тази колона да расте вертикално (модулите съдържат всякакъв брой типове съдържание, като изображения, текст, списъци, таблици, групи и символи)
  • Изравняването на модулите (вляво, в центъра, вдясно, участък) може да бъде определено на ниво колона.
  • символ размяна на компоненти за замяна на съдържание или прикрепване на нови слоеве към съществуващия компонент.
  • Таблото за десктоп е създадено за използване на 8-кратна решетка.

Файлът на скицата

Ето го. Чувствайте се свободни да го подобрите по всякакъв начин и ме уведомете.
* ВАЖНО * - Файлът НЯМА да работи, освен ако не разполагате с последната версия на Auto Layout с поддръжка на стекове (.0.2.0 от това писане).

https://cl.ly/2v2I373P2E1f

Някои заключителни мисли

Надявам се, че това беше полезно за някои хора. Знам, че ще проуча възможностите на Autolayout и Stacks по-задълбочено. От тази версия забелязах няколко малки странности с математическото закръгляне, но се надявам, че те ще бъдат подредени във времето. Сред някои от молбите, които предложих на разработчиците, мисля, че те могат да бъдат ценни.

  • Възможността за добавяне на фон към подредена група (родителски ред на колоните), без да се засяга логиката на стека. В HTML / CSS това просто ще бъде направено на ниво или „div“, но Sketch не позволява начин да се направи това от сега.
    Има подход към това да се направи точно сега, който включва групиране на фонов слой с подредена група и прикрепване на bg в горната / лявата / 100% ширина и височина и докато фонът расте, за да побере съдържанието, той не се свива, когато съдържанието се премахва. Вярвам, че свиването вече е в списъка на екипите TO-DO.
  • Въвеждането на точки на прекъсване в таблото и размяна на символи на базата на артборда (размяна на 4-елементна навигация с икона на хамбургер, когато борда на артерия <400px, или още по-добре, като се използва подход за контейнерни заявки.
  • Със споменатите точки на прекъсване, възможността за превключване между хоризонтални и вертикални подредени групи, така че колоните да се подреждат една върху друга, когато няма достатъчно място. И за колоните да се увиват, ако е посочено.
  • Възможността за определяне на процентна ширина на колона.
    (Актуализация - Версия на тази идея току-що е внедрена в приставката с помощта на функцията Тежести)
  • Въпреки че това не е задължително да попадне на екипа на Anima, Sketch трябва също да въведе поддръжка за променливи, особено сега със свойства като разстояние, min и max-височини и други стойности, които трябва да се поддържат последователни в няколко слоя. Тези променливи могат да бъдат използвани по-нататък за картографиране на цветовете и за подпомагане на процеса на предаване на Sass.

Е, това е всичко, което имам! Просто исках за пореден път да извикам на екипа на Анима. Те са невероятно талантливи, отзивчиви и покани, така че, моля, не забравяйте да подкрепите тяхната упорита работа! Присъединете се към тяхната страница във Facebook.

Ако имате някакви въпроси или (хубави!) Коментари, моля не се колебайте да публикувате по-долу или да се свържете с Twitter.