Bu kılavuz, temel Android kullanıcı deneyimi kalıpları ve Materyal Tasarım'ı kullanarak mevcut iOS mobil tasarımlarını Android'e çevirerek Android tasarımına başlamanıza yardımcı olur.
Tasarım eşitliği için özetlenmiş ve verimlilik için sıralanmıştır. Paylaşılan bir temel tasarım sistemini kullanıyorsanız tasarımları Material 3 yerine kendi sisteminizle çevirebilirsiniz. Hem Android hem de iOS, içeriğin öncelikli olduğu fikrine bağlıdır.
Bundan sonra marka, renk, tür ve şekil olarak öne çıkabilir. Bu sayede içeriklerin okunabilirliği artar ve tutarlılık oluşturmak kolaylaşır.
iOS tasarımlarınızla başlayın
Başlamadan önce iOS uygulamanızın bir kopyasını oluşturun. iOS uygulamaları üç alana ayrılır: Çubuklar, Görünümler ve Kontroller. Bu yapıyı kullanarak çeviriye kadar olan adımları tamamlayabilir, stil oluşturmayı en sona bırakabilirsiniz.
Android uygulamasının bölümlerine göz atın.
1. iOS sistem kullanıcı arayüzünü silme
Durum çubuğunu ve ana sayfa göstergesini silin. Bu işlemi yapmak artık daha kolay.
2. Çerçevelerinizi yeniden boyutlandırma
Android'in kompakt boyutlandırmasını (412 dp) kullanabilirsiniz. Ancak, bir pencere sınıfı boyutu içinde bile çeşitli cihazları göz önünde bulundurun. Örneğin, daha küçük ekranları desteklemek için 360 dp'de test edin ve tüm pencere sınıfı boyutlarına uyarlayın.
3. Android sistem çubuklarıyla değiştirme
Android sistem kullanıcı arayüzü, kullanıcının cihazına ve ayarlarına bağlı olarak değişebilir. Ancak stok sistem kullanıcı arayüzü göstermek, tasarımlarınıza daha fazla bağlam eklemenize yardımcı olabilir. Bildirim çubuğunu üste, hareketle gezinme veya üç düğmeli gezinme çubuğunu ise alta yerleştirin.
Daha fazla bilgi için Android sistem çubukları başlıklı makaleyi inceleyin.
4. Gezinmenize bağlı olarak
Sekme çubuğunu (alt gezinme) gezinme çubuğu ile değiştirin.
Akış haritanıza tekrar göz atın. iOS uygulamanızda daha fazla menüsü kullanılıyor mu? (HIG en iyi uygulamaları bu kalıbın kullanılmamasını önerir). Beş veya daha az öğe kullanın, alt gezinme çubuğunu birincil gezinme için kullanın, profil veya ayarlar gibi ikincil öğelerin üst uygulama çubuğuna taşınıp taşınamayacağını değerlendirin ya da birincil işleminiz var mı? Bu işlem, kayan işlem düğmesine dönüştürülebilir mi?
Birincil gezinme, her zaman üst görünümlerde (akış haritanızdaki bir bölümün en üst düzeyi) yer almalıdır. Alt görünümler (üst görünümün altındaki her şey), gezinme hiyerarşisinde daha yukarıda yer alıyorsa ve modal değilse birincil gezinmeyi içerebilir.
Alt gezinme çubuğunu uygun simgeler ve etiketlerle güncelleyin. Her iki platformda da gezinme hedefleri arasında yanal hareketten kaçınılır.
5. Gezinme çubukları, üst uygulama çubuklarına dönüştürülüyor
Bunları bölüm bölüm ayırın. Önce üst görünümler, ardından alt görünümler. Uygulama çubuğu, sol tarafta gezinme ve başlık, sağ tarafta ise işlem öğelerinden oluşur.
Uygulamanızda alt gezinme çubuğu yerine gezinme çekmecesi menüsü kullanılıyorsa tüm üst görünümlerde bir çekmece simgesi gösterilir.
Uygulamanızda ray veya çekmece yoksa üst görünümlerde birincil gezinme simgesi gösterilmez.
Android için uygulama çubuğunda başlık varsayılan olarak sola hizalanır.
Çocuk görünümlerinde gezinme simgesi yerinde yukarı ok bulunur. Geri ile karıştırılmamalıdır. Yukarı ok, kullanıcıyı bir kullanıcı akışındaki uygulamanın gezinme hiyerarşisinde bir üst düzeye taşırken geri veya kenar kaydırma, kullanıcıyı geriye taşıyarak hatta uygulamadan çıkararak sistem gezinmesinde yer alır.
Peki ya modal görünümler? Tam ekran kalıcı öğelerde (ör. video oynatıcılar ve resimler) gezinme simgesi, kalıcı öğeyi kapatacak şekilde kapatma simgesine dönüşür. Bu, alt görünüm uygulama çubuğuna benzer.
6. Biraz daha fazla modalite
Kullanıcının dikkatini bir göreve odaklamak için en iyi yöntem olan büyük modal görünümlerle başlayın. iOS'te bunlar genellikle kullanıcıların aşağı kaydırabileceği sayfalar olarak gösterilir.
Uygulama çubuklarını değiştirmeyi tamamlayın. iOS sayfa modallarında, üst sayfa bölümünü ve arka planı tam ekran iletişim kutusu uygulama çubuğuyla değiştirin.
Bonus: iOS modal sayfalarınızdan herhangi birinin alt sayfalara dönüştürülüp dönüştürülemeyeceğine göz atın.
İşlem ve Etkinlik sayfalarını alt sayfalara dönüştürme (Paylaşım sayfaları da artık çevrilebilir.)
Uyarılar için sistem iletişim kutularını kullanın. Kullanıcının bir şekilde onaylamasını istediğiniz önemli bilgiler için kullanıyorsanız bunları sistem iletişim kutularıyla değiştirin. Bu noktada girişleri ve seçicileri de değiştirmeyi unutmayın.
7. Kardeş içerik
Sekmeler, görünüm sayfaları veya kaydırma sekmeleri. iOS'te bölümlere ayrılmış kontroller kullanıyorsanız bunlar Android'de sekmelere dönüştürülür. Her ikisi de benzer ancak aynı olmayan bilgi görünümleri arasında filtreleme yapmanızı sağlar. Android sekmeleri genellikle uygulama çubuğuna eklenir ve içerikler arasında kaydırma yapabilme avantajı sunar.
8. İçerik ve Kontroller
Kısıtlamaları veya yeniden boyutlandırma davranışını nasıl ayarladığınıza bağlı olarak, içeriğinizin çoğu muhtemelen yeniden boyutlandırılmıştır. Ancak bu süreyi kullanarak kenar boşluklarınızı gözden geçirin ve ayarlayın. 16 dp, küçük ekranlarda iyi bir standarttır.
Temel ızgara, bileşenler için 8 dp, tür ve simgeler için 4 dp ızgarayı temel alır. 8 noktalık bir ızgara iOS'te iyi çalışır. Bu nedenle, her iki platform için de başlangıç noktası olarak düşünebilirsiniz.
Kontroller. Bu açma/kapatma düğmelerini Android anahtarlarına geçirin. Android onay kutularını ve radyo düğmelerini kullanın. Android'de tüm bunlar bulunur.
Formlarınız varsa iOS metin alanlarını Android metin alanlarıyla değiştirin. Materyal, ana hat veya dolu gibi seçeneklerle birlikte gelir. Bu nedenle, markanıza en uygun olanı seçin.
Malzeme Listeleri, iOS tablo hücrelerine kıyasla bazı farklılıklar gösterir:
- Ayırıcı çizgiler dikkatli bir şekilde kullanılır.
- Görsel gürültüyü minimumda tutmak için listelerde göstergeler kullanılmaz.
- Boyutlar 8 dp ızgarasına uyar.
9. Stil
Renk: Kullanıcı arayüzü rengi, renk şemasında bir araya getirilmiş vurgu, anlamsal ve yüzey renklerinden oluşur. Bu renkler, rollerine göre kullanıcı arayüzüne uygulanır.
Tür: Sistem yazı tipi kullanılıyorsa San Francisco'yu değiştirin. Roboto, Android'in varsayılan sistem yazı tipidir. Bununla birlikte, temalar ve indirilebilir Google yazı tipleri ile markanızın benzersiz stilini ifade etmenizi öneririz.
Simgeler: Burada da aynı. SF sembolleri kullanıyorsanız tüm sembollerin Material Icons veya Symbols'a dönüştürüldüğünü tekrar kontrol edin. Markanız için doğru varyasyonu seçin. Materyal simgelerini herhangi bir platformda kullanabileceğinizi biliyor muydunuz?
Hareket: Android ve iOS'un farklı hareket tasarımları vardır. Bu tasarımlara her platformda uyulmalıdır. Materyal hareketi bilgilendirici, odaklanmış ve ifade edilmiş olmalıdır. Ripple, bileşenlerde dokunma geri bildirimi sağlamak için kullanılan belirgin bir vurgudur. Hareket Sistemi, kapsayıcı dönüşümü, paylaşılan eksen, şeffaflaşma ve şeffaflaşma animasyonlarından yararlanmak için kullanılan bir dizi geçiş desenidir. Tasarımınızdaki öğelerin kalıcı kapsayıcıları olup olmadığını, öğeler arasındaki ilişkiyi ve öğelerin nasıl girip çıkması gerektiğini göz önünde bulundurun.
10. Toparla
Bir prototipi çeviriyorsanız bu aşamada her şeyi yeniden bağlamanız iyi olur. Birincil gezinme sisteminize geri dönün. Ardından, yukarı ve geri arasındaki farkı hatırlayarak ve Android'e uygun sayfa geçişleri seçtiğinizden emin olarak (9. adımda bahsedilmiştir) uygulama çubuklarınızı oluşturun.
Tamamen işlevsel bir prototipiniz hazır olmalı ve yeniden boyutlandırdığınız için prototip teslimata hazır olmalıdır.
Stil ve bileşen kılavuzu
Mevcut bir tasarım sisteminiz veya stil kılavuzunuz varsa Materyal Tasarım ile birlikte kullanılabilecek kendi temel stilleriniz (renk, tür, simgeler, şekil) olabilir. Bu stilleri, iOS kılavuzlarıyla birlikte kullandığınız gibi kullanabilirsiniz. Materyal Teması Oluşturma'yı kullanarak Materyal bileşenlerini markanızın benzersiz stiline göre renk, tür ve şekil ile özelleştirebilirsiniz.
Platforma özel yönergeler, çok platformlu ürünlerde yaygın olarak kullanılır ve kendi tasarım sisteminizi daha kullanıcı odaklı hale getirebilir.
Son olarak, bir tasarım sistemi olmadan çalışıyorsanız her uygulama veya ürünün tam özel tasarım sistemine ihtiyacı olmadığını unutmayın. Tek sayfalık bir stil kılavuzu oluşturabilirsiniz. Stil kılavuzu, tasarımlarla ilgili temel özellikleri özetleyen bir belgedir. Markalama kuralları genellikle bir stil kılavuzu içerir.
Bu, Android için kopyalanabilir ve stilleri (veya sembolleri, bileşenleri ya da bir kitaplığı) güncellemek için kaynak olarak kullanılabilir.