---
title: "Onboarding tasarımı"
description: "Anlamlı onboardinglar oluşturun."
---

Kodsuz mobil uygulama onboarding builder'ı, kullanıcılarınıza en iyi onboarding deneyimini sunmanıza yardımcı olacak güçlü ve özelleştirilebilir bir araçtır. Harika sonuçlar elde etmek için geliştirici ya da tasarımcı olmanıza gerek yok.

## Onboarding ekranları \{#onboarding-screens\}

Onboarding akışı, eklediğiniz ve tasarladığınız birden fazla ekrandan oluşur.

Kullanıcılar ekranlar arasında geçiş yapmak için butona dokunur.

:::tip
Bazı kullanıcılarınızın biraz farklı bir akışa ihtiyacı varsa (örneğin bir fitness uygulamasında kullanıcının cinsiyetine göre farklı 'hedef' görselleri göstermek isteyebilirsiniz), ayrı onboardinglar oluşturmanıza gerek yoktur.

Bunun yerine [bazı ekranları varsayılan olarak gizleyebilir ve yalnızca belirli senaryolarda gösterebilirsiniz](onboarding-user-engagement).
:::

## Onboarding öğeleri \{#onboarding-elements\}

Onboarding öğeleri sol tarafta, gösterildikleri sırayla listelenir. Yeni bir öğe eklemek için sağ üstteki **Add** butonuna tıklayın.

Ekleyebileceğiniz öğe grupları şunlardır:

- **Containers**: Container'lar esnek bir düzen oluşturmanıza olanak tanır. Örneğin iki sütunlu bir metin eklemek istiyorsanız **Columns** ekleyip ardından sol paneldeki **Columns** içine iki metin bloğu sürüklemeniz gerekir. Carousel eklemek için ise içindeki **Media** öğelerine resim eklemeniz gerekir.
- **Typography**: Önceden biçimlendirilmiş metin blokları ekleyin ve görünümlerini ihtiyacınıza göre düzenleyin.
- **Media & Display**: Resim ve videolara ek olarak, uygulamanızın değerini gösteren ve kullanıcıları teşvik eden animasyonlu grafikler ekleyebilirsiniz.
  
  **Desteklenen video formatları** MP4 ve WebM'dir. **Maksimum medya dosyası boyutu** 15 MB'tır.

  Desteklenmeyen animasyonlu bir öğe eklemek istiyorsanız (örneğin Lottie), bunu bir videoya dönüştürebilir (örneğin [bu araçla](https://www.lottielab.com/lottie/lottie-to-video)) ve video olarak yerleştirebilirsiniz.
- **Quiz**: Onboarding deneyimini kişiselleştirmek ve kullanıcılarınızı daha iyi tanımak için metin ve resim seçenekli kısa anketler oluşturun.
- **Inputs**: Kullanıcılarınızın verilerini toplayın.
- **Buttons**: Butonlar, kullanıcıların ekranlar arasında geçiş yapmasını, onboarding'i kapatmasını veya paywalla geçmesini sağlar. Kullanıcıların dikkatini çekmek ve kurulumu satın almaya dönüştürmek için parlak veya hareketli butonlar da ekleyebilirsiniz.
- **Loaders**: Animasyonlu yükleyiciler, süreç boyunca kullanıcıların ilgisini canlı tutar.
- **User engagement**: Referanslar, kullanıcı e-posta listeleri ve geri sayımlar ekleyin.

:::note
**Media & Display** grubu kapsamında, sağlanan özelleştirme seçenekleri yetmediğinde özel HTML kodu da ekleyebilirsiniz.

Ancak özel HTML öğeleri ne önceden yüklenir ne de önbelleğe alınır; bu nedenle **Raw HTML**'i yalnızca küçük ve hafif öğeler için kullanmanız önerilir.
:::

  
  <img src="/assets/shared/img/design-onboarding4.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

### Öğe kimliği ve eylem kimliği \{#element-id-and-action-id\}

Bir butonu özel eylemler için kullanmak istiyorsanız ona bir **action ID** atayın ve ardından kaynak kodunuzda bu kimliği kullanın. Eylem kimlikleri, aynı eylem kimliğine sahip farklı butonları aynı şekilde ele almanıza olanak tanır.

  
  <img src="/assets/shared/img/ios-events-1.webp"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

Belirli bir alandaki kullanıcı girişini işlemek istiyorsanız (örneğin yaş veya e-posta kaydetmek), alana bir **element ID** atayın ve ardından soruları yanıtlarla ilişkilendirmek için kaynak kodunuzda bu kimliği kullanın. Öğe kimlikleri onboarding'inizde yalnızca bir kez kullanılabilir.

  
  <img src="/assets/shared/img/design-onboarding5.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Özelleştirme seçenekleri \{#customization-options\}

Builder'da şu özelleştirme seçenekleri mevcuttur:
- **Styles** sekmesi: Öğenin görünümünü ayarlayın.
  
  <img src="/assets/shared/img/design-onboarding1.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- **Element** sekmesi: Görünebilirlik, buton basma eylemleri veya öğenin görünümüyle ilgisi olmayan diğer özellikler gibi öğe niteliklerini ayarlayın.
  
  <img src="/assets/shared/img/design-onboarding2.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- **Screen** sekmesi: Başlık veya ekran sayacı gösterimi gibi genel ekran yapılandırmasını ayarlayın.
  
  <img src="/assets/shared/img/design-onboarding3.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Ekranları ve öğeleri kopyalama \{#copy-screens-and-elements\}

Bir onboarding oluşturdunuz ve bazı bölümlerini yeniden kullanmak ya da küçük değişiklikler yapıp A/B testleri çalıştırmak istiyorsanız, bir onboarding'den diğerine bir veya birden fazla ekran kopyalayabilirsiniz.

Ekranları kopyalamak için onboarding builder'ı açın ve şunlardan birini yapın:
- Tek bir ekrana sağ tıklayın ve **Copy** seçeneğini seçin
- İstediğiniz ekranı seçin ve `Ctrl+C` (Windows) veya `⌘+C` (Mac) tuşlarına basın

Aynı onboarding içinde veya farklı onboardingler arasında tek tek öğeleri ya da metin bloklarını da kopyalayabilirsiniz.

## Web-to-app hunilerinden ekran kopyalama \{#copy-screens-from-web-to-app-funnels\}

[FunnelFox](https://funnelfox.com/)'ta oluşturulan web-to-app hunilerini kullanıyorsanız ve huni ekranlarını onboardinglerde kullanmak istiyorsanız, huni builder'ında ekranları kopyalayıp onboarding builder'ına yapıştırarak bunu hızlıca yapabilirsiniz:

1. FunnelFox huni builder'ında bir ekrana sağ tıklayın ve **Copy** seçeneğini seçin ya da ekranı seçin ve `Ctrl+C`/`⌘+C` tuşlarına basın.
2. Onboarding builder'ını açın.
3. Kopyalanan ekranı eklemek istediğiniz yere sağ tıklayın ve **Paste** seçeneğini seçin ya da seçili durumdayken `Ctrl+V`/`⌘+V` tuşlarına basın. Kopyalanan ekran, seçili ekranın altına eklenir.

  
  <img src="/assets/shared/img/funnel-to-onboarding.gif"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />