Hareket

Hareket, sürüş bağlamında dikkatli bir şekilde kullanılması gereken güçlü bir araçtır. Yalnızca sürücülerin dikkatinin dağılmasını engellemeden sürücüleri bilgilendirmeye yardımcı olduğu durumlarda uygundur

Bir bakışta rehberlik (TL;DR):

  • Gereksiz hareketlerle kullanıcıların dikkatini dağıtmayın
  • Kullanıcıların anlayışını artırmak ve yetkinliğini artırmak için hareketi kullanın
  • Hareket dilinizi alakalı tüm donanımlar için yeterince esnek yapın
  • Durumunuz için önerilen hareket kalıbını kullanın

Hareket ilkeleri

Arabalar için Android arayüzleri için hareket tasarlarken üç temel ilkeyi aklınızda bulundurun: güvenli, bilgilendirici ve esnek olun.

Güvenli

Araba kullanmak kullanıcının birincil görevidir; geri kalan her şey ikinci planda kalır. Kullanıcının dikkatini sınırlı bir kaynak olarak ele alın ve gereksiz dikkat çekmek için hareket kullanmaktan kaçının.

göz gif'i

Bilgilendirici

Kullanıcılara yardımcı olan bilgileri aktarmak için hareketi kullanın. Örneğin, hareket, kullanıcılar arasında hiyerarşik ve mekansal ilişkiler göstererek kullanıcıların ürünü daha iyi anlamasını sağlayabilir. Hareket, mevcut etkileşimleri belirterek kullanıcı arayüzünün yeterliliğinin artırılmasına da yardımcı olabilir.

Bilgilendirici GIF

Esnek

Her boyut ve şekildeki ekranlara ve tüm kullanıcı girişi türlerine uyum sağlayabilecek kadar ölçeklenebilir ve esnek bir hareket dili tanımlayın.

Flex ekran GIF'i

Hareket desenleri

Android Automotive, tüm uygulamalarda tutarlı bir kullanıcı deneyimini desteklemek için aşağıdaki durumlarda kullanılacak belirli hareket kalıplarıyla ilgili öneriler sunar:

  • Aynı seviyedeki görünümler arasında geçiş yapma
  • Ayrıntılı görünüme geçme
  • Mevcut bir işlemi genişletme
  • İşlemleri en aza indirme ve genişletme
  • İşlemi kesintiye uğratma

Bu bölümdeki tüm hareket kalıpları, Materyal Tasarım Yumuşak Geçiş kurallarında açıklandığı gibi standart yumuşatmaya dayanır. Yani hareketler hızlı bir şekilde yükselir ve geçişin sonuna odaklanmak için daha kademeli bir şekilde yavaşlar.


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

Uygulama çubuğundaki sekmeler veya bir oynatma listesindeki şarkılar gibi aynı hiyerarşi seviyesinde görünümler arasında geçiş yaparken yan yana hareket kullanın. Yatay hareket, uygulamada aynı seviyede kalma fikrini daha da güçlendiriyor.

Eşler arası geçiş örneği
Hızlı bir geçiş reklamı, kullanıcıyı bir navigasyon uygulamasından medya uygulamasına götürür ve tekrar Android Automotive'de geri gelir

Örnek

Android Automotive OS'te, ana sayfa sekmesinden bir medya uygulamasındaki Oynatma Listeleri sekmesine geçiş sırasında gerçekleşen yan yana hareket, her iki sekmenin de içeriklerin en üst düzey görünümü olduğunu destekler

Ayrıntılı görünüme geçme

Daha üst düzey bir içerik görünümünden ayrıntılı görünüme geçerken, alt katmanın ölçeğini büyüten ve üst katman şeffaflaşarak belirmeye başlayan z derinliği hareketini kullanın. Bu hareket, üst düzey görünüm ile ayrıntılı görünüm arasındaki üst-alt ilişkisini pekiştiriyor. Bu hareket, odağı ikinci bakışa çekiyor.

Ebeveynler arası geçiş
Üst ekranda alt öğe kaldırılır ve yerine genişler

Örnek

Ayrıntılı görünüme geç
Android Automotive OS medya şablonunda, kullanıcı albüm ızgarasında belirli bir albümü tıkladığında o albümün şarkı listesi genişletilir ve ayrıntıları odaklanacak şekilde genişler

Mevcut bir işlemi genişletme

Kullanıcı bir işlem yaparken ilgili işlemi gerçekleştirdiğinde, ikincil işlemin tam ekran yer paylaşımında birincil işlemin üst kısmında (kırık arka planlı) gösterilmesi için dikey (yukarı veya aşağı) hareket kullanın. Birincil eylemi görerek görebilme olanağı, kullanıcının halen bu işlemde olduğunu destekler.

İkincil işlemi kapatırken bu hareketin tersini kullanın. Kullanıcı ikincil işlemi tamamlayıp çıkışa hazır olduğundan ters hareket, orijinal hareketten daha az zaman alır.

İkincil işlem yer paylaşımı
Burada, ikincil işlem yer paylaşımındaki birincil işlemden yükseğe doğruyken birincil işlem, ekranın gerisinde kısmen görünür kalır

Örnek

Android Auto OS işlem 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 yükselir ve yer paylaşımında görünür

İşlemleri en aza indirme ve genişletme

Çoklu göreve izin vermek için küçültülmüş bir ekran biçiminde küçültülmüş bir devam eden işlemi genişletirken, tam ekranlı bir kararma içeren genişleyen pencere maskesi kullanın.

Devam eden bir işlemi en aza indirirken bu hareketin tersini kullanın. Kullanıcının söz konusu işlemden vazgeçmesi ve onu engellemeye hazır olması nedeniyle hareketin en aza indirgenmesi, genişleyen hareketten daha az zaman alır.

Küçültülmüş ekranı genişletme
Minimuma indirilmiş işlem, mevcut işlemin üzerinde soluklaştıkça tam ekrana genişler

Örnek

Android Automotive OS kontrol çubuğu örneği
Android Automotive OS medya şablonunda, simge durumuna küçültülmüş kontrol çubuğu tam oynatma görünümüne genişler ve kullanıcı aşağı oka dokunduğunda küçültülmüş formuna geri döner

İşlemi kesintiye uğratma

Engellemeyen kısa bir işlemin, devam eden bir işlemin üzerinde aniden görünmesi gerektiğinde, bu işlemi ekranın kenarından aşağı veya yukarı doğru (kısmi kıvrımlı bir şekilde) kaydırın ya da orta kısma (tam karoyla) kaydırın. Hareketi, yeni işlemin görünmesini istediğiniz yere en yakın konumdan başlatın.

Kısa işlem örneği
Kullanımı engelleyen bir işlem ekranın üst kısmına yakın bir yerde göründüğünde, ekranın üst kısmından kısmi bir yara oluşan olarak kaydırın

Örnek

İletişim kutusu örneği
Android Automotive OS medya şablonunun ortasında rahatsız edici bir işlem göründüğünde, kullanıcı geçici olarak yeni işleme odaklanmasını sağlamak için tamamen belirme