Kullanım kılavuzuna geç
User Flow Diagramyazan Owl-Listener

User Flow Diagram Skill.

Bir kullanıcının tek bir hedefi tamamlamak için izleyebileceği rotaları gösterin.

  • Prototipleme
  • Kullanıcı Akışları
Kaynak İncelemesi · User Flow DiagramSKILL.md
Görev Prototipleme Ürettikleri • Tek bir kullanıcı hedefi için akış diyagramı. • Etiketli kararlar, tetikleyiciler, arka plan işlemleri ve çıkışlar. • Başarılı rotanın yanında hata ve kurtarma yolları. Başlamadan Önce Kaynak herhangi bir diyagram uygulaması gerektirmez; seçilen çıktı biçimi net gösterimi korumalıdır.
Editoryal özet · incelenen kaynak 2026-10-07 · üretilmiş örnek değildir

01 İşlevler

Yolları, Kararları ve Kurtarmayı Haritalayın

Standart öğeler, tetikleyici etiketleri, sistem notları ve kurtarma dalları içeren, ekran düzeyinde bir akış diyagramı rehberi.

Kaynağa dayalı iş akışıÇalıştırma performans testi değildir

Çalışma Yaklaşımı

User Flow Diagram, bir ürün içindeki hareketi ekran ve eylem düzeyinde haritalar. Giriş noktalarını, ekranları, kararları, kullanıcı eylemlerini, arka plan süreçlerini ve bitiş noktalarını ayırt eder; böylece diyagram hem rotayı hem de her geçişe neyin yol açtığını anlatabilir.

Kaynak, önce mutlu yoldan başlamayı, ardından dalları, hataları, kurtarmayı ve çıkışları eklemeyi önerir. Bu sıralama, başarısızlığı sonradan akla gelen bir konu yapmadan akışı okunabilir tutar. Ayrıca doğrusal görev akışını, dallanan kullanıcı akışını ve ekran küçük görselleri içeren tel akışı birbirinden ayırır.

Beklenen Çıktılar

  • Tek bir kullanıcı hedefi için akış diyagramı.
  • Etiketli kararlar, tetikleyiciler, arka plan işlemleri ve çıkışlar.
  • Başarılı rotanın yanında hata ve kurtarma yolları.
Örnek Brife Bak

Brifden İncelemeye

  1. 01
    Hedefi ve Girişi Belirleyin

    Tamamlanmanın ne anlama geldiğini ve kullanıcının nereden başlayabileceğini belirleyin.

  2. 02
    Ana Rotayı Çizin

    Dalları eklemeden önce ekranları ve eylemleri tutarlı bir gösterimle haritalayın.

  3. 03
    Kararları ve Kurtarmayı Ekleyin

    Her okun bir nedeni olması için koşulları, sistem olaylarını, gecikmeleri, hataları ve çıkışları etiketleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Kaynak herhangi bir diyagram uygulaması gerektirmez; seçilen çıktı biçimi net gösterimi korumalıdır.

İyi Bir Uyum

  • Çok Ekranlı GörevlerEkipların, kullanıcının ekranlar boyunca bir sonuca nasıl ulaştığı konusunda uzlaşması gerektiğinde yararlıdır.
  • Dallanan İş Akışlarıİzinlerin, seçimlerin veya başarısız işlemlerin yol açtığı farklı rotaları görünür kılmaya yardımcı olur.

Kontrol Edilecek Sınırlar

  • Duygusal Yolculuk DeğildirDuyguları ve temas noktalarını içeren uçtan uca bir yolculuk haritasının yerini tutmaz.
  • Görsel Arayüz Maketi DeğildirBir akış tel kafes çizimlere atıf yapabilir, ancak esas olarak tamamlanmış ekran tasarımını değil rotaları anlatır.

Bu Girdileri Hazırlayın

  • Görev HedefiSonucu ve tamamlanma koşulunu belirtin.
  • Ekranlar ve Giriş NoktalarıBilinen görünümleri ve kullanıcıların başlayabileceği yerleri sağlayın.
  • Dal Kurallarıİzinleri, doğrulamayı, hataları ve sistem tarafı olayları ekleyin.

03 Önemli Kararlar

Önemli Kararlar

  1. Oklar Davranışı Açıklar

    Etiketli bağlantılar akışı uygulanabilir kılar; etiketsiz bir çizgi, uygulamanın ihtiyaç duyduğu tetikleyiciyi gizler.

  2. Tek Hedef Okunabilirliği Korur

    İlgisiz hedefleri ayırmak, tek bir diyagramın tüm ürünün okunamaz bir haritasına dönüşmesini önler.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Deponun belgelenmiş kurulum yolunu kullanın ve atıf yapılan tüm eşlik eden dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini tanımlar.

Upstream Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

Kaynak herhangi bir diyagram uygulaması gerektirmez; seçilen çıktı biçimi net gösterimi korumalıdır.

Tek Bir Çıktıyla Başlayın

Beceriyi çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Bir çalışma alanına takım arkadaşı davet etme akışı için user-flow-diagram kullanın. Ayarlardan ve boş ekip ekranından girişi, mevcut hesap ve yeni hesap dallarını, süresi dolmuş davetleri ve izin hatalarını ekleyin. Her bağlantıyı etiketleyin ve kullanıcı eylemlerini arka planda e-posta gönderiminden ayırın.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Her okun bir tetikleyicisi veya koşulu vardır.
  • Tamamlanma ve erken çıkışlar açıkça belirtilmiştir.
  • En azından bilinen hata yollarının bir kurtarma rotası vardır.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu liste, becerinin pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Kaynağın davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
Owl-Listener
Lisans
MIT
İncelenen Anlık Görüntü
2026-10-07 · 9a6930cf84a8
Editoryal Kaynak Özeti
Standart öğeler, tetikleyici etiketleri, sistem notları ve kurtarma dalları içeren, ekran düzeyinde bir akış diyagramı rehberi.

Bağlantısı verilen kaynağa dayanarak OpenDesign tarafından hazırlanan özgün özet. Depo yıldızları, tarihli bir popülerlik göstergesidir; beceri kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Tel akışı nedir?

Rota diyagramını tel kafes küçük görselleriyle birleştirir; böylece yol ve kaba ekran yapısı birlikte okunabilir.

Tüm ürünü kapsamalı mı?

Kaynak, dalların anlaşılır kalması için hedef başına bir akış önerir.

Durum makinesinden farkı nedir?

Kullanıcı akışı, ekranlar ve eylemler arasındaki ilerlemeyi anlatır. Durum makinesi ise odaklı bir davranış için geçerli durumları ve geçişleri belirtir.

OpenDesign

Sonraki Tasarım Yinelemesine Yer Açın.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce becerinin kendi kurulumunu kontrol edin.

Upstream Kaynak Dosyası
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md