Tahmine dayalı arka tasarım

Tahmine dayalı geri, kullanıcının tam olarak tamamlamadan önce geri hareketin hedefini önizlemek için geri kaydırdığı hareketle gezinme işleminin sonucudur. Bu, kullanıcının devam edip etmemeye (diğer bir deyişle, geri hareketine "kaydetme" veya geçerli görünümde kalmaya) karar vermesine olanak tanır.

Tahmine dayalı geri, hareketle gezinmeyi kullanırken daha sorunsuz ve daha sezgisel bir gezinme deneyimi sunar. Beklenmedik sonuçları azaltmak için kullanıcıların eylemlerinin onları nereye götüreceğini bildirmek için yerleşik animasyonlardan faydalanır.

Uygulamanızın tasarımı önemli anlar için özel geçişler ve animasyonlar için geri gezinme gerektiriyorsa bu sayfadaki tasarım kılavuzunu kullanın.

Tahmine dayalı geri desteği

Varsayılan veya özel geri gezinme kullanarak tahmine dayalı geri desteği sağlayabilirsiniz. Varsayılan geri gezinmeyi kullanıyorsanız bu özelliği kolayca etkinleştirebilirsiniz. Tahmine dayalı geri ödemeyi destekleme hakkında daha fazla bilgi edinin.

Kaydolduktan sonra, uygulamanız ana sayfaya geri dönme, çapraz etkinlik ve çapraz görev gibi animasyonlar içerir.

Aşağıdaki Materyal bileşen animasyonlarını almak için Material bileşeni bağımlılığınızı MDC Android'in 1.10.0-alpha02 veya sonraki bir sürümüne de geçirebilirsiniz:

Uygulamanızın uçtan uca destek içerdiğinden emin olun

Tahmine dayalı geri gezinme özelliği, kullanıcılarınıza yardımcı olmak için uçtan uca özelliklerde tanımlanan hareket eklerine uyar. Bu hareket alanlarının altına dokunma hareketleri eklemekten veya hedefleri sürüklemekten kaçının.

Şekil 1: Sistem hareketi ekleri. Dokunma hedeflerini tamamen bu alanların altına yerleştirmekten kaçının

Tam ekran yüzeyleri

Uygulamanız tam ekran yüzeyler için özel uygulama içi geçişler oluşturuyorsa bu tasarım yönergelerini uygulayın.

1.Video Tam ekran yüzeyi tahmine dayalı geri örneği.


Geri önizleme

Bir kullanıcı tam ekran yüzeyinde geri hareketi yaptığında, hareket ilerledikçe iç alanın ölçeği küçültülmelidir. Kullanıcı kaydetme eşiğini geçer geçmez içerikler, geçiş yaparak bir sonraki duruma geçmeli ve kullanıcıya işlemin onları nereye götüreceği konusunda bilgi vermelidir.

İnterpolasyon

Kullanılan interpolatör, ekranın hızlı bir şekilde çıkmasını sağlar. Parametreler, SystemUI animasyonları için kullanılan interpolatörle eşleşecek şekilde (.1, .1, 0, 1) şeklindedir

İşlemi iptal et

Kullanıcı, hareketi kaydetmeme durumunda serbest bırakırsa içerik, hareket başlamadan önce hızlı bir şekilde orijinal durumuna ve boyutuna geri döner ve durum değişikliklerini geri alır.

2.Video Taahhüt vermeme durumu ve iptal işlemi örneği.

Hareket özellikleri

Parametre

Başlangıç Değeri

Hedef Değer

Bağlam

Ölçekten Çık

%100

%90

Ölçek Girin

%110

%100

Şeffaflaştırma modundan çık

%100

%0

%35 ilerleme eşiğinde hedef değere yavaşlar

Şeffaflaştırma tuşuna basın

%0

%100

%35 ilerleme eşiğinde geçişe başlar

3.Video Hareket sırasında oluşan yay gerilimini absorbe etmek için hafif bir aşım ekleme

Paylaşılan öğe geçişi (Görünümler Arası)

Uygulamanız, Görünümler'deki paylaşılan öğe geçişleri için özel uygulama içi geçişler oluşturuyorsa aşağıdaki tasarım kılavuzundan yararlanın.

Bir kullanıcı paylaşılan bir öğe geçişinde geri hareketi yaptığında, arka önizleme sırasında yüzey, ekranın kenarından tamamen ayrılır ve kullanıcı bunu doğrudan değiştirebilir. Bununla birlikte tasarım, kullanıcıya geri hareketi tamamlandığında bir öğenin geri hareketi yönünde kapatıldığını görsel olarak önermemelidir.

Örneğin, ayrıntı ekranlarını tekrar dikey listelere kapatırken kullanıcıya önceki işlemi geri aldığını görsel olarak hatırlatmak için paylaşılan öğe geçişlerini kullanabilirsiniz. 3. videoda ise bir takvim etkinliği kapatılarak gün görünümüne geçilir. Tasarım, dokunsallığı iyileştirmek için hareket sırasında oluşan yay geriliminin bir kısmını emen hafif bir aşım ekler.


Geri önizleme

Kullanıcıya tahmine dayalı animasyonlar sunarken uygulamanızın yönettiği taahhüt öncesi durumu, kullanıcının uçtan uca geri hareketi gerçekleştirdiği ancak vazgeçerek bunu yapmadığı durumları ölçer. Bu taahhüt öncesi durum için geçerli olan parametreleri sağlamanız gerekir.

Görüntülenen hareket miktarı, kullanıcının hareketin başladığı yerden ne kadar mesafe hareket edebileceğine bağlıdır.

4.Video Arka önizleme örneği

Hareket özellikleri

Paylaşılan öğe geçişleri, hareketin başlangıcından itibaren x ve y kaymasından doğrudan etkilenir. Bu bölümde, ekran geri bildirimi için kullanılan mekanikleri yöneten özellikler ve değerler açıklanmaktadır.

Aşağıdaki şekillerde, yüzey animasyonları için önerilen hareket özellikleri gösterilmektedir.

Şekil 2: Sol kenardan kaydırma için yüzey kaydırma, ölçek ve marj parametreleri"

1 Kenar boşlukları: Her iki tarafta genişliğin% 5'i (3'te açıklanan yüzey alanıyla ilişkili)

2 Ölçeklendirme penceresi ortaya çıkıyorsa hesaplanmış kayma. Gerekli 8dp kenar boşluğunu hesaplayın: ((ekran genişliği / 20) - 8) dp

3 Yüzey, %90 boyuta ölçeklenir, marjlar için% 10 kullanılabilir kalır (bkz. 1)

4 Ekran kenarında 8 dp boşluk bırakın

Tutarlı bir deneyim için listelenen parametreleri korumanızı öneririz ancak özel bir animasyon oluşturmak için spesifikasyonları değiştirebilirsiniz.

Yukarıdaki şekilde, ekran genişliği 1280'dir ve x kayması 56 dp'dir. Bunun formülü şöyledir:

((1280/20)-8)= 56 dp x-kaydırma

Şekil 3: Sol kenardan kaydırma için Y kayması ve ölçek parametreleri. Tam ekran yüzeyinde bir arka önizleme görüntülenir.

1 Y-shift için kenar ve cihaz kenar boşluğu arasında boşluk mevcut

2 Yüzey ekranın dışına kayıyorsa yüzeyi en fazla %50 aşağı ölçeklendirin.

2 Yüzey dikey olarak ortalanarak başlar. Y kayması aşağıdaki gibi tanımlanır:

  • Yüzeyin 8 dp ekran kenar boşluğunu aşmaması için y kaymasını sınırlandırın
  • Yüzeyin aniden durmasını önlemek için hızlandırıcı bir interpolatör kullanın ve y kayması sınırını çizin

3 Yüzey yeterince kısa olduğunda 8 dp kenar boşluğunu koruyun

Özel animasyon için aşağıdaki parametrelerin tümünü tanımlamanız gerekir.

Parametre

Değer

Bağlam

X kayması

((ekran genişliği / 20) - 8) dp

Maksimum kayma, 8 dp kenar boşluğu bırakır

Y kayması

((kullanılabilir ekran yüksekliği / 20) -8) dp

Maksimum kayma, 8 dp kenar boşluğu bırakır

Ölçek

%90

Minimum pencere boyutu ölçeği

Tahmine Dayalı Geri İlerleme API'lerini kullanarak özel animasyonu uygulayan geliştiriciler bu parametreleri kullanır.

Hareket ilerlemesini interpole etme

Doğrusal bir ilerleme değeri, kullanıcının hareketinden türetilebilir, ancak doğrudan önizleme animasyonları için kullanılmamalıdır. Bunun yerine, geri bildirim, geriye dönük işlem sırasında kullanıcıya yardımcı olacak şekilde uyarlanmalıdır. Hareketin başlangıçta daha belirgin olması için ilerleme değerini bir STANDARD_DECELERATE jetonu veya PathInterpolator(0f, 0f, 0f, 1f) ile besleyin. Bu geri bildirim, hareketin başında hareket algılamasını iyileştirir ve geri bildirimi görsel açıdan hoş ve net bir şekilde kontrol etmek için yavaşlamayı kullanır.

Harekete geçin

Video 5. Karar vermek için hızlıca yaklaşma örneği

Bir kullanıcı kaydetme noktasını geçip serbest bıraktığında, işlemin tamamlandığını onaylayan bir animasyon gösterilir.

Kullanıcılar hareketleri hızlı bir şekilde gerçekleştirdiklerinde, bunlar genellikle kaçış olarak yorumlanır. Bu tür bir etkileşim, ekrandaki öğelere yüksek hızlar uygulayabilir. Bu durumda, geri önizlemeler bağlamında sistem, kaydetme animasyonunu çalıştırmadan önce yüzeyi anlık olarak maksimum önizleme durumuna doğru hareket ettirerek bu hızı alır.

Hızlı kaydırmanın gücü, kaydetme animasyonu çalıştırılmadan önce önizleme animasyonunun ne kadarının gösterileceğini belirler. Gösterilen animasyonun türü, 2. videoda gösterildiği gibi kapatılmakta olan içeriğe bağlıdır.

İşlemi iptal et

Video 6. Bir işlemi iptal etme örneği

6. videoda ise bir kullanıcı eşikten önce serbest bıraktığında ne olacağına dair bir örnek gösteriliyor ve işlemin iptal edildiğini onaylayan bir animasyon gösteriliyor. Paylaşılan öğe geçişlerinde pencere, hareket başlamadan önce orijinal uçtan uca durumuna hızlıca hareket eder ve ölçeklendirilir.