En Son Android 9 ve 10 Güncellemeleri için UI/UX Nasıl Tasarlanır?

Google, en son Android 10'u geçen Eylül'de piyasaya sürdü ve yalnızca en yeni, en premium telefonların küçük bir kısmında mevcut olsa da, birçok telefon üreticisinin yakın zamanda en yeni telefonlarından bazılarında Android 10'u kullanıma sunması bekleniyor. gelecek.

Android 10, sistem genelinde Karanlık Mod gibi bir dizi güncelleme ve harika özellik getirdi, ancak herhangi bir gerçek UI güncellemesinin önünde çok az şey vardı. Google, çok iyi çalıştığı için malzeme tasarımına bağlı kaldı, bu nedenle bu kılavuz önceki Android sürümleri için de geçerli olacaktır (Oreo, Pie, vb.).

Materyal Tasarımı için UI öğelerinin nasıl düzgün şekilde tasarlanacağını bilmek, Android cihazlarda iyi performans gösteren uygulamalar geliştirmekten Samsung Tema Mağazası gibi tema mağazalarında özel temalarınızın kabul edilmesini sağlamaya kadar birçok konuda yardımcı olacaktır.

Ayrıca Appuals'da bu konuyla ilgili birçok ek bilgi verecek olan diğer konuları da okuyabilirsiniz:

• Android Uygulamanıza Karanlık Bir Tema Nasıl Eklenir?
• Visual Studio 2017'de Android Uygulamaları Geliştirmeye Nasıl Başlanır?
• Android Açık Kaynak Projesi'nden Özel ROM Nasıl Oluşturulur | pt. 2
• Android Sistem Kullanıcı Arayüzü El İle Nasıl Temalandırılır (Adımlardan bazıları Android 9 / Android 10 için eski olabilir, ancak genel bilgiler hala çok kullanışlıdır.)

Materyal Tasarımına genel bakış

Materyal Tasarımı birkaç önemli şey etrafında döner. Tema tasarlıyorsanız, renk paleti, duyarlı ızgara düzeni ve Android Sistem Kullanıcı Arayüzünde yolunuzu bilmek. Uygulama geliştirmek için yukarıdakilerin tümünün yanı sıra uygulamanız kullanıcının depolama klasörlerine, kamerasına vb. erişecekse Android çalışma zamanı izinleri ve istekleri gibi şeylerden haberdar olmanız gerekir.

Resmi Android Geliştiricisi'ndeki bu sayfa, uygulama geliştiricilerinin Android 10 için bilmesi gereken gizlilik ve izin değişikliklerinin çok daha derinine iniyor. tema, Bu makale için gerçek uygulama geliştirme değil.

Renk paleti

Materyal Tasarımı renk paleti için Google, varyantları olan bir "iki renkli" sistemi tercih eder:

Örneğin, bu fotoğraftaki gibi. Ana renginiz, ikincil renginiz camgöbeği olmak üzere mor olacaktır. Ardından, kullanıcı arayüzünüzün diğer öğeleri için mor ve camgöbeğinin gölge çeşitlerini kullanırsınız, böylece her şey birbirine karışır.

Bu Materyal Tasarım editörü, renk çeşitlerini bir araya getirmenize yardımcı olan çok kullanışlı bir araçtır. Ayrıca Clay gibi profesyonel UI/UX tasarım ajanslarından veya 2019'da en çok oy alan web tasarım şirketlerinin bu listesinden ilham alabilirsiniz.

Duyarlı ızgara düzeni

Duyarlı ızgara düzenini anlamak, piksel yoğunluğunun ve otomatik ekran uyarlamasının nasıl çalıştığını anlamak anlamına gelir. Çoğunlukla, ortalama Android telefon DPI'sı 300 ila 480 DPI arasında bir yerdedir.

Bunu akılda tutarak, 300 DPI'lık bir ekran tipik olarak 4 sütuna kadar görüntüleyebilir:

600 dpi'lik bir ekran ise 8 sütuna kadar görüntüleyecektir.

Her sütun arasında, temelde her sütunu ayıran alanlar olan "oluklar" vardır. Yani 360dp'li bir mobilde, her bir oluk yaklaşık 16dp olacaktır.

Ekran DPI'sını anlama

Kullanıcı arabirimini tasarlarken, ister sistem kullanıcı arabirimi ister uygulamanızın kullanıcı arabirimi olsun, farklı telefon boyutlarının farklı piksel yoğunluklarını hesaba katmanız gerekir. İşte en yaygın ekran çözünürlüklerinin ve piksel yoğunluklarının bir tablosu:

Bu nedenle, genel bir kural olarak, tek bir cihaz için tema oluşturmaya odaklanmadan “küresel” bir tema veya uygulama tasarlarken en düşük yoğunluktan başlamalısınız. Bunun nedeni, tasarımınıza 1x'te başlarsanız, ölçümleri piksel cinsinden yapmanız yeterlidir ve değerler DP'lerde aynı kalır.

Ancak, 3.5x için tasarlarsanız, diğer yoğunluklara uyum sağlamak için tüm değerleri 3,5'e bölmeniz gerekir ve birden çok DP değerini hesaplamak baş ağrısı haline gelir.

Android 10 UI / UX tasarımı için ek ipuçları

Radyolar, düğmeler, onay kutuları vb. gibi tema bileşenleri için özel bir renge ihtiyacınız varsa, değil çeşitli durumları göstermek için çekmeceleri kullanın (kontrol edildi, tıklandı, vb.). Çünkü çekmeceleri kullandığınızda, yerel Materyal Tasarımı efektlerini kaybedersiniz. (dalgalanma gibi) Google, Android 9 ve Android 10'da kapsamlı bir şekilde güncellendi.

Materyal Tasarımı ile çalışırken Google, yararlanabileceğiniz birçok özellik içerir ve bunlar kullanıcı arayüzünüz/UX'inizle daha doğal bir şekilde akacaktır.

Örneğin, burada yerleşik Materyal Tasarımı öğelerine sahip tema bileşenleri için birkaç anahtar kelime verilmiştir ve uygulamanız veya UI/UX yerel sistem davranışının ve UI durumlarının keyfini çıkarmaya devam edecektir.

Özel renkli düğme Android:backgroundTint="@color/red" ----- Özel renkli Radyo Düğmesi Android:buttonTint="@color/red" ----- Görüntüler ve Simgeler android:drawableTint="@color/ kırmızı" ----- Özel renk Android:progressTint="@color/red" ile ProgressBar

Cardview modunda olduğu gibi bileşenlerin altında basit bir gölge göstermek için sadece yükseltme özelliğini kullanmanız gerekir.

android: elevation = "1dp"

Etiketleri ve ana özellikleri birleştirmek, size daha iyi kontrol ve yönetilebilir XML dosyaları sağlamak için son derece kullanışlıdır.

Animasyonlu düzen değişiklikleri UX'inizi gerçekten iyileştirebilir ve neredeyse tüm ViewGroup buna saygı duyacaktır. Yani görünüm hiyerarşisinde bir değişiklik olduğunda, bir animasyonla gelecek. Biraz bilgi birikimi ile özel geçiş efektleri de tasarlayabilirsiniz.

android: animateLayoutChanges = "true"