1. Giới thiệu
Lần cập nhật gần đây nhất: ngày 18 tháng 4 năm 2022
Các ứng dụng có thể sử dụng nhiều màu sắc từ các bảng phối màu cơ bản, màu động do người dùng tạo hoặc màu thương hiệu.
Phòng thí nghiệm màu Material You trước đây đã khám phá cách trực quan hoá màu động trong bản mô phỏng thiết kế, nhưng bạn cũng có thể sử dụng tính năng tạo giao diện Material để tuỳ chỉnh ứng dụng bằng màu sắc thương hiệu của mình. Việc sử dụng hệ thống màu mới với màu thương hiệu sẽ tạo ra một bảng phối màu dễ tiếp cận, có thể có nhiều tính năng linh hoạt hơn!
Kiến thức bạn sẽ học được
- Cách tạo giao diện tuỳ chỉnh bằng Material Theme Builder.
- Áp dụng giao diện tuỳ chỉnh cho bản mô phỏng thiết kế.
- Khả năng kết hợp màu động và màu sắc tuỳ chỉnh.
Điều kiện tiên quyết
Đối với lớp học lập trình này, chúng ta sẽ xây dựng dựa trên một số khái niệm cơ bản về thiết kế.
- Có kiến thức về các khái niệm căn bản trong thiết kế: bảng màu
- Kiến thức về các bảng phối màu và vai trò của màu hiện tại trên Android
- Có kiến thức về Figma.
- Không bắt buộc: Trực quan hoá màu động trong lớp học lập trình ứng dụng mà bạn sẽ tham gia
Bạn cần có
- Tài khoản Figma
- Tệp Figma Designlab
- Trình bổ trợ Figma Material Theme Builder
2. Bắt đầu
Thiết lập
Để bắt đầu, bạn cần truy cập vào tệp Designlab Figma. Mọi thứ bạn cần cho lớp học này đều có trong tệp Figma đó. Bạn có thể tải tệp này xuống và nhập tệp hoặc sao chép qua cộng đồng Figma.
Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.
Sao chép qua trang Cộng đồng Figma
Chuyển đến tệp Customizing Material (Tuỳ chỉnh Material) hoặc tìm kiếm từ khoá "Visualizing dynamic color in your app with Material Design" (Hình dung màu động trong ứng dụng bằng Material Design) trong Cộng đồng Figma. Nhấp vào Duplicate (Sao chép) ở góc trên cùng bên phải để sao chép tệp này vào các tệp của bạn.
Tệp bố cục
Khi bạn xem qua tệp này, hãy lưu ý rằng đây là một tệp độc lập, bắt đầu bằng phần giới thiệu. Mỗi phần sẽ được chia thành một hàng gồm các bản vẽ được liên kết với nhau, với một số khái niệm cốt lõi cho phần đó, sau đó là các bài tập. Các phần và bài tập này được xây dựng dựa vào nhau nên cần được hoàn thành tuần tự.
Lớp học lập trình này sẽ hướng dẫn cụ thể hơn cho bạn về những khái niệm và bài tập đó. Hãy đọc cùng với lớp học lập trình để tìm hiểu thêm về các tính năng mới của Material You!
Bắt đầu với bản vẽ Intro (Giới thiệu), trong đây có các nút liên kết các bản vẽ với nhau theo thứ tự. Để truy cập vào đường liên kết, hãy nhấp vào nút này.
Cài đặt trình bổ trợ Figma
Lớp học lập trình này chủ yếu dựa vào một trình bổ trợ mới của Figma để tạo các bảng phối màu và mã thông báo động. Cài đặt trình bổ trợ Figma ngay trên trang cộng đồng Figma hoặc tìm kiếm "Material Theme Builder" trong Cộng đồng Figma.
3. Bảng phối màu Material
Trước tiên, hãy xem tổng quan về cách sử dụng màu trong Material và cách hoạt động của hệ màu mới.
Màu sắc được dùng để thể hiện phong cách và truyền tải ý nghĩa, cho dù ý nghĩa đó là cá nhân đối với người dùng, thương hiệu hay ngữ nghĩa. Hệ thống màu sắc sẽ xử lý sự biến thiên của các bảng phối màu (color scheme) thay đổi linh hoạt phát sinh khi hoạt động đầu vào của người dùng thay đổi. Logic về mối quan hệ sắc độ và sự thay đổi về sắc thái và độ bão hoà là cơ sở cho việc áp dụng màu sắc một cách linh hoạt.
Không gian màu cung cấp một cách để tạo bảng phối màu sáng và tối dễ tiếp cận được trích xuất từ một màu nguồn bằng cách tạo 5 màu chính rồi tạo bảng sắc độ, trong đó một số bước sắc độ được chọn.
Kỹ thuật dịch chuyển màu này không chỉ cung cấp một bảng phối màu dễ tiếp cận mà còn cung cấp các phương pháp tạo bảng phối màu theo thương hiệu, dễ tiếp cận và gắn kết với bảng phối màu do người dùng tạo.
Bảng phối màu được tạo từ 5 màu chính thành bảng sắc độ để tạo ra các bảng phối màu dễ tiếp cận
Giao diện có thương hiệu
M3 hỗ trợ các ứng dụng có hệ thống về các tham số tuỳ chỉnh để giúp xác định và duy trì những kiểu dáng truyền tải thương hiệu của bạn.
Lược đồ tuỳ chỉnh là một bảng phối màu không được lấy từ hình nền trên thiết bị của người dùng mà do nhà sản xuất ứng dụng tạo ra. Hệ thống màu M3 và các bảng phối màu tuỳ chỉnh là nền tảng để bật màu động trong ứng dụng.
Lược đồ tuỳ chỉnh sẽ thu hẹp khoảng cách giữa M2 và M3 để dễ dàng di chuyển bằng cách thiết lập các mã thông báo cần thiết (các vị trí màu) và tạo ra trải nghiệm mang đậm dấu ấn thương hiệu hơn.
Thêm màu thương hiệu vào Material Theme Builder
4. Bảng phối màu: Màu nhấn
Nền tảng của bảng phối màu là bộ 5 màu chủ đạo liên quan riêng lẻ đến các bảng sắc độ riêng biệt với 13 tông màu. Các tông màu cụ thể trong mỗi bảng sắc độ được chỉ định cho các vai trò màu trên giao diện người dùng. Hãy bắt đầu bằng cách mở trình bổ trợ Material Theme Builder và thiết lập màu nhấn đầu tiên: Primary (Chính).
Nếu bạn chỉ nhập màu chính, thì màu đó sẽ được dùng làm nguồn để tạo toàn bộ bảng phối màu.
- Trong phương thức bổ trợ, hãy nhấp vào Tuỳ chỉnh. Thao tác này sẽ chuyển giao diện sang giao diện tuỳ chỉnh. Trong lớp học này, chúng ta sẽ sử dụng giao diện material-theme đã được tạo. Tuy nhiên, bạn cũng có thể tạo một giao diện mới nếu muốn. Hãy tìm hiểu thêm trong phần hình dung màu động.
- Tiếp theo, chúng ta sẽ đặt màu khoá chính. Màu chính có thể là màu cốt lõi của thương hiệu hoặc màu nhấn chính được sử dụng nhiều nhất. Các màu chính còn lại sẽ được điền sẵn dựa trên màu chính. Điều này có nghĩa là bạn không cần thêm màu nếu không cần.
5. Tạo phần còn lại của giao diện
Màu chính được dùng để tạo giao diện, nhưng bạn có thể dùng màu nhấn để hỗ trợ màu chính của thương hiệu.
- Trong phương thức bổ trợ, hãy thêm màu phụ bằng cách nhấp vào ô Màu phụ. Vai trò phụ được dùng cho các thành phần ít nổi bật hơn trong giao diện người dùng, đồng thời mở rộng cơ hội thể hiện màu sắc. Màu phụ sẽ cập nhật trong sơ đồ phối màu và giao diện người dùng của ứng dụng.
- Làm tương tự cho Tertiary. Vai trò của màu thứ cấp được dùng cho các điểm nhấn tương phản có thể dùng để cân bằng màu chính và màu phụ hoặc gây sự chú ý đến một thành phần cụ thể. Nhà sản xuất có thể tuỳ ý sử dụng vai trò màu sắc cấp ba và vai trò này nhằm hỗ trợ việc thể hiện màu sắc rộng hơn trong các sản phẩm.
- Hiện tại, các vai trò trung tính được dùng cho vùng hiển thị và nền, cũng như văn bản và biểu tượng có độ nhấn mạnh cao.
Cung cấp màu phụ, màu thứ ba và màu trung tính để tuỳ chỉnh hoàn toàn bảng phối màu.
Giờ đây, màu sắc thương hiệu của bạn sẽ được đưa vào bảng phối màu cốt lõi, được điều chỉnh để phù hợp với không gian màu M3, hoàn toàn có thể truy cập và có thể xuất cũng như triển khai trong mã dưới dạng một giao diện.
6. Đang áp dụng giao diện
Vai trò và mã thông báo
Mỗi màu nhấn (chính, phụ và trung gian) được cung cấp trong một nhóm gồm 4 màu tương thích với các sắc độ khác nhau để phối, xác định điểm nhấn và thể hiện thiết kế trực quan. Nhóm này bao gồm màu nhấn, màu trên, vùng chứa và màu trên vùng chứa.
Vai trò trung tính được dùng cho các vùng hiển thị và nền, cũng như văn bản và biểu tượng có độ nhấn mạnh cao.
Mã hiệu thiết kế là những quyết định nhỏ về mặt thiết kế, được lặp lại và tạo nên phong cách hình ảnh của hệ thống thiết kế. Các mã hiệu sẽ thay thế các giá trị tĩnh (chẳng hạn như mã thập lục phân cho màu) bằng những tên rõ nghĩa. Mã thiết kế kết nối một cách có ý nghĩa các lựa chọn về kiểu mà nếu không thì sẽ thiếu mối quan hệ rõ ràng.
Trình bổ trợ Figma tạo mã thông báo và nhập màu nguồn của riêng bạn dưới dạng kiểu Figma để kết nối với các bản mô phỏng, hướng dẫn về kiểu thương hiệu và thậm chí cả hệ thống thiết kế hiện có.
Mã hiệu thiết kế tạo ra một ngôn ngữ chung giữa các vai trò màu sắc và việc triển khai.
Hệ thống phân cấp màu sắc
Khi áp dụng vai trò của màu sắc trong bản mô phỏng của bạn, hãy xem xét thứ tự tầm quan trọng hay còn gọi là hệ thống phân cấp các phần tử. Khái niệm này sẽ giúp chỉ định các vai trò tương ứng cho màu sắc của thương hiệu, đồng thời ánh xạ những vai trò này trong giao diện người dùng. Thông thường, màu sắc bão hoà hoặc tập trung hơn sẽ thu hút sự chú ý của người dùng trước tiên. Đây là lý do tại sao vai trò Màu chính được ánh xạ các thành phần tập trung hơn vào lời kêu gọi hành động. Mặc dù Material Theme Builder sử dụng hệ thống màu M3 để tạo ra các màu sắc phù hợp, nhưng việc cung cấp màu cấp hai hoặc cấp ba có độ bão hoà cao hơn sẽ tạo ra các màu sắc nổi bật hơn màu chính. Hãy xem xét thứ tự mà bạn muốn người dùng tương tác với giao diện người dùng và nội dung để chỉ định vai trò màu sắc, không phải tất cả các thành phần đều nên sử dụng màu chính.
Màu đồng nhất, bão hoà thu hút nhiều sự chú ý nhất.
7. Chuyển sang giao diện
Để áp dụng giao diện tuỳ chỉnh mà bạn đã tạo cho các thiết kế của mình, chúng ta cần đặt bản mô phỏng thành các mã thông báo trong material-theme hiện có.
Các thành phần Material đi kèm với các vai trò được ánh xạ trước và sẽ tự động hoạt động với Material Theme Builder.
Hoán đổi sang giao diện từ phương thức Material Theme Builder.
- Hãy đặt tất cả mã thông báo (kiểu Figma) trong bố cục ở bên phải để sử dụng giao diện này bằng cách chọn khung của bố cục rồi nhấp vào nút hoán đổi. Bạn sẽ thấy tiền tố kiểu cập nhật trong màu lựa chọn.
- Không phải mọi thứ đều được cập nhật? Các thành phần tuỳ chỉnh, chẳng hạn như thẻ mẹo chăm sóc cây, trước tiên cần áp dụng kiểu Figma. Chọn vùng chứa mẹo chăm sóc. Khi vùng chứa được chọn, hãy nhấp vào biểu tượng 4 dấu chấm để chỉ định một kiểu, chọn vùng chứa cấp ba. Làm tương tự với nội dung của thẻ mẹo chăm sóc, ngoại trừ việc chỉ định một on-tertiary container (vùng chứa trên thành phần thứ ba). Các nhãn nhỏ trong danh sách cũng là thành phần tuỳ chỉnh, nhưng chúng ta sẽ quay lại những nhãn đó sau!
- Các thành phần Material Design đang sử dụng các mối liên kết mặc định, nhưng bạn có thể thử nghiệm với các chỉ định kiểu để phù hợp nhất với giao diện người dùng. Hãy dành chút thời gian để thử nghiệm các hệ thống phân cấp màu sắc và cách thể hiện thương hiệu.
(Chỉ giao diện được đưa vào tệp xuất cho mã. Nếu làm việc với kỹ sư, hãy chia sẻ các bản mô phỏng để truyền đạt thông tin về việc ánh xạ mã thông báo, vì thông tin này sẽ không có trong tệp xuất)
Khi mở trình bổ trợ mà không có giao diện, bạn sẽ thấy màn hình thiết lập để bắt đầu. Lệnh "Bắt đầu" sẽ tạo ra đường cơ sở mặc định "material-theme" dưới dạng một nhóm kiểu Figma để kết nối với bản mô phỏng hoặc sử dụng với bộ công cụ Material Design.
8. Mở rộng ngoài lược đồ cốt lõi
Giờ đây, bạn đã có một chủ đề màu sắc mang thương hiệu được liên kết với các thành phần và bản mô phỏng thiết kế, nhưng có thể bạn cần thêm các màu khác. Đó là lúc một bảng phối màu mở rộng xuất hiện để cho phép thêm các màu sắc tuỳ chỉnh.
Đây có thể là màu sắc ngữ nghĩa, màu sắc dành riêng cho thương hiệu hoặc thậm chí là màu sắc dành riêng cho sản phẩm. Những màu sắc này cần được chỉ định vai trò và chuyển đổi thông qua thuật toán màu sắc hoặc vẫn giữ nguyên như khi được nhập.
Bảng phối màu mở rộng cũng mang đến khả năng kết hợp màu động (do người dùng tạo) với màu thương hiệu của bạn. Cho phép lược đồ cốt lõi có ảnh hưởng cá nhân hoá của người dùng, trong khi màu thương hiệu được đặt trong lược đồ mở rộng. Điều này có nghĩa là các phần tử trên giao diện người dùng có thể mang tính cá nhân hơn đối với người dùng và màu sắc thương hiệu của bạn có thể có những khoảnh khắc tác động chính xác hơn trong ứng dụng.
Bạn có thể mở rộng giản đồ cốt lõi để thêm các màu sắc tuỳ chỉnh. 
9. Mở rộng và tuỳ chỉnh
Việc mở rộng bảng phối màu bằng các màu sắc tuỳ chỉnh cho phép thêm các màu như màu ngữ nghĩa hoặc màu thương hiệu bổ sung.
Lược đồ tuỳ chỉnh có thêm màu sắc tuỳ chỉnh.
- Trong phương thức bổ trợ, bên dưới các màu chính, hãy nhấp vào Thêm màu.
- Giao diện hiện tại sẽ cập nhật thành một hàng Custom0 mới. Cập nhật màu này bằng cách nhấp vào ô màu rồi chọn một màu mới.
- Bạn có thể tìm thấy những màu mở rộng này dưới dạng một kiểu trong các kiểu chỉ đọc là Custom0. Cả bảng màu và bảng phối màu của chúng đều xuất hiện. Hãy liên kết một số nhãn trong danh sách với màu mới bằng cách chọn nền nhãn và chỉ định một trong các vai trò của màu đã thêm (vùng chứa on-custom0).
Đặt màu tuỳ chỉnh trong các màu đã chọn.
- Material Theme Builder tự động tạo màu dưới dạng Tuỳ chỉnh#. Để đổi tên một màu tuỳ chỉnh đã thêm, hãy mở rộng nhóm kiểu của giao diện trong bảng kiểu (bảng này sẽ xuất hiện khi bạn không chọn gì). Sau đó, hãy tìm Custom0 trong nhóm phụ nguồn. Việc đổi tên nguồn tại đây sẽ đổi tên màu trong phương thức bổ trợ.
Bạn có thể tìm thấy kiểu màu tuỳ chỉnh trong bảng điều khiển kiểu.
- Bạn có thể xoá màu đã thêm theo cách tương tự bằng cách nhấp chuột phải và xoá kiểu. Lần tiếp theo khi bạn mở trình bổ trợ, màu đã thêm sẽ bị xoá. Việc đổi tên và xoá có thể không xuất hiện trong sơ đồ màu.
10. Xin chúc mừng
Bạn đã hoàn thành việc tìm hiểu cách tạo một chủ đề màu sắc tuỳ chỉnh bằng Trình tạo giao diện Material, áp dụng chủ đề đó cho bản mô phỏng thiết kế và thêm vào bảng phối màu. Hệ thống màu mới của Material 3 mang đến màu sắc dễ tiếp cận, linh hoạt và nhất quán cho các thiết kế. Chúng tôi rất mong chờ được xem cách bạn sử dụng hệ thống này!
Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.
Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign