Thay đổi trực quan trong hệ thống thiết kế

Chúng tôi tôn trọng API mã. Nhưng những gì về màu sắc, loại và không gian?

# 4 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 hệ thống thiết kế thiết lập một phong cách trực quan cơ bản mà một phụ thuộc thiết yếu. Những lựa chọn này - màu sắc, kiểu chữ, không gian và nhiều hơn nữa - được chỉ định mạnh mẽ và dự kiến ​​sẽ ổn định, dự đoán thay đổi phát hành bằng cách phát hành. Khi một người áp dụng nâng cấp, một hệ thống thiết kế không nên phá vỡ công cụ của họ một cách bất ngờ.

Vì vậy, hãy tự hỏi

Những người chấp nhận có thể nâng cấp lên một bản phát hành nhỏ có thể tự tin rằng UI của họ đã thắng được phá vỡ do thay đổi hình ảnh của hệ thống không?

Phiên bản ngữ nghĩa (SemVer) cung cấp các tiêu chí rõ ràng để truyền đạt sự thay đổi qua các bản phát hành bằng cách sử dụng các chỉ định chính, phụ và bản vá. Mọi hệ thống thiết kế mà tôi gặp đều sử dụng SemVer và theo dõi thay đổi trong giao diện lập trình ứng dụng hoặc API của gói. Đây là lãnh thổ quen thuộc cho các nhà phát triển mã hóa đạo cụ JavaScript và đánh dấu HTML. Phá vỡ API của bạn và phiên bản tiếp theo của bạn phải tăng phiên bản lên bản phát hành chính tiếp theo, chẳng hạn như từ 1.4.0 đến 2.0.0.

Chỉ định một giao diện cho phong cách hình ảnh sáng tác đã vượt qua chúng ta. Nó cảm thấy rất khó để xác định các quy tắc đơn giản, rõ ràng để theo dõi sự thay đổi phong cách. Các nhà sản xuất hệ thống đấu tranh để nói rõ điều gì hoặc tại sao Thay đổi phong cách này phá vỡ một người áp dụng CƠ SỞ BẠC ĐÀO so với Thay đổi phong cách đó không phải là. Các nhóm hệ thống tài liệu tiêu chí như vậy. Tôi hỏi điều gì Các loại thay đổi trực quan cụ thể kích hoạt một phiên bản chính cho bạn? Câu trả lời của họ: ¯ \ _ () _ /.

Trong bài viết này, tôi đề xuất rằng ít nhất các tiêu chí bảo đảm Màu sắc, Kiểu chữ và Không gian tạo thành sự thay đổi. Có những tính chất khác để xem xét, quá. Một hệ thống thiết kế có thể xác định, ghi lại và truyền đạt các tiêu chí này để người chấp nhận có thể nâng cấp phát hành bằng cách phát hành một cách tự tin.

Màu sắc phá vỡ

Hầu hết các nhóm hệ thống đều cảm thấy an toàn trong việc điều chỉnh màu nền của nút chính. Có lẽ động lực của họ là cải thiện độ tương phản so với nhãn văn bản thường có màu trắng. Họ nói, hãy để tối tăm một chút, họ nói. Nâng cấp chúng tôi cải thiện nút Tương phản màu có thể truy cập từ xếp hạng AA đến AAA.

Điều chỉnh màu nền của nút chính

Chắc chắn, các đội áp dụng không nên ghi đè lên một bộ màu chính của nút chính tiêu chuẩn. Ghi đè một lựa chọn hệ thống cắt đứt kết nối với một hệ thống. Tại thời điểm đó, một người áp dụng là của riêng họ. Do đó, điều chỉnh sắc thái của nút chính Màu nền là an toàn và không phải là một thay đổi đột phá.

Tuy nhiên, thay đổi màu sắc ở nơi khác có thể khiến người chấp nhận gặp nguy hiểm. Hãy xem xét các kịch bản sau đây.

Ví dụ: Văn bản hệ thống trên nền tùy chỉnh

Hãy tưởng tượng một nhóm hệ thống tinh chỉnh màu xanh tương tác để cải thiện độ tương phản màu. Màu xanh tương tác của v1.4.0 có thể truy cập trên nền trắng nhưng không thành công trên nền than.

Kiểm tra độ tương phản màu qua độ tương phản-grid.eightshapes.com

Vì vậy, đối với v1.5.0, nhóm đã điều chỉnh màu xanh tương tác thành tông màu nhạt hơn, bão hòa hơn, hoạt động trên cả màu trắng và than.

Điều chỉnh màu văn bản của nhãn nút ma trên nền không thể đoán trước

Tuy nhiên, một người áp dụng đã sử dụng nút Ghost phụ thuộc vào màu đó trên nền màu xám nhạt. Sau khi hệ thống thay đổi, độ tương phản màu văn bản của nhãn không thể truy cập được. Hệ thống của bạn đã phá vỡ sản phẩm của họ.

Ví dụ: Hình nền hệ thống với văn bản trả tiền tùy chỉnh

Tương tự, hãy tưởng tượng một hệ thống làm tối màu thành phần Thẻ màubackbackground. Khu vực nội dung Thẻ Card bao gồm vùng chứa nội dung "an toàn" nơi người chấp nhận chèn bất kỳ nội dung và đánh dấu nào họ muốn.

Điều chỉnh màu nền của Thẻ cho phép chứa nội dung tùy chỉnh

Trong vùng có lẽ an toàn đó, một người áp dụng đã thêm văn bản thứ cấp, trong khi màu xám vừa phải tinh tế, đã vượt qua một bài kiểm tra độ tương phản màu. Sau khi hệ thống thay đổi, độ tương phản màu không còn truy cập được. Hệ thống của bạn đã phá vỡ sản phẩm của họ.

Hãy tưởng tượng hệ thống của bạn phát hành nhỏ phát hành bao gồm những điều chỉnh. Tương thích ngược, bạn nói gì? Không có rủi ro trong việc nâng cấp, họ có tin tưởng? Không! Hệ thống của bạn đã phá vỡ sản phẩm của họ!

Do đó, đánh giá các thuộc tính màu thay đổi để xác định xem một hệ thống có thay đổi hay không, chẳng hạn như:

  • Màu văn bản có thể xuất hiện phía trên nền của người áp dụng - màu, hình ảnh hoặc kết cấu khác.
  • màu nền mà màu văn bản của người áp dụng được phủ lên.
  • màu nền, màu đường viền, màu văn bản, bóng hộp hoặc thuộc tính khác được tạo bên cạnh, bên trên hoặc bên dưới cạnh hoặc nội dung của thành phần khác để làm giảm độ tương phản giữa các thành phần.

Khả năng tiếp cận đã lái những ví dụ này. Cũng có rủi ro thẩm mỹ, trong đó những thay đổi hệ thống có chủ ý có thể phá vỡ sự hài hòa đầy màu sắc mà một nhà thiết kế sản phẩm đạt được. Các tương tác màu sắc có rất nhiều trong toàn bộ UI mà một nhà thiết kế hệ thống không kiểm soát hoặc có thể nhìn thấy.

Takeaway: Bắt đầu phá vỡ cuộc trò chuyện thay đổi với tiêu chí màu sắc. Nó có thể dễ dàng truyền đạt rủi ro hơn, nó có thể đo lường một cách khách quan và nó gắn liền với khả năng tiếp cận khuấy động niềm đam mê. Được trang bị một vài tiêu chí, bạn có thể chuyển sang các mối quan tâm khác.

Kiểu chữ phá vỡ (bằng cách gói)

Kiểu chữ là một khía cạnh cốt lõi của bất kỳ phong cách hình ảnh. Các đội muốn có được nó vừa phải. Và có rất nhiều quay số để điều chỉnh: họ phông chữ, trọng lượng phông chữ, kích thước phông chữ, biến đổi văn bản, chiều cao dòng, khoảng cách chữ, và nhiều hơn nữa.

Không phải tất cả kinh nghiệm phá vỡ rủi ro nếu một hệ thống điều chỉnh kiểu chữ. Đối với các trải nghiệm nặng về nội dung, mỗi yếu tố Nội dung có thể không dự đoán được, có độ dài khác nhau và được thiết kế để bọc và đáp ứng với các thay đổi về chiều rộng của khung nhìn.

Đối với các giao diện dày đặc hơn, kiểu chữ phải chính xác. Các nhà thiết kế mài hàng giờ để tinh chỉnh kiểu chữ, sắp xếp các nhãn để phù hợp với các khu vực nhỏ gọn. Nếu bạn điều chỉnh kiểu chữ hệ thống, các yếu tố của chúng có thể bao bọc hoặc cắt theo những cách không mong muốn.

Ví dụ: Gói tab là khủng khiếp

Hãy tưởng tượng hệ thống của bạn điều chỉnh tab labelfont-weight từ bình thường sang đậm.

Sau khi nâng cấp phiên bản nhỏ, các tab không phản hồi. Không tốt.

Một người áp dụng nâng cấp. Các tab không phản hồi hiện tại của họ vượt quá không gian được phân bổ, vì vậy họ bọc. Tuyệt vời! Hệ thống của bạn đã phá vỡ sản phẩm của họ.

Ví dụ: Khoảng cách chữ Mayhem

Hướng dẫn thương hiệu phát triển, mang lại thứ bậc và phong cách tiêu đề mới. Do đó, hệ thống của bạn thích nghi bằng cách tăng từng khoảng cách chữ tiêu đề.

Một người áp dụng nâng cấp ứng dụng X quang dày đặc, một trang của họ mà Dịch đã dịch ra 14 ngôn ngữ, bao gồm vô số bảng điều khiển, mỗi bảng chứa đầy đủ các yếu tố hình thức và tiêu đề. Họ nâng cấp và giao diện người dùng rất tuyệt vời với các tiêu đề không thể đoán trước. Họ gọi một cuộc họp khủng hoảng. Họ mời các kỹ sư dữ liệu phụ trợ, vì lợi ích tốt! Hệ thống của bạn đã phá vỡ sản phẩm của họ!

Điều chỉnh kiểu chữ hệ thống có thể nguy hiểm. Đối với bạn, nó là một sự phát triển chính tả mới được triển khai dễ dàng trên một thư viện. Đối với họ, văn bản bắt đầu sai. Họ đổ lỗi cho bạn. Có thể họ kích thích bạn trong kênh Slack # thiết kế hệ thống. Không ai cần điều đó.

Takeaway: Trước 1.0.0, hãy chăm chỉ thử nghiệm, tinh chỉnh và hoàn thiện các kiểu kiểu phù hợp với sự đa dạng của khách hàng. Khi 1.0.0 đi qua, duy trì một cơ sở ổn định và xem xét thay đổi một cách thận trọng. Xem xét dự trữ các ca nguy hiểm cho phiên bản chính tiếp theo. Cho đến lúc đó, tăng dần các tính năng có chứa, chẳng hạn như thành phần Văn bản biểu mẫu dài để tạo kiểu chỉ sao chép bài viết.

Phá vỡ không gian và kích thước

Ít nhất bạn có thể thấy màu sắc và kiểu chữ. Không gian và kích thước? Những cái đó khó xác định là có thể tái sử dụng một cách cụ thể, hãy để một mình theo dõi sự thay đổi.

Trong HTML, khi bạn thay đổi thuộc tính mô hình hộp thành phần - đệm, lề, chiều rộng, chiều cao, hiển thị, kích thước hộp, vị trí, trái, phải, trên, dưới - bạn có nguy cơ tác động bố cục bố cục thành phần đó với các thành phần trang khác.

Ví dụ 1: Xóa khoảng cách dọc

Nhóm hệ thống của bạn quyết định loại bỏ các điều khiển biểu mẫu khoảng cách dọc được áp dụng ở dạng lề dưới. Điều này tác động đến ,