Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Android từ đầu: Mẫu thiết kế giao diện thông dụng

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Android From Scratch.
Android From Scratch: How to Run Your Application on a Physical Device
Android From Scratch: Understanding Views And View Groups

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Mặc dù Android cho phép bạn tạo hầu như bất kỳ View tuỳ biến hoặc giao diện người dùng mà bạn muốn, nhưng có một vài mẫu giao diện người dùng đã được xác định làm việc tốt cho người dùng trong những tình huống phù hợp. Trong hướng dẫn này, bạn tìm hiểu về một số mẫu này và làm thế nào chúng có thể giúp người dùng của bạn bằng cách tạo ra một trải nghiệm tuyệt vời khi sử dụng ứng dụng của bạn.

1. Màn hình chính

Màn hình đầu tiên mà người dùng thấy khi mở ứng dụng của bạn thường là quan trọng nhất. Từ đây người dùng của bạn sẽ có thể để thực hiện một hành động nhanh và thoát khỏi hoặc tiếp tục khám phá ứng dụng của bạn để sàng lọc bất cứ điều gì mà họ đang cố gắng để thực hiện.

Chọn các mẫu thiết kế giao diện người dùng cho màn hình này dựa trên các mục tiêu của ứng dụng của bạn. Điều quan trọng cần lưu ý là hầu hết các ứng dụng sử dụng nhiều hơn một mẫu trên màn hình của họ miễn là nó hỗ trợ mục tiêu tổng quát của ứng dụng của họ.

Danh sách và chi tiết

Mẫu danh sách và chi tiết là một trong những mẫu phổ biến nhất mà bạn sẽ thấy trên thiết bị di động. Như tên gọi của nó, bạn trình bày dữ liệu trong một định dạng danh sách, và khi một mục trong danh sách đó được nhấn vào, nó sẽ mở ra một màn hình mới hiển thị thông tin chi tiết.

Mặc dù mô hình này được gọi là danh sách và chi tiết, nhưng không có lý do gì để bạn không thể áp dụng logic này cùng một thiết kế với kiểu lưới. Điểm mấu chốt của mẫu này là mỗi mục trong danh sách/lưới, khi được chọn, sẽ thực hiện cùng một thao tác là hiển thị chi tiết.

Một ví dụ về mẫu này có thể được nhìn thấy trong ứng dụng Google Play Music, nó trình bày cho người dùng một lưới gồm các album có thể được chọn để hiển thị các bài hát trong album đó. Hangouts là một ví dụ khác về mẫu danh sách và chi tiết. Hangouts cho phép bạn chọn một cuộc trò chuyện để xem toàn bộ cuộc trò chuyện và tương tác với nó.

Google Play Music Grid of Items

Carousel

Đôi khi, một danh sách sẽ là không đủ. Nếu ứng dụng của bạn có nhiều mục khác nhau và một cách để trình bày nội dung với một hình ảnh, thì mẫu carousel có thể đáp ứng nhu cầu của bạn. Trong mẫu này bạn lấy mẫu danh sách và chi tiết và sử dụng nó nhiều lần trên cùng một màn hình. Sự khác biệt là, danh sách có thể được cuộn theo chiều ngang thay vì theo chiều dọc.

Một ví dụ về mẫu này có thể được nhìn thấy trong ứng dụng Google Play Store, trong đó sẽ hiển thị một carousel cho nhiều mục ứng dụng mà bạn có thể duyệt.

Carousel Pattern in the Google Play Store

Bản đồ

Không phải tất cả các ứng dụng được xây dựng xoay quanh việc hiển thị một danh sách các dữ liệu cho người dùng. Một trong những đặc điểm chính của thiết bị di động là chúng vô cùng hữu ích cho việc tìm kiếm các thứ trong khi người dùng ra khỏi nhà và khám phá thế giới. Bản đồ thường tạo ra một công cụ tuyệt vời cho mục đích này.

Nếu ứng dụng của bạn được xây dựng xoay quanh vị trí, điều hướng, hoặc du lịch, thì bản đồ có thể hoàn hảo cho người dùng của bạn. Mặc dù ví dụ rõ ràng về mẫu này là trong Google Maps, nhưng nhiều ứng dụng khác, chẳng hạn như WazeUber, cũng được tích hợp một bản đồ như là điểm trung tâm của chúng.

Map Home Screen in Waze

2. Chuyển hướng và hành động

Mặc dù bạn đã biết về một số các mẫu giao diện người dùng mà bạn có thể sử dụng trên màn hình chính của ứng dụng, nhưng bạn có lẽ vẫn còn cần một cách để điều hướng đến các phần khác trong ứng dụng của bạn. May mắn là có là một vài mẫu thường được sử dụng để điều hướng người dùng Android để giúp bạn tạo ra một ứng dụng tuyệt vời để làm việc.

Tab

Tab thường được sử dụng kết hợp với mẫu danh sách và chi tiết. Nếu bạn có nhiều danh sách có liên quan một chút, mà có các mục khác nhau, thì sử dụng một ViewPager với các tab cho mỗi mục là một giải pháp hiệu quả để điều hướng ứng dụng của bạn.

Mô hình này rất hữu ích khi bạn chỉ có một vài phần trong ứng dụng của bạn vì nó cung cấp một cách nhanh chóng và dễ dàng cho người dùng để thay đổi view. Tuy nhiên, nếu bạn có 5 hay nhiều mục hơn mà bạn muốn đưa vào tab, thì bạn nên xem xét di chuyển các hoạt động điều hướng của bạn vào một drawer.

ViewPager Tab Design Pattern

Theo các nguyên tắc material design của Android, các tab có thể cũng tồn tại ở dưới cùng của màn hình, như đã thấy trong ứng dụng Google+.

Bottom Tabs Design Pattern

Navigation Drawer

Navigation Drawer là một View có thể được trượt từ cạnh bên vào trong của một ứng dụng để trình bày một danh sách các tùy chọn cho người dùng. Mẫu thiết kế này được sử dụng khá thường xuyên trong ứng dụng Android để cung cấp một cách để thay đổi các phần trong một ứng dụng hoặc thực hiện hành động toàn cục mà không nhất thiết phải gắn với bất kỳ một màn hình nào.

Vì mẫu này thêm chính nó vào điều hướng cao nhất, nó có thể dễ dàng được kết hợp với các mẫu tab để tạo ra một bảng điều hướng phức tạp trong các ứng dụng của bạn.

Navigation Drawer Design Pattern

Thanh công cụ

Như bạn có thể thấy, hầu hết các màn hình trong một ứng dụng Android bao gồm một thanh công cụ ở phía trên của màn hình. Ít nhất, thanh công cụ này bao gồm một tiêu đề cho phần hoặc ứng dụng, nhưng mẫu thiết kế của thanh công cụ cũng tạo điều kiện lắp thêm các nút hành động hoặc trực tiếp trên thanh công cụ hoặc trong một menu ẩn cho phép người dùng thực hiện các nhiệm vụ trong phần ứng dụng.

Một ví dụ về điều này có thể tìm thấy trong ứng dụng Google Keep, cho phép bạn thay đổi màu sắc của một ghi chú, thêm những người khác vào ghi chú, và một số hành động khác xuất hiện trong menu ẩn.

Toolbar Design Pattern With Action Buttons

Nút Floating Action

Mẫu nút Floating Action cho phép các nhà phát triển nhấn mạnh một hành động duy nhất mà người dùng của bạn có thể thực hiện trong một phần của một ứng dụng. Ví dụ về các hành động như vậy là Floating Action trong một ứng dụng email, một nút play/pause trong một ứng dụng nghe nhạc hoặc một nút add trong ứng dụng quản lý dữ liệu hoặc sự kiện.

Mẫu này không nên được sử dụng cho các hành động không quan trọng hoặc bất cứ điều gì tiêu cực vì nút Floating Action được thiết kế để có một cái nhình mạnh mẽ trên màn hình khi sử dụng.

Floating Action Button

3. Các nhân tố hình thức của Android

Trong khi một số các mô hình được thảo luận ở trên tự nó thêm vào các yếu tố hình thức khác, chúng chủ yếu liên quan đến thiết kế ứng dụng điện thoại hoặc máy tính bảng. Gần đây, Google đã chuyển sang sử dụng Android trên các loại hình thiết bị khác nhau, bao gồm cả Tivi và đồng hồ thông minh. Điều này sinh ra mẫu thiết kế mới để tối ưu hoá cho mỗi nhân tố hình thức.

Android Wear

Do kích thước màn hình hiển thị nhỏ hơn, nên một tập hợp các mẫu thiết kế giao diện người dùng hoàn toàn mới đã được giới thiệu cho Android Wear. Wear hoạt động trên một hệ thống thẻ và các nút hành động mà người dùng có thể vuốt qua lại bằng cách sử dụng một GridViewPager.

Bạn cũng có thể tiếp tục sử dụng các mẫu danh sách và chi tiết, nhưng danh sách các phần tử sẽ cần phải lớn hơn và gắn vào đúng chỗ để người dùng có thể truy cập chúng một cách dễ dàng. Thông tin thêm về thiết kế cho Android Wear có thể được tìm thấy trong tài liệu chính thức.

Android Wear Card and Action Button UI Design Pattern

Tivi

Trong khi các mẫu thiết kế cho các thiết bị Android Wear phải cân nhắc kích thước màn hình nhỏ hơn nhiều, thì thiết kế cho Android TV gặp vấn đề ngược lại. Màn hình lớn hơn nhiều và người dùng có xu hướng ngồi xa chúng hơn.

Không chỉ ứng dụng TV của bạn cần phải cân nhắc hai thứ này, ti vi còn sử dụng một bộ điều khiển D-pad chứ không chạm vào màn hình để tương tác. Vì lý do này, phương pháp tiếp cận carousel hoạt động rất tốt.

TV UI Design Pattern Rows of Content

Người dùng có thể di chuyển giữa các hàng của các phần tử và sau đó di chuyển theo chiều ngang để xem nội dung. Khi người dùng tìm thấy một mục mà họ muốn xem, họ có thể chọn để xem màn hình chi tiết, nó cung cấp một danh sách các hành động cho mục đó.

Tổng kết

Mặc dù điều này còn ít so với danh sách đầy đủ của các mẫu thiết kế giao diện người dùng Android, nhưng bạn đã được giới thiệu một số mô hình phổ biến nhất trên Android và cách chúng được sử dụng để làm cho ứng dụng dễ sử dụng hơn.

Như đã nói, không phải tất cả các ứng dụng đều giống nhau và có thể có những khi bạn cần một giải pháp sáng tạo cho cách người dùng tương tác với ứng dụng của bạn. Vấn đề là tất cả các mẫu có điểm chung là chúng đơn giản, có thể sử dụng, và không làm cho người dùng chán nản.

Khi bạn tiếp tục sử dụng và tìm hiểu về Android, bạn sẽ đạt được những kinh nghiệm cần thiết để biết những gì làm việc và không làm việc trong một tình huống nhất định.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.