Hướng dẫn này giúp bạn bắt đầu thiết kế cho Android bằng cách chuyển đổi các thiết kế hiện có trên thiết bị di động iOS sang Android bằng cách sử dụng các mẫu UX cơ bản của Android, cùng với Material Design.
Được phác thảo để đảm bảo tính đồng nhất về thiết kế và được sắp xếp theo thứ tự để tăng hiệu quả. Nếu đang tuân theo một hệ thống thiết kế cơ bản dùng chung, thì bạn có thể chuyển đổi các thiết kế bằng hệ thống của riêng mình thay vì Material 3. Cả Android và iOS đều tuân thủ ý tưởng rằng nội dung là yếu tố quan trọng nhất.
Sau đó, thương hiệu có thể xuất hiện dưới dạng màu sắc, kiểu chữ và hình dạng. Điều này không chỉ giúp nội dung dễ đọc mà còn giúp bạn dễ dàng tạo ra sự gắn kết.
Bắt đầu với các thiết kế iOS
Trước khi bắt đầu, hãy sao chép ứng dụng iOS của bạn. Các ứng dụng iOS được chia thành 3 phần: Thanh, Chế độ xem và Nút điều khiển. Bạn có thể sử dụng cấu trúc này để dịch, sau đó mới tạo kiểu.
Hãy xem các phần của một ứng dụng Android.
1. Xoá giao diện người dùng hệ thống iOS
Xoá thanh trạng thái và chỉ báo trang chủ. Giờ đây, bạn có thể thực hiện việc này một cách đơn giản hơn.
2. Đổi kích thước khung hình
Bạn có thể sử dụng kích thước nhỏ gọn của Android, 412 dp. Mặc dù vậy, hãy cân nhắc một loạt thiết bị ngay cả trong một kích thước lớp cửa sổ. Ví dụ: kiểm thử ở 360 dp để phù hợp với màn hình nhỏ hơn và điều chỉnh trên tất cả các kích thước lớp cửa sổ.
3. Thay thế bằng Thanh hệ thống Android
Giao diện người dùng hệ thống Android có thể khác nhau tuỳ thuộc vào thiết bị và chế độ cài đặt của người dùng, nhưng việc hiển thị giao diện người dùng hệ thống gốc có thể giúp thiết kế của bạn có thêm ngữ cảnh. Đặt thanh thông báo ở trên cùng và thanh điều hướng bằng cử chỉ hoặc thanh điều hướng bằng 3 nút ở dưới cùng.
Để biết thêm thông tin, hãy xem bài viết Thanh hệ thống Android.
4. Tuỳ thuộc vào chế độ điều hướng của bạn
Thay thế Tabbar (thanh điều hướng dưới cùng) bằng Thanh điều hướng.
Xem lại bản đồ quy trình của bạn. Ứng dụng iOS của bạn có sử dụng trình đơn khác không? (Các phương pháp hay nhất của HIG đề xuất không sử dụng mẫu này). Chỉ nên có tối đa 5 mục, giữ thanh điều hướng dưới cùng cho hoạt động điều hướng chính, đánh giá xem có mục nào là mục phụ (chẳng hạn như hồ sơ hoặc chế độ cài đặt) có thể chuyển vào Thanh ứng dụng trên cùng hay không, hoặc có thể bạn có một hành động chính có thể chuyển thành FAB?
Thanh điều hướng chính phải luôn xuất hiện trên các khung hiển thị mẹ (cấp cao nhất cho một phần trong sơ đồ luồng). Các thành phần hiển thị con (mọi thứ nằm trong thành phần hiển thị mẹ) có thể bao gồm thành phần điều hướng chính nếu chúng nằm ở vị trí cao hơn trong hệ thống phân cấp điều hướng và không phải là phương thức.
Cập nhật Thanh điều hướng dưới cùng bằng các biểu tượng và nhãn phù hợp. Cả hai nền tảng đều tránh chuyển động ngang giữa các đích đến điều hướng.
5. Thanh điều hướng thành thanh ứng dụng trên cùng
Chia nhỏ các thành phần này theo từng phần; thành phần hiển thị mẹ trước, sau đó là thành phần hiển thị con. Thanh ứng dụng bao gồm phía bên trái: phần điều hướng và tiêu đề, và phía bên phải: các mục hành động.
Nếu ứng dụng của bạn sử dụng trình đơn ngăn điều hướng thay vì thanh điều hướng dưới cùng, thì biểu tượng ngăn sẽ xuất hiện trên tất cả các khung hiển thị mẹ.
Nếu ứng dụng của bạn không có thanh điều hướng dọc hoặc ngăn kéo, thì các khung hiển thị mẹ sẽ không hiển thị biểu tượng điều hướng chính.
Theo mặc định, tiêu đề được căn trái trong Thanh ứng dụng cho Android.
Các khung hiển thị con có một mũi tên lên ở vị trí biểu tượng điều hướng. Đừng nhầm lẫn với nút quay lại. Mũi tên lên sẽ di chuyển người dùng lên một cấp thông qua hệ thống phân cấp điều hướng của ứng dụng trong một luồng người dùng, trong khi thao tác vuốt về phía sau hoặc vuốt từ cạnh nằm trong chế độ điều hướng hệ thống, di chuyển người dùng về phía sau và thậm chí đưa người dùng ra khỏi ứng dụng.
Còn chế độ xem phương thức thì sao? Đối với các cửa sổ phương thức toàn màn hình (chẳng hạn như trình phát video và hình ảnh), thao tác này sẽ tương tự như Thanh ứng dụng của chế độ xem dữ liệu trẻ em, ngoại trừ biểu tượng điều hướng sẽ thay đổi thành biểu tượng đóng để đóng cửa sổ phương thức.
6. Thêm một chút phương thức
Bắt đầu bằng các khung hiển thị phương thức lớn, phù hợp nhất để tập trung sự chú ý của người dùng vào một tác vụ. Trên iOS, các thành phần này thường xuất hiện dưới dạng trang tính, nơi người dùng có thể vuốt xuống.
Hoàn tất việc thay thế Thanh ứng dụng. Đối với các phương thức dạng trang tính trên iOS, hãy thay thế phần trang tính trên cùng và phần xem trước nền bằng một thanh ứng dụng hộp thoại toàn màn hình.
Phần thưởng: Xem xét xem có trang tính phương thức iOS nào có thể chuyển đổi thành trang tính dưới cùng hay không.
Các trang Hành động và Hoạt động thành Bảng dưới cùng. (Giờ đây, bạn cũng có thể dịch trang chia sẻ).
Đối với cảnh báo, hãy sử dụng hộp thoại hệ thống. Nếu bạn đang sử dụng các thông báo này cho thông tin quan trọng mà bạn cần người dùng xác nhận theo cách nào đó, hãy thay thế chúng bằng hộp thoại hệ thống. Đừng quên thay thế mọi thành phần đầu vào và bộ chọn tại thời điểm này.
7. Nội dung trùng lặp
Thẻ hoặc trình xem trang hoặc thẻ vuốt. Nếu bạn đang dùng chế độ kiểm soát phân đoạn trên iOS, thì các chế độ này sẽ chuyển thành thẻ trên Android. Cả hai đều đóng vai trò là cách lọc giữa các chế độ xem thông tin tương tự nhưng không giống nhau. Các thẻ Android thường được gắn vào Thanh ứng dụng và có thêm lợi ích là có thể vuốt giữa các nội dung.
8. Nội dung và chế độ kiểm soát
Tuỳ thuộc vào cách bạn thiết lập các ràng buộc hoặc hành vi đổi kích thước, hầu hết nội dung của bạn có thể đã được đổi kích thước. Nhưng hãy dành thời gian để xem xét và đặt tỷ suất lợi nhuận. 16 dp là một tiêu chuẩn phù hợp trên màn hình nhỏ.
Lưới cơ sở dựa trên lưới 8 dp cho các thành phần và 4 dp cho kiểu chữ và biểu tượng. Lưới 8 pt hoạt động tốt trên iOS, vì vậy, bạn có thể xem xét lưới này làm điểm xuất phát cho cả hai nền tảng.
Chế độ kiểm soát. Chuyển các nút bật/tắt đó thành công tắc Android. Sử dụng hộp đánh dấu và nút chọn trên Android. Android có tất cả những tính năng này.
Nếu bạn có biểu mẫu, hãy thay thế các trường văn bản trên iOS bằng các trường văn bản trên Android. Material có các lựa chọn như đường viền hoặc tô màu, vì vậy, hãy chọn lựa chọn phù hợp nhất với thương hiệu của bạn.
Danh sách Material có một số điểm khác biệt so với các ô trong bảng iOS:
- Đường phân chia được sử dụng một cách hạn chế.
- Các chỉ báo không được dùng trên danh sách để giảm thiểu nhiễu thị giác.
- Các phương diện tuân theo lưới 8 dp.
9. Kiểu
Màu sắc: Màu sắc trên giao diện người dùng bao gồm màu nhấn, màu ngữ nghĩa và màu bề mặt được tập hợp trong một bảng phối màu. Những màu này được áp dụng cho giao diện người dùng theo vai trò của chúng.
Kiểu chữ: Nếu sử dụng phông chữ hệ thống, hãy thay thế San Francisco. Roboto là phông chữ hệ thống mặc định cho Android. Tuy nhiên, bạn nên thể hiện phong cách riêng của thương hiệu bằng cách sử dụng chủ đề và phông chữ của Google có thể tải xuống.
Biểu tượng: Tương tự. Nếu bạn đang dùng biểu tượng SF, hãy kiểm tra kỹ để đảm bảo rằng tất cả biểu tượng đều đã được chuyển đổi thành Biểu tượng hoặc Ký hiệu Material. Chọn phiên bản phù hợp với thương hiệu của bạn. Bạn có biết rằng bạn có thể sử dụng biểu tượng Material trên mọi nền tảng không?
Chuyển động: Android và iOS có thiết kế chuyển động riêng biệt, bạn nên tôn trọng thiết kế này cho từng nền tảng. Chuyển động theo phong cách Material mang tính thông tin, tập trung và thể hiện rõ ràng. Hiệu ứng gợn sóng là một điểm nổi bật riêng biệt được dùng trong các thành phần để cung cấp phản hồi khi chạm. Hệ thống chuyển động là một tập hợp các mẫu chuyển đổi để tận dụng các hiệu ứng biến đổi vùng chứa, trục chung, làm mờ biến mất và làm mờ hiện ra. Hãy cân nhắc xem các phần tử trong thiết kế của bạn có vùng chứa cố định hay không, mối quan hệ giữa các phần tử và cách chúng cần xuất hiện hoặc biến mất.
10. Dọn dẹp
Nếu bạn đang dịch một nguyên mẫu, thì đây là thời điểm thích hợp để kết nối lại mọi thứ. Quay lại thông qua phần điều hướng chính. Sau đó, hãy sử dụng các Thanh ứng dụng, ghi nhớ sự khác biệt giữa thao tác lên và quay lại, đồng thời đảm bảo chọn các hiệu ứng chuyển trang phù hợp với Android (được đề cập trong bước 9).
Bạn nên chuẩn bị sẵn một nguyên mẫu hoạt động đầy đủ và vì bạn đã đổi kích thước nên nguyên mẫu đó đã sẵn sàng để bàn giao.
Hướng dẫn về kiểu và thành phần
Nếu có hệ thống thiết kế hoặc hướng dẫn về kiểu hiện tại, bạn có thể có các kiểu cơ bản của riêng mình (màu sắc, kiểu chữ, biểu tượng, hình dạng) có thể dùng cùng với Material Design, giống như cách bạn dùng chúng cùng với hướng dẫn về iOS. Khi sử dụng tính năng Tuỳ chỉnh giao diện Material, bạn có thể tuỳ chỉnh các thành phần Material theo phong cách riêng của thương hiệu bằng màu sắc, kiểu chữ và hình dạng.
Việc có các nguyên tắc dành riêng cho từng nền tảng không phải là điều hiếm gặp đối với các sản phẩm đa nền tảng và có thể giúp hệ thống thiết kế của riêng bạn lấy người dùng làm trung tâm hơn.
Cuối cùng, nếu bạn đang làm việc mà không có hệ thống thiết kế tuỳ chỉnh đầy đủ, hãy biết rằng không phải ứng dụng hoặc sản phẩm nào cũng cần hệ thống này! Hãy cân nhắc việc tạo một hướng dẫn phong cách dạng tờ rơi. Hướng dẫn về phong cách là một tài liệu nêu rõ các quy cách cơ bản cho thiết kế. Nguyên tắc sử dụng thương hiệu thường có hướng dẫn về phong cách.
Bạn có thể sao chép mã này cho Android và dùng làm nguồn để cập nhật kiểu (hoặc biểu tượng, thành phần hoặc thư viện).