Düzenleyici eklentileri, Apps Komut Dosyası'nın HTML hizmetini kullanarak kullanıcı arayüzleri (menüler, kenar çubukları ve iletişim kutuları) oluşturur. Arayüzler HTML ve CSS ile geliştirildiğinden yüksek oranda özelleştirilebilir. Ancak eklenti arayüzünüzü oluştururken mükemmel bir kullanıcı deneyimi sunacak şekilde tasarlamanız gerekir.
En iyi eklentiler, tanıdık kontroller ve davranışlar kullanarak her düzenleyiciyi doğal bir şekilde genişletir. Yeni bir eklenti oluştururken:
- HTML hizmet sayfalarınızda eklentiler CSS paketini kullanın.
- Tasarım konusunda şüpheniz olduğunda düzenleyicide benzer bir iletişim kutusunu veya kenar çubuğunu bulup eşleştirin ya da bir eklenti hızlı başlangıç kılavuzuna bakın.
- Sorunsuz bir deneyim oluşturmak için bu stil kılavuzunu uygulayın.
Metin
Eklenti adı
Eklentinizi yayarken adını ayarlamanız gerekir. Ad, eklenti mağazası ve menüler gibi birçok yerde görünür.
- Başlık düzeni kullanın.
- Markanızda yer almadığı sürece noktalama işaretleri (özellikle parantez) kullanmaktan kaçının.
- Kısa tutun. En iyisi 30 karakter veya daha azdır. Uzun adlar otomatik olarak kısaltılabilir.
- Eklentinin kullanılacağı Google ürününün adını eklemeyin (veya Google kelimesini kullanmayın).
- Sürüm bilgilerini çıkarın.
- Eklentinin yayınlanan adının, komut dosyası projesinin dosya adıyla aynı olduğundan emin olun. Proje adı, yetkilendirme iletişim kutusunda görünür.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
 |
 |
Yazım stili
Çok fazla yazmanıza gerek yoktur. Çoğu işlem, simge, düzen ve kısa etiketler aracılığıyla net bir şekilde açıklanmalıdır. Eklentinizin bir kısmının kısa etiketlerle açıklanamayacak kadar ayrıntılı bir açıklamaya ihtiyacı olduğunu düşünüyorsanız eklentinizi açıklayan ve bu sayfaya bağlantı veren ayrı bir web sayfası oluşturmanız önerilir.
Kullanıcı arayüzü metni yazarken:
- Cümle 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ılmaması gerekenler | Yapılması gerekenler |
|---|---|
|
|
|
Yükleme sonrası ipucu
Yükleme sonrası ipucunuz, kullanıcılar eklentinizi yükledikten hemen sonra gösterilir ve Yardım bölümünde de gösterilir. Kullanıcıların hızlı bir şekilde başlamasına yardımcı olacak birkaç cümleniz var.
- Eylem kelimesiyle başlayın.
- Eklentinizi kullanmayla ilgili ilk adımı açıklayın.
- Kenar çubuğu gibi bir ana kullanıcı arayüzünüz varsa nasıl açılacağını açıklayın.
- Eklentinizin tanıtımını burada yapmayın. Eklenti zaten yüklü.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
 |
 |
Menü öğeleri
Normal Apps Komut Dosyası projelerinin aksine, eklentiler komut dosyası düzenleyicide veya komut dosyası yöneticisinde görünmez. Kullanıcılar eklenti komut dosyalarını doğrudan çalıştıramaz. Bunun yerine her eklenti, eklentiler menüsünde bir yer alır. Menü (ve muhtemelen bir iletişim kutusu veya kenar çubuğu), kullanıcıların eklentiyle etkileşim kurmasına olanak tanır.
- Menü, kullanıcıların eklentinizi kontrol etme şeklinin önemli bir parçasıdır. Bu nedenle, menünün yapısını ve kelimelerini dikkatlice tasarlayın.
- Eklentinizin adını olduğu gibi tekrarlayan menü öğelerinden kaçının. Bunun yerine, bir fiil sözcüğüyle başlayın.
- Ana menü öğeniz bir iş akışını başlatıyorsa ve ne yaptığını açıklayan tek bir fiil yoksa öğeyi "Başlat" olarak adlandırın. Bu desen, Dokümanlar eklentisi hızlı başlangıç kılavuzunda kullanılır.
- Menünüzde altıdan fazla öğe yoksa alt menü kullanmamaya çalışın. Bunlar hassas olabilir ve seçmek zor olabilir.
- Menü öğesinin görüntülediği kullanıcı arayüzü bileşenini değil, görevi açıklayın.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
 |
 |
Hata mesajları
Bir sorun oluştuğunda basit bir dil kullanmak önemlidir. Sorunu kullanıcının bakış açısından açıklayın ve nasıl düzeltileceğini önerin.
- Kullanıcının, kodunuzun oluşturduğu istisnaları görmesine izin vermeyin. Bunun yerine, istisnaları yakalamak için
try...catchifadesi kullanın ve ardından eklentiler CSS paketindekierrorsınıfında biçimlendirilmiş satır içi metin içeren kullanıcı dostu bir hata mesajı veya uyarı iletişim kutusu gösterin. - Yayınlamadan önce, eklentinizin JavaScript konsoluna hata ayıklama bilgilerini günlüğe kaydetmediğini kontrol edin. Bunun yerine Stackdriver günlük kaydını kullanın.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
 |
 |
Yardım içeriği
Her eklentinin menüsünde otomatik bir Yardım iletişim kutusu bulunur. Yayınlarken bir yardım URL'si sağlarsanız "Daha fazla bilgi" düğmesi bu sayfaya yönlendirir. Eklentiniz açıklayıcı değilse lütfen nasıl kullanılacağını açıklayan bir sayfa sağlayın.
- Mümkünse talimatları madde işaretli veya numaralı listede gösterin. Kullanıcıları, adlandırılmış kullanıcı arayüzü öğelerine net referanslar vererek sonuca kadar yönlendirin.
- Talimatlarınızda, belirli bir şekilde e-tablo oluşturma gibi tüm gereksinimlerin net bir şekilde açıklandığından emin olun.
- Ana kullanıcı arayüzünüzden yardım içeriğinizin bağlantısını da paylaşabilirsiniz. Eklentiniz yeni bir doküman oluşturuyorsa talimatları dokümanın gövdesinde de gösterebilirsiniz.
Özel kullanıcı arayüzleri
Bazı basit Düzenleyici eklentileri tamamen menüleri aracılığıyla kontrol edilebilir ancak çoğu, özel içerik içeren bir yan panel veya iletişim kutusu gösterir.
- Kenar çubukları, kullanıcıların doküman veya e-tablolarının içeriğine referans verirken tekrar tekrar kullanması muhtemel kalıcı araçlar için idealdir.
- İletişim kutuları, tek kullanımlık araçlar, ayarlar sayfaları ve önemli mesajlar için en iyi seçenektir.
Kullanıcı arayüzü metni
Herhangi bir iletişim kutusunda veya kenar çubuğunda kullanıcıların yalnızca başlığı ve düğme etiketlerini okuduğunu varsayın. Kullanıcılar, arayüzünüzün ne yaptığını anlayıp iyi bir seçim yapabilir mi?
- Başlık ve düğme etiketleri kendi başına anlaşılır olmalıdır.
- Açıklayıcı metinlerin uzun bloklar halinde kullanılmasından kaçının.
İletişim kutuları
İletişim kutuları, kullanıcıların bir kez kullanıp başka bir uygulamaya geçtiği araçlar için idealdir. Örneğin, eklentiniz kullanıcıların grafik eklemesine izin veriyorsa eklenecek öğelerin seçeneklerini içeren bir iletişim kutusu gösterebilir ve grafik eklendiğinde iletişim kutusunu kapatabilirsiniz. İletişim kutuları, eklentinizin ayarlarını görüntülemek veya önemli bir mesajı iletmek için de yararlıdır.
- Başka bir iletişim kutusunda uyarı veya istem dahil olmak üzere iletişim kutusu açmayın. Aynı anda yalnızca bir iletişim kutusu gösterin.
- İletişim başlığı için en önemli kelimeyle başlayan bir kelime veya kısa bir ifade kullanın.
- Düğme etiketleri iletişim kutusu başlığıyla ilgili olmalıdır.
- Genellikle birincil işlem ve "İptal" olmak üzere iki düğme tercih edin. Üçüncü bir düğme gerektiren özel durumlar için sağ alt köşeyi kullanabilirsiniz.
- İletişim kutusunun sol alt köşesine düğmeler ekleyin. Mavi birincil düğme solda, gri ikincil düğmeler ise sağda olmalıdır.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
 |
 |
Kenar çubukları
Kenar çubukları, kullanıcıların seçim yaparken dokümanlarına, e-tablolarına, sunumlarına veya formlarına geri dönmelerine olanak tanır. Ayrıca kullanıcıların eklentinizi tekrar tekrar kullanmasına izin verirler. Yeni bir kenar çubuğu açıldığında önceki kenar çubukları otomatik olarak kapanır. Bu modlar, kullanıcının işine yarayan geçici modlar için idealdir.
- Kullanıcıların kendi kenar çubuklarına sahip başka eklentileri olabilir. İki eklenti aynı anda kenar çubuğu açmaya çalışırsa yalnızca biri gösterilir.
- Bir doküman ilk açıldığında kenar çubuğu veya iletişim kutusu göstermeyin.
- Yalnızca
AuthMode.FULLmodunda çalışan eklentiler kenar çubuklarını veya iletişim kutularını açabilir. Kenar çubuğu açmak için bir menü öğesi kullanabilirsiniz. Bu, kullanıcıdan tam yetkilendirme sağlamasını ister.
Denetimler
Mükemmel eklenti kullanıcı arayüzleri, kontrolleri için biraz nefes alacak yer bırakır. Yeterli kenar boşlukları ve dolgu, kullanıcıların rahatça gezinmesine yardımcı olur. Aksi takdirde, yoğun kontroller kullanıcıları bunaltabilir. Şüpheye düştüğünüz durumlarda, düzenleyiciden bir düzen ödünç alın. Örneğin, kendi iletişim kutunuzu oluştururken Google Dokümanlar'daki mevcut iletişim kutularını (ör. Dosya > Sayfa ayarları) inceleyin.
Eklentiler CSS paketi dokümanlarında, aşağıdaki kontrol türlerinin her biri için örnek işaretlemeler sağlanır.
Düğmeler
Kullanıcı arayüzünüzün ana işlemlerini kontrol etmek için basit bağlantılar veya diğer öğeler yerine düğmeler kullanın.
- Aynı anda birden fazla mavi, kırmızı veya yeşil düğme göstermekten kaçının. Gri düğmeler tekrar tekrar görünebilir.
- Düğme etiketlerinin çoğu büyük harfli olmalı ve bir fiille başlamalıdır. Genellikle işlem oluşturmak için kullanılan kırmızı düğmelerde büyük harf kullanılmalıdır.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
|
|
|
Onay kutuları ve radyo düğmeleri
Kullanıcıların birden fazla seçenek veya hiç seçenek seçemediği durumlarda onay kutularını kullanın. Tam olarak bir seçenek seçilmesi gerektiğinde radyo düğmelerini (veya bir seçim menüsünü) kullanın.
- Onay kutularının davranışını radyo düğmelerini taklit edecek şekilde değiştirmeyin.
- Bu öğeler kontrol edildiğinde hemen bir işlem yapmayın. Herkes hata yapar. Kullanıcılarınızın seçimlerini onaylamak için bir düğmeyi tıklamasını bekleyin.
Menüleri seçme
Seçimler, kısa bir alternatif listesi sunmanın mükemmel bir yoludur.
- Seçenekleri alfabetik olarak veya tüm kullanıcıların anlayabileceği mantıklı bir plana göre (ör. pazardan itibaren haftanın günleri) sıralayın.
- Liste çok uzun olursa farklı bir kontrol kullanabilirsiniz. Örneğin, menüye daha fazla alan açmak ve gezinmeyi kolaylaştırmak için kaydırılabilir bir liste gösterebilirsiniz.
Metin alanları
Kullanıcıların birkaç kelimeden fazla yazması gerekiyorsa metin alanı kullanın.
- Metin alanlarının daha kolay kullanılabilmesi ve metin alanlarına benzememesi için en az iki satır yüksekliğinde olmasını sağlayın.
- Etiketleri en üste yerleştirin.
Metin alanları
Kullanıcıların yalnızca bir veya iki kelime yazması gerekiyorsa metin alanları kullanın.
- Metin alanının genişliği, kullanıcıların bu alana ne yazmasını beklediğinizi göstermelidir.
- Odaklandığında kaybolduğu için yer tutucu metni etiket olarak kullanmaktan kaçının. Yer tutucu metin, örnek veya ek ayrıntı vermek için kullanışlıdır.
- Etiketleri en üste yerleştirin ancak kısa metin alanlarını yan yana yerleştirebilirsiniz.
Marka bilinci oluşturma
Eklentilerinizde
Marka öğeleri eklemek istiyorsanız kısa ve hafif bir şekilde ekleyin. Bu, kullanıcıların kullanıcı arayüzünüze odaklanmasına yardımcı olur ve eklentinizin düzenleyicinin bir parçası gibi görünmesini sağlar.
- Eklentinizin tüm yönleri markalaşma kurallarına uygun olmalıdır.
- "Google" kelimesini eklemeyin veya Google ürün simgelerini kullanmayın.
- Metin en fazla birkaç kelimeden oluşmalı ve eklentiler CSS paketindeki
graysınıfında biçimlendirilmelidir. - Grafikler beyaz arka plan üzerinde olmalı ve en fazla 200 piksel × 60 piksel boyutunda olmalıdır.
- İletişim kutularında marka, sağ alt köşede olmalıdır.
- Kenar çubuklarında marka, üstte veya altta olabilir.
Mağazada
Düzenleyici eklentisi yayınlamak için birkaç resim öğesine ihtiyacınız vardır. Bu öğeler, eklenti mağaza girişini oluşturmak için kullanılır.
- Mağaza girişinizin tüm yönleri markalaşma kurallarına uygun olmalıdır.
- Sağlamanız gereken resimler hakkında daha fazla bilgi için resim kurallarına bakın.
Erişilebilirlik
Renkleri farklı gören, ekran okuyucu kullanan veya başka ihtiyaçları olan herkes eklentinizin keyfini çıkarabilmelidir. Erişilebilirlik, bu stil kılavuzunda tam olarak ele alınamayacak kadar geniş bir konudur. Google Erişilebilirlik sitesi faydalı bir kaynaktır. Başlamadan önce, işinize yarayacak birkaç ipucu vereceğiz:
- Klavyeyle tüm kullanıcı arayüzü denetimlerine gidebiliyor olmanız gerekir. Kullanıcıların sekme tuşuyla bu kontrollere ulaşabilmesi için özel denetimlere (
<div>ile oluşturulanlar gibi)tabindex=0ekleyin. Liste için ok tuşları gibi diğer tuşların da desteklenmesi gerekip gerekmediğini değerlendirin. - Bazı kullanıcılar eklentinizle birlikte ekran okuyucu kullanabilir. Bu nedenle, resimlerin
altözelliği, özel kontrollerin ise kullanımlarını açıklayan ARIA özellikleri olmalıdır. - Durumu iletmek için yalnızca renge güvenmeyin. Simge ve metin 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.