Xây dựng flow onboarding cá nhân hóa

Một flow nhiều màn hình trong Flow Builder là một chuỗi các màn hình được kết nối với nhau thông qua các hành động điều hướng. Flow có thể đi theo đường thẳng, hoặc phân nhánh dựa trên thông tin người dùng nhập ở màn hình trước. Hướng dẫn này sẽ đi qua toàn bộ quá trình — tạo màn hình, xây dựng nội dung, thiết lập điều hướng và thêm phân nhánh có điều kiện — sử dụng một flow onboarding bốn màn hình làm ví dụ thực tế.

Ví dụ sử dụng:

Một ô nhập tên hiển thị tên người dùng dưới dạng biến để cá nhân hóa nội dung.
Một câu hỏi trắc nghiệm một lựa chọn mà câu trả lời sẽ quyết định màn hình tiếp theo người dùng thấy.
Hai nhánh phân luồng với nội dung riêng biệt cho từng phân khúc đối tượng.
Một paywall là màn hình cuối cùng.

Cách làm tương tự áp dụng cho bất kỳ flow nào cần cá nhân hóa nội dung dựa trên đầu vào của người dùng.

Thích xem video hơn? Hướng dẫn quickstart này sẽ đưa bạn qua toàn bộ quy trình từ đầu đến cuối:

Trước khi bắt đầu

Tạo sản phẩm trong Adapty Dashboard. Flow ví dụ sử dụng hai sản phẩm — gói đăng ký Hàng năm và Hàng tháng.
Kết nối Adapty với App Store và Google Play.

1. Thiết lập các style có thể tái sử dụng

Các style có thể tái sử dụng giúp bạn áp dụng typography và màu sắc nhất quán trên mọi màn hình chỉ với một cú nhấp. Style màu sắc có cả biến thể Sáng và Tối, vì vậy flow tự động hỗ trợ cả hai chủ đề.

Để xem hướng dẫn đầy đủ, hãy tham khảo Style và giao diện — Các style có thể tái sử dụng.

Để thiết lập các style:

Trong bảng bên trái, mở bảng Styles .
Trên tab Colors, nhấn Create style và thêm các màu bạn muốn tái sử dụng. Với mỗi màu, chọn giá trị Light, chuyển sang tab Dark và chọn giá trị Dark.

Tab Colors trong bảng Styles với hai biến thể Light và Dark

Trên tab Text, nhấn vào một style hiện có để chỉnh font, độ đậm và kích thước, hoặc nhấn Create style để thêm preset tùy chỉnh.

Tab Văn bản trong bảng Styles với các preset tùy chỉnh

2. Tạo các màn hình

Một flow là một chuỗi các màn hình. Hãy cấu hình màn hình đầu tiên với nền chung — bố cục, nền và safe area — rồi nhân đôi nó cho các màn hình còn lại. Bằng cách này, mọi màn hình đều dùng chung một nền tảng và bạn chỉ cần thiết lập một lần.

Để tìm hiểu thêm về quản lý màn hình, xem Màn hình và Layers — Quản lý màn hình.

Để thiết lập các màn hình:

Nhấn vào vùng trống trên canvas của màn hình đầu tiên để mở cài đặt màn hình.
Trong System UI, tắt Safe area để nền và các thành phần căn sát cạnh có thể kéo dài đến tận rìa màn hình.
Trong Fill, chọn loại nền và cấu hình nó — ví dụ, một Image hiển thị phía sau mọi màn hình của flow.
Trong Layout, đặt hướng thành Vertical và chọn kiểu phân bổ phù hợp với thiết kế của bạn.

Screen settings with background image, safe area off, and vertical layout

Trong phần Screens của bảng bên trái, nhấp vào menu ba chấm trên màn hình đầu tiên và chọn Duplicate. Lặp lại cho đến khi bạn có bốn màn hình — nhánh phân nhánh thứ hai sẽ được thêm sau bằng cách nhân đôi màn hình đầu tiên.
Đổi tên từng màn hình theo chức năng của nó — trong ví dụ của chúng ta: Welcome, Quiz, Rock path, và Paywall.

Bốn màn hình được đặt tên cùng chia sẻ cài đặt cơ sở giống nhau

3. Xây dựng màn hình giới thiệu

Màn hình đầu tiên thường tạo ấn tượng ban đầu — một tiêu đề, danh sách tính năng và lời kêu gọi hành động để mở phần còn lại của flow. Trong ví dụ của chúng ta, đây là màn hình Welcome.

Nhấp vào màn hình Welcome trong bảng Screens, sau đó thêm các phần tử:

Thêm hình ảnh chính. Nhấp + > Media > Image, tải lên hình ảnh của bạn và điều chỉnh lề nếu cần.

Top of the Welcome screen with the main image and headline

Thêm tiêu đề: nhấp + > Text, chọn kiểu tiêu đề từ các text style đã lưu, rồi chỉnh nội dung trong trường Content.

Thêm danh sách tính năng. Nhấp + > List > Icon Cards, sau đó chỉnh icon và nhãn trong từng card.

Icon Cards feature list below the headline

Thêm nút điều hướng chính ở phía dưới. Nút này sẽ được gắn action ở bước cấu hình điều hướng.

4. Xây dựng màn hình nhập liệu và câu hỏi

Màn hình thứ hai thu thập thông tin từ người dùng. Trong ví dụ này, màn hình sẽ hỏi tên và một câu hỏi lựa chọn đơn để xác định hành trình tiếp theo của người dùng.

Để tìm hiểu thêm về nhập liệu và câu hỏi, xem Nhập liệu và biểu mẫu và Khảo sát và câu hỏi.

Nhấp vào màn hình Quiz trong bảng Screens, sau đó thêm các phần tử. Mỗi nhóm trên màn hình — phần giới thiệu, câu hỏi + nhập liệu, câu hỏi + quiz — nằm trong một Vertical Container riêng để các phần tử liên quan được nhóm lại với nhau về mặt trực quan.

Thêm tiêu đề và nội dung giới thiệu. Nhấn + > Text > H1 cho tiêu đề và + > Text > Body cho đoạn văn hỗ trợ.
Nhóm phần giới thiệu lại. Nhấn + > Layout > Vertical Container, kéo container mới lên đầu cây layer, rồi kéo H1 và body vào bên trong.

Tiêu đề và nội dung giới thiệu được nhóm trong một Vertical Container ở đầu cây layer

Thêm câu hỏi đầu tiên và ô nhập liệu. Nhấn + > Text cho tiêu đề câu hỏi, rồi nhấn + > Inputs > Text cho ô nhập.
Đặt Element ID cho ô nhập trong tab Design — trong ví dụ này là name. Điều này giúp hiển thị giá trị dưới dạng biến mà các màn hình khác có thể tham chiếu.

Name input with Element ID name, grouped with its caption in a Vertical Container

Nhóm tiêu đề và ô nhập liệu vào một Vertical Container theo cách tương tự như phần giới thiệu.
Thêm câu hỏi thứ hai và quiz. Nhấn + > Text để tạo tiêu đề, sau đó nhấn + > Quiz và chọn một layout preset như Icon Options. Cấu hình các tùy chọn — trong ví dụ của chúng tôi là Rock và Hip hop.
Nhóm tiêu đề và quiz vào một Vertical Container theo cách tương tự.
Đặt ID cho các tùy chọn. Chọn từng tùy chọn quiz, mở tab Interactions và đặt Element ID cho nó. Các ID này sẽ được tham chiếu trong phần điều hướng có điều kiện ở bước sau.

Quiz group set to Single choice in Selectable Groups

Chuyển quiz sang chế độ chọn một đáp án: nhấp vào vùng trống trên canvas để mở Screen settings, cuộn xuống Selectable Groups, nhấp vào tên nhóm quiz, rồi đặt kiểu thành Single choice.

Thêm một nút chính ở phía dưới — đây là nút Next dùng để kích hoạt phân nhánh.

Màn hình quiz cuối với phần giới thiệu, ô nhập tên và câu hỏi trắc nghiệm một lựa chọn

5. Xây dựng nhánh đầu tiên

Mỗi màn hình trong một nhánh sẽ hiển thị nội dung phù hợp với một phân khúc đối tượng cụ thể. Trong ví dụ của chúng ta, nhánh Rock hiển thị nội dung liên quan đến nhạc rock — danh sách phát, nghệ sĩ và các gợi ý.

Để tìm hiểu thêm về biến, xem Biến.

Để xây dựng màn hình:

Trong bảng Screens, nhấp vào màn hình Rock path.
Thêm tiêu đề. Đặt con trỏ vào trường Content tại vị trí muốn hiển thị nội dung được cá nhân hóa, nhấp vào biểu tượng biến , và mở tab Elements. Chọn màn hình chứa ô nhập liệu — trong ví dụ của chúng ta là Quiz — rồi chọn biến giá trị của ô nhập liệu đó. Bộ chọn sẽ hiển thị nó dưới dạng <elementId>.value — trong ví dụ của chúng ta là name.value. Khi chạy ứng dụng, tiêu đề sẽ cập nhật theo nội dung người dùng đã nhập.

Variable picker on the Elements tab showing the Quiz screen and name.value variable

Thêm nội dung chính dưới dạng các phần tử văn bản bổ sung, được điều chỉnh phù hợp với phân khúc đối tượng cho path này.
Thêm một nút chính ở phía dưới.

Final first path screen with personalized headline

6. Xây dựng nhánh đường dẫn thứ hai

Các màn hình đường dẫn thường có cùng bố cục — chỉ khác nội dung. Hãy nhân đôi màn hình đường dẫn đầu tiên và cập nhật nội dung.

Để nhân đôi và cập nhật:

Trong bảng Screens, chọn màn hình đường dẫn đầu tiên và nhấn ⌘D / Ctrl+D để nhân đôi. Bản sao sẽ xuất hiện ở cuối danh sách màn hình.
Đổi tên bản sao — trong ví dụ của chúng ta là Hip hop path — rồi kéo nó về đúng vị trí trong danh sách màn hình, sao cho nó nằm cạnh màn hình được nhân đôi từ đó.

Duplicated path screen renamed and updated for the other audience

Cập nhật nội dung chính cho phân khúc đối tượng còn lại. Tiêu đề cá nhân hóa vẫn hoạt động bình thường — biến số được giữ nguyên.

7. Xây dựng paywall

Màn hình cuối cùng là paywall — nơi người dùng có thể đăng ký. Để xem hướng dẫn chi tiết hơn về cơ chế paywall, xem Tạo màn hình paywall cơ bản. Phiên bản dưới đây tóm tắt lại hướng dẫn đó.

Nhấp vào màn hình Paywall trong panel Screens, sau đó thêm các thành phần:

Thêm một Horizontal Container ở đầu trang và thêm nút Close bên trong. Preset Close đã được cấu hình sẵn.
Thêm hình ảnh chính, tiêu đề (với biến cá nhân hóa giống như trên các màn hình path), và tiêu đề phụ làm nội dung hỗ trợ.

Phần đầu của paywall với nút đóng, hình ảnh chính và tiêu đề

Thêm sản phẩm: nhấn + > Products và chọn Vertical List. Gán sản phẩm cho từng thẻ từ menu thả xuống trong tab Design.
Nhấn vào thẻ sản phẩm mặc định và bật Set as default product để sản phẩm đó được chọn sẵn khi màn hình tải lên.

Danh sách sản phẩm với một thẻ được đánh dấu là mặc định

Thêm nút mua hàng. Nhấn + > Buttons và chọn một preset. Trong tab Interactions, nhấn Add trigger > On tap > Add action và đặt Action thành Purchase với Product là products.selectedProduct.

Top of the paywall with close button, main image, and headline

Thêm template Button > Links vào màn hình. Template này bao gồm ba liên kết ở chân trang: Restore Purchases, Terms of Use, và Privacy Policy. Liên kết Restore đã được cấu hình sẵn. Để cấu hình các liên kết khác, chọn phần tử button, mở tab Interactions, và đặt mục tiêu cho action Open URL.

Paywall hoàn chỉnh với sản phẩm, nút mua hàng và các liên kết

Các màn hình không tự động kết nối với nhau. Dùng trigger On tap và action Navigate to để kết nối nút chính của từng màn hình với màn hình tiếp theo. Màn hình phân nhánh dựa trên dữ liệu người dùng nhập thì dùng Conditional action thay thế.

Để tìm hiểu thêm về điều hướng và conditional action, xem Navigation and interaction và Actions — Conditional actions.

Để kết nối điều hướng cho flow ví dụ:

Điều hướng tĩnh từ màn hình giới thiệu. Mở màn hình Welcome, chọn nút chính, rồi chuyển sang tab Interactions. Nhấp Add trigger > On tap > Add action, đặt Action thành Navigate to, và chọn màn hình tiếp theo — trong ví dụ này là màn hình Quiz.

Static Navigate to action on the Welcome screen's primary button

Điều hướng có điều kiện từ quiz. Mở màn hình Quiz, chọn nút Next, và thêm trigger On tap với Conditional action. Thiết lập quy tắc IF/ELSE:
- Trong bộ chọn biến, mở tab Elements, chọn màn hình Quiz, và chọn quiz.selectedOptionId.
- Dùng toán tử Equals và so sánh với ID của một trong các tùy chọn — trong ví dụ này là tùy chọn Rock.
- IF so sánh khớp, kích hoạt Navigate to và chọn màn hình path đầu tiên.
- ELSE, kích hoạt Navigate to và chọn màn hình path thứ hai.

Conditional action on the Quiz Next button with IF/ELSE branches

Điều hướng tĩnh từ mỗi nhánh đến paywall. Lặp lại quy trình từ bước 1 trên mỗi màn hình nhánh, với paywall là đích đến.

Các bước tiếp theo

Lưu và xuất bản flow của bạn.
Thêm flow vào một placement để bắt đầu hiển thị cho người dùng.
Nếu muốn hiển thị flow riêng cho từng đối tượng (thay vì phân nhánh trong flow), hãy tạo các phân khúc đối tượng và gán các flow khác nhau trên trang Placement.

Muốn tìm hiểu thêm về cách xây dựng flow? Xem các video hướng dẫn từng bước trong danh sách phát YouTube của chúng tôi.

Xây dựng flow onboarding cá nhân hóa

Trước khi bắt đầu

1. Thiết lập các style có thể tái sử dụng

2. Tạo các màn hình

3. Xây dựng màn hình giới thiệu

4. Xây dựng màn hình nhập liệu và câu hỏi

5. Xây dựng nhánh đầu tiên

6. Xây dựng nhánh đường dẫn thứ hai

7. Xây dựng paywall

8. Kết nối điều hướng giữa các màn hình

Các bước tiếp theo