Dokunma arayüzlerinden farklı olarak TV, kullanıcının dikkatini odaklanılan öğeye çekmek için büyük ölçüde farklı ana durumlara (varsayılan, odaklanmış, basılmış) dayanır. Bu, navigasyon için başlangıç noktasıdır.
Öne çıkanlar
- Odaklama sistemi, odaklanılabilir öğelerin bölümlerinden oluşur.
- Odak göstergeleri, odaklanmış öğeleri vurgulayan görsel cihazlardır.
- Ölçek göstergesi, odaklanıldığında veya seçildiğinde bir öğeyi x faktörüne göre ayarlar.
- Arka plan rengi sabitken, odaklanıldığında yüzey rengi değişebilir.
Odak
TV tasarımının temel durum tanımı odaktır. Gezinme, uzaktan kumandada bulunan D-Pad etkileşimleriyle sınırlıdır. Kullanıcılar taşımak için ok tuşlarını, seçmek için orta düğmeyi ve geri dönmek için geri tuşunu kullanabilir. Uzaktan kumanda, kullanıcıların tek seferde bir etkileşim gerçekleştirmesine olanak tanır. Bir öğenin durum değişikliği, görselleştirmede kullanıcıya yardımcı olmak için odak göstergeleri kullanılarak gösterilir.
Odaklanılabilir öğeler ve gruplar
"Odaklanabilir öğeler", TV arayüzünün ayrılmaz bir parçasıdır. "Odaklanabilir öğeler"; düğmeler, kartlar, liste öğeleri veya özel olarak tanımlanmış bir yüzey gibi herhangi bir bileşen olabilir. Kullanıcılar herhangi bir zamanda yalnızca odaklanabilir tek bir öğeye odaklanabilmelidir.
Diğer yandan, "odaklanabilir gruplar" bir veya daha fazla "odaklanabilir öğe" içerir. Herhangi bir sayıda iç içe yerleştirilmiş "odaklanabilir grup" olabilir. Odaklanabilir gruplar, kullanıcı dostu gezinme için farklı odaklanılabilir öğeleri mantıksal olarak gruplandırmak için kullanılır.
Odak göstergeleri
Odak göstergeleri, odaklanılan öğenin ayırt edilebilir görselleştirmesidir. Bir öğe seçildiğinde, uzak düğme serbest bırakılana kadar "basıldı" durumuna geçer.
Odaklanabilir bir öğenin her durumu, aşağıdaki özellikler ayarlanarak yapılandırılır:
- Ölçek: Odaklanılan öğenin boyutunu değiştirin
- Kenarlık: Öğenin etrafına bir dış çizgi çizin
- Parlaklığı artır: Öğenin altında gölge oluşturur (kartlarda yaygın olarak kullanılır)
- Renkler: Öğenin arka planını ve içerik rengini değiştirin
Ölçek göstergesi
Odaklanıldığında veya seçildiğinde öğeyi ölçeklendirir. Varsayılan ölçeklendirme değerleri şunlardır: 1,025, 1,05 ve 1,1x. Navigasyon hakkında net geri bildirim almak için bu göstergeyi kullanın. Farklı öğelerin ölçeklendirme değerleri, boyutlarına göre değişiklik gösterebilir.
Parlaklık göstergesi
Öğenin etrafına dağılmış bir parlaklık veya gölge ekler. Parlaklık göstergesi aşağıdaki parametreleri alır:
- Parlaklık seviyesi: Öğenin 2 dp - 32 dp aralığında yüksekliğini önerir.
- Parlak renk: Resme veya marka rengine göre belirtilebilir
Anahat göstergesi
Öğenin etrafına kenarlıkdan bağımsız bir dış çizgi ekler. Özet göstergesi aşağıdaki parametreleri kullanır:
- Dış çizgi genişliği: Öğenin dışındaki formlar
- Dış çizgi iç kümesi: öğe ve dış çizgisi arasındaki boşluk
- Dış çizgi rengi: Resme veya marka rengine göre belirtilebilir \
Renk göstergesi
Öğeler, renklere uyum sağlayarak durumlarını değiştirebilir. Renk göstergesi aşağıdaki parametreleri kullanır:
- Arka plan rengi: Bir öğenin yüzey rengini değiştirir
- İçerik rengi: Bir yüzey üzerindeki içeriğin rengini değiştirir
Ton yüksekliği
Arka plan rengi sabitken yüzey rengi değişebilir. +1 ile +5 arasındaki yükseklik seviyelerindeki yüzeyler, birincil renge dayalı olarak renk bindirmeleriyle tonlandırılır. Böylece yüzey referans çizgisinde ton değişimi meydana gelir.
Ton yüzeyleri birçok avantaj sağlar:
- Farklı öğeleri ve metinleri birbirinden farklılaştırmak için yükseklik efekti oluşturun
- Erişilebilirlik avantajları açısından zıtlık oluşturun
- Görsel etkileşim oluşturun ve etkileşimli öğeler arasındaki geçişleri yumuşatın
Devre dışı
Devre dışı durumdayken arka plan rengi ve opaklık, nesnenin tıklanabilir olmadığını belirtmek için daha düşük bir belirginlik gösterir.
Kullanım örnekleri
Odaklanabilir bir öğenin 3 ana durumu vardır: varsayılan, odaklı ve basılmış, ek durumlar ise matris oluşturan etkin, devre dışı ve seçili.
Kartlar
| Varsayılan | Odaklanmış | Basıldı | |
|---|---|---|---|
| Etkin |
|
|
|
Düğmeler
| Varsayılan | Odaklanmış | Basıldı | |
|---|---|---|---|
| Etkin |
|
|
|
| Devre dışı |
|
|
|
Çipler
| Varsayılan | Odaklanmış | Basıldı | |
|---|---|---|---|
| Etkin |
|
|
|
| Etkin + Seçili |
|
|
|
| Devre dışı |
|
|
|
| Devre dışı bırakıldı + seçili |
|
|
|