Arayüz Tasarımı: Karanlık Mod

Karanlık Mod ile yepyeni bir deneyim sizi bekliyor. Siz de uygulamanızı tasarlarken Karanlık Mod Tasarım Prensiplerinden faydalanın!

Sabah Kemal Cansu
TurkishKit
3 min readSep 4, 2019

--

Apple, iOS13'ü ile birlikte karanlık mod deneyimini kullanıcılarına sundu. Karanlık modu hem iOS hem de macOS sistemlerine entegre etmesi ile birlikte tasarım ve yazılımcılar için de yeni bir yol haritası oluşturdu.

Karanlık Mod, kullanıcıların içeriği daha koyu arkaplanlarla görebileceği ve gözünü yormadan odaklayabileceği bir deneyim sunmakta. Karanlık Mod’u önce macOS Mojave ile tanıtan Apple, gelecek güncelleme ile birlikte iPhone cihazlarında da karanlık mod deneyimini sunacak.

İsterseniz gelin biraz da işin teknik tarafına bakalım ve uygulamalarımızda Apple kurallarına uyarak Karanlık Mod nasıl kullanılır biraz inceleyelim.

Renkler

Uygulamanızı tasarlarken bir renk paleti mutlaka oluşturuyorsunuzdur ve bu renk paletinizi uygulamanızın karakteri haline dönüştürüyorsunuzdur. Artık uygulamalarınızda renk paleti oluştururken karanlık tema paletide oluşturmalısınız ve uygulamanızı buna göre tasarlamalısınız.

Kullanıcılarınıza normal standart mod haricinde ortam ışığı düşük durumlarda kullanabileceği Karanlık Mod’u da sunmalısınız ve aynı zamanda ortam ışığı düştüğü anda uygulamanın otomatik Karanlık Mod’a geçmesini sağlayacak ayarları da sunmalısınız

Karanlık Mod, içeriğe odaklanmayı arttırır ve kullanıcıya sunmak istediğiniz içeriği daha hızlı aktarırsınız.

Apple Human Interface Guidelines — Karanlık Renk Paleti Örneği

Renk paleti oluştururken dikkat edilmesi gereken hususlar ile ilgili daha önce yazmış olduğumuz yazımıza da göz atmayı unutmayın.

Tasarım Entegrasyonu

Karanlık mod tasarım entegrasyonu yaparken mutlaka dikkat etmeniz gereken bazı noktalar var. Bu noktalar kullanıcı deneyimi alanında fayda getirirken olası kullanıcı kayıplarını ve Karanlık Mod Tasarım Prensiplerini yanlış ilerletmenizi engeller.

  1. Karanlık Mod entegrasyonu yaparken, içeriğinizin rahat okunabilmesini sağlayın ve aydınlık mod üzerindeki sürdürülebilirliği devam ettirin. Karanlık Mod üzerinde uyguladığınız metin renklerine dikkat edin ve okunabilirliği test edin.
  2. Karanlık Mod üzerinde metinlerin daha az okunabileceği yerler olacaktır. Bu noktalara çok dikkat edin ve bu noktalarda iyileştirme sağlayın. Kontrasttan kaynaklı az okunabilir olan noktalar kullanıcılarınız için korkutucu olabilir ve olası kullanıcı kayıplarına yol açabilir.
  3. Karanlık Mod tasarım entegrasyonu yaparken ayrı bir palet oluşturmak yerine var olan renk paletinizin açık ve koyu şekillerini deneyin. Bu sayede kullanıcılar farklılık yaşamazlar ve uygulamanızı aynı aydınlık modda olduğu gibi kullanabilirler.
  4. Beyaz arkaplan kullanmak zorunda kaldığınız yerlerde beyazı hafifleterek kullanın ve parlak bir beyaz kullanmaktan kaçının. Karanlık veya ışığı az ortamlarda bu durum kullanıcıların gözlerini yoracaktır.
  5. Bir ikon veya yapı sadece aydınlık ya da Karanlık Mod’da çalışıyorsa ayrı ayrı ikon veya yapı oluşturun.
Aydınlık / Karanlık Mod Tasarım Entegrasyon Örneği

Sürdürülebilirlik

Karanlık Mod entegrasyonu yaparken dikkat edilmesi gereken hususlardan bir tanesi de sürdürülebilirlik. Sürdürülebilirlik, kullanıcı mod değişikliklerinde önem arz ediyor. Kullanıcı modunu değiştirdiğinde başka bir sayfaya yada uygulamaya geçtiğini düşünecek tarzda değişiklikler yaşarsa bu size kullanıcı kaybettirecek veya kullanıcınızın kafasını karıştıracaktır.

Kullancağınız butonlar, ikonlar ve yerleşimlerde sadece renk değişikliği olacak şekilde uygulamanızı sürdürülebilir kılmalısınız. Karanlık mod asla bir yapı değişikliği değildir, sadece kullanıcı deneyimini güçlendiren bir renk değişikliğidir.

Aydınlık / Karanlık Mod Component Örnekleri

Uygulamanızda aydınlık ve Karanlık Mod entegrasyonları sağlarken ekranlarınızın birebir aynı olmasına özen gösterin ve sadece değiştirmek zorunda kaldığınız alanları değiştirin.

Eğer bir iOS uygulaması tasarlıyorsanız iOS için yaratılmış tasarım kütüphanelerini kullanmayı tercih edin. iOS için yaratılan tasarım kütüphaneleri karanlık / aydınlık mod mizanpajını bozmadan uygulamanızı tasarlamanızı sağlayacaktır. **

Tasarım Entegrasyon — Sürdürülebilirlik Örneği

Bu yazımız da iOS Uygulama tasarlarken karanlık ve aydınlık mod entegrasyonu nasıl sağlanır ve nelere dikkat edilmesi gerektiği konularını sizinle paylaştık. Uygulama tasarlama süreçlerinden bahsedeceğimiz yazılarımız da çok yakında sizlerle olacak!

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook

--

--