---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/intro/zalo-mini-program-design-guidelines
title: Zalo Mini App Design Guidelines
---
Nhanh chóng, chính xác là hai yếu tố quan trọng mang tính quyết định và là trong quá trình xây dựng trải nghiệm thân thiện, đồng bộ với hệ sinh thái các sản phẩm của Zalo. Bên cạnh đó các nguyên tắc về tôn trọng người dùng và sự rõ ràng về thông tin, được hướng dẫn để có một trải nghiệm hoàn chỉnh cũng như đáp ứng, cung cấp được đầy đủ thông tin cho nhà phát triển là những yếu tố mấu chốt ở Zalo Mini App.

## 1. Thân thiện và nhanh chóng

Trong quá trình sử dụng dịch vụ của người dùng luôn giữ cho mọi đơn giản, tránh sự phức tạp và gián đoạn do các yếu tố không cần thiết tạo nên. Thân thiện giới thiệu cho người dùng các hướng dẫn thao tác để có trải nghiệm tốt.

- #### Làm nổi bật điểm quan trọng

  Cần xác định và làm nổi bật một điểm tập trung, quan trọng trong mỗi trang để người dùng có thể nắm bắt thông tin nhanh chóng, chính xác nhất. Đối với những thông tin còn lại hãy giữ nó ở mức vừa phải và gọn gàng.

  Ví dụ:

  

  ![](/assets/MA/img/design/1-1a.png)

  ![](/assets/MA/img/design/1-1b.png)

  

- #### Tối ưu luồng trải nghiệm

  Cần nhanh chóng đưa người dùng đạt đến mục đích sử dụng dịch vụ. Tránh các thành phần không cần thiết, không liên quan vào quá trình vận hành làm gián đoạn trải nghiệm.

  ![ex-3](/assets/MA/img/design/1-2.png)

## 2. Rõ ràng mạch lạc

Khi người dùng sử dụng Zalo Mini App, họ cần được biết và thông báo rõ ràng ràng rằng mình đang ở đâu và có thể nhanh chóng điều hướng đến những trang họ muốn. Nhằm đảm bảo người dùng có một trải nghiệm tích cực và an toàn.

- #### Dễ dàng trong điều hướng

  Zalo Mini App cung cấp một thanh điều hướng thống nhất. Điều này đảm bảo cho người dùng không bị lạc khi duyệt qua các trang, bạn có thể tuỳ chỉnh nếu muốn nhưng chúng tôi khuyên nên giữ nút “trở lại” ở góc trên bên trái các trang phụ cho người dùng Android. Người dùng iOS có thể thực hiện thao tác “trở lại” bằng cách vuốt từ bên trái mép màn hình.

- #### Zalo Mini App menu

  Ở Zalo Mini App sẽ có một menu cố định ở góc trên bên phải trên tất cả các màn hình. Bạn có thể chọn màu sáng / tối để phù hợp với thiết kế của mình. Vì menu này sẽ là cố định và không thể tuỳ chỉnh, bạn cần chú ý không đặt các button hoặc thông tin nào phía dưới menu. Bạn cũng cần kiểm tra thực tế rằng các button khác có xung đột hoặc khó chạm vào nếu vị trí đặt gần menu của Zalo Mini App.

  ![2-2](/assets/MA/img/design/2-2.png)

- #### Tuỳ chọn màu sắc cho Zalo Mini App menu

  Trong trường hợp bạn có thiết kế màu sáng hoặc tối hãy lựa chọn phương án màu cho Zalo Mini App menu phù hợp. Chú ý hãy đảm bảo mọi thứ được hiển thị rõ ràng và đủ độ tương phản cần thiết.

  ![2-3](/assets/MA/img/design/2-3.png)

- #### Thanh điều hướng phía dưới

  Bạn có thể thêm bottom bar vào Mini App của mình để dễ dàng điều hướng giữa các chức năng và trang chính. Bạn nên xem xét và cân nhắc số lượng tab sử dụng ở bottom bar không nên vượt quá 4 để không rơi vào trường hợp khó nhận dạng được icon hoặc khó nhấn vào vùng chọn mong muốn.

  ![2-4](/assets/MA/img/design/2-4.png)

- #### Hiển thị điều gì đang diễn ra

  Giảm thiểu thời gian chờ tải trang cho người dùng và giảm sự không hài lòng bằng các phản hồi về trạng thái xử lý. Bạn cũng cần cho người dùng biết nếu rơi vào trường hợp không tải được hoặc mất kết nối.

- #### Cơ chế hiển thị tải trang khi bắt đầu

  Chúng tôi cung cấp cơ chế tải trang ban đầu khi khởi chạy ứng dụng gòm có trạng thái tải trang, logo và tên thương hiệu. Bạn có thể sử dụng để sản phẩm dịch vụ của mình được biết đến nhanh chóng và rõ ràng hơn trong Zalo Mini App. Cơ chế này là mặc đình và không thể thay đổi hoặc ẩn đi.

  ![2-6](/assets/MA/img/design/2-6.png)

- #### Cơ chế hiển thị tải trang dạng quá trình

  Cơ chế này hiển thị một thanh tải trang nhỏ phía dưới action bar.

  ![2-7](/assets/MA/img/design/2-7.png)

- #### Cơ chế hiển thị tải trang dạng Modal

  Cơ chế này khi được kích hoạt hiển thị sẽ nằm ở lớp trên cùng của tất cả các thành phần trong trang. Vì thế bạn nên cân nhắc khi sử dụng để tránh trường hợp có thể gây nên sự khó chịu cho người sử dụng.

  ![2-8](/assets/MA/img/design/2-8.png)

- #### Phản hồi về kết quả

  Ngoài việc cho cho người dùng biết quá trình tải trang bạn cũng cần đưa đến cho người dùng các kết quả phù hợp với mỗi trường hợp trong ứng dụng của bạn. Bạn có thể sử dụng phản hồi kết quả dạng modal, popup hoặc trang kết quả

- #### Phản hồi về kết quả - dạng Modal

  Cơ chế phản hồi này phù hợp để thông báo cho người sử dụng về các thông tin, quá trình quan trọng đã được hoàn thành. Thông báo này sẽ tự được tắt sau 1,5 giây

  ![2-10](/assets/MA/img/design/2-10.png)

- #### Phản hồi về kết quả - dạng popup

  Cơ chế phản hồi về kết quả dạng popup cần thao tác và quyết định của người sử dụng cho hướng đi tiếp theo trong ứng dụng.

  ![2-11](/assets/MA/img/design/2-11.png)

- #### Phản hồi về kết quả - dạng trang kết quả

  Cơ chếp hản hồi về kết quả - dạng trang kết quả nên sử dụng trong trường hợp đã đến điểm cuối hoặc kết thúc của một tính năng, chức năng, luồng hoạt động. Bạn cũng nên hướng dẫn cho người sử dụng nên làm gì tiếp theo.

  ![2-12](/assets/MA/img/design/2-12.png)

- #### Phản hồi về kết quả - thông báo lỗi

  Khi xảy ra một sự cố hoặc các trường hợp phát sinh lỗi người sử dụng cũng cần được biết và thông báo rõ ràng bằng cơ chế thông báo lỗi dạng modal. Cơ chế này khi được kích hoạt hiển thị sẽ nằm ở lớp trên cùng của tất cả các thành phần trong trang.

  ![2-13](/assets/MA/img/design/2-13.png)

## 3. Sự tiện lợi và thanh Lịch

Mặc dù thao tác nhập liệu đơn giản và thuận tiện trên thiết bị di động, nhưng thao tác nhập liệu trên thiết bị di động dễ xảy ra lỗi hơn so với sử dụng bàn phím và chuột vật lý. Để điều chỉnh sự thay đổi này, bạn phải sử dụng đầy đủ các tính năng của điện thoại di động trong thiết kế của họ, cung cấp cho người dùng một giao diện thuận tiện và trang nhã.

- #### Giảm thiểu đầu vào của người dùng

  Do khu vực bàn phím di động nhỏ và hay bị tắc nghẽn nên việc nhập liệu có thể khó khăn và dễ xảy ra lỗi. Do đó, khi thiết kế các trang của Chương trình nhỏ, hãy sử dụng các API hiện có hoặc các điều khiển dễ sử dụng khác để giảm thiểu đầu vào của người dùng và cải thiện trải nghiệm đầu vào.

  Ví dụ: Trong hình bên dưới, tại bước tìm kiếm cửa hàng Highlands Coffee, một API vị trí địa lý (Tìm gần nhất) được sử dụng để tạo điều kiện cho người dùng nhập liệu. Bên cạnh đó, nhóm Zalo cung cấp nhiều API chương trình nhỏ khác nhau (chẳng hạn như nhận dạng máy ảnh), qua đó bạn có thể cải thiện đáng kể hiệu quả và độ chính xác nhập liệu của người dùng, đồng thời nâng cao hơn nữa trải nghiệm người dùng.

  ![3-1a](/assets/MA/img/design/3-1a.png)

  Ngoài việc sử dụng API, trong trường hợp không thể tránh được việc nhập thủ công, hãy cho phép người dùng chọn từ một vài tùy chọn thay vì nhập thông qua bàn phím. Một mặt, người dùng nhận biết nhanh hơn việc nhớ lại và dễ dàng chọn từ một số tùy chọn hơn là nhập một thứ gì đó mà họ phải nhớ lại từ bộ nhớ. Mặt khác, thao tác nhập một phím trên bàn phím điện thoại di động bị tắc nghẽn rất dễ xảy ra lỗi. Trong hình bên dưới, một số tùy chọn được tạo ra từ lịch sử tìm kiếm của người dùng được cung cấp để giúp người dùng thực hiện tìm kiếm nhanh, giảm hoặc tránh nhập liệu bằng bàn phím không cần thiết.

  ![3-1b](/assets/MA/img/design/3-1b.png)

- #### Tránh các thao tác không chính xác

  Giao diện di động được xử lý bằng cách chạm ngón tay vào màn hình. Phương pháp này kém chính xác hơn nhiều so với chuột. Do đó, khi thiết kế các điều khiển có thể chạm vào trang, vùng chạm phải được xem xét cẩn thận. Điều này sẽ giúp tránh các thao tác sai do kích thước của vùng cảm ứng quá nhỏ hoặc quá tắc nghẽn. Những vấn đề như vậy dễ dàng xảy ra khi một giao diện vốn được thiết kế cho màn hình máy tính được chuyển trực tiếp sang điện thoại di động mà không thực hiện bất kỳ sự điều chỉnh nào. Vì các điện thoại di động khác nhau có độ phân giải khác nhau, nên kích thước pixel phù hợp để khai thác cũng khác nhau. Tuy nhiên, sau khi chuyển đổi thành các phép đo vật lý, kích thước từ 7 mm đến 9 mm là có thể chấp nhận được. Trong thư viện thành phần tiêu chuẩn do Zalo cung cấp, các hiệu ứng cảm ứng và khả năng thích ứng cho các kích thước màn hình khác nhau đã được xem xét cho các phần tử điều khiển. Do đó, chúng tôi khuyên bạn nên sử dụng hoặc mô phỏng các kích thước điều khiển tiêu chuẩn trong quá trình thiết kế.

- #### Sử dụng API để cải thiện hiệu suất

  Trung tâm Thiết kế Zalo đã giới thiệu một bộ thư viện điều khiển tiêu chuẩn trang web, bao gồm Thư viện Điều khiển Thiết kế Phác thảo và Thư viện Điều khiển Thiết kế Photoshop. Các thành phần của Chương trình nhỏ sẽ tiếp tục được cải thiện trong tương lai. Tất cả các kiểm soát này đã xem xét đầy đủ các thuộc tính đặc biệt của các trang trên thiết bị di động, điều này đảm bảo khả năng sử dụng và hoạt động trên màn hình di động. Đồng thời, Nhóm Phát triển Zalo không ngừng cải tiến và mở rộng các API Chương trình Mini của Zalo và cung cấp thêm các thư viện chung. Những tài nguyên này không chỉ cung cấp cho người dùng dịch vụ nhanh hơn mà còn mang lại lợi ích lớn cho hiệu suất trang, cải thiện trải nghiệm người dùng.

## 4. Tính nhất quán và tính ổn định

Ngoài các nguyên tắc trên, chúng tôi khuyên bạn nên truy cập vào Chương trình nhỏ của Zalo luôn tuân thủ các nguyên tắc nhất quán và liên tục giữa các trang khác nhau, đồng thời sử dụng nhiều nhất có thể các điều khiển và chế độ tương tác trên các trang khác nhau.

Cung cấp trải nghiệm trang nhất quán và các yếu tố giao diện liên tục là cách tốt nhất để giảm sự khó chịu phát sinh khi chuyển từ trang này sang trang khác. Do đó, bạn có thể phát triển Chương trình nhỏ một cách nhất quán và ổn định theo yêu cầu bằng cách sử dụng các điều khiển tiêu chuẩn do Zalo cung cấp.

## 5. Tiêu chuẩn thị giác

- #### Font

  Các phông chữ trong Zalo phải nhất quán với phông chữ của hệ thống đang chạy trên Zalo. Kích thước phông chữ phổ biến là 20, 18, 16, 15, 14, 12 và 10 (pt). Các trường hợp sử dụng cụ thể như sau:

  ![5-1](/assets/MA/img/design/5-1.png)

- #### Font color

  ![5-2a](/assets/MA/img/design/5-2a.png)

  Sử dụng NL300 cho nội dung chính và NL700 cho nội dung phụ, ghi chú, thời gian. Sử dụng NL500 cho các đoạn lớn của văn bản mô tả tạo thành một phần của nội dung chính.

  ![5-2b](/assets/MA/img/design/5-2b.png)

  Màu xanh dương BL300 được sử dụng cho các liên kết, màu xanh lá cây GL300 cho các hành động đã thực hiện thành công, màu cam OL300 cho các cảnh báo và màu đỏ RL300 cho các lỗi.

  ![5-2c](/assets/MA/img/design/5-2c.png)

- #### Lists

  ![5-3](/assets/MA/img/design/5-3.png)

- #### Form Input

  ![5-4](/assets/MA/img/design/5-4.png)

- #### Buttons

  ![5-5a](/assets/MA/img/design/5-5a.png)

  ![5-5b](/assets/MA/img/design/5-5b.png)

- #### Icons

  ![5-6](/assets/MA/img/design/5-6.png)