Gerçek tema takma adları, tipografi ve köşe yarıçapı ölçekleri, eksiksiz bir yanıt oluşturucu, görünürlüğü gözeten yerel taslaklar ve alan kurtarma özellikleri içeren bir Garden destek çalışması kılavuzu.
Zendesk Garden Tasarım Sistemi Destek Çalışma Alanı Yapısı
Müşteri talebini görünür tutun
Destek yanıtı hazırlama alanı, özenle yazılmış ancak alakasız bir yanıtı önlemek için yeterli bağlam sunmalıdır. Bu örnekte müşteri talebi, taslağın üzerinde; talep sahibi, kuruluş ve konuyla birlikte gösterilir. Arayüz, ekranlar arasında geçiş yapmadan yeni metni özgün soruyla karşılaştırmaya yetecek kadar yoğundur.
Geçmişi etkin taslaktan ayırın
Kaydedilen yerel kayıtlar, açık bir görünürlük etiketiyle yazma alanının üzerinde gösterilir. Etkin taslak yerel Textarea içinde kalır. Kaydetme işlemi bir anlık görüntü ekleyip alanı temizler; böylece sonraki düzenlemeler daha önce kaydedilmiş bir notu fark edilmeden değiştiremez.
Zendesk Garden Tasarım Sistemi Tema Rolleri ve Paleti
Renkleri kopyalamadan önce takma adları inceleyin
Garden 9 DEFAULT_THEME, anlamsal rolleri renk tonu ailelerine ve numaralı palet değerlerine eşler. background.primaryEmphasis gibi bir rol, sabit bir onaltılık değer değildir. Referans tablosu bu takma adları korur; böylece özel bir tema, yerel denetimlerde sabit kodlanmış mavi parçalar bırakmadan ana renk tonunu değiştirebilir.
Yazar tarafından oluşturulan bölgeleri sağlayıcıyla uyumlu tutun
ThemeProvider yerel bileşen stillerini sağlar. Bu örnekte DEFAULT_THEME ve buna uygun açık temalı özel bir çalışma alanı kullanılır; yalnızca çevreleyen arka planı değiştiren sahte bir koyu mod düğmesi eklenmez. Renk şeması desteği ekliyorsanız özel mesaj ve kenar çubuğu renklerini de sağlayıcıyla uyumlu hâle getirin.
Zendesk Garden Tasarım Sistemi Tipografi ve Yoğunluk
14px çalışma metnini okunaklı tutun
Varsayılan tema; 14px orta ağırlık rolü ve 20px orta satır yüksekliğinin yanı sıra ayrı 12px destekleyici metin ve 18px başlık rolleri sunar. Örnekte 26px destek talebi başlığı ve daha küçük bağlam meta verileri kullanılır. Özgün müşteri mesajı ve kaydedilen notlar, sıkıştırılmış etiketler yerine normal gövde metni olarak kalır.
Uzun yanıtların doğal biçimde satıra kaymasını sağlayın
Kaydedilen metin satır sonlarını korur ve uzun sözcükleri satıra sığdırır. Böylece dar bir mobil ekranda yatay kaydırma gerekmeksizin notun tamamı görüntülenir. Oluşturma alanı metin alanıyla dikey olarak büyür; tüm mesaj geçmişi dahili bir kaydırma kutusuna dönüşmez.
Zendesk Garden Tasarım Sistemi Alan ve Düğme Bileşimi
Etiketi, ipucunu ve hatayı birbiriyle ilişkilendirin
Yerel Field; Label, Hint, Textarea ve koşullu Message öğelerini bir arada gruplar. Doğrulama özelliği, yazılmış asgari uzunluk kuralı karşılanmadığında metin alanının görünümünü değiştirir. Bu yaklaşım, hata rengini alanın dışındaki ilgisiz bir paragrafa uygulamak yerine bileşen bileşimini izler.
Görünürlük için ayrı bir denetim kullanın
Zendesk Garden Tasarım Sistemi Taslak Durumu ve Yerel Geçmiş
Mesaj eklemeden önce doğrulayın
Uygulama, boşlukları kırpılmış metnin en az on iki karakter olmasını gerektirir. Gönderim başarısız olursa taslak olduğu gibi kalır, alanla ilgili bir ileti gösterilir ve metin alanına odaklanılır. Düzenleme yapıldığında eski hata temizlenir; sonraki gönderimde güncel metin yeniden denetlenir. Bu kural uygulama davranışıdır, belgelenmemiş bir Garden varsayılanı değildir.
Dahili notları görsel olarak ayırt edin
Dahili kayıtlarda sıcak tonlu, yazara özgü bir arka plan ve yazıyla belirtilmiş Dahili not taslağı etiketi bulunur. Herkese açık kayıtlar normal yüzey rengini kullanır. Her ikisinde de gönderilmediği açıkça belirtilir. Bu ayrım, gerçek bir Zendesk görüşmesini taklit etmeden veya başka bir kişinin bir ileti aldığını ima etmeden görünürlük bağlamını gösterir.
Zendesk Garden Tasarım Sistemi Duyarlı Çalışma Alanları
Bağlamı ana görevin altına taşıyın
Uygulamanın kırılma noktasında destek talebi bağlamı, konuşma ve yanıt hazırlama alanının altına taşınır. Temel belgedeki sıralama değişmez. Telefonda görünürlük denetimi kullanılabilir genişliğin tamamını kaplar, işlem satırı ise düğme etiketlerinin sıkışmaması için satır kaydırır.
Ölçülü köşe yarıçapları ve ince ayırıcılar kullanın
Yerel denetimlerde 2px, 4px ve 8px köşe yarıçapı ölçeğinden yararlanılır. Özgün mesaj panellerinde 4px köşeler ve ince kenarlıklar kullanılır. Daha güçlü görsel vurgu, her mesajın etrafındaki gölgelere değil, etkin işleme ve doğrulama durumuna ayrılmalıdır.
Zendesk Garden Tasarım Sistemi Doğrulaması ve Klavyeyle Kurtarma
Taslak akışının tamamını sınayın
Yararlı bir denetim, geçersiz bir gönderimle başlar; ardından yazma, görünürlüğü değiştirme, kaydetme ve temizleme işlemlerinin arayüzün anlaşılır kalmasını sağladığını doğrular. Kaynakta, hata veya temizleme işleminden sonra odağı geri yüklemek için React ref kullanılır. Sonuç sayısı bir durum bölgesinde duyurulur.
Kısa bir taslak gönderip alan hatasını kontrol edin.
Dahili not'u seçin, yararlı bir not yazın ve kaydedin.
Daha sonra başka bir taslağı temizleyin ve kaydedilen yerel anlık görüntünün durduğunu doğrulayın.
Kararlı bir okuma sırasını koruyun
Talep, taslaktan önce gelir; yeni kaydedilen yerel anlık görüntüler kronolojik sırada tutulur. Yerel düğmeler yaptıkları işlemi metinle belirtir. Yanıt hazırlama alanında gizli klavye kısayolları veya otomatik gönderme davranışı bulunmaz ve görünürlük seçeneği etiketli bir seçim alanı olarak kalır.
Zendesk Garden Tasarım Sistemi React Entegrasyonu
Birbiriyle uyumlu paket nesillerini yükleyin
Örnekte tema, düğme ve form paketleri 9.16.1 sürümüne sabitlenmiştir; React 18 ve styled-components kullanılır. Daha eski Garden paket nesillerini karıştırmak, tema beklentilerinin uyuşmamasına yol açabilir. Tam JSX girişi sağlayıcıyı, alan bileşimini ve yerel durumu içerirken CSS dosyası yalnızca yazara özgü düzeni içerir.
@zendeskgarden/react-theming 9.16.1
@zendeskgarden/react-buttons 9.16.1
@zendeskgarden/react-forms 9.16.1
Yalnızca eksik hizmet katmanını genişletin
Zendesk Garden Tasarım Sistemi Bileşen Örnekleri
main.jsx — eksiksiz çalışan örnek
Müşteri bağlamını görüntülerken yanıt taslağı hazırlayın. Aşağıdaki kaynak, tüm durum ve doğrulama mantığını içeren eksiksiz React girişidir.
jsx
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider, DEFAULT_THEME } from "@zendeskgarden/react-theming";
import { Button } from "@zendeskgarden/react-buttons";
import {
Field,
Label,
Textarea,
Hint,
Message,
Select,
} from "@zendeskgarden/react-forms";
import "./garden.css";
function App() {
const [mode, setMode] = useState("public"),
[text, setText] = useState(""),
[error, setError] = useState(false),
[items, setItems] = useState([]);
const ref = useRef();
function submit(e) {
e.preventDefault();
if (text.trim().length < 12) {
setError(true);
ref.current.focus();
return;
}
setItems([...items, { mode, text: text.trim() }]);
setText("");
setError(false);
}
return (
<ThemeProvider theme={DEFAULT_THEME}>
<main className="garden-workspace">
<header>
<span>SUPPORT WORKSPACE / FICTIONAL TICKET</span>
<h1>Help with an invoice address</h1>
<p>Ticket #1028 · Nadia Walker · Email channel</p>
</header>
<div className="garden-grid">
<section>
<div className="message customer">
<strong>Nadia Walker</strong>
<small>Customer · example message</small>
<p>
Could you update the company address on our next invoice? The
billing contact has changed.
</p>
</div>
{items.map((i, n) => (
<article className={"message " + i.mode} key={n}>
<strong>
{i.mode === "public"
? "Public reply draft"
: "Internal note draft"}
</strong>
<small>Saved locally · not sent</small>
<p>{i.text}</p>
</article>
))}
<form onSubmit={submit} noValidate>
<div className="composer-head">
<h2>Compose a draft</h2>
<Field>
<Label>Visibility</Label>
<Select
value={mode}
onChange={(e) => setMode(e.target.value)}
>
<option value="public">Public reply</option>
<option value="internal">Internal note</option>
</Select>
</Field>
</div>
<Field>
<Label>
{mode === "public" ? "Reply text" : "Internal note"}
</Label>
<Hint>
{mode === "public"
? "Prepared for the customer; this demo will not send it."
: "Internal context for the support team; saved only in this page."}
</Hint>
<Textarea
ref={ref}
value={text}
rows={5}
validation={error ? "error" : undefined}
onChange={(e) => {
setText(e.target.value);
setError(false);
}}
/>
{error && (
<Message validation="error">
Write at least 12 characters.
</Message>
)}
</Field>
<div className="composer-actions">
<span>{text.length} characters</span>
<Button
type="button"
onClick={() => {
setText("");
setError(false);
ref.current.focus();
}}
>
Clear draft
</Button>
<Button isPrimary type="submit">
Save local draft
</Button>
</div>
</form>
<p role="status">
{items.length > 0
? `${items.length} draft${items.length === 1 ? "" : "s"} saved locally. No message sent.`
: ""}
</p>
</section>
<aside>
<h2>Ticket context</h2>
<dl>
<dt>Requester</dt>
<dd>Nadia Walker</dd>
<dt>Organization</dt>
<dd>Northstar Studio</dd>
<dt>Priority</dt>
<dd>Normal</dd>
<dt>Topic</dt>
<dd>Billing details</dd>
</dl>
<div className="context-note">
<h3>Before replying</h3>
<ul>
<li>Confirm the billing contact.</li>
<li>Keep invoice identifiers out of public examples.</li>
<li>State whether the change affects future invoices.</li>
</ul>
</div>
</aside>
</div>
<footer>
Native Garden 9.16.1 React components. Original local drafting
workflow; no Zendesk connection.
</footer>
</main>
</ThemeProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
Yerel Field/Label/Hint/Textarea/Message bileşimiyle bir Garden destek mesajı oluşturucu hazırlayın. Her kaydedilen taslak anlık görüntüsünde görünürlüğü koruyun, eklemeden önce doğrulayın, müşteri bağlamını koruyun ve yerel kaydetme ile göndermeyi birbirinden ayırın. Buradaki tema rollerini ve kaynak kodun tamamını aynen kullanın.
05
Zendesk Garden Tasarım Sistemi Kaynakları ve Kapsamı
OpenDesign uygulama kılavuzu. Örnek bileşen, yerel Garden bileşenleriyle oluşturulur; kurmaca destek kaydı içeriği ve yerel taslaklar Zendesk'e bağlanmaz veya mesaj göndermez.
