1. Giới thiệu
Lần cập nhật gần đây nhất: 21/9/2021
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.
Hãy sẵn sàng khám phá các tính năng màu động mới ra mắt cùng với Material You. Trong lớp học này, bạn sẽ tạo bảng màu động để tìm hiểu cách hoạt động của hệ thống màu, các khái niệm thúc đẩy việc tạo bảng màu dễ tiếp cận và các phương pháp giúp hình dung ứng dụng của bạn bằng màu động thông qua các công cụ thiết kế mới nhất.
Kiến thức bạn sẽ học được
- Tính năng mới trong màu sắc của Material Design
- Cách áp dụng màu do người dùng tạo cho ứng dụng
- Các công cụ trợ giúp
Đ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.
Bạn cần có
- Tài khoản Figma
- Tệp Figma Dynamic Color 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 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 Visualizing dynamic color in your app with Material Design (Hình dung màu động trong ứng dụng bằng Material Design) hoặc tìm kiếm từ khoá "Visualizing dynamic color in your app with 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
Hãy xem qua tệp này. Bạn sẽ nhận thấy rằng đây là một tệp độc lập, và 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 đó. Bạn nên đọc thêm tài liệu song song với việc tham gia lớp học lập trình này để 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ự, bạn sẽ truy cập các bản vẽ liên kết đó bằng cách nhấp vào nút.
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ợ Figma mới để 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" (Công cụ tạo giao diện Material) trong Cộng đồng Figma.
3. Các khái niệm về màu sắc
Màu động là gì?
Material You tái hiện màu sắc thành một trải nghiệm mang tính cá nhân hoá hơn. Thông qua tính năng trích xuất màu động, phạm vi trải nghiệm màu sắc có thể có sẽ rộng hơn đáng kể.
Màu động là một phần quan trọng của Material You, trong đó thuật toán lấy màu sắc tuỳ chỉnh từ hình nền của người dùng để áp dụng cho ứng dụng và Giao diện người dùng hệ thống.
Độ chói
Màu động được thiết kế để hoạt động trong nhiều bối cảnh không thể đoán trước. Để quản lý tỷ lệ tương phản trong nhiều bối cảnh xem, mức độ chói là thuộc tính chính cho phép các màu kết hợp thành công ngay cả khi nhóm sản phẩm không kiểm thử từng tổ hợp màu cụ thể.
Các phần tử có độ chói tương tự sẽ không có độ tương phản phù hợp để dễ đọc, trong khi các phần tử có giá trị độ chói khác nhau sẽ dễ phân biệt hơn.
Bảng màu sắc độ
Bảng sắc độ là sự chuyển đổi một sắc độ (màu được trích xuất linh động) thành một quang phổ gồm các tông màu có liên quan. Việc chuyển đổi một màu thành 13 sắc độ cho phép áp dụng một nhóm dải sắc độ (gọi là bảng sắc độ) trong nhiều ngữ cảnh, từ các phần tử riêng lẻ bên trong một thành phần cho đến toàn bộ giao diện ứng dụng.
Màu được chuyển đổi thành một dải tông màu.
4. Trích xuất màu
Gieo mầm cho kế hoạch
Hãy xem cách màu động hoạt động với Material Theme Builder.
- Mở Material Theme Builder. Khi bạn chọn động, hãy thả một hình ảnh vào hoặc chọn một hình ảnh trong trình duyệt tệp. Hãy lưu ý rằng màu cơ sở sẽ cập nhật dựa trên hình ảnh.
- Các giá trị màu được trích xuất từ hình nền và được chỉ định một "loại" để xác định mối quan hệ giữa màu đó với các màu khác trong một bảng phối màu. Những "màu chính" này (ở bên phải) đã được cập nhật để phản ánh các giá trị này.
- Sau đó, các màu này được chuyển đổi thành bảng tông màu dựa trên độ chói, tạo ra 5 dải màu có tông từ sáng đến tối. Các bảng sắc độ được gắn nhãn như vậy trong đầu ra màu.
- Từ 5 dải sắc độ, các sắc độ cụ thể (dựa trên độ chói) được đưa vào các vai trò xác định trước tạo nên một giản đồ. Màu sắc được ánh xạ đến một bảng phối màu thông qua mã hiệu thiết kế.
Vai trò của màu thứ ba được tạo từ dải sắc độ thứ ba và được liên kết với các thành phần.
5. Giao diện và mã hiệu
Mã hiệu thiết kế mang lại sự linh hoạt và tính nhất quán cho một sản phẩm bằng cách cho phép nhà thiết kế chỉ định vai trò màu sắc của một phần tử trong giao diện người dùng, thay vì một giá trị cố định. Mã thông báo đóng vai trò là cầu nối giữa vai trò được chỉ định của một phần tử và giá trị màu được chọn cho một vai trò. Thiết kế theo vai trò của màu sắc thay vì màu sắc cụ thể là điều cơ bản hơn khi ra mắt màu sắc động.
Giao diện chứa các mã thông báo Material Design cho cả màu sắc và kiểu chữ, đảm bảo rằng thiết kế và mã có một nguồn dữ liệu duy nhất để biểu thị đường cơ sở, cùng với các bảng màu do người dùng tạo và các giá trị tuỳ chỉnh.
Trong Figma, trình bổ trợ sẽ tạo các mã thông báo này dưới dạng kiểu. Điều này có nghĩa là nếu sử dụng các kiểu được tạo, bạn sẽ sử dụng mã thông báo MD.
Màu sắc trong bảng màu sắc độ được liên kết với một bảng phối màu sáng hoặc tối thông qua mã thiết kế.
Hệ thống ánh xạ sẽ chỉ định một tông màu cho từng phần tử trong một thành phần.
Mã thông báo thiết lập
Để áp dụng màu động cho các thiết kế, chúng ta cần đặt bản mô phỏng thành mã thông báo trong giao diện Material hiện có.
- 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 swap (hoán đổi). Bạn sẽ thấy tiền tố kiểu cập nhật trong màu lựa chọn.
Nhấp vào nút hoán đổi để cập nhật giao diện được kết nối dùng trong thiết kế đã chọn.
- Bây giờ, hãy thả một hình ảnh vào hoặc chọn một hình ảnh trong trình duyệt tệp. Các giá trị của bản mô phỏng sẽ lấy màu động được trích xuất từ hình ảnh.
- Nhấp vào nút trộn, thao tác này sẽ chọn ngẫu nhiên màu cơ sở để ngoại suy thay vì trích xuất từ hình ảnh. Đây là một cách khác để xem nhanh mức độ ảnh hưởng của màu động đến bản mô phỏng thiết kế.
Nhấp vào nút trộn để chọn màu cơ sở ngẫu nhiên.
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ựa chọn "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.
6. Áp dụng cho giao diện người dùng
Các bố cục được cung cấp được tạo bằng Material Design Kit, sử dụng các mã thông báo Material Design, nhưng có một số phần tử tuỳ chỉnh không được liên kết.
- Chọn thẻ bài viết. Trong phần tô màu, hãy đặt kiểu (biểu tượng bốn dấu chấm) thành material-theme/surface. (Bạn cũng có thể tìm kiếm bề mặt).
- Trong một quy trình tương tự, hãy chọn loại trong thẻ và đặt thành on-surface và hộp đánh dấu thành chính.
Các kiểu Figma được dùng trong thẻ của thiết kế.
Tiếp theo, chúng ta sẽ tạo thêm các bản mô phỏng để lặp lại các lược đồ còn lại.
Tạo giao diện và lặp lại
Giờ đây, chúng ta đã kết nối hoàn toàn một bản mô phỏng để hình dung màu động, nhưng chúng ta cũng có thể tạo nhiều giao diện và hoán đổi các giao diện đó trên các bản mô phỏng riêng biệt để hình dung một loạt màu động cùng một lúc.
- Trong phương thức trình bổ trợ, hãy nhấp vào trình đơn thả xuống rồi chọn "Thêm giao diện mới".
- Tạo một tên giao diện riêng biệt rồi nhấp vào "Tạo giao diện". Thao tác này cũng sẽ tạo ra các sơ đồ màu mới cho từng chủ đề được tạo.
Thêm một giao diện mới thông qua trình đơn thả xuống.
- Thêm hình ảnh hoặc xáo trộn màu cơ bản.
- Trong phương thức bổ trợ, hãy chọn một bản mô phỏng (thành phần giao diện người dùng của ứng dụng) rồi nhấp vào swap (hoán đổi). Thao tác này sẽ cập nhật các giá trị kiểu thành giao diện hiện tại xuất hiện trong trình đơn thả xuống.
- Sao chép (CMD + D) bản mô phỏng.
Nhấp vào nút hoán đổi để cập nhật giao diện được kết nối dùng trong thiết kế đã chọn.
- Lặp lại các bước từ 1 đến 5.
Giờ đây, bạn có nhiều thiết kế với các phiên bản màu động khác nhau!
7. Xin chúc mừng
Chúc mừng bạn đã học và áp dụng thành công màu động! Material Theme Builder (Trình tạo giao diện Material) giúp bạn sử dụng màu sắc trong Material Design dễ dàng hơn bằng cách trực quan hoá màu động, tạo giao diện tuỳ chỉnh và xuất sang mã.
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