Uygulama-Tasarımınınbaşlangıcı daima düşünceli ve çekici olmalıdır. Bu eğitimde, uygulamanızın AnaKontrolcüsünü gözden geçirerek daha fazla etkileşim ve görsel çekicilik eklemeyi öğreneceksiniz. Hadi başlayalım!
En önemli bilgiler
- Ana Kontrolcü, renkler ve düzenlerin yaratıcı kullanımıyla daha ilgi çekici hale getirilebilir.
- SVG dosyaları düzenlenebilirlik ve keskinlik konusunda avantajlar sunar.
- Renk geçişleri ve farklı bölümlerin kullanımı, kullanıcı deneyimini belirgin şekilde iyileştirebilir.
Adım Adım Kılavuz
Öncelikle mevcut Ana Kontrolcüye bir göz atalım. Burada, kurslar hakkında bir genel bakış, etkileşimli bir sohbet ve profil gibi farklı bölümlerin olduğunu göreceksiniz. Odak, Ana Akışa yöneliktir. Bu eğitimde, navigasyonu ayarlayacak ve tasarımı optimize edeceğiz.
1. Adım: Navigasyonu Gözden Geçir
Ana Kontrolcünüzün tasarımını geliştirmek için navigasyon çubuğunu gözden geçirerek başlayalım. Mevcut unsurları, yani navigasyonu öncelikle kaldırıyoruz.
Artık 250 piksel yükseklikte yeni bir başlık olarak bir dikdörtgen ekliyoruz. Dikdörtgenin temiz bir görünüm sağlamak için kenarlığı olmamalıdır.
2. Adım: Başlık ve Metin Ekle
Sonraki adımda, Belge Rengini seçip yeni bir metin ekleyeceksiniz. Metni “Tüm Kurslar” olarak ayarlayın ve metin stilleriyle deneyler yapın. Başlık için önerilen boyut 110 pikseldir. Başlık, durum çubuğuna uygun olmalıdır.
3. Adım: Arka Planlar ve Renkleri Ayarlama
Çekici bir tasarım için renk geçişlerinin kullanımı da önemlidir. Dikdörtgeninize geri dönün ve hem dinamik hem de genel düzenle uyumlu bir renk geçişi seçin. Diyagonal bir geçiş daha fazla derinlik sağlar.
4. Adım: Yeni Bölüm Ekleme
Artık başlığın altında yeni bir bölüm tasarlıyoruz. 350 piksel yüksekliğinde bir başka dikdörtgen ekleyin ve kenarlığı kaldırın. Burada, uygulamaya daha fazla yaşam getirecek bir kontrast rengi seçebilirsiniz.
5. Adım: İçerik ve İkonlar
Bu bölümde, kullanıcılara daha fazla içerik sunmak için bir buton ekleyebiliriz, örneğin bir video. Metni H3 formatında "Mobilite Gücü" olarak ekleyin ve yukarıdan 16 piksel konumlandırın.
Artık ya kendiniz yapabileceğiniz ya da kaynaklardan aktarabileceğiniz bir ikon ekliyoruz. Bu aşamada SVG dosyalarını kullanmak önerilir, çünkü düzenlenmesi kolaydır.
6. Adım: Pro Versiyon Bölümü Oluşturma
Kullanıcılara uygulamanın Pro sürümünü satın alma imkanı sunacak başka bir bölüm oluşturun. 250 piksel yüksekliğinde yeni bir dikdörtgen ekleyin ve buraya "Pro Versiyonu Al" çağrısını yerleştirin.
Burada metnin dikkat çekici bir şekilde tasarlanması önemlidir. Metnin iyi okunabilir olmasını sağlamak için daha koyu bir renk varyasyonu kullanabilirsiniz.
7. Adım: Gruplarla Düzen Sağlama
Farklı bölümlerden gruplar oluşturarak düzeni artırın. Bu, çeşitli alanları daha iyi organize etmenize yardımcı olacaktır.
8. Adım: Son Ayarlamalar ve Kontrol
Son olarak, bölümler arasındaki tüm unsurları tekrar gözden geçirebilir ve düzenin temiz olmasını sağlamak için gerekirse mesafeleri ve konumları ayarlayabilirsiniz.
Özet – Ana Tasarım Yenileme: Etkili Bir Kullanıcı Arayüzüne Giden Yolunuz
Artık Ana Kontrolcünüzü yeniden tasarlayarak daha etkileşimli ve görsel olarak çekici hale nasıl getireceğinizi öğrendiniz. Renk geçişlerini yaratıcı bir şekilde kullanarak, SVG ikonları uygulayarak ve bölümler halinde yapılandırarak uygulamanızın tasarımını önemli ölçüde geliştirdiniz.
SSS
Başlığımın iyi görünmesini nasıl sağlayabilirim?Tasarımın genelinde tutarlı olan uygun metin boyutları ve renk kombinasyonları kullandığınızdan emin olun.
SVG dosyalarının kullanımının avantajları nelerdir?SVG dosyaları ölçeklenebilir ve yakınlaştırma oranına bağlı olarak keskinliğini korur.
Sketch'te renk geçişlerini nasıl ekleyebilirim?İstediğiniz öğeyi seçin, dolgu seçeneklerine gidin ve çekici geçişler oluşturmak için "Gradient" seçeneğini seçin.
