Випуск систем проектування

Постачання взаємозалежних результатів для усиновлювачів у часі

№ 1 з 6 із серії випуску систем дизайну:
Виходи | Каденція | Версії | Порушення | Залежності | Процес

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

Сильні команди системи сприймають випуски серйозно. Вони не бачать, як випускають просто компонентний код бібліотеки. Натомість вони дають набагато більше результатів: дизайнерські жетони, документація, засоби дизайну та інші ресурси.

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

Ці історії відображають те, що я навчився випускати системи роботи з такими командами, як Discovery Education, Morningstar, Target та REI. Вони підняті на думку колег із Salesforce, Adobe, Atlassian, Shopify та Financial Times. Дякуємо за те, що милості поділилися своїм часом та практикою!

Виходи: Що випущено?

Програми дизайнерських систем випускають багато типів виходів, а не лише код. Як результат, система повинна диференціювати та передавати цей діапазон варіантів випуску розробникам, дизайнерам та іншим замовникам.

Кодекс, джерело правди

Більшість систем пропонує єдине джерело істинності коду шару презентації як:

  • Бібліотека компонентів інтерфейсу як розмітка HTML та CSS. Часто його називають "CSS", споживання цього пакета залежить від використання або компіляції CSS як послідовної базової лінії візуального стилю в поєднанні з повторним використанням фрагментів HTML.

та / або ...

  • Бібліотека компонентів інтерфейсу як Javascript: Багато систем обробляють HTML і CSS JavaScript, щоб зміцнити логіку, інкапсулювати стиль, а також полегшити інтеграцію та обслуговування безпосередньо в рамках обраного вами. У той час як більшість бібліотек націлені на конкретні рамки (React, Vue, Ember, Angular,…), сигнали галузі дозволяють перейти до створення веб-компонентів для всіх фреймворків. Мої останні шість системних зусиль? Пізніше 2017: Ванільний HTML, Ванільний HTML. Початок 2018 року: React, Vue. Пізніше 2018 року: веб-компоненти, веб-компоненти.

Крім того, окремі результати можуть бути випущені окремо:

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

Проектні активи

Більшість команд обмежують розуміння того, що вони випускають, простим "ми випускаємо код". Це відкриття для них, щоб зрозуміти, що вони публікують так багато інших інструментів, які змінюються з часом. Вони включають:

  • Дизайнерські набори інструментів як файли шаблонів та бібліотеки символів, пропоновані в програмному забезпеченні. Сьогодні майже завжди ескіз. Завтра, Figma, Invision Studio та інші нові конкуренти?
  • Шрифти, значки та навіть набори зображень Origami завдяки часто очікуваній ролі системи в розповсюдженні та версії таких бібліотек.
  • Інші ресурси дизайну, такі як ілюстрація та кольорові файли ASE / CLR, як плацдарм для замовлення художніх робіт. Ці колекції змінюються повільно, менш формально і завдяки внескам членів громади, які не є частиною основної команди системи. Однак, з точки зору замовника та комунікацій системи, це частина системи.

Сайт документації

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

  • Документальні сайти описують такі функції (як кнопка), вбудовані нові користувачі та запускають такі процеси, як отримання довідки чи внесок. Команди частіше створюють сайти, використовуючи генератор статичних сайтів або рідше за допомогою системи управління вмістом.
  • Компоненти документації - код-приклад-пара, do-dont, шістнадцятковий код, провідник компонентів - залежать від бібліотеки компонентів інтерфейсу та зазвичай обслуговують лише сайт doc. Такі компоненти можуть бути узгоджені з сайтом документації або як третій, окремо розробленою бібліотекою щодо doc та компонентів інтерфейсу, між якими вони перебувають.

Дестинації: Куди це йде?

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

Для кодексу

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

Bootstrap і Material Design Lite - приклади, що випускають до 2+ напрямків.

Для дизайнерських наборів інструментів

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

Далі → №2. Каденція