Người dùng Android mong muốn ứng dụng của họ có giao diện và hoạt động phù hợp với nền tảng. Ngoài việc tuân theo các nguyên tắc thiết kế các ứng dụng android cho các mẫu trực quan và điều hướng, bạn cũng nên tuân theo các nguyên tắc về chất lượng như tính tương thích, hiệu suất và bảo mật. Để tìm hiểu thiết kế các ứng dụng android rõ hơn, cùng DK Tech tìm hiểu qua bài viết dưới đây nhé
Mục Lục
Sử dụng màu sắc và bảng màu
Hệ thống màu sắc của thiết kế các ứng dụng android sử dụng cách tiếp cận có hệ thống để áp dụng màu sắc cho giao diện người dùng của bạn. Trong hệ thống này, màu chính và màu phụ thường được chọn để đại diện cho thương hiệu. Sau đó, các biến thể đậm và nhạt của từng màu có thể được áp dụng cho giao diện người dùng của bạn theo những cách khác nhau.
Tài liệu biên tập chủ đề
Trình chỉnh sửa thiết kế các ứng dụng android cho phép bạn tạo thư viện biểu tượng thương hiệu của riêng mình và áp dụng các thay đổi kiểu chung cho màu sắc, hình dạng và kiểu chữ.
Màu sắc và chủ đề
Màu chính và màu phụ của ứng dụng cùng với các biến thể của chúng giúp tạo chủ đề màu hài hòa, đảm bảo văn bản có thể truy cập cũng như phân biệt các thành phần và giao diện UI.
Sử dụng công cụ bảng màu thiết kế các ứng dụng android, trình chỉnh sửa chủ đề hoặc bảng màu thiết kế vật liệu 2014, chọn các màu chính và phụ, đồng thời tạo các biến thể sáng và tối của mỗi màu.
Bảng mẫu sơ cấp và thứ cấp:
Nguyên tắc
Màu cho biết phần tử nào tương tác, cách chúng liên quan đến các phần tử khác và cách chúng nổi bật. Các yếu tố quan trọng nên nổi bật nhất.
Tạo chủ đề màu vật liệu cơ bản
thiết kế các ứng dụng android đi kèm với một chủ đề cơ sở tích hợp sẵn có sẵn và sẵn sàng để sử dụng. Điều này bao gồm các màu tiêu chuẩn cho chủ đề màu vật liệu cơ bản.
Điều này bao gồm các màu mặc định cho chính, phụ và các biến thể của chúng. Chủ đề cơ bản này cũng bao gồm các màu bổ sung xác định giao diện người dùng: Màu nền, bề mặt, lỗi, kiểu chữ và biểu tượng. Tất cả các màu này có thể được tùy chỉnh cho ứng dụng của bạn.
Màu chính
Màu chính là màu được hiển thị phổ biến nhất trên màn hình và các phần tử ứng dụng.
Màu chính là màu được hiển thị phổ biến nhất trên màn hình và các thành phần ứng dụng.
Bạn cũng có thể sử dụng màu chính để nhấn mạnh một mục nếu bạn không có màu phụ.
Các biến thể chính tối và sáng: Bạn có thể tô màu cho ứng dụng của mình không chỉ bằng các màu cơ bản mà còn bằng các biến thể màu cơ bản tối và sáng.
Phân biệt các yếu tố UI
Để tạo độ tương phản giữa các thành phần giao diện người dùng, chẳng hạn như phân biệt thanh ứng dụng trên cùng với thanh hệ thống, bạn có thể sử dụng các biến thể sáng hơn hoặc tối hơn của màu chính của từng thành phần. Các biến thể cũng có thể được sử dụng để phân biệt giữa các phần tử trong một thành phần. Nhiều biến thể được sử dụng cho vùng chứa nút hành động nổi và biểu tượng mà nó chứa.
Các biến thể sáng và tối của màu chính giúp phân biệt thanh ứng dụng trên cùng với thanh hệ thống.
Biến thể thứ cấp tối và sáng
Giống như màu cơ bản, màu thứ cấp cũng có các biến thể đậm và nhạt. Bạn có thể tạo các chủ đề màu bằng cách sử dụng các màu chính, màu phụ và các biến thể đậm và nhạt của từng màu.
Sự thay đổi sắc thái của màu chính và màu phụ.
Bề mặt, nền và màu lỗi
Bề mặt, màu nền và màu lỗi thường không đại diện cho thương hiệu.
- Màu bề mặt ảnh hưởng đến sự xuất hiện của các thành phần như bản đồ, trang tính và menu.
- Nền màu xuất hiện phía sau nội dung cuộn. Màu nền và màu mặt là #FFFFFF.
- Màu lỗi cho biết lỗi phần tử. Văn bản trong hộp văn bản không hợp lệ. Màu lỗi cơ bản là #B00020.
Kiểu chữ và màu sắc biểu tượng
Các thành phần của ứng dụng sử dụng màu từ các danh mục cụ thể trong bảng màu. Màu cơ bản. Đối với bất kỳ phần tử màn hình nào khác …
Màu sắc chính
Các thành phần của ứng dụng sử dụng màu từ các danh mục cụ thể trong bảng màu chẳn hạn như màu sắc chính. Bất cứ khi nào các thành phần màn hình khác như văn bản hoặc biểu tượng xuất hiện phía trước một bề mặt sử dụng các màu này, các thành phần đó được thiết kế đặc biệt để trông sắc nét và khác biệt so với các màu phía sau chúng. Bạn phải sử dụng các màu được chỉ định.
Loại màu này được gọi là color-over-color. Trên thực tế, các thành phần màu có thể được đặt trên bề mặt chính bằng cách sử dụng các màu chính, phụ, bề mặt, nền hoặc lỗi. Chúng được gắn thẻ tên danh mục ban đầu (chẳng hạn như màu cơ bản) với tiền tố “bật”.
Trên màu áp dụng chủ yếu cho văn bản, biểu tượng và nét. Nó cũng có thể được áp dụng cho bề mặt.
Các giá trị mặc định cho các màu này là #FFFFFF và #000000.
Xem thêm: Dịch Vụ Lập Trình Ứng Dụng Di Động Theo Yêu Cầu
Màu sắc dễ nhìn
Để đảm bảo rằng các màu cung cấp nền có thể truy cập phía sau văn bản sáng hoặc tối, bạn có thể sử dụng các biến thể sáng và tối của màu chính và màu phụ.
Ngoài ra, những màu này có thể được sử dụng cho kiểu chữ được hiển thị trên nền sáng và tối.
Mẫu màu
Một mẫu là một mẫu màu được chọn từ một tập hợp các màu tương tự.
Dấu kiểm cho biết màu văn bản có dễ đọc trên nền hay không:
- Dấu kiểm màu trắng cho biết khi văn bản màu trắng có thể đọc được trên nền màu.
- Dấu kiểm màu đen cho biết khi nào văn bản màu đen có thể đọc được trên nền màu.
Đối với các ứng dụng có văn bản màu trắng, hình nền phải có thể truy cập được so với màu trắng. Các dấu kiểm màu trắng này cho biết khi nào có thể truy cập văn bản màu trắng với các mẫu màu nền khác nhau. Một mẫu gồm 400 màu được áp dụng cho giao diện này.
Đối với các ứng dụng sử dụng văn bản màu đen, hình nền phải có màu đen. Các dấu kiểm màu đen này cho biết khi nào có thể truy cập văn bản màu đen với các mẫu màu nền khác nhau. Hơn 50 mẫu màu áp dụng cho giao diện này.
Màu thay thế
Hệ thống màu Material Design hỗ trợ các màu thay thế. H. Màu được sử dụng thay thế cho màu chính và màu phụ của thương hiệu (những màu này tạo thành màu bổ sung…
Hệ thống màu Material Design hỗ trợ các màu thay thế. H. Màu sắc được sử dụng thay thế cho màu chính và màu phụ của thương hiệu (tạo thành màu bổ sung của chủ đề). Một ứng dụng có thể sử dụng các màu khác nhau để đặt chủ đề phân biệt các phần khác nhau.
Màu thay thế là tốt nhất khi:
- Ứng dụng này có chủ đề sáng và tối
- Ứng dụng này có các chủ đề khác nhau trong các phần khác nhau
- Ứng dụng tồn tại như một phần của bộ sản phẩm
Hãy cẩn thận khi sử dụng các màu khác nhau vì các chủ đề màu hiện có có thể khó sử dụng.
Màu thay thế theo chủ đề
Bạn có thể sử dụng các màu thay thế để tạo chủ đề cho các phần khác nhau trong ứng dụng của mình.
Một ví dụ điển hình là Owl – một ứng dụng giáo dục cung cấp các khóa học cho những ai muốn khám phá và học các kỹ năng mới. Ứng dụng này có ba màu chính. Các phần khác nhau của ứng dụng sử dụng các chủ đề riêng biệt để giúp người dùng xác định rõ vị trí trong đó.
