Освобождаване на дизайнерски системи

Предоставяне на взаимосвързани изходи на осиновителите във времето

№ 1 от 6 от поредицата Освобождаващи системи за дизайн:
Резултати | Каданс | Версии | Разбиване | Зависимости | процес

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

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

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

Тези истории отразяват това, което научих да освобождавам системи, работещи с екипи като Discovery Education, Morningstar, Target и REI. Те са повдигнати от прозрения на колегите от Salesforce, Adobe, Atlassian, Shopify и Financial Times. Благодарим ви, че споделихте грациозно вашето време и практики!

Резултати: Какво се освобождава?

Програмите за дизайнерски системи пускат много видове изходи, а не само код. В резултат на това една система трябва да диференцира и да съобщи този диапазон от реализирани резултати на разработчици, дизайнери и други клиенти.

Код, източникът на истината

Повечето системи предлагат един източник на истинност на кода на презентационния слой като:

  • UI Component Library като HTML маркиране и CSS. Често наричан „CSS“, консумацията на този пакет зависи от използването или компилирането на CSS като последователна основна линия на визуален стил, съчетана с повторно използване на HTML фрагменти.

и / или ...

  • UI Components Library като Javascript: Много системи обгръщат HTML и CSS с JavaScript, за да подсилят логиката, да капсулират стил и да улеснят интеграцията и поддръжката по-директно в рамките на избор. Докато повечето библиотеки са насочени към конкретна рамка (React, Vue, Ember, Angular, ...), индустриалните сигнали предполагат преминаване към изработка на уеб компоненти за всички рамки. Последните ми шест системни усилия? По-късно 2017: HTML на ванилия, HTML на ванилия. В началото на 2018 г.: Реагирайте, Vue. По-късно 2018: Уеб компоненти, уеб компоненти.

В допълнение, други видни резултати могат да бъдат пуснати отделно:

  • Дизайнерски жетони, установяващи визуален стил чрез семантично смислени двойки стойност-стойност. Токените са променливи, достъпни в много формати за използване в платформи (уеб, iOS, Android), препроцесори (Sass и LESS) и рамки (като React). Някои системи управляват маркери в хранилище, отделно от кода на компонента на потребителския интерфейс. В резултат на това тяхната библиотека - заедно с други реализации - също може да зависи от маркера като пакет.
  • Демонстрационни приложения / сайтове като среда с примери за страници, изградени с помощта на компонентната библиотека. Демонстрацията също е за уроци и бързо прототипиране, включително от дизайнери!
  • Компоненти на кросплатформа, подходящи за iOS, Android и Windows.

Дизайнерски активи

Повечето екипи ограничават разбирането на това, което пускат на простото „ние пускаме код.“ Отваряне на очите им е да осъзнаят, че публикуват толкова много други инструменти, които се променят с времето. Те включват:

  • Дизайн инструментариите като файлове с шаблони и библиотеки със символи, предлагани в софтуера за дизайн. Днес почти винаги Sketch. Утре, Figma, Invision Studio и други възникващи конкуренти?
  • Шрифтове, икони и дори набори от изображения на Origami поради често очакваната роля на системата в разпространението и версията на такива библиотеки.
  • Други дизайнерски ресурси като илюстрация и цветни файлове ASE / CLR като трамплин за поръчка на произведения на изкуството. Тези колекции се променят бавно, по-малко формално и чрез участия на членове на общността, които не са част от основния екип на системата. И все пак, от гледна точка на клиента и комуникациите на системата, тя е част от системата.

Сайт за документация

Дизайнерските системи се нуждаят от дом, място, за което всички знаят, че могат да намерят път към всичко, което ще има най-новото и най-доброто. Разположен на запомнящ се URL адрес, той често се изгражда с компоненти на потребителския интерфейс, специфични за неговата мисия.

  • Сайтовете за документация описват функции (като бутон), вграждане на нови потребители и задействат процеси като получаване на помощ или принос. Екипите изграждат сайтове по-често, използвайки статичен генератор на сайтове или по-рядко със система за управление на съдържанието.
  • Компонентите на документацията - код-пример-двойка, do-dont, шестнадесетичен код, компонент-Explorer - зависят от библиотеката на компоненти на потребителския интерфейс и обслужват обикновено само сайта на doc. Такива компоненти могат да бъдат обособени с документационния сайт или като трета, отделно версионна библиотека спрямо doc и UI компонентите, между които почиват.

Дестинации: Къде отива?

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

За код

  • НАЙ-ДОБРЕ: Регистри като npmjs (или вътрешен партньор като връзката на Sonatype), които осигуряват достъп и управление на освободени кодови пакети. След това разработчиците използват инструменти като bower, npm, прежда, webpack и babel, за да интегрират и надграждат този код гладко в своите среди.
  • ПО-ДОБРО: Хоствани активи на CDN за директни връзки към версията на стил и скрипт, както и шрифтове и икони, които се променят по-бавно.
  • ПРОСТО ОК: Достъп на хранилище до Github, Bitbucket или други подобни, за да клонирате, разклонявате или компилирате по друг начин, използвайте и може би - в крайна сметка - да допринесете.
  • АКО НЕОБХОДИМО: Изтегляния с директен код, обикновено „ZIP файл“ на компилирани или некомпилирани системни активи от сайта на doc за локално използване и / или ръчна интеграция в отделно хранилище.

Bootstrap и Material Design Lite са примери за 2+ дестинации.

За инструментариите за дизайн

  • НАЙ-ДОБРО: Създайте нов като синхронизиран, вграден път в менюто на инструмента за проектиране, за да създадете нов екземпляр от шаблон.
  • ПО-ДОБРО: Усъвършенстван и разпространен с помощта на софтуер за управление на активи, базиран на разрешения, като абстракт или Lingo.
  • ДОБРО: Директно изтегляне на инструментариум от сайт за документация, с посочена ясна версия и свързан с него Документ за работа наблизо.
  • ПРОСТО ОК: Споделен диск, чрез добре рекламиран и евентуално опростен вътрешен URL адрес (например http: //system.uitoolkit).
  • НЕ Е ДОБРЕ ВЕЧЕ: Погребан на някоя страница от четвърто ниво в едва организиран уики сайт много хора не могат да намерят.

Следващ → # 2. ритъм