Programcılar ve geliştiriciler genellikle tasarımcı değildir - bu yaygın olarak doğru olarak kabul edilir. Geliştiriciler bir uygulamanın çalışmasına odaklanma eğilimindedir - tasarımcılar uygulamayı estetik olarak çekici kılmaya odaklanır. Fakat neden geliştiriciler aynı şeyi yapamıyor?

Günün başlarında, animasyonlu açılış sayfalarının ve süslü mizanpajların bir şey olduğu zaman, elbette profesyonel bir tasarımcıyı işe almak mantıklıydı. Ancak bugünkü eğilim minimaldir - veya en azından büyük ölçüde basitleştirilmiştir.

Size anekdot 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 fantezi neon çizgileri ve efektler yarattım. Bir açılış ekranı yerine, bir masaüstü duvar kağıdı olabilirdi. Mesele şu ki, onlar için bu gerçekten şık ve özenli tasarımı yarattım.

Tahmin edebileceğiniz gibi, beğenmediler. Birlikte gittikleri tasarım, birbiriyle örtüşen birkaç renkli dairenin ve altındaki yazılımın adının küçük bir logosuydu. Gibi, PhotoShop işinde 2 dakika. Ve ne biliyor musun? Benimkinden daha iyi olduğu konusunda hemfikir olmalıydım.

Yaptığım nokta bu yüzden - Sanırım programcılar yaptığım aynı hatayı yapma tuzağına düştü. Uygulamayı ön plana çıkaran gerçekten süslü, göz alıcı şeyler olması gereken UI'leri ve açılış ekranlarını düşünme eğilimindeyiz. Ama öyle olmak zorunda değiller - dürüst olmak gerekirse, olmamalılar. Bir programcının zihniyetini almalı ve onu estetik tasarıma uygulamalıyız - basit, işlevsel, eserler.

Bu yazıda, neredeyse hiçbir tasarım deneyiminiz olmasa bile, zarif bir Android APP UI / UX'i oluşturmak için çok basit yollara bakacağız.

Gerçekten Başka Bir Şey İstiyorsanız, Materyal Tasarımı Yapıştırın

Uygulamanızın popüler olması ve iyi görünmesi için “ benzersiz” olması ve “ diğerlerinden uzak durması” gerekmez. Google’ın Materyal Tasarımı’nın başarmaya çalıştığı şey, sektördeki uygulama kullanıcı arayüzleri için bir standart ve iyi bir iş çıkardılar. Materyal Tasarımı'na bağlı bir sürü popüler uygulama var - Android uygulamalarındaki en büyük isimler, SwiftKey, Nova Launcher, Textra SMS, YouTube gibi.

Material Design'ın ana odağı, düz renk paletine sahip karta dayalı bir düzen üzerinde. Google, en iyi endüstri tasarımcılarıyla çalıştı, minimalist tasarım uygulamalarından birç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-kitap, video için yüzlerce dolar harcadı, vb.

Material Design'a başlamak inanılmaz derecede kolay ve aşağıda listeleyeceğimiz daha basit hale getiren bir avuç araç var:

• Malzeme Teması Düzenleyicisi (macOS + Sketch)
• Malzeme Tasarımı Renk Paleti eklentisi (PhotoShop / İllüstratör)
• Malzeme Tasarımı UI Seti PSD (PhotoShop)
• Android Materyal Tasarımı UI Seti ( Kroki)
• Malzeme UI Tema Üreticisi

Basit ve zarif Materyal Tasarımı temaları oluşturmak için ilham almanız gerekiyorsa, şu liste bloglarına göz atın:

• MaterialDesignBlog - 15 Doğru tasarlanan 15 Harika Malzeme Tasarımı örneği
• MockPlus - İlham Çekmek İçin En İyi 12 Materyal Tasarımı Web Sitesi Örneği
• AndroidAuthority - Android için en iyi 10 Materyal Tasarımı uygulaması

Renk Degradeleri Düşündüğünüzden Daha Kolay

Materyal Tasarımına alternatif olarak dolor degradeleri basit, modaya uygun ve dikkat çekicidir. Ve tasarımcıların tüm renklerde boyamak için çok fazla zaman harcadıklarını veya en yüksek degradeyi tasarladıklarını düşünebilirsiniz. Yanlış yaparsınız - PhotoShop'ta 10 saniye içinde yapılabilir.

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

Bunun ne kadar kolay olduğunu göstermek için seni bu yolda bile yürüyeceğim.

Mobil için yeni bir PS projesi oluşturun ( 1080 x 1920 px @ 72 ppi düzgün çalışır)

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

UIGradients.com'a gidin ve hoşunuza giden bir şey bulun.

Renk hex değerlerini UIGradients'dan kopyalayın

Degrade renklerini önizlemenin üst kısmından kopyalayın.

PhotoShop gradyan seçicisi.

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

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

UIGradient'ten PS gradyan aracına hex değerlerini girin.

Şimdi renkli hex değerlerini UIGradient'ten PS gradyan editörüne yapıştırın.

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

Çıkış yapmaya değer diğer degrade araçları:

• WebGradients.com
• Android Shapes Generator ( degrade seçeneği ile, XML aracılığıyla şekiller oluşturmak için)

JPG / PNG Yerine SVG Kullanın

Grafik öğeleriniz (düğmeler, logolar, vs.) için PNG veya JPG kullanmak yerine, bunun yerine gerçekten SVG'leri ( Ölçeklenebilir Vektör Grafikleri) kullanıyor olmalısınız. Bunun nedeni, SVG'lerin kaliteden ödün vermeden 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 değil. İnsanlar Android ekranlarına sığacak şekilde küçültülecek devasa PNG dosyalarını kullanmaya çalışır - bunun yerine, kalite kaybı yaşamadan yükseltilmiş daha küçük SVG'ler kullanabilirsiniz.

Ayrıca, SVG'ler PNG'den dosya boyutunda% 60 ile% 80 arasında daha küçük olabilir . Bu, uygulamanızın veya mobil web sitenizin kullanıcı için daha hızlı yükleneceği ve ekran çözünürlüğünden bağımsız olarak iyi görüneceği anlamına gelir.

Theme.AppCompat.DayNight Kullanarak Karanlık Bir Mod Ekleme

Uygulamanıza karanlık / gece modu teması eklemek için iki ayrı tema tasarlamanız gerekmez. Hemen hemen AppCompat kitaplığına yerleştirilmiş, onu etkinleştirmeniz ve değerleri düzenlemeniz yeterli.

Appual'ın kılavuzuna “Android Uygulamanıza Karanlık Mod Nasıl Uygulanır” bölümüne bakın.

Bir Şablon veya Mobil UI Kiti kullanın

Uygulamanızın süslü ve özelleştirilmiş bir GUI araması yoksa, bir şablon veya kit kullanmanın kesinlikle yanlış bir tarafı yoktur. Şablonlar ve kitler ilham verici bir kılavuz olarak kullanılabilir veya tam anlamıyla sadece kendi düğmelerinizi ve diğer şeylerinizi ekleyerek şablonu / kiti kullanabilirsiniz.

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

• SpeckyBoy - iOS ve Android için 50 Ücretsiz Mobil UI Seti
• SketchAppSources - Android UI Uygulama Kaynakları ( Kroki)
• Freebiesbug - PSD Kullanıcı Arabirimi Kitleri ( PhotoShop)