Kötü Olmayan Bir Android Uygulama Kullanıcı Arayüzü Nasıl Tasarlanır -k2rx.com

. Peki geliştiriciler neden aynı şeyi yapamıyor?

Eskiden, hareketli açılış sayfaları ve süslü düzenler önemliyken, profesyonel bir tasarımcı tutmak mantıklıydı. Ama bugünkü eğilim en az - veya en azından büyük ölçüde basitleştirilmiş.

Size anekdot niteliğinde bir örnek vereyim - bir süre önce birisi bilgisayar yazılımı için bir açılış ekranı oluşturmamı istedi. Bu yüzden hepsini dışarı çıkardım - eskiz kağıdına çizdim, PhotoShop'a aktardım, çok sayıda süslü neon çizgi ve efekt yarattım. Bir açılış ekranı yerine bir masaüstü duvar kağıdı olabilirdi. Mesele şu ki, bu gerçekten süslü ve ayrıntılı tasarımı onlar için yarattım.

Tahmin edebileceğiniz gibi, beğenmediler. Birlikte gittikleri tasarım, tam anlamıyla birkaç üst üste binen renkli dairenin küçük bir logosuydu ve altındaki yazılım adı. PhotoShop işinde 2 dakika gibi. Ve ne var biliyor musun? Benimkinden daha iyi olduğu konusunda hemfikir olmak zorundaydım.

Yaptığım nokta şu - bence programcılar bu benim yaptığım hatayı yapma tuzağına düşüyorlar. Uygulamayı oluşturan bu gerçekten süslü, göz alıcı şeyler olması gereken kullanıcı arayüzlerini ve açılış ekranlarını düşünme eğilimindeyiz. dikkat çekmek . Ama olmak zorunda değiller - dürüst olmak gerekirse olmamalılar. Almalıyız programcılar zihniyet ve bunu estetik tasarıma uygulayın - basit, işlevsel, çalışır.

Bu makalede, neredeyse hiç tasarım deneyiminiz olmasa bile zarif bir Android APP UI / UX oluşturmanın çok basit bazı yollarını inceleyeceğiz.

Gerçekten Başka Bir Şey İstemiyorsanız, Materyal Tasarımına Bağlı Kalın

Uygulamanızın ' benzersiz' ve ' diğerlerinden sıyrılın ' popüler olması ve iyi görünmesi için. Google'ın yaptığı bu Materyal Tasarımı sektördeki uygulama kullanıcı arayüzleri için bir standart olan başarmak için yola çıktılar ve iyi bir iş çıkardılar. SwiftKey, Nova Launcher, Textra SMS, YouTube gibi Android uygulamalarındaki en büyük isimlerden bazıları Materyal Tasarım'a sadık kalan bir sürü popüler uygulama var.

Materyal Tasarım’ın ana odağı, tek renk paletli kart tabanlı bir düzendir. Google en iyi endüstri tasarımcılarıyla çalıştı, minimalist tasarım uygulamalarından pek çok öğe çizdi ve ardından her şeyi ücretsiz olarak yayınladı - bu oldukça iyi bir anlaşma, çünkü web sitesi ve uygulama tasarım kursları e-kitaplar, videolar ve videolar için yüzlerce dolar harcayabilir. vb.

Materyal Tasarım'a başlamak inanılmaz derecede kolaydır ve bunu daha da basitleştiren bir avuç araç vardır. Bunları aşağıda listeleyeceğiz:

Malzeme Teması Düzenleyicisi (macOS + Sketch)
Material Design Color Palette eklentisi (PhotoShop / Illustrator)
Materyal Tasarımı Kullanıcı Arayüzü Kiti PSD (Fotoğraf Mağazası)
Android Materyal Tasarımı Kullanıcı Arayüzü Kiti ( Sketch)
Material UI Theme Generator

Basit, zarif Materyal Tasarımı temaları oluşturmak için biraz ilhama ihtiyacınız varsa, bu liste bloglarına göz atın:

MaterialDesignBlog - Doğru yapılmış 15 harika Malzeme Tasarımı örneği
MockPlus - İlham Çekecek En İyi 12 Materyal Tasarım Web Sitesi Örneği
AndroidAuthority - Android için en iyi 10 Material Design uygulaması

Renk Gradyanları Sandığınızdan Çok Daha Kolay

Materyal Tasarımına bir alternatif olarak, dolor gradyanları basit, modaya uygun ve dikkat çekicidir. Ve tasarımcıların tüm renkleri boyamak veya nihai gradyanı tasarlamak için çok zaman harcadığını düşünebilirsiniz. Yanılıyorsunuz - PhotoShop'ta 10 saniye içinde yapılabilir.

PhotoShop gradyan kullanıcı arayüzünde 10 saniye.

Size bunun ne kadar kolay olduğunu göstermek için size rehberlik edeceğim.

Mobil için yeni bir PS projesi oluşturun ( 1080 x 1920 piksel @ 72 ppi iyi çalışıyor)

UIGradients.com - Önceden hazırlanmış gradyanların geniş koleksiyonu.

Git UIGradients.com ve beğendiğiniz bir şey bulun.

UIGradients'ten rengin onaltılık değerlerini kopyalayın

Degrade renklerini önizlemenin üstünden kopyalayın.

PhotoShop gradyan seçici.

PS'de boş bir katmana sağ tıklayın ve Blending Options> Gradient Overlay'e gidin.

Doğrudan açılır menüdeki degrade desen önizlemesini tıklayın - açılır düğmeyi tıklamayın. Doğrudan degradeye tıklamak renk düzenleyiciyi açar.

UIGradient'den PS gradyan aracına hex değerleri girin.

Şimdi UIGradient'deki renk onaltılık değerlerini PS gradyan düzenleyicisine yapıştırın.

Gerektiği gibi ayarlayın. Artık Android uygulamanız için profesyonel bir gradyan arka planınız var.

Göz atmaya değer diğer gradyan araçları:

WebGradients.com
Android Şekiller Oluşturucu ( XML yoluyla şekil oluşturmak için, gradyan seçeneği ile)

JPG / PNG Yerine SVG'leri Kullanın

Grafik öğeleriniz (düğmeler, logolar vb.) İçin PNG'ler veya JPG'ler kullanmak yerine gerçekten SVG'leri ( Ölçeklendirilebilir Vektör Grafiği) yerine. Bunun nedeni, SVG'lerin kalite kaybı olmadan yeniden boyutlandırılabilmesidir - örneğin, bir JPG'yi daha büyük bir değere yükseltirseniz, kaliteyi kaybeder ve bulanık / pikselli hale gelir. Bir SVG bunu yapmaz. İnsanlar büyük PNG dosyalarını kullanmaya çalışırlar. ölçeği küçültülmüş Android ekranlara sığdırmak için - bunun yerine, daha küçük SVG'ler kullanabilirsiniz. büyütülmüş kalite kaybı olmadan.

world of warcraft 3d hızlandırmayı başlatamadı

Ayrıca, SVG'ler en fazla Dosya boyutunda PNG'den% 60 ila% 80 daha küçük . Bu, uygulamanızın veya mobil web sitenizin kullanıcı için daha hızlı yükleneceği ve ekran çözünürlüğü ne olursa olsun iyi görüneceği anlamına gelir.

Theme.AppCompat.DayNight Kullanarak Karanlık Mod Dahil Et

Uygulamanıza karanlık / gece modu teması eklemek için iki ayrı tema tasarlamanıza gerek yoktur. Hemen hemen AppCompat kitaplığında yerleşiktir, sadece onu etkinleştirmeniz ve değerleri düzenlemeniz gerekir.

Appual'ın kılavuzuna bakın ' Android Uygulamanıza Karanlık Mod Nasıl Uygulanır? ”.

Bir Şablon veya Mobil Kullanıcı Arayüzü Kiti kullanın

Uygulamanız süslü, özelleştirilmiş bir GUI gerektirmiyorsa, bir şablon veya kit kullanmanın kesinlikle yanlış bir yanı yoktur. Şablonlar ve kitler ilham verici bir kılavuz olarak kullanılabilir veya tam anlamıyla şablonu / kiti olduğu gibi, kendi düğmelerinizi ve malzemelerinizi ekleyerek kullanabilirsiniz.

Android kullanıcı arayüzü şablonları ve kitleri için bazı harika kaynaklar: