Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Làm cho ứng dụng của bạn trở nên sống động nhờ Material Design

Tuân thủ nguyên tắc của Material Design để tạo ứng dụng làm cho người dùng của bạn vừa thích thú vừa hiểu rõ bằng phương pháp phù hợp.

Lý do phương pháp này hiệu quả

Material Design bao gồm các phương pháp hay nhất về thiết kế, quy ước chung và hình ảnh để giúp bạn xây dựng các ứng dụng có ý nghĩa mang lại cảm giác như ở nhà trên bất kỳ thiết bị nào. Khi người dùng trở nên quen với ngôn ngữ hình ảnh này, họ sẽ muốn sử dụng nó. Bằng cách làm theo thiết kế này, bạn có thể tạo ra các ứng dụng đem lại sự hấp dẫn tức thì trong khi tăng khả năng hữu dụng và cải thiện mức độ tương tác cũng như khả năng giữ chân người dùng.

Nguyên tắc thiết kế

  • Giao diện và bóng được dùng làm ẩn dụ, phần tử giao diện người dùng sẽ là các giao diện theo lớp riêng lẻ, được xếp chồng lên nhau hoặc cạnh nhau. Bóng sẽ được dùng để cho biết giao diện nào ở trước các giao diện khác, giúp tập trung sự chú ý và thiết lập thứ bậc.
  • Hình ảnh sẽ ở chế độ tràn lề. Giảm thiểu khoảng cách giữa các ảnh cũng như lề giữa các ảnh và mép màn hình để đem lại giao diện người dùng phong phú hơn và đa dạng hơn về nội dung.
  • Màu sắc sẽ được sử dụng đậm nét để nhấn mạnh thương hiệu và các phần tử quan trọng trong giao diện người dùng. Hãy nhớ chọn màu chính và màu nhấn để cung cấp trải nghiệm nhất quán trong suốt ứng dụng của bạn. Cân nhắc việc tận dụng API bảng màu để kéo màu trực tiếp từ nội dung nhằm mang lại trải nghiệm phong phú hơn.
  • Chỉ số và đường chính sẽ được dùng để căn chỉnh và định kích thước nội dung theo lưới đường cơ sở 8dp, nhằm đảm bảo khả năng dễ đọc cũng như nhất quán về hình ảnh. Vị trí văn bản chính xác hơn có thể sử dụng lưới 4dp. Nếu thích hợp, hãy căn chỉnh các phần tử, chẳng hạn như văn bản nội dung, hình thu nhỏ, tiêu đề thanh ứng dụng và các mục tương tự theo đường chính tiêu chuẩn.
  • Chuyển động có ý nghĩa, bao gồm hoạt ảnh và chuyển đổi, sẽ được sử dụng nhằm giúp hướng dẫn và tập trung người dùng đồng thời cung cấp cầu nối từ một màn hình sang một màn hình kế tiếp. Chuyển động có ý nghĩa trong cách kể chuyện bằng hình ảnh có thể phát huy hiệu quả lâu dài trong việc đem lại trải nghiệm người dùng thú vị và giúp duy trì tính liên tục của hình ảnh.
  • Tương tác phản hồi như phản hồi cảm ứng cơ bản sẽ có dạng gợn sóng trên giao diện. Trên thiết bị sử dụng phiên bản trước 5.0, gợn sóng không phải là tính năng được mong đợi nên hãy làm theo hành vi android:selectableItemBackground mặc định. Ngoài gợn sóng trên giao diện, giao diện tương tác cũng sẽ nâng lên khi chạm để tiếp xúc với ngón tay của người dùng khi nhập và mọi thay đổi sẽ tỏa ra từ điểm tiếp xúc.

Các thành phần giao diện người dùng của hệ thống

  • Thanh trạng thái hệ thống trên Android 5.0+ sẽ được đổ màu nhằm bổ sung cho màu chính của ứng dụng hoặc nội dung trên màn hình hiện tại. Đối với hình ảnh tràn lề, thanh trạng thái có thể trong suốt. Đối với API cấp 23+, bạn có thể đặt thanh trạng thái hệ thống thành thay đổi màu sáng (trong đó các biểu tượng sẽ tối hơn).
  • Thanh ứng dụng và thanh công cụ sẽ được dùng để thông báo và giúp thể hiện nhãn hiệu bằng cách sử dụng màu, kiểu chữ và biểu trưng sản phẩm (tránh sử dụng biểu tượng trình khởi chạy). Trên các màn hình có hình ảnh phong phú, thanh ứng dụng có thể trong suốt để mang lại trải nghiệm giao diện người dùng phong phú hơn vì hình ảnh sẽ chạy cạnh nhau và thậm chí có thể xuất hiện phía sau thanh ứng dụng hoặc thanh trạng thái. Hãy nhớ bảo vệ văn bản bằng cách sử dụng các lưới chặn cho mọi biểu tượng trong thanh ứng dụng trong suốt. Đồng thời, hãy cân nhắc sử dụng kỹ thuật cuộn mang lại trải nghiệm hình ảnh phong phú hơn cho người dùng.
  • Tab sẽ tuân theo nguyên tắc tương tác và định kiểu của Material Design. Tab phải vuốt được theo chiều ngang mà không có dấu phân tách dọc giữa các tab. Biểu thị tab đã chọn bằng một hoặc cả hai thay đổi màu nền và một dải nhỏ bên dưới văn bản tab (hoặc biểu tượng), được đổ màu nhấn. Các tab và thanh ứng dụng ở trên cùng một độ cao bề mặt trừ khi có phân định rõ ràng về thứ bậc.
  • Ngăn điều hướng sẽ chỉ chứa các phần tử điều hướng chính và tuân theo nguyên tắc hình ảnh mới. Ngăn này sẽ xuất hiện ở phía trước của cả thanh ứng dụng và nội dung trên màn hình, đồng thời sẽ nằm dưới thanh trạng thái hệ thống. Phương pháp hay nhất là nhớ mở ngăn này trong lần đầu chạy ứng dụng của bạn để cải thiện khả năng phát hiện.
  • Cân nhắc sử dụng điều hướng dưới cùng nếu ứng dụng của bạn có 3 đến 5 điểm đến cấp cao nhất yêu cầu quyền truy cập trực tiếp. Mẫu điều hướng dịch chuyển dưới cùng được đề xuất vì nó có nhiều tác động trực quan hơn và cho phép các chuỗi văn bản dài hơn trong nhãn. Hãy nhớ có thanh điều hướng ở dưới cùng có thể truy cập từ hầu hết các màn hình, nhưng loại trừ màn hình chi tiết sâu và cho phép thanh ẩn khi người dùng cuộn.

Mẫu và phần tử giao diện người dùng

  • Chủ đề sẽ được cập nhật thành chủ đề material mới nhất để giao diện ứng dụng không bị lỗi thời. Cập nhật chủ đề của hệ thống là một trong những cách nhanh nhất để trau chuốt hình ảnh. Hãy nhớ cập nhật từ chủ đề Gingerbread và Holo để đem lại trải nghiệm người dùng và thiết kế hình ảnh nhất quán. Cập nhật chủ đề của các phần tử giao diện người dùng như trình chọn, bộ chọn, hộp thoại, menutrường văn bản theo tiêu chuẩn của Material Design.
  • Nút là phần tử tương tác được sử dụng nhiều nhất trong ứng dụng, vì vậy, cập nhật nút lên mẫu thiết kế trực quan mới nhất là một trong những thay đổi có tác động lớn nhất mà bạn có thể thực hiện. Nếu bạn đang sử dụng các nút tùy chỉnh, hãy tránh góc quá tròn, màu đậm hoặc bề mặt bóng loáng vì các loại nút này làm cho ứng dụng của bạn trông lỗi thời. Sử dụng nút nhô lên cho những thao tác quan trọng cần làm nổi bật một cách trực quan hoặc cho các bố cục nhiều văn bản mà ở đó nút phẳng sẽ bị mất đi. Đối với những thao tác đơn giản không cần phải nổi bật, nút phẳng là nút dùng phổ biến nhất. Đối với thao tác quan trọng nhất trên màn hình có sẵn, hãy sử dụng nút tác vụ nổi (FAB), một nút khác biệt về hình ảnh nổi phía trên tất cả các phần tử khác của giao diện người dùng.
  • Ôdanh sách sẽ được sử dụng khi người dùng đang so sánh trực tiếp các mục với nhau. Sử dụng chế độ xem danh sách cho nội dung nhiều văn bản mà người dùng sẽ lướt nhanh. Sử dụng ô khi nội dung chủ yếu là hình ảnh. Hãy nhớ sử dụng tiện ích RecyclerView khi tạo danh sách và ô để có nhiều tùy chọn bố cục mạnh mẽ hơn.
  • Thẻ sẽ được dùng khi kết hợp nhiều loại nội dung, trong đó người dùng đang khám phá nội dung và không so sánh trực tiếp hình ảnh hoặc chuỗi văn bản. Đồng thời sử dụng khi có nhiều thao tác trên giao diện. Mặc dù thẻ làm các mục bật lên và giúp các mục đó tập trung vào hình ảnh nhưng cần biết rằng việc lạm dụng thẻ sẽ tạo ra hiện tượng nhiễu hình ảnh không cần thiết. Hãy nhớ sử dụng tiện ích CardView khi tạo nội dung thẻ.
  • Tìm kiếm trong ứng dụng sẽ được thực hiện bằng cách sử dụng tìm kiếm trực tiếp trong thanh ứng dụng. Nếu tìm kiếm nội dung là chức năng chính của ứng dụng thì hãy cân nhắc sử dụng thanh ứng dụng cho tiện ích tìm kiếm liên tục.
  • Bộ chia sẽ được dùng khi phân tách các phần nội dung chính hoặc cung cấp những khác biệt quan trọng giữa các vùng văn bản. Hãy thận trọng khi dùng bộ chia cho mọi mục trong chế độ xem dạng danh sách đơn giản vì bộ chia này sẽ tạo ra nhiều hiện tượng nhiễu hình ảnh mặc dù có cải thiện không đáng kể về khả năng dễ đọc. Thay vì vậy, bạn nên sử dụng dấu cách trắng và kiểu chữ để giúp phác họa nội dung.
  • Khi thiết kế trạng thái trống, hãy nhớ cho người dùng biết lý do sử dụng trạng thái trống và bao gồm một nút gọi hành động để giải quyết trạng thái trống.

Điểm mới dành cho Android 7.0

  • Thông báo đã được sửa đổi với các khu vực nội dung, tương tác, điều khiển người dùng và nhập văn bản ngắn mới.

Ví dụ