1. Tổng quan
Tại Google I/O 2019, Material Design đã giới thiệu hướng dẫn về cách tạo giao diện tối để bổ sung cho giao diện Material hiện có của sản phẩm. Mặc dù giao diện sáng rất phù hợp để đọc nội dung dài và có độ tương phản dễ đọc hơn, nhưng độ chói thấp của giao diện tối giúp đảm bảo an toàn trong môi trường tối và có thể giảm thiểu tình trạng mỏi mắt.
Trong Material, giao diện tối được thiết kế để dùng làm chế độ bổ sung cho giao diện sáng mặc định, duy trì danh tính riêng biệt của ứng dụng (bao gồm cả kiểu định dạng cho màu sắc, hình dạng, kiểu chữ và độ nâng) thông qua một bản trình bày tinh tế và phù hợp với ban đêm.
Trong designlab này, chúng ta sẽ tìm hiểu các bước cần thiết để tạo một giao diện tối dựa trên giao diện Material hiện có bằng cách sử dụng một trong các Nghiên cứu về Material.
Chúng tôi sẽ hợp tác với Reply, một ứng dụng email được thiết kế để mang lại sự rõ ràng, dễ đọc, trực quan và dễ sử dụng. Chúng ta sẽ tìm hiểu về danh tính của Reply và đưa ra quyết định cẩn thận để giữ lại những khoảnh khắc mang thương hiệu trong ứng dụng, đồng thời tạo ra một giao diện vẫn thoải mái khi ở chế độ tối.
Chúng tôi cũng sẽ phát triển giao diện này hơn nữa và sử dụng các màu sắc tuỳ chỉnh cho thành phần hiển thị ngoài giao diện tối cơ bản để nhấn mạnh lại cá tính riêng của Reply.
Tài liệu bắt buộc:
2. Thu thập các tệp cần thiết
Trước khi bắt đầu, bạn cần tải tệp khởi đầu Figma của chúng tôi xuống. Mọi thứ bạn cần cho designlab đều có trong tệp này.
- Tải DarkTheme DesignLab Kit.fig xuống (7,6 MB)
3. Thiết lập môi trường
Tiếp theo, bạn sẽ cần thiết lập môi trường thiết kế của mình.
Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.
Sau khi đăng nhập, hãy nhập tệp bạn đã tải xuống ở bước trước. Để làm việc này, bạn chỉ cần tìm biểu tượng "nhập tệp" ở góc trên bên trái của màn hình tệp Figma rồi tìm tệp đó trong thư mục "Tải xuống".
Hãy dành chút thời gian để xem qua tệp này. Tệp này chứa một giao diện sáng, một bảng màu sắc thái được tạo sẵn dựa trên thương hiệu của ứng dụng và một bản sao của giao diện tối cuối cùng mà chúng ta sẽ tạo.
- Trong một thẻ khác, hãy mở Hướng dẫn của Material Design về giao diện tối. Chúng ta sẽ tham khảo các nguyên tắc này trong suốt lớp học thiết kế.
4. Tìm hiểu về danh tính của sản phẩm
Trước khi bắt đầu sử dụng giao diện tối cho Reply, chúng ta cần hiểu rõ một số đặc điểm thương hiệu của Reply. Điều này sẽ giúp chúng ta đưa ra lựa chọn sáng suốt về giao diện để bản sắc và thương hiệu của Reply được thể hiện nhất quán trên cả giao diện sáng và tối.
Thương hiệu Reply chú trọng vào việc giao tiếp. Ứng dụng ưu tiên các đặc điểm chức năng, ưu tiên tính dễ sử dụng hơn các yếu tố thiết kế không có mục đích chức năng.
Đối với mục đích của chúng ta trong designlab này, các yếu tố quan trọng nhất của việc thể hiện thương hiệu trong Reply là màu sắc, kiểu chữ và hình dạng.
Màu
Giao diện màu của Reply sử dụng màu chính là màu xám xanh đậm kết hợp với màu phụ là màu vàng cam.
Vì màu phụ hiếm khi được dùng, nên giao diện người dùng của Reply thường đơn sắc, sử dụng các biến thể của màu chính. Giao diện màu sắc tinh tế này giúp người dùng dễ dàng đọc nội dung mà không bị phân tâm, đồng thời giúp họ dễ dàng nhìn thấy hình đại diện là ảnh.
Do đó, màu phụ của Reply có tác động lớn ở bất cứ nơi nào màu này được sử dụng – nhấn mạnh các hành động quan trọng và thể hiện rõ ràng các khoảnh khắc mang thương hiệu trong toàn bộ ứng dụng.
Loại
Là một ứng dụng tập trung nhiều vào nội dung dựa trên văn bản và hiệu quả, kiểu chữ và hệ thống kiểu chữ là yếu tố cốt lõi trong việc thể hiện bản sắc của Reply. Ứng dụng này dựa vào phông chữ Work Sans cho toàn bộ kiểu chữ, sử dụng nhiều kiểu kết hợp 6 trọng số của Work Sans: Light, Regular, Medium, SemiBold và Bold.
Việc xây dựng toàn bộ tỷ lệ kiểu chữ từ Work Sans giúp Reply có kiểu chữ nhất quán, dễ đoán, nhưng tự nhiên và dễ đọc.
Theo nhà thiết kế Wei Huang của Work Sans, họ phông chữ này được tối ưu hoá để sử dụng trên màn hình. Điều này giúp bạn đọc các đoạn văn bản trong email hoặc nội dung khác một cách hiệu quả. Dựa trên các dạng chữ Grotesque ban đầu, phông chữ này có tính thẩm mỹ thân thiện và gần gũi hơn, đồng thời khoảng cách giữa các chữ cái rộng hơn giúp việc đọc trở nên mượt mà hơn.
Hình dạng
Reply có một câu chuyện tinh tế về hình dạng, kết hợp các thành phần tròn và sắc nét theo cách củng cố tính hiệu quả và chức năng của danh sách email, đồng thời mang đến cảm giác mềm mại hơn cho các thao tác chính và các thành phần lớn hơn.
- Thành phần nhỏ
- Thành phần nội dung nghe nhìn
- Thành phần lớn
Các thành phần nhỏ như nút và FAB có dạng bo tròn hoàn toàn, trong khi các thành phần vừa như thẻ email và thanh ứng dụng dưới cùng có dạng vuông hoàn toàn. Các thành phần lớn như trình chuyển đổi tài khoản và bảng dưới cùng có các góc bo tròn nhẹ.
Những hình dạng này kết hợp với nhau để củng cố sự hiểu biết của người dùng về vị trí của họ trong ứng dụng và cách hình thành từng thành phần, cũng như mối quan hệ của thành phần đó với phần còn lại của giao diện.
5. Cách dùng màu sắc
Khi biết cách màu sắc liên quan đến việc thể hiện thương hiệu của Reply trong giao diện sáng mặc định, chúng ta có thể điều chỉnh bảng màu một cách hợp lý để có được một giao diện tối vừa hữu dụng vừa thể hiện được thương hiệu.
Trong Material, hệ thống màu dựa trên bảng sắc độ. Các bảng này sử dụng màu thương hiệu của bạn để tạo ra một bộ biến thể hài hoà kết hợp với nhau trong một hệ thống màu toàn diện được áp dụng trên ứng dụng của bạn, đảm bảo kiểu dáng và khả năng đọc.
Trong tệp Figma, bạn có thể thấy bảng màu chính và phụ của Reply. Các mũi tên sáng phía trên mỗi bảng màu cho biết các giá trị được dùng trong giao diện sáng của Reply, trong khi các mũi tên tối cho biết các biến thể mà chúng ta sẽ dùng trong giao diện tối.
Khi tạo một giao diện tối bằng Material, các biến thể sáng hơn sẽ được chọn để hệ thống màu của bạn có thể duy trì tính biểu cảm và độ tương phản thích hợp mà không gây mỏi mắt. Màu sắc bão hoà hơn có xu hướng "rung" về thị giác trên nền tối, khiến người dùng khó đọc hơn. Các sắc độ sáng hơn cũng mang lại tính linh hoạt cao hơn trong việc thay đổi màu sắc của các vùng hiển thị được nâng lên, chúng ta sẽ xem xét điều này trong thời gian ngắn.
6. Điều chỉnh màu cho vùng hiển thị
Giờ đây, chúng ta đã có bảng sắc độ của Reply và các màu sẽ sử dụng trong giao diện tối, đã đến lúc bắt đầu điều chỉnh các giá trị màu trong bản mô phỏng.
Trong giao diện tối của Material, lớp dưới cùng của giao diện thường có màu xám đậm với giá trị hex là #121212.
- Trong tệp Figma, hãy tìm bảng vẽ có tên "Reply Starter" (Nội dung bắt đầu phản hồi) rồi chọn lớp có tên "Background" (Nền).
- Trong phần "Fill" (Tô màu) trong bảng điều khiển ở bên phải màn hình, hãy đặt giá trị màu thành 121212 rồi nhấn phím Return.
- Khung hình của bạn sẽ có dạng như sau:
Trong chế độ xem hộp thư đến đơn sắc của Reply, các thẻ email có màu sáng hơn một chút so với nền. Vì vậy, chúng ta nên áp dụng cách xử lý tương tự cho các thẻ trong giao diện tối để duy trì hệ thống phân cấp trực quan của hộp thư đến.
- Trên cùng một bảng vẽ, hãy mở rộng nhóm có tên là "Email cards" (Thẻ email) rồi chọn tất cả các lớp có tên là "Email card" (Thẻ email).
- Giống như trước đây, hãy chọn giá trị Fill (Tô màu) trong bảng điều khiển trình kiểm tra. Đặt giá trị thành 121212 rồi nhấn phím Return.
- Giờ đây, hãy chỉ chọn những lớp có tên "Lớp phủ thẻ email". Những lớp này sẽ cho phép chúng ta tạo một lớp phủ giúp phân biệt các thẻ email với nền của chúng.
- Đặt Fill (Tô màu) cho các lớp và đặt thành FFFFFF với độ mờ là 2%.
Vì các thẻ email đã bị làm tối nên văn bản của chúng ta không đọc được. Tiếp theo, chúng ta sẽ giải quyết vấn đề về màu văn bản.
7. Điều chỉnh màu văn bản
Để hiểu rõ màu văn bản trong giao diện tối, bạn cần hiểu cách áp dụng màu cho văn bản trong hệ thống Material Design nói chung.
Các thành phần Material xác định khái niệm về màu "nằm trên". Đây là những màu xuất hiện "trên" các thành phần và bề mặt chính sử dụng màu chính, màu phụ, màu bề mặt, màu nền hoặc màu lỗi. Màu "On" (Trên) chủ yếu được dùng cho văn bản để đảm bảo văn bản vẫn dễ đọc trên các bề mặt này.
Màu "bật" mặc định trong Material là trắng (#FFFFFF) và đen (#000000). Vì màu "bật" tối hoặc đen sẽ không phù hợp với các bề mặt tối màu, nên chúng ta sẽ sử dụng màu trắng.
Hệ thống thiết lập hệ thống phân cấp văn bản bằng màu "bật" này rất đơn giản. Văn bản có độ nhấn mạnh cao có độ mờ là 87%, trong khi văn bản có độ nhấn mạnh trung bình được áp dụng ở mức 60% và văn bản bị vô hiệu hoá có độ mờ là 38%.
Văn bản có mức độ ưu tiên cao không phải là màu trắng tinh khiết vì như đã thảo luận ở bước 5, #FFFFFF (một màu sáng) sẽ "rung" về mặt thị giác trên nền tối của chúng ta. Ngoài ra, văn bản có màu #FFFFFF trên nền tối có thể làm giảm khả năng đọc vì ánh sáng từ văn bản đó có vẻ như bị nhoè hoặc mờ trên nền tối.
Khi đã biết tất cả những điều này, hãy sửa màu văn bản trong giao diện tối.
- Tất cả văn bản trong bố cục khởi đầu của chúng tôi đều được nhóm lại để dễ dàng truy cập. Tìm nhóm có tên là Inbox text (Văn bản trong hộp thư đến) rồi mở rộng nhóm này để xem tất cả các lớp thành phần.
- Chọn tất cả các lớp có tiền tố "Hi -". Đây là tất cả các đoạn văn bản có độ nhấn mạnh cao trong bố cục của chúng ta.
- Trong bảng điều khiển trình kiểm tra, hãy đặt Fill (Tô màu) thành FFFFFF với độ mờ là 87%.
- Quay lại nhóm Inbox text (Văn bản trong hộp thư đến), hãy chọn tất cả các lớp có tiền tố "Med -"
- Trong bảng điều khiển của trình kiểm tra, hãy đặt Fill (Tô màu) thành FFFFFF với độ mờ là 60%.
8. Điều chỉnh màu sắc của thành phần
Trong giao diện tối được tạo bằng Material, các thành phần và bề mặt có độ nâng cao sẽ được tô màu bằng lớp phủ. Bề mặt càng cao thì lớp phủ càng mạnh và sáng. Đây là cách truyền đạt độ cao và hệ thống phân cấp khi nền quá tối để thể hiện bóng tối một cách đáng tin cậy.
Thanh ứng dụng ở dưới cùng
Đối với thanh ứng dụng dưới cùng của Reply, được nâng lên phía trên phần còn lại của giao diện người dùng hộp thư đến, chúng ta sẽ áp dụng một lớp phủ tinh tế.
- Tìm nhóm có tên là Thanh ứng dụng dưới cùng trong danh sách lớp rồi mở rộng nhóm đó để bạn có thể thấy các lớp thành phần của nhóm.
- Tìm lớp có tên là Surface (Bề mặt) trong nhóm đó rồi đặt giá trị Fill (Tô màu) của lớp này thành 121212.
- Tìm lớp phía trên lớp đó có tên là Lớp phủ bề mặt và đặt giá trị Fill (Tô màu) là FFFFFF với độ mờ là 12%.
Nút hành động nổi
Tiếp theo, chúng ta sẽ áp dụng một màu mới cho FAB. Để làm việc đó, hãy quay lại bảng sắc độ mà chúng ta đã xem trước đó và lấy giá trị 700 của màu cấp hai trong Reply.
Nếu muốn, đối với các thành phần nhỏ nhưng có tác động lớn trong ứng dụng của riêng bạn, bạn có thể chọn màu có độ bão hoà cao hơn một chút, miễn là màu đó vẫn giữ được độ tương phản phù hợp với các màu cơ bản. Chúng ta sẽ tìm hiểu lựa chọn này ở một bước sau.
- Tìm nhóm có tên FAB trong danh sách các lớp rồi mở rộng nhóm đó để xem các thành phần của nhóm.
- Tìm lớp Surface (Bề mặt) rồi chọn lớp đó. Đặt màu nền thành FCC13B.
Thẻ đã chọn
Bạn có thể nhận thấy màu vàng cam nổi bật tương tự cũng xuất hiện ở góc của các thẻ email được chọn trong hộp thư đến của Reply. Đây là một khoảnh khắc khác có thương hiệu mạnh nhưng không phù hợp với các thành phần, nền tảng hoặc văn bản.
Trong những trường hợp như thế này, tốt nhất là bạn nên bắt đầu từ màu sắc biến thể phụ của chúng tôi (trong trường hợp này là #FFFBE6) và quay lại để tìm một màu sắc thể hiện được ý tưởng một cách phù hợp mà không gây xao nhãng cho tính thẩm mỹ chức năng của Reply. Đối với nút Trả lời, chúng ta có thể sử dụng biến thể phụ thông thường.
- Chọn lớp có tên là Earmark (Đánh dấu) và đặt Fill (Màu tô) thành FFF5A0.
9. Đi xa hơn nữa: bề mặt tuỳ chỉnh
Như chúng ta đã tìm hiểu trước đó, nút hành động nổi (hay FAB) trong Reply là một thành phần được nhấn mạnh cao, đồng thời thể hiện một khoảnh khắc mang đậm dấu ấn thương hiệu trong ứng dụng. Vì lý do này, chúng ta có thể quyết định duy trì biểu thức màu của nút này trong giao diện tối của Reply bằng cách sử dụng màu phụ ban đầu của Reply.
- Tìm nhóm có tên FAB trong danh sách các lớp rồi mở rộng nhóm đó để xem các thành phần của nhóm.
- Tìm lớp Surface (Bề mặt) rồi chọn lớp đó. Đặt màu nền của nút này thành F9AA33.
Chúng ta cũng có thể muốn đưa màu chính của ứng dụng Reply trở lại làm màu bề mặt tuỳ chỉnh cho thanh ứng dụng dưới cùng và thẻ email. Để làm việc này, chúng ta chỉ cần thay đổi lớp phủ để sử dụng màu chính tối được chỉ ra trong bảng tông màu mà chúng ta đã tham chiếu.
- Tìm nhóm có tên là Thanh ứng dụng dưới cùng trong danh sách lớp rồi mở rộng nhóm đó để bạn có thể thấy các lớp thành phần của nhóm.
- Tìm lớp có tên là Surface overlay (Lớp phủ bề mặt) rồi đặt giá trị Fill (Tô màu) mới là 344955 với độ mờ là 48%. Điều này sẽ giúp màu sắc thương hiệu nổi bật hơn mà vẫn đảm bảo độ tương phản phù hợp.
- Tìm các lớp có tên Lớp phủ thẻ email trong danh sách lớp rồi chọn tất cả các lớp đó.
- Đặt Fill (Tô màu) thành ADC0CB với độ mờ là 4%.
10. Wrapup
Trong Material, giao diện tối là một phần mở rộng chu đáo và có chủ ý cho bản sắc riêng của sản phẩm khi được thể hiện trong giao diện sáng. Chỉ cần điều chỉnh màu sắc và cách truyền tải độ nâng, bạn đã tạo thành công giao diện tối đầu tiên theo Material. Xin chúc mừng!
Hãy coi các bước trong lớp học thiết kế này là một khung sườn để hiểu và xác định giao diện tối cho sản phẩm của riêng bạn, đồng thời luôn ghi nhớ các đặc tính và mục tiêu của thương hiệu và sản phẩm.
Để biết thêm hướng dẫn về giao diện tối, hãy xem quy cách Material Design cho giao diện tối.
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 kênh YouTube của Google Design.