Giao diện là một tập hợp các kiểu hoặc thuộc tính như màu sắc, loại và hình dạng mà có thể ảnh hưởng đến giao diện trên thiết bị di động hoặc thiết bị màn hình lớn của người dùng và trải nghiệm trong ứng dụng.
Cướp lại bóng
- Để mang đến trải nghiệm phù hợp và dễ tiếp cận hơn cho người dùng, hãy đảm bảo ứng dụng của bạn áp dụng các lựa chọn ưu tiên của hệ thống, bao gồm cả các giao diện như sáng hoặc tối, động và tương phản.
- Tạo một giao diện tuỳ chỉnh để dùng làm phương án dự phòng nếu không có giao diện động.
- Cân nhắc các chế độ cài đặt loại khi sử dụng nhiều giao diện.
- Luôn kiểm tra độ tương phản của văn bản và bề mặt để đảm bảo tính dễ đọc.
Các loại giao diện
Giao diện dựa trên hệ thống hoặc ứng dụng. Giao diện hệ thống có thể ảnh hưởng đến toàn bộ hoạt động của người dùng giao diện người dùng của thiết bị và cung cấp các chế độ điều khiển tương ứng trong phần cài đặt thiết bị, khi ứng dụng giao diện này chỉ ảnh hưởng đến ứng dụng triển khai giao diện đó.
Ứng dụng của bạn phải triển khai một trong hai loại giao diện để hiển thị giao diện đó, nhưng có áp dụng giao diện của ứng dụng chỉ trong ứng dụng chứ không phải ở nơi nào khác trên thiết bị. Bạn cũng có thể ghi đè một số chế độ cài đặt giao diện của hệ thống với chế độ cài đặt trong ứng dụng.
Giao diện hệ thống
Giao diện hệ thống áp dụng trên toàn bộ thiết bị Android, bao gồm cả từng ứng dụng tuỳ thuộc vào chế độ cài đặt của người dùng. Giao diện hệ thống bao gồm cả giao diện sáng và tối, giao diện do người dùng tạo và giao diện của nhà sản xuất.
Giao diện sáng và tối
Giao diện sáng, hay Chế độ ban ngày, có chế độ hiển thị sáng với độ chói và bề mặt được tạo ra từ các giá trị sắc độ cao. Ngược lại, giao diện tối hoặc Chế độ ban đêm, hãy thay đổi giao diện người dùng để giảm độ chói. Các bề mặt được xây dựng từ bóng tối xám hoặc có giá trị sắc độ thấp.
Giao diện tối có nhiều lợi ích: giúp người dùng dễ đọc màn hình khi có nắng hoặc thiếu sáng điều kiện ánh sáng, giảm mỏi mắt do độ sáng thấp và bảo tồn pin. Ngoài ra, đây thường là tính năng ứng dụng được người dùng yêu cầu nhiều nhất.
Hãy cân nhắc những điểm sau đây khi triển khai giao diện sáng và tối:
- Bạn có thể tuỳ chỉnh bảng phối màu để thể hiện sắc nét hơn. Nếu bạn đang sử dụng Material Theme Builder (Trình tạo giao diện Material) để tạo sơ đồ, công cụ này sẽ tự động tạo giao diện tối hệ thống. Đọc thêm về cách Tuỳ chỉnh chất liệu và Hệ thống màu để tạo chủ đề có thương hiệu.
- Người dùng có thể đặt giao diện sáng hoặc giao diện tối ở phần cài đặt Màn hình ở cấp hệ thống để luôn bật, luôn tắt hoặc tự động dựa trên thời gian trong ngày. Bạn nên phản ánh cài đặt hệ thống ưa thích của người dùng, nhưng bạn cũng nên tạo các chế độ kiểm soát trong ứng dụng để cung cấp cho người dùng các nội dung sửa đổi chi tiết hơn.
- Nội dung web trong WebView cũng có thể sử dụng kiểu sáng, tối hoặc mặc định. Đọc cách hỗ trợ giao diện tối trong WebView.
- Nếu người dùng đã bật chế độ này, Android có thể buộc sử dụng giao diện tối. Bạn cũng có thể tạo một giao diện tối tuỳ chỉnh để kiểm soát tốt hơn.
- Nếu người dùng chưa bật các giao diện hoặc chế độ cài đặt khác, thì bạn có thể chọn "khoá" ứng dụng của mình sang giao diện sáng. Tuy nhiên, bạn không nên làm như vậy vì có thể đi ngược lại với nhu cầu hỗ trợ tiếp cận và cá nhân hoá của người dùng.
Giao diện do người dùng tạo
Giao diện do người dùng tạo được hỗ trợ bởi màu động, mà chúng tôi cung cấp với Material You kể từ Android 12. Khi được bật, quảng cáo động màu lấy từ các màu tuỳ chỉnh từ hình nền của người dùng để áp dụng cho ứng dụng của họ và giao diện người dùng hệ thống. Bảng màu này được dùng làm điểm bắt đầu để tạo bảng phối màu sáng và tối.
Bạn cũng có thể cập nhật chế độ cài đặt phông chữ trong phần cài đặt thiết bị để đáp ứng lựa chọn ưu tiên và nhu cầu về khả năng hỗ trợ tiếp cận. Những chế độ cài đặt này có thể và sẽ được đưa vào ứng dụng, vì vậy, hãy nhớ sử dụng giá trị pixel có thể mở rộng cho phông chữ.
Giao diện của nhà sản xuất
Nhà sản xuất thiết bị có thể cung cấp thêm khả năng tuỳ chỉnh giao diện thuộc quyền sở hữu riêng có thể ảnh hưởng đến giao diện người dùng hệ thống và chế độ cài đặt màn hình.
Giao diện ứng dụng
Cơ sở
Thành phần Material trong thư viện Material cung cấp giao diện cơ sở sử dụng bảng phối màu tím và phông chữ Roboto. Bất cứ ứng dụng nào không xác định giao diện các thuộc tính cơ sở sẽ quay lại sử dụng các thuộc tính cơ sở này.
Tuỳ chỉnh (thương hiệu)
Khi sử dụng giao diện tuỳ chỉnh, bạn sẽ có nhiều cách thể hiện hơn cho giao diện của ứng dụng và cảm nhận hoặc dùng làm phương án dự phòng khi không có sẵn một số giao diện hệ thống. Điều này rất hữu ích cho dù bạn đang làm việc với một hệ thống thiết kế tuỳ chỉnh hoàn chỉnh, hướng dẫn thương hiệu hoặc một vài màu sắc mà bạn yêu thích.
Ứng dụng của bạn cũng có thể có nhiều lược đồ tuỳ chỉnh, cho dù toàn bộ lược đồ mà người dùng có thể lựa chọn, lấy cảm hứng từ nội dung hoặc thành phần thương hiệu phụ.
Nội dung
Để tập trung hơn vào một số nội dung, giao diện người dùng có thể sử dụng màu động để kế thừa màu sắc khỏi nội dung đó. Màu nội dung phù hợp với một nguồn nội dung chính, nhưng hãy thận trọng khi sử dụng thuộc tính này trong các lượt xem có nhiều nguồn nội dung.
Một giao diện thường tác động đến tổng thể ứng dụng, nhưng cũng có thể được áp dụng một cách có chọn lọc và cùng với các chủ đề khác. Tránh quá nhiều chủ đề và sự kết hợp bằng cách giữ lại có hệ phân cấp: nguồn giao diện chính (cho dù là nguồn động hay tuỳ chỉnh) mà áp dụng với phần lớn giao diện người dùng.
Chất liệu
Material Design cung cấp giao diện cơ sở và các hệ thống tuỳ chỉnh giao diện (Màu sắc, Loại, Hình dạng). Bạn cũng có thể mở rộng tính năng Tuỳ chỉnh giao diện Material để thực hiện thêm các tính năng cho giao diện.
Thương hiệu
Nếu hệ thống giao diện Material Design không phù hợp với giao diện mà bạn muốn trong ứng dụng của mình, bạn có thể triển khai một giao diện hoàn toàn tuỳ chỉnh. Hãy nhớ kiểm thử tuỳ chỉnh về độ tương phản và mức độ dễ đọc.
Xem cách triển khai hệ thống tuỳ chỉnh trong Compose.
Thuộc tính giao diện
Thuộc tính giao diện được điều chỉnh cho phù hợp với những kiểu hình ảnh phổ biến dùng trong thiết kế giao diện người dùng để gợi lên nhiều giá trị thẩm mỹ. Trong ứng dụng, các thuộc tính này thường gắn liền với Material các hệ thống giao diện để cho phép tuỳ chỉnh trong trình tạo ứng dụng.
Màu
Sử dụng màu sắc để thể hiện phong cách và truyền đạt ý nghĩa. Đặt màu cho ứng dụng có thể rất quan trọng cho hoạt động cá nhân hoá, xác định mục đích ngữ nghĩa và tất nhiên là xác định bản sắc thương hiệu.
Trong một giao diện, bảng phối màu là một nhóm sắc độ được chỉ định cho các vai trò cụ thể được ánh xạ tới các thành phần. Tìm hiểu thêm về màu sắc trong Android Giao diện người dùng và hệ màu Material 3.
Loại
Phông chữ hệ thống của Android là Roboto (được cung cấp miễn phí cho tất cả các ứng dụng) nhưng bạn có thể tuỳ chỉnh loại. Xem xét mức độ dễ đọc của phông chữ đã chọn sao cho phù hợp vai trò của họ. Đọc về cách áp dụng loại.
Hình dạng
Việc tuỳ chỉnh hình dạng của góc vùng chứa vượt quá giá trị mặc định đường cơ sở sẽ giúp ích hãy xác định đặc điểm của ứng dụng. Ví dụ: bạn có thể sử dụng góc bo tròn đầy đủ để tạo cảm giác nhẹ nhàng và thú vị hơn hoặc sử dụng kiểu cắt góc để tạo cảm giác nghiêm túc hơn. Xem mã thông báo và kiểu hình dạng cho các thành phần Material.
Biểu tượng
Các biểu tượng Material có sẵn theo 5 kiểu: Đầy nền, Đường viền, sắc nét, bo tròn, hai tông màu. Sử dụng cùng một kiểu biểu tượng xuyên suốt ứng dụng của mình để duy trì giao diện nhất quán và chỉn chu.
Các thuộc tính khác của giao diện
Màu sắc, kiểu chữ và hình dạng tạo nên hệ thống tuỳ chỉnh giao diện Material chính, hệ thống thiết kế không chỉ giới hạn ở các khái niệm mà Material dựa trên. Bạn có thể sửa đổi các hệ thống hiện có và giới thiệu các hệ thống hoàn toàn mới — với các lớp mới và loại — để giúp các khái niệm khác tương thích với giao diện. Có thể bạn cũng cần mở rộng hoặc thay thế các hệ thống hiện có để sử dụng các thuộc tính tuỳ chỉnh ngoài những gì sẽ được cung cấp. Ví dụ: bạn có thể muốn thêm hệ thống độ dốc hoặc giãn cách thứ nguyên.
Áp dụng giao diện trong ứng dụng
Các lớp cộng về giao diện và kiểu
Cả giao diện và kiểu đều có thể có nhiều thuộc tính thiết kế. Kiểu có thể là độc lập với một chủ đề và có liên quan đến giao diện của một phần tử riêng lẻ (hoặc Chế độ xem), mặc dù bạn có thể đặt giao diện trên nhiều phần tử và thậm chí là toàn bộ . Kiểu là một lựa chọn kiểu cách có thể sử dụng lại, tương tự như kiểu hoặc mã thông báo trong phần mềm thiết kế của bạn. Ví dụ: Kiểu Cơ thể lớn là kiểu, còn Sáng và Tối là giao diện.
Triển khai một giao diện trong Compose
Một giao diện thường bao gồm nhiều hệ thống nhóm các hình ảnh và các khái niệm hành vi mà bạn lập mô hình bằng cách sử dụng các lớp có giá trị giao diện.
Xem Material Design 3 trong Compose để biết thêm thông tin về cách sử dụng Jetpack Compose để triển khai giao diện Material Design 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Triển khai một giao diện trong Khung hiển thị
Giao diện là một tập hợp các tài nguyên được đặt tên theo ngữ nghĩa mà có thể dùng trong toàn bộ ứng dụng của bạn. Giao diện có cùng cú pháp kiểu.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Chế độ xem web
Nội dung web trong WebView cũng có thể sử dụng kiểu sáng, tối hoặc mặc định. Đọc cách thực hiện Chế độ xem web hỗ trợ giao diện tối.
Tuỳ chỉnh giao diện Material
Bạn có thể sử dụng trình bổ trợ Figma trong Material Theme Builder (Trình tạo giao diện Material) để tuỳ chỉnh Giao diện Material. Khi tạo một giao diện, bạn có thể triển khai các tệp giao diện với bảng phối màu sáng và tối đã được tạo sẵn, cho phép bạn để tăng cường khả năng tuỳ chỉnh bằng cách cập nhật tệp chủ đề đã xuất bằng giá trị chính xác.
