Hareket

Hareket, sürüş bağlamında ölçülü kullanılması gereken güçlü bir araçtır. Sadece sürücülerin dikkatini yoldan dağıtmadan bilgi vermeye yardımcı olabildiği durumlarda uygundur.

Özetle (TL;DR):

  • Kullanıcıların dikkatini gereksiz hareketlerle dağıtmaktan kaçının.
  • Kullanıcıların anlama düzeyini artırmak ve becerilerini geliştirmek için hareketten yararlanın.
  • Hareket dilinizi, ilgili tüm donanımlar için yeterince esnek hale getirin.
  • Durumunuza uygun önerilen hareket modelini kullanın.

Hareket prensipleri

Android for Cars arayüzleri için hareket tasarımı yaparken üç temel prensibi aklınızda bulundurun: güvenli olun, bilgilendirici olun ve esnek olun.

Güvenli

Sürüş, kullanıcının birincil görevidir; diğer her şey ikincil öneme sahiptir. Kullanıcının dikkatini sınırlı bir kaynak olarak değerlendirin ve gereksiz dikkat dağıtıcı unsurlar yaratmak için hareketi kullanmaktan kaçının.

göz gif

Bilgilendirici

Kullanıcıların bilgi edinmelerine yardımcı olmak için hareketten yararlanın. Örneğin, hareket, öğeler arasındaki hiyerarşik ve mekansal ilişkileri göstererek kullanıcıların ürünü daha iyi anlamalarını sağlayabilir. Hareket ayrıca, mevcut etkileşimleri göstererek kullanıcıların arayüzdeki yetkinliklerini geliştirmelerine de yardımcı olabilir.

Bilgilendirici GIF

Esnek

Her boyutta ve şekildeki ekranlara ve her tür kullanıcı girişine uyum sağlayabilecek, ölçeklenebilir ve esnek bir hareket dili tanımlayın.

Esnek ekran gif

Hareket kalıpları

Tüm uygulamalarda tutarlı bir kullanıcı deneyimi sağlamak için Android Automotive, aşağıdaki durumlarda kullanılacak belirli hareket kalıpları için öneriler sunar:

  • Aynı seviyedeki görünümler arasında geçiş yapma
  • Detaylı görünüme geçiliyor
  • Mevcut bir işlemi genişletmek
  • Bir eylemi küçültmek ve genişletmek
  • Bir eylemi bozmak

Bu bölümdeki tüm hareket kalıpları, Material Design Easing yönergelerinde tartışıldığı gibi, standart easing'e dayanmaktadır. Yani, hareketler hızla hızlanır ve daha kademeli olarak yavaşlar, böylece geçişin sonuna dikkat çekilir.

Aynı seviyedeki görünümler arasında geçiş yapma

Bir uygulamada aynı hiyerarşi seviyesindeki görünümler arasında geçiş yaparken, örneğin uygulama çubuğundaki sekmeler veya çalma listesindeki şarkılar arasında, yana doğru bir hareket kullanın. Yatay hareket, uygulama içinde aynı seviyede kalma fikrini pekiştirir.

Akran geçiş örneği
Android Automotive'de hızlı bir geçiş efekti, kullanıcıyı navigasyon uygulamasından medya uygulamasına ve tekrar geri götürür.

Örnek

Android Automotive OS'te, bir medya uygulamasında Ana Sayfa sekmesinden Oynatma Listeleri sekmesine geçiş yaparken görülen yana doğru hareket, her iki sekmenin de içeriğin en üst düzey görünümleri olduğunu vurgular.

Detaylı görünüme geçiliyor

İçeriğin daha üst düzey bir görünümünden detay görünümüne geçerken, alt katmanı büyütüp üst katman kaybolurken alt katmanı yavaşça görünür hale getiren bir z-derinlik hareketi kullanın. Bu hareket, üst düzey görünüm ile detay görünümü arasındaki ebeveyn-çocuk ilişkisini güçlendirerek, odağı ikincisine çeker.

Ebeveynden çocuğa geçiş
Üst ekrandan, alt öğe yukarı kalkar ve yerinde genişler.

Örnek

Detaylı görünüme geçiliyor
Android Automotive OS medya şablonunda, kullanıcı albüm ızgarasındaki belirli bir albüme tıkladığında, o albüme ait şarkı listesi büyüyerek genişler ve ayrıntıları daha belirgin hale getirir.

Mevcut bir işlemi genişletmek

Kullanıcı bir işlem içindeyken ilgili bir işlem gerçekleştirdiğinde, ikincil işlemi tam ekran bir katman üzerinde, bir perde arka planı kullanarak, birincil işlemin üstüne dikey (yukarı veya aşağı) bir hareketle tanıtın. Perde arkasından birincil işlemi görebilmek, kullanıcının hala o işlemde olduğunu pekiştirir.

İkincil işlemi kapatırken, bu hareketin tersini kullanın. Ters hareket, orijinal harekete göre daha az zaman almalıdır, çünkü kullanıcı ikincil işlemi tamamlamış ve çıkmaya hazırdır.

açıklama simgesi
Süre
Geçişlerin ne kadar sürmesi gerektiğine dair Material Design yönergeleri.
İkincil işlem katmanı
Burada, ikincil eylem birincil eylemin üzerine bindirilmiş bir katman üzerinde yükselirken, birincil eylem perdenin arkasında kısmen görünür kalır.

Örnek

Android Auto işletim sistemi eylem yer paylaşımı örneği
Android Automotive OS medya şablonunda, kullanıcı kontrol çubuğunu genişletmek için taşma düğmesine dokunduğunda, ek kontroller yukarı doğru yükselir ve bir katman üzerinde görünür.

Bir eylemi küçültmek ve genişletmek

Çoklu görev yürütmeyi kolaylaştırmak için ekranda daha küçük bir formata küçültülmüş devam eden bir işlemi genişletirken, tam ekran geçiş efektiyle genişleyen bir pencere maskesi kullanın.

Devam eden bir eylemi küçültürken, bu hareketin tersini kullanın. Küçültme hareketi, genişletme hareketinden daha az zaman almalıdır, çünkü kullanıcı esasen bu eylemi bırakıyor ve onu ortadan kaldırmaya hazırdır.

açıklama simgesi
Süre
Geçişlerin ne kadar sürmesi gerektiğine dair Material Design yönergeleri.
Küçültülmüş bir ekranı genişletme
Küçültülmüş eylem, mevcut eylemin üzerine yavaşça belirerek tam ekrana genişler.

Örnek

Android Automotive işletim sistemi kontrol çubuğu örneği
Android Automotive OS medya şablonunda, küçültülmüş kontrol çubuğu tam oynatma görünümüne genişler ve kullanıcı aşağı ok simgesine dokunduğunda tekrar küçülür.

Bir eylemi bozmak

Devam eden bir eylemin üzerine aniden kısa, engellemeyen bir eylemin gelmesi gerektiğinde, bunu ekranın kenarından aşağı veya yukarı kaydırın (kısmi perde ile) veya ortaya doğru yavaşça getirin (tam perde ile). Hareketi, yeni eylemin görünmesini istediğiniz yere en yakın konumdan başlatın.

Kısa aksiyon örneği
Rahatsız edici eylem ekranın üst kısmına yakın bir yerde görünmesi gerektiğinde, kısmi bir perde kullanarak yukarıdan aşağıya doğru kaydırın.

Örnek

Diyalog örneği
Android Automotive OS medya şablonunun ortasında rahatsız edici bir eylem belirdiğinde, kullanıcı dikkatini geçici olarak yeni eyleme (bu durumda, konum verilerini kullanma izni isteğine) odaklamak için eylem tam bir perdeyle yavaşça görünür hale gelir.