blog

Suy nghĩ về màu sắc

Posted on 14/12/2019 by web zado

14
Th12

[ad_1]

Màu sắc là nỗi ám ảnh, niềm vui và sự dằn vặt suốt cả ngày của tôi – Claude Monet

Trong hai năm qua chúng tôi đã cố gắng cải thiện sử dụng màu sắc tại Cloudflare. Có một số chức năng buộc làm cho công việc này được ưu tiên. Là một nhóm nhỏ gồm các nhà thiết kế và kỹ sư, chúng tôi đã thừa hưởng một loạt các công việc thiết kế là sự pha trộn của các giá trị được xây dựng bởi nhiều nhóm. Kết quả là rất khó khăn và tốn thời gian để thêm màu mới khi xây dựng các thành phần mới.

Chúng tôi cũng muốn cải thiện khả năng tiếp cận của mình. Trong khi chúng tôi đang làm khá tốt, chúng tôi có chỗ để cải thiện, chủ yếu xoay quanh cách chúng tôi sử dụng màu xanh lá cây. Khi giao diện người dùng của chúng tôi ngày càng tập trung vào việc trực quan hóa các tập dữ liệu lớn, chúng tôi muốn vượt qua các ranh giới làm cho các phân tích của chúng tôi có thể truy cập trực quan nhất có thể. một bộ hình ảnh được cập nhật, sản phẩm của chúng tôi cũng như một số thuộc tính web hiện có vẫn đang sử dụng các phiên bản khác nhau của bảng màu cũ của chúng tôi.

Cloudflare.com vào năm 2016 & Cloudflare.com vào năm 2019

tự cân bằng. Nhiều màu sắc đã được chọn một hoặc hai tại một thời điểm. Bạn có thể thấy cách chúng tôi chọn quả việt quất, nước đá và nước tại một thời điểm khác so với biển và sấm sét.

Phần màu trong tệp chủ đề của chúng tôi được sắp xếp theo thứ tự thời gian

Thiếu sự gắn kết trực quan trong sản phẩm của chúng tôi, chúng tôi chắc chắn không cung cấp trải nghiệm hình ảnh gắn kết giữa trang web tiếp thị và sản phẩm của chúng tôi . Việc chuyển đổi từ màu xanh và màu tím đẹp mắt sang CTA xanh của chúng tôi không phải là trải nghiệm hợp lý mà chúng tôi muốn cung cấp cho người dùng của chúng tôi.

Cloudflare.com 2017 & Đăng nhập trang 2017

Bảng điều khiển ứng dụng của chúng tôi vào năm 2017

Làm lại Bảng màu của chúng tôi

Bước đầu tiên của chúng tôi là kiểm tra những gì chúng tôi đã có. Cloudflare đã tồn tại đủ lâu để có nhiều hơn một trang web. Ngoài cloudflare.com, chúng tôi có hàng tá thuộc tính web có thể truy cập công khai. Từ các diễn đàn cộng đồng của chúng tôi, các tài liệu hỗ trợ, blog, trang trạng thái, đến nhiều trang web siêu nhỏ.

Chúng tôi có hàng tá các cơ sở mã mặt trước mà mỗi đại diện cho một cơ hội nữa để giới thiệu entropy cho hình ảnh của chúng tôi ngôn ngữ. Vì vậy, chúng tôi tò mò trả lời câu hỏi – hiện tại chúng tôi đang sử dụng màu gì? Đã có mẫu nhất quán chúng tôi có thể tài liệu để tái sử dụng? Chúng tôi có thể xây dựng một hướng dẫn phong cách sống không chỉ bao gồm một trang web, nhưng tất cả chúng không?

Ảnh chụp màn hình của các trang từ cloudflare.com tương phản với ảnh chụp màn hình từ sản phẩm của chúng tôi vào năm 2017

Sự tò mò của chúng tôi đã khiến chúng tôi hiểu rõ nhất về ngôn ngữ thiết kế của chúng tôi trong số các trang web của chúng tôi.

Ở trên - bảng màu sản phẩm của chúng tôi. Dưới đây - bảng màu tiếp thị của chúng tôi được căn chỉnh bởi màu sắc — Ở trên – bảng màu sản phẩm của chúng tôi. Dưới đây – bảng màu tiếp thị của chúng tôi.

Một cỗ máy thời gian cho màu sắc

Khi chúng tôi lần đầu tiên bắt đầu xác định quy mô của các vấn đề màu sắc của mình, chúng tôi đã cố gắng nghĩ ra bên ngoài hộp làm thế nào chúng ta có thể khám phá không gian vấn đề. Sau phiên động não ban đầu, chúng tôi đã kết hợp Máy Wayback của Lưu trữ Internet với API thống kê Css để xây dựng một công cụ kiểm toán cho thấy các thuộc tính hình ảnh trang web khác nhau của chúng tôi thay đổi theo thời gian như thế nào. Chúng tôi có thể tự động chọn các trang web mà chúng tôi muốn so sánh và xóa theo thời gian để xem các thay đổi.

Dưới đây là hình ảnh của các bảng màu từ 9 trang web khác nhau thay đổi trong khoảng thời gian 6 năm. Phía trên các bảng màu là một thành phần tạo ra các màu phổ biến, trên tất cả các trang web này. Hai màu phổ biến duy nhất trên tất cả các thuộc tính (chỉ xuất hiện trong nháy mắt ngắn) là #ffffff (trắng) và trong suốt. Theo thời gian, chúng tôi đã không nhất quán với chính mình.

Nếu chúng tôi đi sâu vào xem trang web tiếp thị của chúng tôi so với ứng dụng bảng điều khiển của chúng tôi – nó trông giống như video dưới đây. Chúng tôi thấy sự trùng lặp nhiều hơn một chút lúc đầu và sau đó là sự phân kỳ đáng kể ở mốc 16 giây khi bảng màu sản phẩm của chúng tôi tăng trưởng đáng kể. Ở mốc 22 giây, bạn có thể thấy bảng màu tiếp thị thay đổi hoàn toàn do kết quả của thương hiệu trong khi bảng màu sản phẩm của chúng tôi vẫn giữ nguyên. Khi thời gian trôi qua, bạn có thể thấy chúng tôi ngày càng trở nên không nhất quán trên hai cơ sở mã.

Là một nhóm sản phẩm chúng tôi đã bắt kịp cải thiện việc sử dụng màu sắc của chúng tôi và để phù hợp với thương hiệu công ty. Tin tốt là, không có nơi nào để đi ngoài.

Phong cách kiểm toán lịch sử này cho chúng ta một dấu hiệu trực quan với dữ liệu thực. Chúng ta có thể hình dung cho các bên liên quan cách sử dụng màu sắc nhất quán và tương tự giữa các sản phẩm và nếu chúng ta đang trở nên tốt hơn hoặc xấu đi theo thời gian. Có loại vòng phản hồi này là vô giá đối với chúng tôi – vì việc kiểm tra thủ công này rất tốn thời gian nên thường không thực hiện được. Hy vọng trong tương lai vì nó là tiêu chuẩn để theo dõi các số liệu hiệu suất khác nhau theo thời gian tại một công ty, nó sẽ là tiêu chuẩn để có thể hình dung mức độ entropy hiện tại của bạn.

Chọn màu

kiểm toán cho thấy không có nhiều tính nhất quán trên các trang web, chúng tôi đã đi làm để thử và xây dựng một bảng màu có khả năng được sử dụng cho các trang web mà nhóm sản phẩm sở hữu. Đã đến lúc bắt tay chúng ta làm bẩn và bắt đầu chọn màu sắc.

Hindsight dĩ nhiên luôn là 20/20. Chúng tôi đã bắt đầu vào ngày đầu tiên khi cố gắng tạo quy mô dựa trên bảng màu thương hiệu của chúng tôi. Không, ý tưởng sáng giá đầu tiên của chúng tôi là tạo ra toàn bộ bảng màu từ một màu duy nhất.

Logo của chúng tôi được tạo thành từ hai quả cam. Cả hai đều có vẻ như là ứng cử viên chính để tạo ra một bảng màu từ.

Chúng tôi đã chơi xung quanh với một số thuật toán có một màu và tạo ra một bảng màu. Từ màu sắc ban đầu, chúng tôi tạo ra một thang đo mảng cho mỗi màu. Những nỗ lực ban đầu cho thấy chúng tôi áp dụng các đường cong chính xác giống nhau cho độ sáng cho từng màu sắc, nhưng vì nhận thức trực quan về màu sắc rất khác nhau, điều này dẫn đến sự tương phản cực kỳ khác nhau ở mỗi bước của thang đo.

Dưới đây là một vài trong số chúng tôi những nỗ lực ban đầu ở thế hệ bảng màu. Jeeyoung Jung đã làm một bài viết tuyệt vời xung quanh việc thiết kế bảng màu vào năm ngoái.

Hình dung các đỉnh cường độ trên các sắc độ

Chúng ta có thể thấy cường độ của màu sắc thay đổi theo màu sắc, với màu vàng và màu vàng màu xanh lá cây là chủ đạo nhất. Một trong những nhược điểm của điều này là khi bạn nhanh chóng lặp đi lặp lại qua các tùy chọn theo chủ đề, mối quan hệ không nhất quán giữa các bước giữa các màu có thể khiến bạn mất thời gian hoặc không thể giữ được sự hài hòa trực quan trong giao diện của bạn.

Video dưới đây là một video khác cách để hình dung hiện tượng này. Đường phân chia trong bộ chọn màu cho biết phần nào của bảng màu sẽ có thể truy cập được với màu đen và trắng. Lưu ý cách dòng thay đổi mạnh mẽ xung quanh màu xanh lá cây và màu vàng. Và sau đó nhìn lại các biểu đồ ở trên.

Bản demo của https://kevingutowski.github.io/color.html[19459020[[19459007[[19459008[

Sau khi loay hoay với một vài thuật toán tổng quát khác nhau (chúng tôi đã tạo ra rất nhiều bảng màu xấu xí), chúng tôi quyết định thử một cách tiếp cận thủ công hơn. Chúng tôi đã theo đuổi việc tạo các đường cong tùy chỉnh cho từng màu sắc trong một nỗ lực để giữ cho các thang đo độ tương phản cân bằng nhất có thể.

Bảng màu bị tắt tiếng nặng nề

]

Tạo các bảng màu khác nhau khiến bạn phải đối mặt với một câu hỏi cơ bản. Làm thế nào để bạn biết nếu một bảng màu là tốt? Là một số bảng màu tốt hơn so với những người khác? Trong nỗ lực trả lời câu hỏi này, chúng tôi đã xây dựng các vòng phản hồi khác nhau để giúp chúng tôi đánh giá các bảng màu càng nhanh càng tốt. Chúng tôi đã thử một vài phương pháp để nhấn mạnh kiểm tra một bảng màu. Lúc đầu, chúng tôi đã cố gắng lấy màu sắc gần nhất của Haiti cho một loạt các màu UI phổ biến của chúng tôi. Điều này không phải lúc nào cũng hữu ích vì đôi khi bạn thực sự muốn bước trên hoặc dưới màu hiện có gần nhất. Nhưng thật hữu ích khi hình dung vì một vài lý do.

Tạo bảng màu trên một bộ các thành phần xem trước bảng màu cũ và mới để so sánh

Thỉnh thoảng trong quá trình khám phá trong không gian này, chúng tôi tình cờ phát hiện ra chủ đề tweet này về việc xây dựng bảng màu cho nghệ thuật pixel. Có rất nhiều nơi các nhà thiết kế web và sản phẩm có thể lấy cảm hứng từ các nhà thiết kế trò chơi.

Hai bảng màu được hình dung để tạo ra các vật thể 3d

Một bảng màu được áp dụng trong một vài bối cảnh khác nhau

Ở đây chúng ta thấy một khái niệm tương tự trong đó một số bảng màu khác nhau được áp dụng cho cùng một thành phần. Khung nhìn này cho chúng ta thấy hai điều, những cách khác nhau mà một bảng màu có thể được áp dụng cho một hình cầu, và cả tính thẩm mỹ khác nhau trên các bảng màu.

Các bảng màu khác nhau được xem trước một thành phần chung — Các bảng màu khác nhau được xem trước dựa trên một thành phần chung

Cách gần như đáng ngạc nhiên là cách mặc định để tạo bảng màu cho các ứng dụng và trang web không tạo ra nó trong khi xem trước ứng dụng chống lại các mẫu UI phổ biến nhất. Là nhà thiết kế, có rất nhiều cách sử dụng màu sắc nhất quán mà chúng ta có thể có đường cơ sở. Nhiều ứng dụng doanh nghiệp tập trung quanh nền trắng với màu xanh lam là màu chính với các hỗn hợp màu xám để thêm chiều sâu xung quanh thẻ và phần trang. Màu đỏ thường được sử dụng cho các hành động phá hoại như xóa một số loại bản ghi. Màu xám cho hành động thứ cấp. Có lẽ nó là một nút phác thảo với màu chính cho các hành động thứ cấp. Dù bằng cách nào – lề giữa các mẫu không phải là lớn trong sơ đồ lớn của mọi thứ.

Hãy xem xét trường hợp sử dụng của thiết kế UI trong khi bảng màu hoặc cách sử dụng màu chưa được thiết lập. Đưa ra một bảng màu duy nhất, bạn có thể muốn thử nghiệm áp dụng bảng màu đó theo nhiều cách khác nhau sẽ tạo ra nhiều tính thẩm mỹ. Ngoài ra, bạn có thể cần phải thử nghiệm một số bảng màu khác nhau. Đây là hai chế độ thăm dò khác nhau có thể cực kỳ tốn thời gian để hoàn thành. Việc giữ một thiết kế đang tiến hành được đồng bộ hóa với một số tùy chọn khác nhau cho ứng dụng màu sắc có thể là không đơn giản, ngay cả khi sử dụng tốt nhất các comps hoặc biểu tượng lớp.

Làm thế nào để chúng ta hình dung ra các cách khác nhau của bảng màu khi nhìn áp dụng cho một giao diện? Dưới đây là ví dụ về cách bảng màu được hiển thị trên danh sách bảng màu cho các nghệ sĩ pixel.

https://lospec.com /palette-list/sweetie-16[19459020[[19459007[[19459021[[19459004[[19459025[[19459106[https://lospeccom/palette-list/vines-flexible-linear-ramp”/> https://lospec.com/palette-list/vines-flexible-linear-ramp

Một phương pháp trực quan hóa là xác định một tập hợp các yếu tố ui nguyên thủy và hiển thị từng bộ phận trong số họ với một bộ màu duy nhất được áp dụng. Trong sự cô lập điều này có thể hữu ích. Chế độ này sẽ giúp bạn dễ dàng kiểm tra một tổ hợp màu duy nhất và các yếu tố nào có thể được áp dụng tốt nhất.

Ngoài ra, chúng ta có thể muốn xem giao diện tổng hợp với các màu gần nhất từ bảng màu được áp dụng. Hãy xem xét một tập hợp các nút bao gồm các kiểu nút màu đỏ, xanh lá cây, xanh dương và xám. Nhìn thấy tất cả những thứ này cùng nhau có thể giúp chúng ta hình dung ra bản chất tương đối của các nút này cạnh nhau. Đưa ra một bảng cơ sở cho giao diện người dùng chung, chúng ta có thể hoán đổi sang một bảng màu mới và thay thế từng màu bằng màu "gần nhất". Đây không phải lúc nào cũng là một giải pháp chứng minh đầy đủ vì có nhiều trường hợp cạnh phải giải quyết. ví dụ. Điều gì xảy ra khi thay thế một bảng màu gồm 134 màu bằng một bảng màu gồm 24 màu? Thậm chí, điều này có thể cho phép chúng ta nhanh chóng tự động hóa cách các giao diện hiện tại sẽ thay đổi diện mạo của chúng để thay đổi hệ thống cơ bản. Dù ở địa phương hay chống lại một trang web trực tiếp, chế độ làm việc này sẽ cho phép các nhà thiết kế xem một màu trong nhiều khung hình để thực sự khẳng định chất lượng của nó.

Sau khi chuyển từ ý tưởng tạo ra một bảng màu từ một màu duy nhất, chúng tôi đã cố gắng sử dụng màu logo cũng như màu thương hiệu chính của chúng tôi để thúc đẩy việc xây dựng quy mô mô-đun. Mục tiêu của chúng tôi là tạo ra một bảng màu giúp cải thiện độ tương phản cho khả năng tiếp cận, trung thực với thương hiệu hình ảnh của chúng tôi, dự đoán cho các nhà phát triển, làm việc để trực quan hóa dữ liệu và cung cấp khả năng thiết kế giao diện cân bằng và hấp dẫn trực quan. Không có mồ hôi.

Màu sắc thương hiệu thể hiện mức độ Hue và Saturation

đi vào chúng tôi có thể không sử dụng mọi bước trong mỗi màu, chúng tôi muốn phủ sóng toàn bộ phổ để mỗi màu có một sự khác biệt quang học nhất quán giữa mỗi bước. Chúng tôi cũng không biết bước nào mà chúng tôi sẽ cần. Vì chúng chỉ là các biến trong tệp chủ đề nên nó không thêm bất kỳ dấu chân mã nào để hiển thị bảng màu được tạo đầy đủ.

Một trong những phần khó khăn hơn, là quyết định một số bước cho thang đo . Điều này sẽ cho phép chúng tôi chỉnh sửa bảng màu trong tương lai thành nhiều tính thẩm mỹ và trao đổi bảng màu ở cấp chủ đề mà không cần cập nhật bất cứ điều gì khác.

Trong tương lai nếu chúng tôi cần tăng cường khả dụng màu sắc, chúng tôi có thể chỉnh sửa toàn bộ bảng màu thay vì thêm một lần nữa vì chúng tôi thấy đây là một cách khó để làm việc theo thời gian. Ngoài màu sắc thương hiệu chính của chúng tôi, chúng tôi cũng khám phá thêm các thang đo cho vàng / vàng, tím, teal cũng như thang màu xám.

Giao diện đầu tiên chúng tôi xây dựng cho công việc này là xuất ra tất cả các tỷ lệ theo chiều dọc, với điểm số tương phản của họ với cả màu trắng và đen ở phía bên tay phải. Để hỗ trợ khả năng có thể quét được, chúng tôi đã in đậm các giá trị vượt quá ngưỡng 4,5. Khi chúng tôi chỉnh sửa các đường cong, chúng tôi có thể thấy tỷ lệ tương phản bị ảnh hưởng ở mỗi bước. Dưới đây bạn có thể thấy một điểm khởi đầu sớm trước khi cân được cân bằng. Màu đỏ có 6 combo có thể truy cập với màu trắng, trong khi màu vàng chỉ có 1. Ban đầu chúng tôi khám phá có thang màu xám lớn hơn các màu khác.

Lặp lại sớm việc xem trước bảng màu trong quá trình phát triển

Vì cả độ sáng màn hình và ánh sáng xung quanh đều có thể ảnh hưởng đến nhận thức về màu sắc mà chúng tôi đã phát triển trên hai màn hình, một mức tối đa và một mức tối đa . Chúng tôi cũng sao chép thang màu bằng bộ lọc thang độ xám ngay bên dưới để giúp minh họa độ tương phản trực quan giữa các bước VÀ trên các màu. Nhảy qua lại giữa phiên bản thang độ xám và bão hòa của thang đo đóng vai trò là một tài liệu tham khảo cơ bản tuyệt vời. Chúng tôi thấy rằng việc vượt quá 10 bước khiến khó có thể giữ đủ độ tương phản giữa mỗi bước để giữ cho chúng có thể phân biệt được với nhau.

Màn hình được đặt ở độ sáng khác nhau và cận cảnh sự khác biệt về thị giác

Lấy một trang từ thiết kế trò chơi của chúng tôi – khi chúng tôi cân bằng tỷ lệ và khám phá bao nhiêu bước chúng tôi muốn trong thang đo, chúng tôi cũng đã căng thẳng kiểm tra các màu được tạo ra đối với các thành phần phân tích khác nhau từ thư viện thành phần của chúng tôi.

Bộ sưu tập màu xám hơi ngẫu nhiên của chúng tôi là điểm đau đặc biệt khi chúng xuất hiện bùn ở một số nơi trong giao diện của chúng tôi. Đối với bảng màu mới của chúng tôi, chúng tôi đã sử dụng gợi ý nhỏ nhất của màu xanh lam để giữ cho màu xám của chúng tôi nhất quán và chỉ mất một chút để hoàn toàn trung tính.

Với bảng màu gồm 90 màu, số lượng kết hợp và hoán vị có thể áp dụng cho trực quan hóa dữ liệu là rất lớn và có thể dẫn đến nhiều hướng thẩm mỹ khác nhau. Cùng một bảng màu được áp dụng cho cả biểu đồ đường và vạch với các tập dữ liệu khác nhau có thể trông khác nhau đáng kể, đủ để chúng không thể phân biệt được là cùng một bảng màu. Làm việc với một số đối tác kỹ thuật của chúng tôi, chúng tôi đã xây dựng một đường ống dẫn các thành phần giống nhau được kết xuất dựa trên các tập dữ liệu khác nhau, để mô phỏng các hình dạng và kích thước khác nhau mà các thành phần biểu đồ sẽ xuất hiện. Điều này cho phép chúng tôi kiểm tra nhanh sự xuất hiện của các bảng màu khác nhau. . Quy trình công việc này đã cho chúng tôi những hiểu biết tuyệt vời về giao diện của bảng màu trong giao diện của chúng tôi. Cho dù chúng ta đã dành bao nhiêu giờ để nhìn chằm chằm vào bảng màu, chúng ta không thể có cảm giác chính xác về màu sắc sẽ trông như thế nào khi được sáng tác trong một giao diện.

& Indochromatic Indigo

biểu đồ phân tích với màu xanh lam và màu xanh lá cây

Biểu đồ phân tích có màu xanh và cam. Nói màu sắc của các đường cách nhau là một trải nghiệm hình ảnh khác với việc tách các chấm theo thứ tự liên tục khi chúng xuất hiện trong truyền thuyết. — Biểu đồ phân tích với màu xanh lam và cam. Nói màu sắc của các đường cách nhau là một trải nghiệm hình ảnh khác với việc tách các chấm theo thứ tự liên tục khi chúng xuất hiện trong truyền thuyết.

Chúng tôi đã thử nghiệm một số ý tưởng về hình dung các kích thước khác nhau và hình dạng của màu sắc và cách chúng ảnh hưởng đến nhận thức của chúng ta về việc một màu thay đổi thành phần tử như thế nào. Trong khung đầu tiên, rất khó để phân biệt các giá trị cách nhau 2% và 6% với kích thước và hình dạng của các phần tử.

Ứng suất thử nghiệm ứng dụng của bảng màu với nhiều hình dạng và kích cỡ

Chúng tôi đã bắt đầu đóng gói một số tác phẩm này vào một ứng dụng web mà những người khác có thể sử dụng để tạo hoặc nhập bảng màu và xem trước nhiều độ sâu kết hợp có thể truy cập được tập hợp các yếu tố UI.

Mục tiêu là giúp mọi người dễ dàng làm việc liền mạch hơn với màu sắc và xây dựng giao diện đẹp với độ tương phản màu dễ tiếp cận.

Trong nỗ lực đảm bảo mọi thứ chúng tôi đang xây dựng sẽ có thể truy cập trực quan – chúng tôi đã xây dựng một thành phần phản ứng sẽ xem trước thiết kế sẽ trông như thế nào nếu bạn bị mù màu. Thành phần che phủ các bộ lọc SVG để mô phỏng các cách thay thế mà ai đó có thể cảm nhận được màu sắc.

Thành phần phân tích được xem trước với 8 loại mù màu khác nhau — Thành phần phân tích được xem trước với 8 loại khác nhau mù màu

Trong khi điều này đang xem trước một thành phần phân tích, thực sự bất kỳ thành phần hoặc trang nào cũng có thể được xem trước bằng phương pháp này.

  nhập React từ "Reac"

bộ lọc const = [
  'achromatopsia',
  'protanomaly',
  'protanopia',
  'deuteranomaly',
  'deuteranopia',
  'tritanomaly',
  'tritanopia',
  'achromatomaly',
]

const ColorBlindFilter = ({itemPadding, itemWidth, ... props}) => {
  trở về (
      
        {bộ lọc.map ((bộ lọc, i) => (
          
            {props.children}
          
        ))}
      
  )
}

ColorBlindFilter.defaultProps = {
  hiển thị: 'flex',
  justifyContent: 'không gian xung quanh',
  flexWrap: 'bọc',
  chiều rộng: 1,
  mục thứ tư: 1/4
}

xuất mặc định ColorBlindFilter

Chúng tôi cũng đã phát hành một plugin Figma mô phỏng trực quan hóa này cho một thành phần.

Sau một vài lần lặp lại, cuối cùng chúng tôi đã tìm ra một bảng màu. Mỗi quy mô được liên kết quang học với màu sắc thương hiệu của chúng tôi. Bước thứ 5 trong mỗi thang đo là gần nhất với màu thương hiệu ban đầu, nhưng được điều chỉnh một chút để có thể truy cập bằng cả hai màu đen và trắng.

Xem trước bảng màu khi cả bão hòa và bão hòa hoàn toàn — Bảng xem trước của chúng tôi để phát triển bảng màu, hiển thị phiên bản chưa bão hòa hoàn toàn của bảng màu để tham khảo

Viết thư của Lyft Sau khi tiếp cận lại màu của màu và Jeeyoung Jung Thiết kế màu sắc có hệ thống Đây là một trong những bài viết hay nhất về cách làm việc với màu sắc theo tỷ lệ bạn có thể tìm thấy.

Di chuyển màu

Một đại diện trực quan về cách các màu bảng màu kế thừa sẽ chuyển sang các thang đo mới.

Để một nhóm người đồng ý về bảng màu mới là một cuộc hành trình trong và của chính nó. Vào thời điểm bạn khiến mọi người đồng thuận, nó rất hấp dẫn khi chỉ sụp đổ thành một đống và không bao giờ nghĩ về màu sắc nữa. Thật không may, công việc không dừng lại ở điểm này. Bây giờ chúng tôi đã chọn bảng màu của mình, đã đến lúc triển khai nó để chiếc xe đạp này được sơn một lần và mãi mãi.

Nếu bạn đang chuyển một phần di sản cũ của ứng dụng của mình để được cập nhật theo kiểu mới hướng dẫn giống như chúng ta, ngay cả tài liệu màu tốt nhất cũng có thể không giúp ai đó thực hiện những thay đổi cần thiết.

Chúng tôi thấy rằng thông thường hơn các kỹ sư và nhà thiết kế muốn biết phiên bản mới của màu gì họ đã quen thuộc với. Trong quá trình chuyển đổi giữa các bảng màu, chúng ta có một giao diện, mọi người có thể nhập bất kỳ màu nào và có được màu gần nhất trong bảng màu của chúng tôi.

Có những lúc di chuyển màu, màu gần nhất không thực sự là màu bạn muốn. Dựa vào kịch bản mà màu thương hiệu của bạn đã thay đổi từ màu xanh sang màu tím, bạn có thể muốn chuyển tất cả các màu thành màu tím gần nhất trong bảng màu, chứ không phải màu xanh gần nhất vẫn còn tồn tại trong bảng màu của bạn. Để giúp trực quan hóa việc di chuyển cũng như nhận được đề xuất về cách hợp nhất các giá trị trong quy mô cũ, tất nhiên chúng tôi đã xây dựng một công cụ nhỏ. Ở đây chúng ta có thể xác định các bản dịch đó và nhập bảng màu từ nhập URL. Như chúng ta vẫn có. một số thuộc tính web để cập nhật vào bảng màu của chúng tôi, công cụ đơn giản này đã tiếp tục tỏ ra hữu ích.

Chúng tôi muốn nhẹ nhàng nhất có thể trong chuyển sang bảng màu mới trong cách sử dụng. Mặc dù các nhà phát triển tìm thấy tên chuỗi cho màu sắc dễ vỡ và không thể đoán trước, nó vẫn là một hệ thống quen thuộc hơn đối với một số người so với cái mới này. Trước tiên chúng tôi chỉ cần thêm vào bảng màu mới của chúng tôi vào chủ đề hiện có để sử dụng tiến lên. Sau đó, chúng tôi bắt đầu chuyển màu cho các thành phần và trang hiện có.

Đối với các đồng nghiệp của chúng tôi, chúng tôi đã viết ra các bản dịch mong muốn và đưa ra cảnh báo trong bảng điều khiển rằng màu sắc không được chấp nhận, có tham chiếu đến giá trị chủ đề mới sẽ sử dụng.

Ví dụ về cảnh báo bàn điều khiển khi sử dụng màu không dùng nữa

Ví dụ về cách kiểm tra việc sử dụng các giá trị không dùng nữa

Ví dụ về cách kiểm tra sử dụng các giá trị không dùng nữa

Trong khi chúng tôi gặp một vài lỗi nhóm đã hỗ trợ và giúp chúng tôi sửa lỗi nhanh nhất có thể tìm thấy chúng.

Chúng tôi vẫn đang trong quá trình cập nhật các thuộc tính web của mình bằng bảng màu mới, trước tiên ưu tiên truy cập trong khi cố gắng tạo thương hiệu hình ảnh phù hợp hơn như là một sản phẩm phụ đẹp của wo rk. Một ví dụ nhỏ về điều này là trang trạng thái hệ thống của chúng tôi. Trong hình ảnh đầu tiên, các liên kết màu xanh lam trong tiêu đề, thanh trạng thái màu xanh lá cây và bản sao về, tất cả đều không thể truy cập được vào nền của chúng.

cloudflaleighatus.com năm 2017 & cloudflaleighatus.com năm 2019 với màu xanh lá cây có thể truy cập

của những thay đổi đã được tinh tế. Đáng chú ý nhất là màu xanh lá cây chúng tôi sử dụng trong bảng điều khiển là nhiều màu sắc với thương hiệu của chúng tôi hơn trước đây. Ngoài ra, chúng tôi cũng có thể thêm cân bằng thị giác bằng cách không chỉ sử dụng văn bản màu đen thẳng trên màu nền. Ở đây, chúng tôi đã thêm một trong những bước tối hơn từ thang đo tương ứng, để cân bằng thị giác hơn một chút.