Mỗi tuỳ chọn đăng nhập trong mã mẫu đều được liên kết với một hằng số Turn
A) Đăng nhập bằng Google
Nếu ứng dụng của bạn hỗ trợ tính năng đăng nhập bằng Google và tính năng đăng nhập bằng Google có sẵn trong hệ thống, tốt nhất bạn nên đặt phương thức này làm phương thức chính trong quy trình đăng nhập. Người dùng dễ dàng vì họ chỉ cần xác nhận Tài khoản Google hiện có của mình.
Nếu cung cấp dịch vụ đăng nhập bằng điện thoại hoặc đăng nhập thông thường, thì bạn nên cung cấp các lựa chọn đó dưới dạng tùy chọn sao lưu có sẵn từ các đường liên kết văn bản ở cuối màn hình đích.
Ở đây, bạn nên sử dụng phương thức đăng nhập bằng Google làm phương thức đăng nhập chính, còn các phương thức khác được cung cấp dưới dạng phương thức dự phòng.
Quy trình đăng nhập bằng Google
Với tính năng đăng nhập bằng Google, trang đích là màn hình duy nhất bạn cần thiết kế, trừ khi bạn cũng cung cấp các tùy chọn dự phòng. Đăng nhập bằng điện thoại và Đăng nhập thông thường tóm tắt màn hình và quy trình của các lựa chọn đó.
Nếu người dùng chọn Đăng nhập bằng Google trên trang đích (thay vì một trong các tuỳ chọn sao lưu, nếu họ được cung cấp), thì Google sẽ xử lý phần còn lại của quy trình đăng nhập
B) Đăng nhập bằng điện thoại
Nếu ứng dụng của bạn không hỗ trợ tính năng đăng nhập bằng Google, tốt nhất là bạn nên cung cấp tính năng đăng nhập bằng điện thoại làm phương thức chính trong quy trình đăng nhập. (Bạn cũng có thể cung cấp tính năng đăng nhập bằng điện thoại làm phương thức dự phòng cho tính năng đăng nhập bằng Google.) Với tính năng đăng nhập bằng điện thoại, người dùng không cần nhớ tên người dùng hoặc mật khẩu. Thay vào đó, họ nhập mã PIN được cung cấp cho họ.
Bạn có thể đăng nhập bằng điện thoại bằng một trong hai cách:
Người dùng thấy mã PIN trên màn hình ô tô và nhập mã đó vào điện thoại của họ
Người dùng tra cứu mã PIN trên điện thoại rồi nhập mã đó vào màn hình ô tô
Nếu phương thức tiêu chuẩn cho tên người dùng và mật khẩu cũng được cung cấp, thì phương thức này phải được trình bày dưới dạng tùy chọn sao lưu có sẵn từ đường liên kết văn bản ở cuối màn hình đích.
Trong một phiên bản đăng nhập trên điện thoại, người dùng sẽ thấy mã PIN để nhập trên điện thoại của họ
Trong phiên bản đăng nhập bằng điện thoại khác, người dùng có thể nhập mã PIN thu được từ điện thoại của họ
Lưu ý: Để tránh gây quá tải nhận thức cho người dùng, điều quan trọng là bạn phải duy trì mã PIN có độ dài từ 8 chữ số trở xuống, như được chỉ định trong Nguyên tắc đăng nhập . Quy trình đăng nhập bằng điện thoại
Với tính năng đăng nhập bằng điện thoại, bạn có thể chọn trong số hai phiên bản của trang đích: một phiên bản hiển thị mã PIN để nhập trên điện thoại và một phiên bản cho phép người dùng nhập mã PIN được cung cấp trên điện thoại.
Màn hình cho trang đích là màn hình duy nhất bạn cần thiết kế, trừ khi bạn cũng cung cấp tùy chọn Đăng nhập thông thường làm tùy chọn dự phòng.
Khi phương thức đăng nhập bằng điện thoại là phương thức chính, thì quá trình đăng nhập sẽ hoàn tất khi người dùng nhập mã PIN làm trang đích để hướng dẫn họ (trừ phi cung cấp và chọn tùy chọn dự phòng)
C) Đăng nhập thông thường
Đăng nhập tiêu chuẩn cho ứng dụng yêu cầu người dùng nhập tên người dùng (hoặc email) trên trang đích, sau đó nhập mật khẩu trên trang tiếp theo.
Đăng nhập tiêu chuẩn có thể được cung cấp làm tùy chọn dự phòng cho đăng nhập bằng Google hoặc đăng nhập bằng điện thoại. Hoặc nếu cả hai tùy chọn còn lại đều không được hỗ trợ, thì đó có thể là tùy chọn đăng nhập chính. Tuy nhiên, bạn không nên đăng nhập thông thường dưới dạng một tùy chọn chính vì phương thức này bao gồm nhiều bước và ghi nhớ tên người dùng cũng như mật khẩu.
Vì người dùng không phải lúc nào cũng nhớ tên người dùng và mật khẩu nên điều quan trọng là bạn phải cung cấp các tùy chọn để truy xuất hoặc đặt lại chúng. Các tuỳ chọn này nên được cung cấp qua các đường liên kết văn bản ở cuối màn hình nhập để chúng không cạnh tranh sự chú ý với các hành động chính của mục nhập tên người dùng và mật khẩu.
Bước 1 của quy trình đăng nhập thông thường bao gồm việc nhập tên người dùng hoặc email
Bước 2 của quy trình đăng nhập thông thường bao gồm việc nhập mật khẩu
Người dùng không nhớ tên người dùng sẽ được chuyển đến trang này
Những người dùng không nhớ mật khẩu sẽ được chuyển đến trang này
Quy trình đăng nhập thông thường
Quy trình đăng nhập thông thường là một chuỗi 2 màn hình (mục nhập tên người dùng và mục nhập mật khẩu), cùng với các chuyến đi không bắt buộc đến 2 màn hình khác. Bạn sẽ cần phiên bản của cả 4 màn hình.
Nếu người dùng nhớ tên người dùng và mật khẩu, họ sẽ hoàn tất 2 màn hình nhập trước khi đăng nhập; nếu không, họ sẽ được chuyển hướng đến một hoặc hai màn hình bổ sung kèm theo hướng dẫn
Điều chỉnh nội dung màn hình
Sau khi quyết định phương thức đăng nhập mà ứng dụng sẽ hỗ trợ, bạn sẽ biết màn hình nào sẽ xuất hiện trong quy trình đăng nhập của mình. Bạn có thể có từ 1 đến 6 màn hình để xác định nội dung (và định kiểu), như đã thảo luận trong phần Tùy chỉnh phong cách tùy thuộc vào nội dung bạn chọn hỗ trợ.
Nếu chọn đăng nhập bằng Google hoặc đăng nhập trên điện thoại mà không có tùy chọn sao lưu, thì bạn sẽ có 1 màn hình đăng nhập để tạo. Mặt khác, nếu bạn chọn đăng nhập bằng Google với cả hai tùy chọn khác làm bản sao lưu, bạn sẽ có 6 màn hình (1 màn hình đăng nhập bằng Google, 1 màn hình đăng nhập qua điện thoại và 4 màn hình để đăng nhập thông thường).
Ví dụ về những màn hình này xuất hiện trong các phần Đăng nhập bằng Google , đăng nhập qua điện thoại và đăng nhập thông thường . Nếu đang làm việc qua mã mẫu, bạn có thể sửa đổi phiên bản của các màn hình được tạo trong mã này. Nếu không sử dụng mã mẫu, bạn vẫn nên sử dụng các ví dụ này làm mẫu.
Bạn cần thực hiện một số điều chỉnh đối với nội dung của các màn hình này, bao gồm:
Thay thế biểu trưng của ứng dụng Aural hư cấu bằng biểu trưng ứng dụng của bạn
Sửa đổi văn bản và đường liên kết để tham chiếu đến ứng dụng và nội dung liên quan
Điều chỉnh logic hiển thị mã PIN
Dưới đây là nội dung thảo luận chi tiết hơn về cách thay thế biểu trưng và logic hiển thị mã PIN.
Thay thế biểu trưng ứng dụng
Sau khi xóa các màn hình không cần thiết khỏi mã mẫu, bạn sẽ cần đảm bảo các màn hình còn lại hiển thị biểu trưng ứng dụng của mình thay vì biểu trưng của ứng dụng AAL giả tưởng. Thay thế này có thể ảnh hưởng đến các khía cạnh khác của thiết kế trang, như đã thảo luận bên dưới.
Lưu ý: Biểu trưng ứng dụng là một trong những tài nguyên có thể vẽ cho ứng dụng đăng nhập mẫu. Đây là một phần của ứng dụng Automotive Android Music Player (UAMP) Automotive.
TRƯỚC KHI: Trang đích hiển thị biểu tượng của một ứng dụng nhạc hư cấu có tên là Aural
SAU KHI phiên bản tùy chỉnh thay thế biểu trưng của Aural bằng biểu tượng của một ứng dụng cụ thể
Việc thay thế biểu tượng có thể dẫn bạn đến các mục tinh chỉnh khác, chẳng hạn như tuỳ chỉnh màu của các thành phần khác trên trang hoặc điều chỉnh khoảng trống xung quanh biểu tượng.
Tuỳ chỉnh màu sắc cùng với biểu trưng
Để đảm bảo rằng biểu trưng ứng dụng của bạn hoà hợp với các thành phần trang xung quanh, bạn có thể tùy chỉnh mã đăng nhập để sử dụng màu nhấn của ứng dụng. Tùy chỉnh kiểu được thảo luận trong bước tiếp theo, Tùy chỉnh kiểu .
Màu nhấn của ứng dụng Aural giả mạo (màu xanh dương #57D9F7) được dùng để tùy chỉnh các thành phần của trang như các nút và đường liên kết trong ứng dụng mẫu và trong các ví dụ trong phần này
Điều chỉnh độ xóa biểu trưng
Sau khi thay thế biểu trưng Aural bằng biểu trưng của ứng dụng. Biểu trưng của ứng dụng sẽ được điều chỉnh theo kích thước giống với biểu trưng Aural, hãy kiểm tra khoảng cách xung quanh biểu trưng. Nếu khoảng không gian trống không đáp ứng nguyên tắc của thương hiệu, thì bạn có thể thêm khoảng trống xung quanh các cạnh của biểu tượng trong tệp biểu tượng.
Để tăng độ rõ ràng của biểu tượng, hãy thêm khoảng trống xung quanh biểu tượng trong tệp biểu tượng, bù trừ kích thước biểu trưng trong hộp bao quanh
Một phương pháp khác là điều chỉnh khoảng cách trên màn hình. Tuy nhiên, với cách tiếp cận này,bạn sẽ cần điều chỉnh khoảng cách xung quanh biểu trưng riêng cho từng bố cục. Vì lý do này, việc thêm khoảng trống trong tệp biểu tượng là cách dễ nhất để tăng không gian trống xung quanh biểu tượng.
Điều chỉnh logic hiển thị mã PIN
Quy trình đăng nhập mẫu tạo mã PIN ngẫu nhiên bằng cách sử dụng hàm RAND đơn giản. Để triển khai phương thức tạo mã PIN dựa trên logic kinh doanh mạnh mẽ hơn, bạn cần sửa đổi mã có liên quan trong PinCodeSignInFragment.kt . Đây là một phần của ứng dụng Universal Android Music Player (UAMP) Automotive.
Lưu ý: Để tránh gây quá tải nhận thức cho người dùng, điều quan trọng là bạn phải duy trì mã PIN có độ dài từ 8 chữ số trở xuống, như được chỉ định trong Nguyên tắc đăng nhập .
Các đường liên kết xuất hiện trong ví dụ này và logic tạo mã PIN phải được tuỳ chỉnh cho ứng dụng của bạn
Tùy chỉnh phong cách
Sau khi điều chỉnh nội dung của màn hình đăng nhập, bạn có thể áp dụng kiểu chung, phù hợp với thương hiệu cho các khía cạnh của giao diện người dùng ảnh hưởng đến nhiều màn hình.
Bạn có thể tùy chỉnh bất kỳ hoặc tất cả các nội dung sau để phản ánh phong cách thương hiệu của mình:
Kiểu trường nhập dữ liệu : tô màu, phác thảo hoặc gạch dướiKiểu nút : hình tròn hoặc hình chữ nhậtMàu : màu nhấn, màu tô và văn bản, màu tô và nét vẽ, lỗi biểu mẫuKiểu chữ : phông chữ, kích thước văn bản
Dưới đây là ví dụ về một số lựa chọn tùy chỉnh trong số này. Lưu ý rằng kiểu tùy chỉnh phải duy trì độ tương phản, kích thước tối thiểu cho mục tiêu văn bản và đích chạm, cũng như các yêu cầu khác được mô tả trong Nguyên tắc dành cho màn hình tùy chỉnh .
Lưu ý: Kiểu được chỉ định trong tệp styles.xml cho ứng dụng đăng nhập mẫu. Đây là một phần của ứng dụng Universal Android Music Player (UAMP) Automotive.
Quy trình đăng nhập mẫu sử dụng các trường nhập dữ liệu đã nêu và nút tròn làm kiểu mặc định. Hãy tiếp tục và thay đổi những kiểu mặc định này nếu các kiểu khác nhau – ví dụ: các nút hình chữ nhật thay vì các nút tròn – sẽ thể hiện thương hiệu của bạn tốt hơn.
Màu
Việc tùy chỉnh màu nhấn và trạng thái lỗi được sử dụng trong biểu mẫu và nút là một cách hữu ích để thể hiện thương hiệu của bạn trong suốt quá trình đăng nhập. Việc tùy chỉnh các màu này cũng quan trọng để đảm bảo rằng các trường nhập dữ liệu, nút và đường liên kết hiển thị tốt trên cùng một trang có biểu trưng ứng dụng của bạn, thay vì xung đột với biểu trưng.
Hãy đảm bảo rằng mọi màu sắc bạn chỉ định đều duy trì tỷ lệ tương phản tối thiểu là 4,5:1 giữa các thành phần trang liền kề. Để được hướng dẫn thêm về màu sắc và chi tiết về bảng màu được sử dụng trong Android Automotive OS, hãy tham khảo nội dung Nền tảng trực quan: Màu sắc .
Kiểu chữ
Mặc dù kiểu chữ trong quy trình đăng nhập mẫu có thể tuỳ chỉnh được, nhưng hãy cẩn thận khi thực hiện bất kỳ thay đổi nào có thể ảnh hưởng đến tính dễ đọc. Hãy tham khảo bài viết Nền tảng trực quan: Kiểu chữ để biết thông tin về phông chữ, kích thước kiểu tối thiểu và các yếu tố khác cần cân nhắc về khả năng đọc văn bản trên màn hình ô tô.
Nguyên tắc đăng nhập
Các nguyên tắc trong phần này liên quan đến cách hoạt động của tính năng đăng nhập trong ứng dụng để hỗ trợ khả năng tối ưu trong Android Automotive OS. Quy trình đăng nhập mẫu được cung cấp trong ứng dụng Universal Android Music Player (UAMP) đáp ứng các nguyên tắc này, đối với hầu hết các phần. Công cụ này không cung cấp cách tạo tài khoản vì điều đó sẽ yêu cầu logic dành riêng cho ứng dụng.
Nếu bạn đã thực hiện theo quy trình tuỳ chỉnh được mô tả trong phần này và chưa thay đổi cách thức hoạt động của mã, quy trình đăng nhập của bạn phải phù hợp với các nguyên tắc bên dưới. Tuy nhiên, hãy nhớ kiểm tra để đảm bảo rằng kiểu tùy chỉnh của bạn đáp ứng các yêu cầu chung được nêu trong Nguyên tắc đối với màn hình tùy chỉnh .
Nếu bạn đã thực hiện sửa đổi đáng kể hơn đối với màn hình hoặc mã đăng nhập, ngoài những gì được mô tả trong phần này, hãy kiểm tra luồng đăng nhập của bạn theo Nguyên tắc chung cho màn hình tùy chỉnh và các nguyên tắc đăng nhập cụ thể bên dưới.
Mức độ yêu cầu
Nguyên tắc
NÊN
Nhà phát triển ứng dụng nên:
Đăng nhập bằng Google làm tùy chọn chính nếu ứng dụng và hệ thống hỗ trợ
Đăng nhập bằng điện thoại (nếu được hỗ trợ) làm phương thức chính nếu ứng dụng và hệ thống không hỗ trợ tính năng đăng nhập bằng Google
Giữ độ dài mã PIN cho đăng nhập điện thoại từ 8 chữ số trở xuống
Để đăng nhập thông thường, hãy tách riêng tên người dùng và mật khẩu thành hai bước
Đặt nhãn vào hộp nhập ("Nhập mật khẩu") và hiển thị nhãn ở nơi nào đó trên màn hình sau khi người dùng bắt đầu nhập
Cung cấp cho người dùng khả năng hiển thị mật khẩu (thường được ẩn) trong khi mật khẩu được nhập
Hướng dẫn truy cập tên người dùng hoặc mật khẩu đã quên
Đưa ra cách tạo tài khoản
CÓ THỂ
Nhà phát triển ứng dụng có thể:
Cung cấp thông tin đăng nhập vào ứng dụng chuẩn (tên người dùng và mật khẩu) làm tùy chọn chính nếu không thể hỗ trợ đăng nhập bằng Google hoặc đăng nhập bằng điện thoại
Cung cấp đăng nhập bằng điện thoại, đăng nhập thông thường hoặc cả hai làm tùy chọn dự phòng khi đăng nhập bằng Google là tùy chọn chính
Cung cấp đăng nhập thông thường làm tùy chọn dự phòng khi đăng nhập bằng điện thoại là tùy chọn chính
Quan điểm:
Trải nghiệm nội dung nghe nhìn nhất quán. Màn hình đăng nhập được thiết kế cho một ứng dụng đa phương tiện phải cung cấp trải nghiệm nhất quán rộng rãi với màn hình đăng nhập cho các ứng dụng đa phương tiện khác.
Giao diện nhất quán. Màn hình đăng nhập phải hỗ trợ các nguyên tắc thiết kế cơ bản và nền tảng trực quan cho Android Automotive OS.
