Phát hành hệ thống thiết kế

Cung cấp đầu ra được kết nối với nhau để nhận con nuôi theo thời gian

# 1 trên 6 của loạt phát hành Hệ thống thiết kế:
Đầu ra | Nhịp | Phiên bản | Phá vỡ | Phụ thuộc | Quá trình

Các công ty nhận ra một hệ thống thiết kế giá trị từ khi áp dụng các sản phẩm sử dụng một hệ thống để thực hiện và vận chuyển những trải nghiệm mà khách hàng của họ sử dụng. Là một phần của chuỗi giá trị đó, hệ thống sẽ phát hành các tính năng theo thời gian. Điều này đặt hệ thống vào tay khách hàng của mình: các nhà thiết kế và kỹ sư thực hiện công việc của họ.

Đội ngũ hệ thống mạnh thực hiện phát hành nghiêm túc. Họ không thấy mình như phát hành mã thư viện thành phần. Thay vào đó, họ cung cấp nhiều đầu ra hơn: mã thông báo thiết kế, tài liệu, tài sản thiết kế và các tài nguyên khác.

Loạt bài này mô tả nhiều khía cạnh của việc phát hành các hệ thống thiết kế. Nó bắt đầu bằng cách định nghĩa một hệ thống, nhiều đầu ra và nơi chúng được phân phối. Các bài viết tiếp theo bao gồm các chủ đề về nhịp, phiên bản, phá vỡ các thay đổi, phụ thuộc và cách tiếp cận từng bước.

Những câu chuyện này phản ánh những gì tôi đã học được khi phát hành các hệ thống làm việc với các đội như Discovery Education, Morningstar, Target và REI. Chúng được nâng lên bởi những hiểu biết từ các đồng nghiệp tại Salesforce, Adobe, Atlassian, Shopify và Financial Times. Cảm ơn đã ân cần chia sẻ thời gian và thực hành của bạn!

Đầu ra: Phát hành cái gì?

Các chương trình thiết kế hệ thống phát hành nhiều loại đầu ra, không chỉ mã. Do đó, một hệ thống nên phân biệt và truyền đạt phạm vi đầu ra được phiên bản này tới các nhà phát triển, nhà thiết kế và các khách hàng khác.

Mật mã, nguồn gốc của sự thật

Hầu hết các hệ thống cung cấp một nguồn sự thật của mã lớp trình bày là:

  • Thư viện thành phần UI dưới dạng HTML Markup & CSS. Thường được gọi là CSS CSS, gói này Tiêu thụ của gói này dựa trên việc sử dụng hoặc biên dịch CSS như một đường cơ sở kiểu trực quan nhất quán cùng với việc sử dụng các đoạn mã HTML.

và / hoặc

  • Thư viện thành phần giao diện người dùng dưới dạng Javascript: Nhiều hệ thống bao bọc HTML & CSS bằng JavaScript để củng cố logic, đóng gói kiểu và dễ dàng tích hợp và bảo trì trực tiếp hơn trong một khung lựa chọn. Trong khi hầu hết các thư viện nhắm đến một khung cụ thể (React, Vue, Ember, Angular, thì), các tín hiệu ngành cho thấy sự thay đổi trong việc tạo các thành phần web cho tất cả các khung. Sáu nỗ lực hệ thống cuối cùng của tôi? Cuối năm 2017: Vanilla HTML, Vanilla HTML. Đầu năm 2018: Phản ứng, Vue. Cuối năm 2018: Thành phần web, Thành phần web.

Ngoài ra, các đầu ra nổi bật khác có thể được phát hành riêng:

  • Mã thông báo thiết kế thiết lập một phong cách trực quan thông qua các cặp giá trị thuộc tính có ý nghĩa về mặt ngữ nghĩa. Mã thông báo là các biến có sẵn ở nhiều định dạng để sử dụng trên các nền tảng (web, iOS, Android), bộ tiền xử lý (Sass và LESS) và khung (như React). Một số hệ thống quản lý mã thông báo trong kho lưu trữ tách biệt với mã thành phần UI. Do đó, thư viện của họ - cùng với các triển khai khác - cũng có thể phụ thuộc vào mã thông báo dưới dạng gói.
  • Ứng dụng / Trang web demo như một môi trường với các ví dụ trang được xây dựng bằng thư viện thành phần. Bản demo cũng cho hướng dẫn và tạo mẫu nhanh, bao gồm cả các nhà thiết kế!
  • Các thành phần đa nền tảng phù hợp cho iOS, Android và Windows.

Tài sản thiết kế

Hầu hết các đội giới hạn hiểu biết về những gì họ phát hành cho đơn giản, chúng tôi phát hành mã. Họ mở mắt để họ nhận ra rằng họ xuất bản rất nhiều công cụ khác thay đổi theo thời gian. Chúng bao gồm:

  • Bộ công cụ thiết kế dưới dạng tệp mẫu và thư viện ký hiệu được cung cấp trong phần mềm thiết kế. Ngày nay, hầu như luôn luôn là Phác thảo. Ngày mai, Figma, Invision Studio, và các đối thủ mới nổi khác?
  • Phông chữ, Biểu tượng và thậm chí Bộ hình ảnh Origami Origami do một hệ thống mà Vai trò thường được mong đợi trong việc phân phối và phiên bản các thư viện đó.
  • Các tài nguyên thiết kế khác như minh họa và tô màu các tệp ASE / CLR làm bàn đạp cho tác phẩm nghệ thuật bespoke. Các bộ sưu tập này thay đổi chậm, ít chính thức và thông qua sự đóng góp của các thành viên cộng đồng không phải là một phần của nhóm cốt lõi hệ thống. Tuy nhiên, từ quan điểm của khách hàng và hệ thống thông tin liên lạc của hệ thống, nó là một phần của hệ thống.

Trang web tài liệu

Hệ thống thiết kế cần một ngôi nhà, một nơi mà mọi người đều biết rằng họ có thể tìm thấy một con đường dẫn đến mọi thứ sẽ có những thứ mới nhất và tuyệt vời nhất. Nằm trong một URL đáng nhớ, nó thường được xây dựng với các thành phần UI dành riêng cho nhiệm vụ của nó.

  • Trang web Tài liệu mô tả các tính năng (như nút), trên người dùng mới và kích hoạt các quy trình như nhận trợ giúp hoặc đóng góp. Các nhóm xây dựng trang web thường xuyên hơn bằng cách sử dụng trình tạo trang tĩnh hoặc ít thường xuyên hơn với hệ thống quản lý nội dung.
  • Các thành phần tài liệu - cặp mã-ví dụ, không-không, mã hex, trình thám hiểm thành phần - phụ thuộc vào thư viện thành phần UI và thường chỉ phục vụ trang web doc. Các thành phần như vậy có thể được phiên bản với trang web tài liệu hoặc là thư viện phiên bản thứ ba, riêng biệt liên quan đến tài liệu và các thành phần UI mà chúng nằm giữa.

Điểm đến: Nó đi đâu?

Khi phân phối mã và tài sản thiết kế, nó rất quan trọng để cung cấp mã theo cách dễ sử dụng nhất bởi các kỹ sư tiếp nhận của bạn. Điều này có nghĩa là một số hệ thống phải đưa ra lựa chọn qua nhiều lựa chọn, trong khi những hệ thống khác có thể dựa vào một lựa chọn duy nhất là tiêu chuẩn tổ chức.

Đối với mã

  • TỐT NHẤT: Các cơ quan đăng ký như npmjs (hoặc một đối tác nội bộ như nexus của Sonatype) cung cấp quyền truy cập và quản lý các gói mã được phát hành. Các nhà phát triển sau đó sử dụng các công cụ như bower, npm, sợi, gói web và babel để tích hợp và nâng cấp mã đó một cách trơn tru trong môi trường của họ.
  • TỐT HƠN: Tài sản được lưu trữ trên CDN để liên kết trực tiếp đến kiểu và tập lệnh được phiên bản cũng như phông chữ và biểu tượng thay đổi chậm hơn.
  • CHỈ OK: Truy cập kho lưu trữ vào Github, Bitbucket hoặc muốn sao chép, fork hoặc biên dịch, sử dụng và có thể - cuối cùng - đóng góp.
  • NẾU CẦN THIẾT: Tải xuống mã trực tiếp, thường là của tệp ZIP ZIP của tài sản hệ thống được biên dịch hoặc chưa biên dịch từ trang tài liệu để sử dụng cục bộ và / hoặc tích hợp thủ công vào một kho lưu trữ riêng.

Bootstrap và Material Design Lite là những ví dụ phát hành cho hơn 2 điểm đến.

Đối với bộ công cụ thiết kế

  • TỐT NHẤT: Tạo Mới dưới dạng đường dẫn được đồng bộ hóa, được nhúng trong công cụ thiết kế Menu menu để tạo một phiên bản mới từ một mẫu.
  • TỐT HƠN: Được lập phiên bản và phân phối bằng phần mềm quản lý tài sản thiết kế dựa trên sự cho phép như Tóm tắt hoặc Lingo.
  • TỐT: Tải xuống bộ công cụ trực tiếp từ một trang tài liệu, với phiên bản rõ ràng được chỉ định và liên kết Bắt đầu tài liệu gần đó.
  • CHỈ OK: Ổ đĩa được chia sẻ, thông qua URL nội bộ được công khai và có thể đơn giản hóa (như http: //system.uitoolkit).
  • KHÔNG TỐT HƠN: Được chôn trên một số trang cấp bốn trên một trang wiki hầu như không có tổ chức, nhiều người có thể tìm thấy.

Tiếp theo → # 2. Nhịp