Loading Statesyazan Owl-Listener

Loading States Skill.

Bekleme sırasında neler olduğunu, ilerleme konusunda insanları yanıltmadan gösterin.

Etkileşim Tasarımı
Yükleme Deneyimi

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Loading StatesSKILL.md

Görev Etkileşim Tasarımı Çıktılar • Gecikmeli her işlem için bir yükleme deseni kararı. • Ayrılan alanı ve kaydırma konumunun korunmasını kapsayan geçiş notları. • Uzun bekleme, iptal ve iyimser işlem başarısızlığı davranışı. Başlamadan Önce İşlem sürelerine ve ilerleme olanaklarına dair doğru bilgiler ürün veya uygulama ekibinden gelmelidir.

Editöryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Bekleme Durumlarını Anlaşılır Kılın

Gecikmeli işlemler için geri bildirim seçer ve gerçek sonuçların yükleme ya da iyimser durumların yerini nasıl alacağını belirtir.

Kaynağa dayalı iş akışıYürütme karşılaştırması değildir

Çalışma Yaklaşımı

Loading States, bekleme desenlerini arayüzün bildiklerine göre ayırır: gelen içeriğin biçimi, ilerlemenin ölçülebilir olup olmadığı ve bir eylemin güvenle iyimser biçimde gösterilip gösterilemeyeceği. İskeletleri, belirli ve belirsiz göstergeleri, aşamalı gösterimi ve yer tutucuları kapsar.

Rehberlik, yüklemeden çıkış geçişini de ele alır. Gerçek içerik yerleşimi beklenmedik biçimde kaydırmamalı veya kullanıcının kaydırma konumunu sıfırlamamalıdır. İyimser değişiklikler uzlaştırma ve geri alma gerektirir; başarısızlık arayüzü güvenilmez bırakıyorsa hızlı görünen bir başarı durumu uygun değildir.

Beklenen Çıktılar

Gecikmeli her işlem için bir yükleme deseni kararı.
Ayrılan alanı ve kaydırma konumunun korunmasını kapsayan geçiş notları.
Uzun bekleme, iptal ve iyimser işlem başarısızlığı davranışı.

Örnek Brife Göz At

Brifden İncelemeye

01
Beklemeyi Sınıflandırın
Beklenen süreyi, bilinen içerik yapısını, ölçülebilir ilerlemeyi ve işlemin iptal edilip edilemeyeceğini belirleyin.
02
Dürüst Geri Bildirim Seçin
Öngörülebilir biçimler için iskelet, yalnızca ilerleme biliniyorsa ilerleme çubuğu kullanın. İyimser geri bildirimi benimsemeden önce geri almayı tanımlayın.
03
Varışı ve Başarısızlığı Test Edin
Yavaş bağlantıları, içerik değişimini, yerleşim kararlılığını ve hareket tercihlerini inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

İşlem sürelerine ve ilerleme olanaklarına dair doğru bilgiler ürün veya uygulama ekibinden gelmelidir.

İyi Bir Uyum

Veri Yoğun EkranlarGörünümün tamamı hazır olmadan kısmi içerik gelebildiğinde kullanışlıdır.
İyimser EtkileşimlerBir kaydetme veya güncelleme beklemedeyken kullanıcıların ne göreceğini belirlemeye yardımcı olur.

Kontrol Edilecek Sınırlar

Gecikme Çözümü DeğildirYükleme deseni bekleme deneyimini değiştirir; sunucunun veya ağın temel performansını değiştirmez.
Başarı Onayı DeğildirTamamlanma geri bildirimi ilişkili ama ayrı bir etkileşim kararıdır.

Bu Girdileri Getirin

Gecikmeli İşlemlerVeri çekmeleri, yüklemeler, kaydetmeler ve beklenen bekleme aralıklarını listeleyin.
Mevcut İlerleme VerisiHangi işlemlerin gerçek tamamlanma yüzdeleri sunduğunu açıklayın.
Başarısızlık ve Kurtarma KurallarıHer işlem için iptal, yeniden deneme ve geri alma seçeneklerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

Desen Bilgiyle Uyumlu Olmalı
Ölçülebilir ilerleme olmadan belirli bir çubuk, sistemin sahip olmadığı bir kesinlik izlenimi verir.
Yüklemeden Sonra Süreklilik
Yerleşimi ve kaydırma konumunu korumak, tamamlanan bir isteğin yeni bir gezinme sorunu yaratmasını ö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 başvurulan tüm yardımcı dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini anlatır.

Yukarı Akış Kaynak Dosyası

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/loading-states/SKILL.md

İşlem sürelerine ve ilerleme olanaklarına dair doğru bilgiler ürün veya uygulama ekibinden gelmelidir.

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

İlk veri çekmesi, görsel küçük resimleri ve satır içi başlık düzenlemeleri olan bir proje panosu için loading-states kullanın. Her işlem için bir desen seçin, nihai yerleşim için alan ayırın; başarısız iyimser düzenlemeleri, yavaş ağ davranışını ve azaltılmış hareket alternatiflerini belirtin. İlerleme yüzdeleri uydurmayın.

Sonucu İnceleyin

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

Her iyimser değişikliğin bir başarısızlık geri alması vardır.
Yükleme ve yüklenmiş yerleşimler uyumlu alan ayırır.
Uzun beklemeler, desteklendiği yerde faydalı bir sonraki eylemi sunar.

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.

OpenDesign İndir Hızlı Başlangıcı Okuyun

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu anlatır. Yukarı akıştaki davranış ve gereksinimler değişebilir.

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Beceri Dosyası: interaction-design/skills/loading-states/SKILL.md
Lisans: MIT
İncelenen Anlık Görüntü: 2026-10-07 · 9a6930cf84a8

Editöryal Kaynak Özeti

Gecikmeli işlemler için geri bildirim seçer ve gerçek sonuçların yükleme ya da iyimser durumların yerini nasıl alacağını belirtir.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik işaretidir; beceri kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorulacaklar

Her istek bir yükleme göstergesi göstermeli mi?

Hayır. Kaynak; çok kısa beklemeleri, bilinen yerleşimleri, ölçülebilir ilerlemeyi ve uzun süren işleri birbirinden ayırır.

İskelet ne zaman yararlıdır?

Gelen içeriğin, içerik zaten mevcutmuş izlenimi vermeden temsil edilebilecek bilinen bir yapısı olduğunda.

Azaltılmış hareket boş bir yükleme ekranı demek midir?

Hayır. Bilgilendirici geri bildirim kalmalıdır; parıltı gibi dekoratif hareketler azaltılabilir veya kaldırılabilir.

OpenDesign

Bir 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.

OpenDesign İndir Tasarım Becerilerine Göz At