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

Bu makale için gerçek uygulama geliştirme değil.



Renk paleti

Materyal Tasarım renk paleti için Google, çeşitleri olan 'iki renkli' bir sistemi tercih eder:



Örneğin, bu fotoğraftaki gibi. Ana renginiz mor, ikincil renginiz camgöbeği olacaktır. Ve sonra kullanıcı arayüzünüzün diğer öğeleri için, mor ve camgöbeği ton ç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 profesyonel UI / UX tasarım ajanslarından ilham alabilirsiniz. Kil veya bu liste en yüksek puan alan web tasarım şirketleri 2019 yılında.



Duyarlı ızgara düzeni

Duyarlı ızgara düzenini anlamak, piksel yoğunluğu ve otomatik ekran uyarlaması çalışır. Çoğunlukla, ortalama Android telefon DPI değeri 300 ila 480 DPI arasındadır.

Bunu akılda tutarak, 300 DPI ekran genellikle 4 sütuna kadar görüntüleyebilecektir:



600 dpi 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'ye sahip bir mobil cihazda, her cilt payı yaklaşık 16 dp olacaktır.

Ekran DPI'yı anlama

Kullanıcı arayüzü tasarlarken, ister sistem kullanıcı arayüzü isterse uygulamanızın kullanıcı arayüzü olsun, farklı telefon boyutlarının farklı piksel yoğunluklarını hesaba katmanız gerekir. En yaygın ekran çözünürlüklerinin ve piksel yoğunluklarının bir tablosu:

Android DPI ekran yoğunluğu tablosu

Bu nedenle, genel bir kural olarak, 'küresel' bir tema veya uygulama tasarlarken ve tek bir cihaz için tema oluşturmaya odaklanmadığınızda, en düşük yoğunluktan başlamalısınız. Bunun nedeni, tasarımınıza 1x'te başlarsanız, yalnızca piksel cinsinden ölçümler yapmanız gerekecek ve değerler DP'ler arasında aynı kalacaktır.

Bununla birlikte, 3.5x için tasarım yaparsanız, diğer yoğunluklara uyum sağlamak için tüm değerleri 3.5'e bölmeniz gerekir ve bu, birden fazla DP değerini hesaplamanın baş ağrısına dönüşür.

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 çekilebilir öğeler 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 güzellik içerir ve bunlar, UI / UX'inizle daha doğal bir şekilde akarlar.

Örneğin, burada yerleşik Materyal Tasarımı öğeleriyle bileşenlerin temasını oluşturmak için birkaç anahtar sözcük verilmiştir ve uygulamanız veya UI / UX'iniz yerel sistem davranışından ve UI durumlarından yararlanmaya devam edecektir.

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

Kart görünüm modundaki gibi bileşenlerin altında basit bir gölge göstermek için, sadece yükseklik özelliğini kullanmanız gerekir.

gölge ile android cardview

android: yükseklik = '1dp'

Etiketleri ve üst ö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 geliştirebilir ve neredeyse tüm ViewGroup buna saygı duyacaktır. Dolayısıyla, görünüm hiyerarşisinde bir değişiklik olduğunda, bir animasyonla gelecektir. Biraz bilgi birikimiyle, özel geçiş efektleri .

android: animateLayoutChanges = 'true'
Etiketler android Geliştirme 4 dakika okundu