İpuçları ve püf noktaları

Yayınlanma tarihi: 28 Şubat 2014

Aşağıdaki ipuçlarıyla uygulamanızın kullanıcı deneyimini iyileştirin.

Uygulama yüklenirken titreme

Bir uygulama WebView ile yüklenirken siyah beyaz bir flaşta mı bulundunuz? Bu durum, uygulamanın genellikle temada ayarlanan pencere arka plan renginin yüklenmesi ve ardından WebView arka planının beyaz renkte yanıp sönmesinden kaynaklanabilir. Bu durum, WebView CSS dahil herhangi bir içerik yüklemeden önce gerçekleşir.

Beyaz flaşın kaldırılması için WebView'in arka plan rengini ayarlayın. Bu rengin gösterilmesindeki tek gecikme, mobil uygulamada WebView'in çizilmesidir.

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

Android'de, Android Uygulaması Kaynak Kılavuzu'nda açıklandığı gibi, renk değerlerini bir res/values/colors.xml dosyasında tanımlamak iyi bir uygulamadır. Uygulamanın kaynaklarında tanımlanmış bir renk seçerseniz kod aşağıdaki gibi görünebilir:

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

Dokunma geri bildirimi

Mobil ve web uygulamaları arasındaki farklardan biri, birçok web uygulamasında dokunma geri bildiriminin olmamasıdır.

Bu sorunu çözmek için :active sözde sınıfını kullanın.

Örneğin, aşağıdaki stili içeren bir düğmeniz varsa:

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

Basılı durum aşağıdaki gibi görünebilir:

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

Bu işlem, arka plan rengini ve kenarlığın rengini hafifçe koyulaştırır ve kenarlığın boyutunu azaltır. Böylece düğme sayfaya gömülü gibi görünür. top özelliği, konumu daha küçük kenarlıkla dengeleyecek şekilde ayarlar.

Sass kullanıyorsanız tam onaltılık değeri bilmenize gerek kalmadan öğelerin renklerini değiştirmek için koyultma ve açma karmalarını kullanabilirsiniz. Dilerseniz hexcolortool.com gibi online araçları da kullanabilirsiniz.

Sistemle ilgili öne çıkanlar

Birçok kullanıcı aracısı, öğelere dokunma geri bildirimi ekler. Bu da belirli stilleri tanımlama ihtiyacını ortadan kaldırır. WebView'de öğelerin turuncu renkte olduğunu veya bağlantılar ile öğelerin etrafında turuncu bir halka olduğunu fark edebilirsiniz.

Özel dokunma ve odaklanma geri bildirimi eklerseniz varsayılanları aşağıdaki CSS özellikleriyle geçersiz kılabilirsiniz:

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

Ayrıca kendi renklerinizi de ayarlayabilirsiniz:

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

Bu işlem, varsayılan, odak ve etkin (veya "basılı") durum dahil olmak üzere düğme rengini duruma göre değiştirir.

Bu özellikleri düğmelerin yanı sıra giriş alanlarında ve ana sayfa etiketlerinde de ayarlayabilirsiniz.