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