Bu sayfa, Cloud Translation API ile çevrilmiştir.

Düzenleyici Eklentileri için kullanıcı arayüzü stil kılavuzu

Düzenleyici Eklentileri Apps Komut Dosyası'nın komut dosyasını kullanarak kullanıcı arayüzleri (menüler, kenar çubukları ve iletişim kutuları) HTML hizmeti. Çünkü arayüzler büyük ölçüde özelleştirilebilirler. Ancak, oluşturmak için, eklenti arayüzünüzü, kullanıcılara mükemmel bir deneyim sunacak şekilde sunmaktır.

En iyi eklentiler, tanıdık kontrolleri ve özellikleri kullanarak her düzenleyiciyi doğal bir şekilde genişletir. ve bunları kontrol etmenizi sağlar. Yeni bir eklenti oluştururken:

Şurada eklenti CSS paketini kullanın: HTML hizmeti sayfaları.
Tasarım konusunda şüpheye düşerseniz düzenleyicide benzer bir iletişim kutusu veya kenar çubuğu bulun. veya bir eklenti hızlı başlangıç kılavuzu'na bakın.
Sorunsuz bir deneyim oluşturmak için bu stil kılavuzundaki adımları uygulayın.

Metin

Eklenti adı

Yayınlarken eklentinizin adını ayarlamanız gerekir. somut olarak ortaya koyar. Ad, eklenti mağazası ve menüler gibi birçok yerde görünür.

İlk harfleri büyük kullanın.
Markanızın bir parçası olmadıkça noktalama işaretleri, özellikle de parantez kullanmaktan kaçının.
Kısa tutun. 30 veya daha az karakter kullanmanız önerilir. Uzun adlar otomatik olarak kısaltılır.
Eklentinin ait olduğu Google ürününün adını eklemeyin (veya Google kelimesi) kullanın.
Sürüm bilgilerini girmeyin.
Eklentinin yayınlanan adının komut dosyası projesidir. Proje adı, yetkilendirme iletişim kutusunda görünür.

Yapılmamalı	Yapılması gerekenler

Yazma stili

Çok fazla yazı yazmanız gerekmez. Çoğu eylem, ikonografi, düzen ve kısa etiketlerdir. Eklentinizin bir kısmını daha kapsamlı açıklamaya ihtiyaç duyduğundan, en iyi eklentinizi açıklayan ayrı bir web sayfası oluşturun ve ona bağlantı verin.

Kullanıcı arayüzü metni yazarken:

Normal tümce düzeni kullanın (özellikle düğmeler, etiketler ve menü öğeleri için).
Jargon veya kısaltma içermeyen kısa ve basit metinler tercih edin.

Yapılmamalı	Yapılması gerekenler

Yükleme sonrası ipucu

Yükleme sonrası ipucunuz, bir kullanıcı eklentinizi yükledikten hemen sonra açılır. Yardım'da görünür. Kullanıcıların hızlı bir şekilde kullanmaya başlamasına yardımcı olacak birkaç cümleniz var.

Eyleme yönelik bir kelimeyle başlayın.
Eklentinizi kullanmanın ilk adımını açıklayın.
Kenar çubuğu gibi bir ana kullanıcı arayüzünüz varsa bunu nasıl açacağınızı açıklayın.
Eklentinizi burada tanıtmayın. Eklenti zaten yüklü.

Yapılmamalı	Yapılması gerekenler

Menü öğeleri

Eklentiler, normal Apps Komut Dosyası projelerinden farklı olarak komut dosyası düzenleyicide görünmez. veya komut dosyası yöneticisiyle birlikte çalışır. kullanıcılar eklenti komut dosyalarını doğrudan çalıştıramaz. Bunun yerine eklentiler menüsünde yer alır. Menü (ve muhtemelen bir iletişim kutusu ya da kenar çubuğu) Kullanıcıların eklentiyle nasıl etkileşime girdiğini gösterir.

Menü, kullanıcıların eklentinizi kontrol etme şeklinin önemli bir parçasıdır. Bu nedenle, ve ifadeleri dikkatli bir şekilde kullanmanız gerekir.
Yalnızca eklentinizin adını tekrar eden menü öğeleri kullanmaktan kaçının. Bunun yerine, kelime ekleyin.
Ana menü öğeniz bir iş akışına başlıyorsa ve ne yaptığını açıkladıysa buna "Başlat" diyoruz. Bu kalıp Dokümanlar eklentisi hızlı başlangıç kılavuzu.
Menünüzde altıdan fazla öğe yoksa, alt menüleri kullanmamaya çalışın. Şunları yapabilirler: titiz ve zor seçilmesi gerekir.
Görevi açıklayın, menü öğesinin görüntülediği kullanıcı arayüzü bileşenini kullanmayın.

Yapılmamalı	Yapılması gerekenler

Hata mesajları

Bir sorun olduğunda sade bir dil kullanmak önemlidir. Açıklama veya sorunun nasıl çözüleceğini önerebilirsiniz.

Kullanıcının kodunuzun oluşturduğu istisnaları görmesine izin vermeyin. Bunun yerine try...catch özel durumlara müdahale etmek için deyimler ve ardından kullanıcı dostu bir hata mesajı satır içi metinle CSS eklentilerinden error sınıfı paketi veya bir uyarı iletişim kutusu kullanın.
Yayınlamadan önce eklentinizin hata ayıklama bilgilerini JavaScript konsolu; kullan Stackdriver günlük kaydı .

Yapılmamalı	Yapılması gerekenler

Yardım içeriği

Her eklentinin menüsünde otomatik bir Yardım iletişim kutusu bulunur. Yardım URL'si sağlarsanız "Daha fazla bilgi", söz konusu sayfaya yönlendiren bir bağlantı içerir. Aksi takdirde eklentisi yeterince açıklayıcıysa lütfen nasıl kullanılacağını açıklayan bir sayfa sağlayın.

Mümkün olduğunda talimatları madde işaretli veya numaralı bir liste halinde gösterin. Yürüyüş kullanıcıları ve adlandırılmış kullanıcı arayüzü öğelerine açık referanslarla nihai sonuca kadar yürüyün.
Kurulum gibi gereksinimlerin talimatlarda net bir şekilde açıklandığından emin olun yeni bir e-tablo açabilirsiniz.
Yardım içeriğinize ana kullanıcı arayüzünden de bağlantı verebilirsiniz. Eklentiniz yeni bir doküman oluşturursa talimatları şurada da görüntüleyebilirsiniz: başlık ekleyin.

Özel kullanıcı arayüzleri

Bazı basit Düzenleyici Eklentileri tamamen menülerinden kontrol edilebilir, ancak çoğu özel bir kenar çubuğu veya iletişim kutusu görüntüle içerik.

Kenar çubukları, kullanıcıların kullanma ihtimali yüksek olan kalıcı araçlar için idealdir içeriklerine atıfta bulunuyor.
İletişim kutuları tek kullanımlık araçlar, ayar sayfaları ve önemli mesajlar için idealdir.

Kullanıcı arayüzü metni

Herhangi bir iletişim kutusunda veya kenar çubuğunda, kullanıcıların yalnızca başlık ve düğme etiketlerini okuduğunu varsayın. Yine de arayüzünüzün ne işe yaradığını anlayıp iyi bir seçim yapabilirler mi?

Kendi başına bir başlık ve düğme etiketleri kullanın.
Uzun açıklayıcı metin blokları kullanmaktan kaçının.

İletişim kutuları

Diyaloglar, insanların bir kez kullandığı ve daha sonra devam ettiği araçlar için idealdir. Örneğin, eklenti, kullanıcıların grafik eklemesine olanak tanır. Kullanıcılara, çeşitli eklenecek metin , ardından grafik eklendiğinde iletişim kutusunu kapatın. İletişim kutuları ayarlarını görüntülemenizi veya bir öğeyi çok önemlidir.

İletişim kutusunu açmayın ( uyarı veya istem) kullandığınızdan emin olun (yalnızca aynı anda bir tane görüntüleyin.
İletişim başlığı için, başına en büyük harf içeren bir kelime veya kısa bir kelime öbeği kullanın. önemlidir.
Düğme etiketleri iletişim kutusu başlığıyla alakalı olmalıdır.
Genellikle birincil işlem ve "İptal" olmak üzere iki düğme tercih edin. Özel durumlar için sağ alt köşeyi kullanabilirsiniz.
Düğmeleri iletişim kutusunun sol alt köşesine yerleştirin. Mavi birincil düğme sol tarafta, gri ikincil düğmeler de sağda olmalı.

Yapılmamalı	Yapılması gerekenler

Kenar çubukları

Kenar çubukları kullanıcıların dokümanlarına, e-tablolarına, sunularına ya da bir biçime sahip olmaları gerekir. Ayrıca kullanıcıların eklentinizi tekrar tekrar kullanmasına da olanak tanır. Yeni bir kenar çubuğu açıldığında, önceki kenar çubukları otomatik olarak kapanır. Bunlar, kullanıcının iş bittiğinde çıktığı geçici modlar için en uygun seçenektir.

Kullanıcıların kendi kenar çubuklarına sahip başka eklentileri olabilir. İki eklenti, kenar çubukları aynı anda açıldığında yalnızca bir tanesi gösterilir.
Bir doküman ilk açıldığında kenar çubuğu veya iletişim kutusu gösterme.
Yalnızca şurada çalışan eklentiler: AuthMode.FULL Kenar çubukları veya iletişim kutuları açabilir. Açmak için bir menü öğesi kullanabilirsiniz Kenar çubuğu görüntülenir. Bu işlem kullanıcıdan tam yetkilendirme ister.

Denetimler

Muhteşem eklenti kullanıcı arayüzleri, kontrollerinde biraz boşluk bırakır. Yeterli kâr marjı yoğun kontroller bunaltıcı gelebilir. İçindeyken emin değilseniz editörün kendisinden bir düzen ödünç alabilirsiniz. Örneğin, mevcut araçları kullanarak Google Dokümanlar'daki Dosya > Sayfa düzeni'ni inceleyin.

Eklentiler CSS paketi ile ilgili dokümanlar , aşağıdaki denetim türlerinin her biri için örnek işaretleme sağlar.

Düğmeler

Kullanıcı arayüzünüzün ana işlemlerini düz göstermek yerine kontrol etmek için düğmeleri kullanın kontrol edebilirsiniz.

Aynı anda birden fazla mavi, kırmızı veya yeşil düğme görüntülemekten kaçının. Gri düğmeler tekrar tekrar görünebilir.
Çoğu düğme etiketi cümle düzeninde olmalı ve fiil ile başlamalıdır. Red (Kırmızı) genellikle oluşturma işlemleri için düğmelerin tümünde büyük harf kullanılmalıdır.

Yapılmamalı	Yapılması gerekenler

Onay kutuları ve radyo düğmeleri

Kullanıcılar birden fazla seçenek belirleyebiliyorsa veya hiçbir seçenek belirtmiyorsa onay kutularını kullanın. Tekliflerinizi otomatikleştirmek ve optimize etmek için radyo düğmeleri (veya bir seçim menüsü).

Onay kutularını değiştirme' davranışına izin verir.
Kontrol edildikten hemen sonra hiçbir şey yapmayın. İnsanlar hata yapabilir. Bekle Kullanıcı seçimlerini onaylamak için bir düğmeyi tıklayana kadar.

Menü seçin

Seçimler, kısa bir alternatif listesi sunmak için iyi bir yöntemdir.

Seçenekleri tüm kullanıcıların anlayabileceği şekilde alfabetik olarak veya mantıksal düzende sıralayın daha iyi anlamanızı sağlar (örneğin, pazardan itibaren).
Liste çok uzarsa farklı bir kontrol kullanmayı düşünün. Örneğin, menüye daha fazla alan açmak ve menüyü daha açık hale getirmek için kaydırılabilir bir liste görüntüleyebilirsiniz daha kolay gezinebilirsiniz.

Metin alanları

Kullanıcıların birkaç kelimeden daha fazlasını yazması gerekiyorsa metin alanı kullanın.

Kullanımı kolay ve zor anlaşılır hale getirmek için metin alanlarını en az iki satır uzunluğunda yapın metin alanlarına benzer.
Etiketleri en üste yerleştirin.

Metin alanları

Kullanıcıların yalnızca bir veya iki kelime yazması gerekiyorsa metin alanlarını kullanın.

Metin alanının genişliği, kullanıcıların bu alana yazmasını beklediğiniz metni önermelidir.
Odak noktasında kaybolduğundan yer tutucu metni etiket olarak kullanmaktan kaçının. Yer tutucu metin, örnek veya daha fazla ayrıntı vermek için kullanışlıdır.
Etiketleri en üste yerleştirin ancak kısa metin alanlarını yan yana yerleştirmekten de çekinmeyin.

Marka bilinci oluşturma

Eklentinizde

Marka öğelerini dahil etmek istiyorsanız kısa ve öz tutun. Bu, kullanıcıların Kullanıcılar kullanıcı arayüzüne odaklanır ve eklentinizi düzenleyicinin bir parçası gibi hisseder.

Eklentinizin tüm özellikleri marka bilinci oluşturma kurallarımıza uygun olmalıdır.
"Google" kelimesini eklemeyin veya Google ürün simgelerini kullanmayın.
Metin en fazla birkaç kelimeden oluşmalı ve CSS eklentilerinden gray sınıfı paketinden yararlanın.
Grafikler beyaz bir arka planda olmalı ve 200 × 60 pikselden büyük olmamalıdır.
İletişim kutuları için marka öğesi sağ alt köşede olmalıdır.
Kenar çubukları için marka öğeleri en üstte veya altta olabilir.

Mağazada

Düzenleyici eklentisi yayınlamak için resim öğesi sayısını artırın. Bu öğeler, eklentinin mağaza girişini oluşturmak için kullanılır.

Mağaza girişinizin tüm özellikleri marka bilinci oluşturma kurallarımıza uygun olmalıdır.
Sağlamanız gereken resimlerle ilgili daha fazla bilgi için resim yönergelerini uygulayın.

Erişilebilirlik

Renk fark etmeksizin herkes eklentinizden yararlanabilmelidir. ya da ekran okuyucu kullanmanız gerekebilir. Erişilebilirlik, bazı konuları ele alacağız. Faydalı kaynaklardan biri Google Erişilebilirlik sitesini ziyaret edin. Ancak burada şu ipuçlarından yararlanabilirsiniz:

Klavyeyle tüm kullanıcı arayüzü kontrollerine gidebildiğinizden emin olun. Ekle Kullanıcıların şunları yapması için özel kontrollere (ör. <div> ile yapılanlar) tabindex=0 tıklayın. Oklar gibi diğer tuşların da desteklenip desteklenmediğini değerlendirin. bir liste oluşturabilirsiniz.
Bazı kullanıcılar eklentinizle birlikte ekran okuyucu kullanabilir. Dolayısıyla, resimler bir alt özelliği, ve özel kontrollerin Kullanım alanlarını açıklayan ARIA özellikleri.
Durumu iletmek için yalnızca renklere güvenmeyin. Simgeleri ve metinleri de kullanın.

Bu kılavuzun önceki bölümlerinde açıklananlar gibi standart web denetimlerini kullanıyorsanız eklentinizi erişilebilir hale getirmek daha kolaydır.