English 中文TürkçeРусскийEspañol日本語Tiếng Việt

Tạo paywall với tab

Template này dùng tab để chuyển đổi giữa hai biến thể của cùng một ưu đãi trên một màn hình duy nhất. Mỗi tab chứa danh sách tính năng, danh sách sản phẩm và nút mua riêng. Nhấn vào tab sẽ thay thế nội dung hiển thị mà không cần rời khỏi màn hình — hữu ích khi phân chia các gói theo cấp độ, kỳ thanh toán, hoặc phân khúc đối tượng.

Trước khi bắt đầu

1. Thiết lập bố cục màn hình

Màn hình đóng vai trò là container cho nút đóng, tiêu đề, tab và nội dung tab. Trong ví dụ này, nền là một hình ảnh, nhưng màu nền đơn sắc hoặc gradient cũng hoạt động tương tự.

Để xem danh sách đầy đủ các thuộc tính màn hình, hãy xem Màn hình và layer — Cài đặt màn hình.

Để cấu hình màn hình:

  1. Nhấp vào vùng trống trên canvas để chọn màn hình.
  2. Trong System UI, tắt Safe area để nền kéo dài đến các cạnh màn hình.
  3. Trong Fill, chọn loại nền và cấu hình nó. Ví dụ này dùng Image , nhưng màu đơn hoặc gradient cũng hoạt động tương tự.
  4. Trong Layout, đặt hướng thành Vertical và cấu hình khoảng cách và căn chỉnh để các phần tử xếp chồng từ trên xuống với nội dung tab lấp đầy phần không gian còn lại.
Cài đặt màn hình với Image fill và bố cục dọc

2. Thêm nút đóng

Nút đóng dùng để thoát khỏi paywall. Preset Close đã được cấu hình sẵn — không cần thiết lập thêm hành động.

  1. Trên canvas, nhấp +.
  2. Chọn Buttons > Close.
Nút đóng đã được thêm vào màn hình

3. Thêm tiêu đề và ghép nó với nút đóng

Tiêu đề nằm cạnh nút đóng ở đầu màn hình. Để căn chúng theo chiều ngang, hãy bọc cả hai trong một container ngang.

Để thêm tiêu đề:

  1. Nhấn + > Text > H1.
  2. Khi đã chọn H1, mở tab Design và chỉnh nội dung trong trường Content.
H1 được thêm vào màn hình với trường Content ở bên phải

Để nhóm tiêu đề với nút đóng:

  1. Trong bảng Layers, nhấp vào menu ba chấm trên layer nút đóng và chọn Wrap > Wrap in Horizontal Container.
H1 added to the screen with the Content field on the right
  1. Kéo layer H1 vào horizontal container vừa tạo.
Close button and H1 grouped in a horizontal container

Để căn chỉnh hai phần tử:

  1. Điều chỉnh kích thước nút đóng và cỡ chữ H1 để chúng nằm thoải mái trên cùng một dòng.
  2. Chọn container ngang, sau đó thiết lập căn chỉnh và phân phối trong bảng bên phải để các phần tử hiển thị đúng vị trí.
Nút đóng và H1 được căn chỉnh trong container ngang

4. Thêm các tab và cấu hình nhãn của chúng

Phần tử Tabs chia một phần màn hình thành các bảng nội dung có thể chuyển đổi. Mỗi tab có vùng chứa nội dung riêng, hiển thị khi người dùng chọn tab đó.

Để tìm hiểu thêm về phần tử Tabs, xem Elements — Tabs. Để tìm hiểu thêm về các nhóm có thể chọn, xem Selectable elements and groups.

Để thêm các tab:

  1. Nhấn + > Tabs và chọn một kiểu — Segment control, Button Tabs hoặc Underline.
  2. Chọn tên của từng tab trên canvas hoặc trong bảng Layers, rồi chỉnh trường Content ở tab Design để thay đổi nhãn — ví dụ: Premium và Pro.
Phần tử Tabs với hai nhãn đã được cấu hình

5. Thêm danh sách tính năng vào tab đầu tiên

Một danh sách tính năng ngắn gọn, súc tích bên trong tab đầu tiên giúp người dùng biết gói đó bao gồm những gì.

Để xem toàn bộ các preset danh sách, xem Elements — List.

Để thêm danh sách tính năng:

  1. Nhấn + > List và chọn một preset danh sách. Icon List là loại gọn nhất cho paywall. Phần tử sẽ xuất hiện ở cuối cây layer.
  2. Chọn từng hàng, rồi chỉnh sửa tiêu đề trong trường Content.
Danh sách tính năng bên trong content container của tab đầu tiên
  1. Trong bảng Layers, kéo danh sách vào container Content của tab đầu tiên.
Danh sách tính năng bên trong container Content của tab đầu tiên

6. Thêm danh sách sản phẩm vào tab đầu tiên

Danh sách sản phẩm hiển thị các tùy chọn gói đăng ký cho tab đầu tiên. Phần tử Products hiển thị một thẻ cho mỗi sản phẩm được gán cho màn hình và tạo nhóm có thể chọn riêng của nó.

Để biết thêm về quản lý sản phẩm, xem Thiết lập mua hàng.

Để thêm và cấu hình sản phẩm:

  1. Nhấp + > Products và chọn bố cục mẫu. Vertical List phù hợp cho các gói xếp chồng. Phần tử xuất hiện ở cuối cây lớp.
  2. Chọn từng thẻ sản phẩm trên canvas và chọn sản phẩm từ menu thả xuống trong tab Design.
Configuring the Products element and dragging it into the first tab's Content container
  1. Trong bảng Layers, kéo layer Products vào vùng Content của tab đầu tiên.
Configuring the Products element and dragging it into the first tab's Content container

7. Thêm nút mua hàng vào tab đầu tiên

Nút mua hàng khởi động quá trình in-app purchase cho sản phẩm mà người dùng đã chọn trong tab đầu tiên. Nhãn của nút sử dụng giá của sản phẩm được chọn để luôn đồng bộ với lựa chọn của người dùng.

Để tìm hiểu thêm về hành động Purchase, xem Hành động — Purchase.

Để thêm và cấu hình nút mua hàng:

  1. Nhấn + > Buttons và chọn một preset nút. Phần tử sẽ xuất hiện ở cuối cây lớp.
  2. Khi nút đang được chọn, mở tab Design và đặt con trỏ vào trường Content. Nhấn vào biểu tượng biến Variable icon, chọn products.selectedProduct, rồi chọn thuộc tính prod_price — biến đầy đủ sẽ là products.selectedProduct.prod_price. Bao quanh nó bằng phần còn lại của nhãn — ví dụ: Subscribe for {prod_price}.
Purchase button inside the first tab with the selected product price in the label
  1. Chuyển sang tab Interactions và nhấn Add trigger > On tap > Add action.
  2. Đặt Action thành Purchase và Product thành products.selectedProduct.
Purchase button inside the first tab with the selected product price in the label
  1. Trong bảng Layers, kéo nút vào container Content của tab đầu tiên.
Nút mua hàng bên trong tab đầu tiên với giá sản phẩm được chọn hiển thị trong nhãn

8. Sao chép nội dung từ tab đầu tiên sang tab thứ hai

Thay vì xây dựng lại cấu trúc từ đầu, hãy sao chép danh sách tính năng, danh sách sản phẩm và nút mua hàng từ tab đầu tiên sang tab thứ hai. Sau đó bạn chỉ cần cập nhật lại các giá trị.

Để sao chép nội dung:

  1. Trong bảng Layers, mở rộng container Content của tab đầu tiên.
  2. Chọn từng phần tử bên trong (danh sách tính năng, sản phẩm, nút mua), sao chép bằng ⌘C / Ctrl+C, rồi dán bằng ⌘V / Ctrl+V. Các bản sao sẽ xuất hiện ở cuối cây layer.
  3. Kéo từng phần tử vừa sao chép vào container Content của tab thứ hai.
Sao chép nội dung của tab đầu tiên vào tab thứ hai

9. Cập nhật nội dung tab thứ hai

Tab thứ hai hiện đang giống hệt tab đầu tiên. Hãy cập nhật từng phần tử để phản ánh gói thứ hai.

Để cập nhật tab thứ hai:

  1. Chỉnh sửa danh sách tính năng trong tab thứ hai để các hàng khớp với các tính năng của gói thứ hai.
  2. Chọn từng thẻ sản phẩm trong phần tử Products của tab thứ hai và gán các sản phẩm của gói thứ hai từ menu thả xuống. Phần tử Products này sẽ tự động trở thành một nhóm có thể chọn riêng biệt (products2).
  3. Chọn nút mua trong tab thứ hai. Trong trường Content của tab Design, đổi biến giá từ products.selectedProduct.prod_price thành products2.selectedProduct.prod_price.
  4. Chuyển sang tab Interactions và cập nhật Product trong hành động Purchase từ products.selectedProduct thành products2.selectedProduct.
Tab thứ hai đã được cập nhật với các tính năng, sản phẩm và mục tiêu mua hàng riêng

Các liên kết điều khoản sử dụng, chính sách bảo mật và khôi phục mua hàng luôn hiển thị dù đang ở tab nào. Thêm chúng ở cấp màn hình — bên ngoài cả hai container nội dung tab — để chúng được dùng chung giữa các tab.

Để thêm các liên kết footer:

  1. Nhấp vào + > Buttons > Links. Thao tác này sẽ thêm một hàng gồm Restore Purchases, Terms of Use và Privacy Policy vào cuối cây layer — đây chính xác là vị trí bạn muốn, ở gốc của màn hình, không lồng bên trong tab nào.
  2. Trong bảng Layers, chọn nút Terms of Use. Mở tab Interactions và dán URL điều khoản của bạn vào trường Open URL.
  3. Lặp lại tương tự cho nút Privacy Policy với URL chính sách quyền riêng tư của bạn.
  4. Để nguyên liên kết Restore Purchases. Hành động của nó đã được cấu hình sẵn.
Liên kết footer dùng chung ở cuối màn hình, bên ngoài cả hai tab

Các bước tiếp theo