Anlamsal renk belirteçleri nasıl kullanılır

Markanız yeşil kullanıyor. Ana düğme yeşil, başarı mesajı yeşil, seçili gezinme öğesi yeşil. Marka mora dönene kadar her şey uyumlu görünüyor. Başarılı yükleme de mora mı dönmeli? Peki odak çerçevesi veya süresi dolmak üzere olan hesabın yanındaki uyarı?

Anlamsal renk belirteçleri bu kararları açık kılar. İlkel belirteç green-700 gibi bir renk değerini adlandırır. Anlamsal belirteç action-primary-background veya status-success-text gibi görevini adlandırır. Bileşenler göreve başvurur; böylece marka güncellemesi benzer tonun her kullanımını kazara değiştirmeden amaçlanan rolleri değiştirebilir.

Önlemek istediğiniz hatayla başlayın

“Proje oluştur” düğmesi, “Kaydedildi” onayı, hata mesajı ve seçili kenar çubuğu bağlantısı olan çalışma alanını düşünün. İlk tasarımcı düğme, onay ve seçili bağlantı için aynı koyu yeşili seçmiştir. Geliştirici makul biçimde değeri bir kez saklayıp yeniden kullanmıştır. Şimdi yeni marka yönü farklı ana renk istemektedir.

Paylaşılan yeşil değişkeni değiştirmek üç öğeyi de günceller. Uygulama özgün kodla tutarlıdır, fakat karar yanlıştır: onay markanın ana eylemini temsil ettiği için değil, başarıyı ilettiği için yeşildi. Bu ayrım tasarımcının zihninde vardı ve yeniden kullanılabilir kurallara hiç ulaşmadı.

Belirteç eklemeden önce ayrımı sade dille yazın. “Ana eylem ürün markasını izler. Başarı geri bildirimi durum anlamını korur. Seçimin açık bir etkin duruma ihtiyacı vardır.” Bu cümleler adlandırma kuralıyla başlamaktan değerlidir; çünkü hangi değerlerin güvenle birlikte değişebileceğini söyler.

Atlassian rolü arayüzde nasıl görünür kılıyor?

Atlassian’ın renk rehberi, Jira panosunu seçim, metin ve marka düğme arka planı belirteçleriyle eşler. Kullandığı sözlük renk rollerini vurgu ve etkileşim durumundan ayırır. Seçim ile klavye odağını da ayrı ele alır: seçili öğeye odak göstergesi eklendiğinde seçim sunumu korunmalıdır.

Notlandırılmış arayüzün neden tek başına paletten yararlı olduğuna dikkat edin. Renk örneği değerini söyleyebilir. Pano, deneyimin hangi bölümünün o değeri neden kullanması gerektiğini gösterir. Amaçlanan kullanımı renk doygunluğundan çıkarmak yerine etiketin metni, yüzeyi veya simgeyi tanımlayıp tanımlamadığını inceleyebilirsiniz.

Küçük sistemde bütün adlandırma envanterini almadan önce bu alışkanlığı alın. Önerilen belirteci gerçek kullanımın yanına koyun, neyin değişmesine yol açacağını açıklayın ve kontrol etmemesi gereken bir kullanımı gösterin. “Marka eylemi” ve “başarılı işlem” aynı yeşille başlayıp bağımsız kararlar kalabilir. Haritanız bu ayrımı ifade edemiyorsa arayüzün anlamını değil paleti saklıyordur.

Bağımlılık testini somutlaştırın

Küçük bir takma ad haritası hatayı ortaya çıkarmaya yeter. Bu örnek eşlemede başarı ve ana eylem aynı değerle başlar, fakat ayrı rollere başvurur:

:root {
  --palette-green-700: #236646;
  --palette-purple-700: #6439a8;
  --action-primary-bg: var(--palette-green-700);
  --action-primary-fg: #fff;
  --status-success-text: var(--palette-green-700);
}
[data-brand="purple"] {
  --action-primary-bg: var(--palette-purple-700);
}

Marka niteliğini değiştirmek --action-primary-bg kullananları değiştirmelidir. --status-success-text kullanan başarı etiketini değiştirmemelidir. İkisi de değişiyorsa yeni ton seçmeden gerçek bileşen başvurularını inceleyin. Hiçbiri değişmiyorsa sabit yazılmış renk veya daha özgül geçersiz kılma arayın. Bu bağımlılık testidir; örnek değerler gerçek bağlamlarında yine kontrast kontrolü gerektirir.

Ardından ön planı arka planıyla test edin. Eylem yüzeyi ve etiketi bir çifttir. Yalnız yüzeyi güncellemek, özellikle koyu markanın yerini açık renk aldığında, önceden okunabilir etiketi başarısız kılabilir. Eş rolü haritada belgeleyin; böylece birini değiştirmek, inceleyenin hatırlamasına güvenmek yerine diğerinin incelemesini başlatsın.

Geçişi üç turda kontrol edin:

1. Değerleri değiştirmeyin. Takma adları ekleyip görsel temelle karşılaştırın. Beklenmedik farklar eşleme hatası düşündürür.
2. Tek rolü geçici değiştirin. Değişmeden kalması gerekenler dahil bütün amaçlanan kullanımları inceleyin.
3. Onaylı temayı geri yükleyin. Üzerine gelme, odak, devre dışı ve seçili birleşimlerini inceleyin. Bilinçli ham değerleri bitmemiş geçiş işinden ayrı kaydedin.

Değerleri, rolleri ve bileşen kararlarını ayırın

Küçük sistem iki katmanla başlayabilir. Değer katmanı gerçek renkleri tutar. Rol katmanı değerleri arayüz amaçlarıyla eşler. Tek bileşenin bağımsız gelişmesi gerektiğinde üçüncü, bileşene özel katman yararlıdır; ancak her küçük projede zorunlu değildir.

Örneğin neutral-950 en koyu nötrünüzü tutabilir. Başlangıçta hem text-primary hem border-strong ona işaret edebilir. Bunlar farklı roller olarak kalır; çünkü gövde metninin okunabilirliğini iyileştirmek, belirgin kenarlıkların hepsinin de mutlaka koyulaşmasını gerektirmemelidir. Bugünkü aynı değerler, iki kararın sonsuza dek aynı adı paylaşması gerektiğini kanıtlamaz.

Tersi hata, görünür her öğeye ayrı belirteç oluşturmaktır. Bütün olağan gövde paragrafları aynı rolü görüyorsa her birine ayrı metin belirteci vermek anlam eklemeden bakım ekler. Yararlı soru şudur: Bu kullanımlardan birini diğerini değiştirmeden bilinçli olarak değiştirir miyiz? Evetse ayrı rolleri düşünün. Hayırsa mevcut rolü yeniden kullanın.

Adlar, her bileşeni açmadan doğru seçim yapmayı kolaylaştırmalıdır. Girdi hata kenarlığını arayan geliştirici, accent-strong, special-red veya brand-secondary hangisinin tehlike anlamına geldiğini tahmin etmemelidir. Özellikle aynı bağlamı kodlama ajanı kullanacaksa yaratıcı kısaltma yerine anlaşılır rol tercih edin.

Anlamsal renkleri arayüz rolleriyle eşleyin

Temsilî sayfayı birkaç durumda inceleyerek başlayın. Varsayılan panonun statik görüntüsü devre dışı eylemleri, doğrulama geri bildirimini, klavye odağını veya seçili menü öğesini göstermez. Büyük kuruluşun bir gün destekleyebileceği her teorik durum değil, gerçek renk görevlerini keşfedecek kadar durum gerekir.

Kurgusal çalışma alanında ilk harita sayfa arka planını, yükseltilmiş yüzeyi, ana metni, ikincil metni, olağan kenarlığı, ana eylemi, eylem üzerindeki metni, seçimi, odağı, başarıyı, uyarıyı ve hatayı kapsayabilir. Bazı roller ön plan-arka plan çifti ister. Soluk başarı yüzeyi ile koyu metni, ortak amaçlı farklı değerlerdir.

İlk inceleme eşleme alıştırmasıdır. Örnek sayfadaki her görünür rengi işaretleyip ne ilettiğini sorun. Soluk yeşil panel yalnızca ilişkili kontrolleri grupluyorsa yüzey veya gruplama rolüne aittir. Başarılı işlemi duyuruyorsa geri bildirime aittir. Kullanımlar benzer görünebilir, fakat gelecekteki değişimleri farklı kuralları izlemelidir.

Yazılı açıklamayı belirteç adının yanında tutun. “Ana eylem arka planı: bölümde kullanılabilir en önemli eylem”, yalnızca “yeşil”den yararlıdır. Karışıklık olasıysa karşıt örnek ekleyin: belirteç “insanların fark etmesini istediğimiz her öğe” demek değildir. Önemli hata mesajı yine uygun geri bildirim sunumunu gerektirir.

Karar vermeden önce marka değişimini baştan sona deneyin

Bilerek küçük tutulan bir örnek: çalışma alanı yeşil marka eylemi ve yeşil başarı geri bildirimiyle başlar. Sonra eylem rengi başka marka tonuna değişir. Düğmenin ve seçili gezinme sunumunun yeni yönü izlemesini, “Kaydedildi”nin ise tanınabilir başarı rolünü korumasını istersiniz.

Önce marka kararının etkilediği rolleri bulun. Düğme arka planı ve ön plan metni birlikte incelenmelidir. Seçim, ayrı bir marka türevi yüzey veya gösterge kullanabilir. Logo marka varlığıdır, olağan düğme belirteci değildir. Kendi varlık gerekliliklerini düşünmeden genel arayüz kuralıyla yeniden renklendirmeyin.

Ardından sayfanın kopyasında rol eşlemelerini değiştirin. Eski onaltılık değerin her kullanımını arayıp ayırt etmeden değiştirmeyin. Ham değer araması adayları bulmak için yararlıdır, ama tek kullanımın bağlantı, başarı durumu veya çizim ayrıntısı olduğunu söyleyemez.

Son olarak değişen rolleri kullanan her yeri inceleyin. Ana eylem beyaz sayfada, soluk panelde ve iletişim kutusunda bulunabilir. Bir bağlamda güçlü görünen yeni dolgu diğerinde kaybolabilir. Eşleme değişikliği, amaçlanan kullanımlar doğru eylemi iletmeyi ve okunabilir kalmayı sürdürdüğünde tamamlanır.

Her şey için renk yaratmadan durumları tanımlayın

Eylemin varsayılan görünümü davranışının yalnızca bir parçasıdır. Üzerine gelme, basılı, odaklı, seçili ve devre dışı farklı şeyler ifade edebilir. Gezinme öğesi klavye odağı alırken seçili kalabilir. Düğme basılmadan odaklanabilir. Bütün koşulları tek “etkin” renge indirmeyin.

Her durumun iletmesi gereken bilgiyle başlayın. Üzerine gelme işaretçi ilişkisini belirtir. Odak, klavye kullanıcısına etkileşimin nerede olacağını söyler. Seçim kalıcı tercihi belirtir. Görsel sunumlar malzeme paylaşabilir, ama durumlar birlikte oluştuğunda ayırt edilebilir kalmalıdır. Kenarlık, alt çizgi, simge veya şekil mesajın bir bölümünü taşıyabilir.

Örnek kenar çubuğunda hafif seçim arka planıyla açık odak çerçevesi kullanabilirsiniz. Öğe zaten seçili diye çerçeve kaybolmamalıdır. Birleşik durumu doğrudan inceleyin. Yalıtılmış renk örneklerine bakmak gerçek bileşende iki sunumun birbirini engelleyip engellemediğini göstermez.

Devre dışı stil de aynı özeni hak eder. Kullanıcı neden kullanılamadığını çıkaramıyorsa devre dışı eylem açıklama ister. Düğmeyi grileştirmek zorunlu alanın eksik mi, iznin yetersiz mi, işlemin sürmekte mi olduğunu söylemez. Belirteç görsel rolü adlandırır; etkileşim mantığının veya açıklama metninin yerini tutamaz.

Bileşene özgü istisnaları görünür tutun. Yıkıcı işlem onayı farklı düğme sunumu istiyorsa tek iletişim kutusunda ana eylem belirtecini sessizce değiştirmek yerine amacını belgeleyin. İstisna meşru olabilir. Sorun, kimsenin bunun bilinçli tercih mi tek seferlik uygulama kestirmesi mi olduğunu anlayamamasıyla başlar.

Rengi okunabilir anlamla eşleştirin

Renk arayüzü taramayı kolaylaştırır, ancak tonu ayırt etmek zor olduğunda anlam korunmalıdır. Tek başına kırmızı kenarlık kullanıcıya neyin yanlış olduğunu çıkarsama yükü bırakır. Hata etiketi ve yararlı düzeltme mesajı durumu anlaşılır kılar. Benzer biçimde “Değişiklikler kaydedildi” eşliğindeki başarı simgesi etiketsiz yeşil noktadan fazlasını iletir.

W3C’nin renk kullanımı rehberi, bilgi iletmek veya eylem tanımlamak için yalnız renge güvenmeme gerekliliğini açıklar. İlkeyi her role bağlamında uygulayın. Bu çalışma alanında durum mesajları okunabilir metin alır, seçili öğeler görünür seçim sunumunu korur, bağlantılar hafif ton farkının ötesinde tanınabilir kalır.

Kontrast ayrı kontroldür. Renk doğru anlamı iletip yine de okunamayacak kadar silik olabilir. Marka renk örneğine genel “erişilebilir” etiketi vermek yerine ön plan ve arka plan çiftlerini değerlendirin. Açık başarı yüzeyindeki koyu ön plan, doygun başarı düğmesindeki beyaz metinden farklı birleşimdir.

Normal metinde WCAG minimum kontrast ölçütü genellikle 4.5:1, uygun büyük metinde 3:1 ister ve tanımlı istisnalar içerir. W3C kontrast açıklaması kapsamı ve ayrıntıları verir. Gerçek çifti ve gösterilen kullanımı ölçün; bir çiftin geçmesi bileşeni, temayı veya bütün siteyi belgelemez.

Önceki örnek değerler bunu somutlaştırır. Yeşil #236646 ve mor #6439a8 için bağıl parlaklık hesabı, beyaza karşı 6.86:1 ve 7.80:1 kontrast verir. Aynı dolgular siyaha karşı 3.06:1 ve 2.69:1 verir. Dolayısıyla iki dolgu normal metin eşiğinde beyaz etiketi destekler; hiçbiri o eşikte siyahı desteklemez. Sonucu anlamsal ad değil, belirli ön plan ve arka plan değerleri oluşturur. Hesabı çifte bağlı tutun ki gelecekteki daha açık marka rengi yeni kontrol başlatsın.

Her başarısızlığı bütün arayüzü koyulaştırarak düzeltmeyin. Hangi rolün hangi yüzeyde ve durumda başarısız olduğunu inceleyin. İkincil metnin hâlâ okuma görevi vardır. Fazla soluk yardım mesajına “hafif” demek onu iyileştirmez. Tersine, her ayırıcıyı ağır koyu çizgiye çevirmek sistemin yaratması gereken hiyerarşiyi silebilir.

Koyu temayı yeni eşleme olarak inceleyin

Koyu tema, amacı görünümden ayırdığı için yararlı stres testidir. Ana metin, değeri değişse de ana metin kalmalıdır. Yükseltilmiş yüzey sayfadan ayırt edilebilir olmalıdır. Başarı geri bildirimi, ön plan ve arka plan değerleri açık temadan farklı olsa bile anlaşılır kalmalıdır.

Her ilkel rengi tersine çevirmeyin veya açık tema değerlerini koyu sayfada doğrudan kullanmayın. İlişkileri yeniden ele alın. Beyazda dengeli duran parlak eylem koyu yüzeye hükmedebilir. Soluk panelde hafif görünür kenarlık kaybolabilir. Görseller, logolar ve grafikler de anlamsal renk haritası dışında kararlar gerektirebilir.

İki tema önizlemesinde aynı içeriği kullanın. Aksi takdirde yoğunluk veya görsel farkları renk kararlarından dikkati uzaklaştırabilir. Form hatası, başarı mesajı, seçili gezinme öğesi, odaklı kontrol ve biraz ikincil metin ekleyin. Bu durumlar çekici varsayılan düğme galerisinden yararlı karşılaştırma oluşturur.

Rol adları karşılaştırmada sabit kalmalıdır. Koyu temada text-primary adını white-text yapmaya başlıyorsanız görev anlatması gereken ada değeri geri koyuyorsunuzdur. Anlamı sabit tutup onu karşılayan eşlemeyi değiştirin.

Kodlama ajanına yalnız paleti değil haritayı verin

Ajandan sayfayı iyileştirmesini isterken görsel referansın yanına rol kararlarını ekleyin. Ekran görüntüsü mevcut renkleri gösterir. Marka değişiminde hangilerinin bağlı kalacağını veya hangi durum birleşimlerinin çalışmayı sürdürmesi gerektiğini açıklamaz. Kısa eşleme tablosu ve temsilî bileşen bu niyeti incelemeyi çok kolaylaştırır.

Desteklenen OpenDesign HTML önizlemelerinde gösterilen sonucu inceleyebilir, mevcut elle stil düzenleme kontrollerini kullanabilir ve sohbet için ilgili alana yorum ekleyebilirsiniz. Başarı bildiriminin ana eylem sunumunu kullanması gibi somut uyumsuzluğu göstermek için bunlardan yararlanın. Geri bildirim görünür konumun yanı sıra amaçlanan rolü de adlandırmalıdır.

Örneğin ajandan başarı ve hata rollerini koruyarak ana eylem eşlemesini güncellemesini, sonra etkilenen düğme kullanımlarını farklı durumlarında göstermesini isteyin. Projede zaten belirteç kuralları varsa dosyaları veya tasarım bağlamını verin. Küçük renk düzeltmesinin parçası olarak tümüyle yeni adlandırma sistemi istemeyin.

Görsel düzeltmeden sonra üretilen dosyalarda bileşen başvurusunu inceleyin. Düğme doğru görünüp hâlâ başarı belirtecini kullanıyor olabilir; sonraki tema değişimi aynı bağımlılık hatasını açığa çıkarır.

Önce tek temsilî bileşeni geçirin

Bütün siteyi tek seferde değiştirmeden anlamsal roller ekleyebilirsiniz. Proje oluşturma formu gibi birkaç anlamlı durum içeren bileşen seçin. Mevcut değerlerini listeleyin, her birinin rolüne karar verin ve rolleri mevcut paletle eşleyin. Başlangıçta görünür tasarım neredeyse değişmeden kalabilir.

Sonra kontrollü test olarak tek rol eşlemesini değiştirin. Ana eylemler birlikte değişmeliyse amaçlanan düğmelerin değiştiğini doğrulayın. Durum mesajları bağımsız kalmalıysa eylem rengiyle birlikte hareket etmediklerini doğrulayın. Test, geçici rengin iyi nihai marka seçimi olup olmadığıyla değil bağımlılıkla ilgilidir.

Ham değer kullanan yerlerin kaydını tutun. Bazıları bilinçlidir: çizim, ortak logosu veya veri görselleştirmesi aynı arayüz rolüne ait olmayabilir. Diğerleri geçiş işidir. Sonraki kişi eksik dönüşümü onaylı istisna sanmasın diye ayrımı etiketleyin.

Temsilî bileşen doğru davrandığında ilgili bileşenlere genişletin. Genel değiştirmeye güvenmek yerine her anlamlı gruptan sonra gösterilen sayfayı inceleyin. Paylaşılan kurallar açık olmayan bağlamları etkileyebilir. Küçük geçiş, bütün arayüzün karşılaştırılması zorlaşmadan bu bağlamları bulma fırsatı verir.

Yararlı belirteç incelemesi geride ne bırakmalı?

Son inceleme, başkasının kullanabileceği harita bırakmalıdır: rol adları, amaçları, desteklenen temalara göre güncel değerleri ve davranışı gösteren birkaç temsilî bileşen. Eylem arka planındaki metin gibi bir rolün diğeriyle eşlenmesi gereken yerlere not ekleyin. Her pikseli ayrı politikaya dönüştürmeden anlamlı istisnaları kaydedin.

Ekip arkadaşınızdan haritayla yeni başarı mesajı ve yeni ana eylem için belirteç seçmesini isteyin. Renk örneklerinden tahmin etmeden doğru seçiyorsa sistem yararlı iş yapıyordur. İki seçim de hâlâ “markanın yeşilini kullan”a çıkıyorsa daha fazla belirteç eklemeden rol açıklamalarını netleştirin.