Kullanıcı arayüzlerinin, özellikle de sohbet uygulamalarının tasarımı zorlayıcı ama aynı zamanda yaratıcı bir görev olabilir. Bu eğitimde, sohbet denetleyicisini Sketch içinde etkili bir şekilde nasıl tasarlayacağınızı göstereceğim. Bu süreçte, zaman kazanmanıza ve temiz bir tasarım geliştirmenize yardımcı olmak için özellikle katmanların (layer) kullanımı üzerinde duracağız.
En önemli bulgular
- Sketch'teki katman öğeleri, genel görünümü korumaya ve tasarım değişikliklerini hızlıca uygulamaya yardımcı olur.
- Yeniden kullanılabilir stillerin kullanılması, zaman kazandırır ve tasarımda tutarlılığı garanti eder.
- Tasarımsal kuralların entegrasyonu, çekici ve profesyonel bir görünüm sağlar.
Aşama Aşama Kılavuz
Öncelikle, sohbet denetleyicisinin oluşturulmasına başlayacağız. Artık Sketch'in kullanıcı arayüzüne aşina olmalısınız, bu yüzden doğrudan tasarıma geçeceğiz.
Aşama 1: Sohbet Denetleyicisini Oluşturma Mevcut projenizi Sketch'te açın ve sohbet denetleyicisi için yeni bir artboard seçin. Uygun ekran boyutuna sahip olmak için cihaz olarak iPhone 8'i seçtiğinizden emin olun. Artboard'ı daha kolay tanımlamak için "Sohbet" olarak adlandırın.
Aşama 2: Navigasyon Çubuğunun Kopyalanması Tutarlı bir tasarım elde etmek için, ana denetleyicinizden navigasyon çubuklarını kopyalayın. Tutarlılığı sağlamak için bunları öncekilerle aynı düzen içinde konumlandırın. Durum ve navigasyon çubukları aynı olmalıdır.
Aşama 3: Düzenin Ayarlanması Tüm öğelerin hassas ve düzenli bir şekilde hizalanmasını sağlamak için 16 piksel aralıklarla yardımcı çizgiler yerleştirin. Değerleri denetçi görünümünden ayarlayarak hizalamada "bozukluk" oluşmadığından emin olun.
Aşama 4: Stillere Geçiş Harici kütüphanelerden stiller kullanmak istiyorsanız, değişiklikler yapabilmek için orijinal belgeyi açın. Burada projede kullanılacak renkleri ve yazı tiplerini ayarlayabilirsiniz. Bu, değişiklikleri tüm ilgili öğelere hızlı bir şekilde uygulamanıza olanak tanır.
Aşama 5: Sohbet Balonunu Oluşturma Mesajların gösterimi için, sohbet denetleyicisinde yeni bir şekil oluşturun. Yeni sohbet balonunun arka plan rengi olarak bir renk seçin. Gelen ve giden mesajlar için mavi ve yeşil bir varyant oluşturacağız.
Aşama 6: Metin Ekleme Sohbet balonunda bir metin kutusu oluşturun ve "Merhaba, buraya hoş geldin!" gibi bir karşılama mesajı yazın. Metnin öne çıkması ve okunabilir olması için yazı rengini ve stilini ayarlamayı unutmayın.
Aşama 7: Birden Fazla Yanıt Seçeneği Oluşturma Kullanıcıya farklı yanıt seçenekleri sunmak için sohbet balonlarının kopyalarını kullanabilirsiniz. Öğeler arasındaki mesafenin eşit kalmasına dikkat edin. Yanıt önerileri için başka metin kutuları ekleyebilirsiniz, örneğin "Hedefin nedir?".
Aşama 8: Öğelerin Ayarlanması Tüm öğelerin aynı yükseklikte olduğundan emin olun ve tasarımı daha hızlı tamamlamak için bunları kopyalayın. Ayarlama sırasında, oluşturduğunuz grupları ve simgeleri kullanarak değişiklikleri tutarlı ve basit tutabilirsiniz.
Aşama 9: Son Ayarlamalar ve Gruplama Tüm öğeleri gruplar halinde toplayarak düzeni artırın. Gruplarınızı kolayca tanımlanabilir hale getirmek için "Sohbet_Balonu" veya "Yanıt Seçenekleri" gibi isimler verebilirsiniz.
Özet - Sketch'te Katmanlarla Sohbet Tasarımı: Aşama Aşama Kılavuz
Artık Sketch ile nasıl bir sohbet denetleyicisi tasarlayacağınızı öğrendiniz. Doğru artboard'ı seçmekten sohbet balonları oluşturmaya ve stillerin uygulanmasına kadar, zaman kazanmak ve tutarlı bir tasarım oluşturmak için etkili teknikler öğrendiniz.
Sıkça Sorulan Sorular
Sketch'te yeniden kullanılabilir stiller nasıl oluşturabilirim?Stiller oluşturmak için bir metin veya arka plan stili oluşturabilir ve ardından bunu diğer öğelere uygulayabilirsiniz.
Sketch'te katmanların avantajı nedir?Katmanlar, farklı tasarım öğelerini organize etmeye yardımcı olur ve değişiklikleri ve tasarım yönetimini kolaylaştırır.
Sketch'te öğeler arasındaki mesafeyi nasıl eşit tutabilirim?Yardımcı çizgileri ve hizalama araçlarını kullanarak tasarım öğeleri arasındaki mesafeyi kontrol edip onaylayabilirsiniz.
Sohbet gizliliğine ilişkin iyi bir yaklaşım nedir?Tasarımınızın kullanıcılar için görünür olan gizlilik politikası hakkında net bilgiler içerdiğinden emin olun.
Sohbet tasarımında renk seçiminin rolü nedir?Renkler duyguları tetikleyebilir ve kullanıcı deneyimini etkileyebilir. Uygulamanızın kimliğine uygun renkler seçin ve okunabilirliği artırın.
