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'de geliştirildiği için büyük ölçüde özelleştirilebilir. Ancak eklenti arayüzünüzü oluştururken mükemmel bir kullanıcı deneyimi sunacak şekilde tasarlamanız gerekir.
En iyi eklentiler, alışık olduğunuz kontrolleri ve davranışları kullanarak her düzenleyiciyi doğal bir şekilde genişletir. Yeni bir eklenti oluştururken:
- HTML hizmeti sayfalarınızda eklenti CSS paketini kullanın.
- Tasarımla ilgili şüpheye düşerseniz düzenleyicide benzer bir iletişim kutusu veya kenar çubuğu bulup eşleştirin ya da bir eklenti hızlı başlangıç kılavuzuna göz atın.
- Sorunsuz bir deneyim oluşturmak için bu stil kılavuzundaki talimatları uygulayın.
Metin
Eklenti adı
Eklentiyi yayınlarken eklentinin adını belirlemeniz gerekir. Bu ad, eklenti mağazası ve menüler gibi birçok yerde görünür.
- Yalnızca ilk harfler büyük olsun.
- Markanızın bir parçası olmadığı sürece noktalama işaretleri, özellikle de parantezler kullanmaktan kaçının.
- Kısa tutun. 30 veya daha az karakter kullanmanız önerilir. Uzun adlar otomatik olarak kısaltılabilir.
- Eklentinin ait olduğu Google ürününün adını eklemeyin (veya Google kelimesini kullanın).
- Sürüm bilgilerini girmeyin.
- 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 şey yazmanız gerekmez. Çoğu eylem; ikon, düzen ve kısa etiketlerle açıkça belirtilmelidir. Eklentinizin bir bölümünün kısa etiketlerin sağlayabileceğinden daha kapsamlı bir açıklamaya ihtiyacı olduğunu fark ederseniz, eklentinizi açıklayan ve bağlantısını açıklayan ayrı bir web sayfası oluşturmak en iyi uygulamadır.
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ısaltmalar içermeyen, kısa ve basit metinler tercih edin.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
|
|
|
Yükleme sonrası ipucu
Yükleme sonrası ipucunuz, birisi eklentinizi yükledikten hemen sonra görüntülenir ve Yardım'da da gösterilir. Kullanıcıların hızlı bir başlangıç yapmasına yardımcı olmak için birkaç cümleniz var.
- Bir eylem kelimesiyle 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 nasıl açacağınızı açıklayın.
- Eklentiniz zaten yüklü olduğundan burada tanıtımını yapmayın.
| Yapılmaması gerekenler | Yapılması gerekenler |
|---|---|
 |
 |
Menü öğeleri
Normal Apps Komut Dosyası projelerinden farklı olarak 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şimde bulunmasına olanak tanır.
- Menü, kullanıcıların eklentinizi denetlemesinin önemli bir parçasıdır. Bu nedenle, eklentinin yapısını ve kelimelerini dikkatli bir şekilde tasarlayın.
- Eklentinizin adını yalnızca tekrar eden menü öğeleri kullanmaktan kaçının. Bunun yerine bir eylem kelimesiyle başlayın.
- Ana menü öğeniz bir iş akışına başlıyorsa ve işlevini açıklayan tek bir fiil yoksa buna "Başlat" adını verin. Bu kalıp Dokümanlar eklentisi hızlı başlangıç kılavuzunda kullanılır.
- Menünüzde altıdan fazla öğe yoksa, alt menüleri kullanmamaya çalışın. Titiz olabilirler ve seçmeleri zor olabilirler.
- 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 şeyler ters gittiğinde sade bir dil kullanmak önemlidir. Sorunu kullanıcının bakış açısından açıklayın ve nasıl düzeltilebileceğiyle ilgili öneride bulunun.
- Kullanıcının, kodunuzun attığı istisnaları görmesine izin vermeyin. Bunun yerine, istisnalara müdahale etmek için
try...catchifadelerini kullanın. Ardından, eklentiler CSS paketindekierrorsınıfında veya bir uyarı iletişim kutusunda satır içi metin stili oluşturulmuş, kullanıcı tarafından hemen anlaşılan bir hata mesajı görüntüleyin. - Yayınlamadan önce, eklentinizin hata ayıklama bilgilerini JavaScript konsoluna kaydetmediğinden emin olun. Bunun yerine Stackdriver Logging'i 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ınlama sırasında bir yardım URL'si sağlarsanız "Daha fazla bilgi" düğmesi bu sayfaya bağlantı verir. Eklentiniz yeterince açık değilse, lütfen eklentinin nasıl kullanılacağını açıklayan bir sayfa sağlayın.
- Mümkün olduğunda, talimatları madde işaretli veya numaralı listede gösterin. Adlandırılmış kullanıcı arayüzü öğelerine açık referanslarla kullanıcıları nihai sonuca yönlendirin.
- Talimatlarınızda bir elektronik tabloyu belirli bir şekilde hazırlamak gibi tüm gerekliliklerin net bir şekilde açıklandığından emin olun.
- Ana kullanıcı arayüzünden yardım içeriğinize bağlantı vermekten de çekinmeyin. Eklentiniz yeni bir doküman oluşturursa talimatları dokümanın gövdesinde de görüntüleyebilirsiniz.
Özel kullanıcı arayüzleri
Bazı basit Düzenleyici Eklentileri, tamamen kendi menülerinden kontrol edilebilir. Ancak çoğunda, özel içerik barındıran bir kenar çubuğu veya iletişim kutusu görüntülenir.
- Kenar çubukları, kullanıcıların dokümanlarının veya e-tablolarının içeriğine atıfta bulunurken tekrar tekrar kullanmaları olası olan kalıcı araçlar için en uygun seçenektir.
- İletişim kutuları tek kullanımlık araçlar, ayar sayfaları ve önemli iletiler 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ı öğrenip iyi bir seçim yapabilir mi?
- Kendi başına duran bir başlık ve düğme etiketleri kullanın.
- Uzun açıklayıcı metin bloklarından kaçının.
İletişim kutuları
Diyaloglar, insanların bir kez kullanıp sonraki aşamalara geçmelerini sağlamak için mükemmeldir. Örneğin, eklentiniz kullanıcıların grafik eklemesine izin veriyorsa, ne ekleneceğine dair seçenekler içeren bir iletişim kutusu görüntüleyebilir ve grafik eklendiğinde iletişim kutusunu kapatabilirsiniz. Diyaloglar, eklentinizin ayarlarını görüntülemek veya önemli bir mesajı iletmek için de yararlıdır.
- Başka bir iletişim kutusunda bulunan iletişim kutularını (uyarı veya istem dahil) açmayın, her defasında yalnızca bir tane gösterin.
- Diyalog başlığı için, en önemli kelimeyle başlayan bir kelime veya kısa ifade kullanın.
- Düğme etiketleri iletişim kutusu başlığıyla alakalı olmalıdır.
- Genellikle birincil işlem ve "İptal" olmak üzere iki düğmeyi tercih edin. Üçüncü bir düğme gerektiren özel durumlar için sağ alt köşeyi değerlendirin.
- Düğmeleri iletişim kutusunun sol alt köşesine yerleştirin. 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, sunularına veya formlarına başvuruda bulunmalarını sağlar. Ayrıca, kullanıcıların eklentinizi tekrar tekrar kullanmasına olanak tanır. Yeni bir kenar çubuğu açıldığında, önceki herhangi bir kenar çubuğu otomatik olarak kapanır. Bu ayarlar, işim bittiğinde kullanıcının çıkış yaptığı geçici modlar için idealdir.
- Kullanıcıların kendi kenar çubukları olan başka eklentileri olabilir. İki eklenti, kenar çubuklarını aynı anda açmaya çalışırsa yalnızca bir tanesi gösterilir.
- Bir doküman ilk açıldığında kenar çubuğu veya iletişim kutusu görüntülenmez.
- Kenar çubuklarını veya iletişim kutularını yalnızca
AuthMode.FULLiçinde çalışan eklentiler açabilir. Kenar çubuğu, kullanıcıdan tam yetkilendirme sağlamasını istediğinden bir menü öğesi kullanarak kenar çubuğu açabilirsiniz.
Denetimler
Harika eklenti kullanıcı arayüzleri, denetimlerine biraz alan bırakır. Yeterli kenar boşlukları ve dolgu uzun işe yarar ancak yoğun kontroller bunaltıcı görünebilir. Şüpheye düştüğünüzde editörün kendisinden bir düzen ödünç alın. Örneğin, kendi iletişim kutunuzu oluştururken Google Dokümanlar'daki Dosya > Sayfa düzeni gibi mevcut iletişim kutularını gözden geçirin.
Eklentiler CSS paketi dokümanlarında, aşağıdaki her bir denetim türü için örnek işaretleme bulunmaktadır.
Düğmeler
Kullanıcı arayüzünüzün ana işlemlerini kontrol etmek için düz bağlantılar veya diğer öğeler yerine düğmeleri 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.
- Çoğu düğme etiketi cümle düzeninde olmalı ve bir fiil ile başlamalıdır. Genellikle oluşturma işlemlerinde kullanılan kırmızı düğmelerde tamamen büyük harf kullanılmalıdır.
| Yapılmaması gerekenler | 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. Tam olarak bir seçeneğin belirlenmesi gereken durumlarda 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 edildikten hemen sonra başka bir işlem yapmayın. İnsanlar hata yapabilir. Kullanıcılarınızın seçimlerini onaylamak için bir düğmeyi tıklayana kadar bekleyin.
Menüleri seçin
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ıksal bir şemaya göre (ör. haftanın günleri, Pazar'dan başlayarak) sıralayın.
- Liste çok uzarsa farklı bir kontrol kullanmayı düşünün. Örneğin, menüye daha fazla alan sağlamak ve gezinmeyi kolaylaştırmak için kaydırılabilir bir liste görüntüleyebilirsiniz.
Metin alanları
Kullanıcıların birkaç kelimeden fazlasını yazması gerekiyorsa bir metin alanı kullanın.
- Metin alanlarının kullanımını kolaylaştırmak ve metin alanı gibi görünmemeleri için metin alanlarını en az iki satır uzunluğunda tutun.
- Etiketleri ü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ı istediğiniz şeyi göstermelidir.
- Yer tutucu metin odakta kaybolacağından etiket olarak kullanmaktan kaçının. Örnek vermek veya daha fazla ayrıntı vermek için yer tutucu metin faydalıdır.
- Etiketleri üste yerleştirin, ancak kısa metin alanlarını yan yana yerleştirmekten çekinmeyin.
Marka
Eklentinizde
Markaya yer vermek istiyorsanız kısa ve öz bir başlık kullanın. Bu sayede kullanıcılar kullanıcı arayüzünüze odaklanır ve eklentiniz düzenleyicinin bir parçası gibi görünür.
- Eklentinizin tüm özellikleri marka bilinci oluşturma kurallarına uygun olmalıdır.
- "Google" kelimesini eklemeyin veya Google ürün simgelerini kullanmayın.
- Metin birkaç kelimeden uzun olmamalıdır ve eklentiler CSS paketindeki
graysınıfında olmalıdır. - Grafikler, beyaz bir arka plan üzerinde ve en fazla 200 × 60 piksel boyutunda olmalıdır.
- İletişim kutuları için marka bilinci oluşturma sağ alt köşede olmalıdır.
- Kenar çubukları için markalama ü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 unsurları marka bilinci oluşturma kurallarına uygun olmalıdır.
- Sağlamanız gereken resimler hakkında daha ayrıntılı bilgi için resim kurallarına bakın.
Erişilebilirlik
Renkleri farklı gören, ekran okuyucu kullanan veya başka ihtiyaçları olan herkes eklentinizden yararlanabilmelidir. Erişilebilirlik, bu stil kılavuzunda tam olarak ele alamayacağınız geniş bir konudur. Faydalı kaynaklardan biri Google Erişilebilirlik sitesidir. Ancak, başlamak için birkaç ipucunu burada bulabilirsiniz:
- Tüm kullanıcı arayüzü kontrollerine klavyeyle gidebildiğinizden emin olun. Kullanıcıların sekme tuşuna basarak özel kontrollere (
<div>ile yapılanlar gibi)tabindex=0ekleyin. Liste için oklar gibi diğer tuşların da desteklenip desteklenmediğini düşünün. - Bazı kullanıcılar, eklentinizle birlikte bir ekran okuyucu kullanabilir. Bu nedenle, resimlerin bir
altözelliği ve özel kontrollerin 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 denetimleri kullanıyorsanız eklentinizi erişilebilir hale getirmek daha kolay olur.