# ServiceNow Horizon Tasarım Sistemi ## ServiceNow Horizon Tasarım Sistemi Arayüz Önizlemesi Taslakları kayıtlar arasında koruyun, bir isteği incelendi olarak işaretleyin ve filtreleme ya da yeniden açma sonrasında kaldığınız yerden devam edin. ## ServiceNow Horizon Tasarım Sistemi Tasarım Referansı Yayımlanmış Horizon Workspace boşluk, köşe yarıçapı ve tipografi referansları. Özgün uygulama renkleri bu resmî referans tablosuna bilerek dahil edilmemiştir. ### Yayımlanmış Workspace boşlukları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | $now-global-space--xxs | 2px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--xs | 4px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--sm | 8px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--md | 12px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--lg | 16px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--xl | 24px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--xxl | 32px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | | $now-global-space--3xl | 40px | Yayımlanmış Sass referans adları aynen verilmiştir; bunlar uydurma CSS özel özellikleri değildir. | ### Yayımlanmış köşe yarıçapları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | now-global-border-radius--sm | 2px | Yayımlanmış tasarım referansı. Küçük değerler kompakt etiketlere, orta değerler iç içe kontroller için, büyük değerler ise kapsayıcılar için uygundur. | | now-global-border-radius--md | 6px | Yayımlanmış tasarım referansı. Küçük değerler kompakt etiketlere, orta değerler iç içe kontroller için, büyük değerler ise kapsayıcılar için uygundur. | | now-global-border-radius--lg | 8px | Yayımlanmış tasarım referansı. Küçük değerler kompakt etiketlere, orta değerler iç içe kontroller için, büyük değerler ise kapsayıcılar için uygundur. | ### Yayımlanmış tipografi rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Heading family | Cabin | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | Body family | Lato | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | header-hero | 32px | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | header-primary | 24px | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | header-secondary | 20px | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | header-tertiary | 16px | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | title-primary | 20px | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | | title-secondary | 16px | Belgelenmiş Workspace tipografi rolleri. Çalışma, Cabin ve Lato yazı tiplerinin herkese açık dosyalarını yerel olarak yükler. | ## ServiceNow Horizon Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## ServiceNow Horizon Tasarım Sistemi Workspace ve Uygulama Kapsamı ### Uygulama çerçevesiyle başlayın > Horizon, ServiceNow için çeşitli uygulama çerçevelerini kapsar. Bu sayfa Workspace'e odaklanır: kuyruk ve seçili kayıt birlikte görünür, böylece inceleyen kişi bağlamı kaybetmeden yerel işler arasında geçiş yapabilir. Service Portal, Native Mobile ve Core UI'ı birbirinin yerine kullanılabilecek görünümler olarak sunmaz. Canlı çalışma, gömülü bir ServiceNow örneği değil, özgün bir HTML uygulamasıdır. ### Doğrulanmış temelleri özgün tercihlerden ayırın Referans, yayımlanmış boşluk adlarını, yarıçap değerlerini ve tipografi rollerini aynen verir. Çalışmadaki yeşil eylem rengi, nötr yüzeyler ve odak mavisi, uygulama önekiyle tanımlanan özgün OpenDesign değerleridir. Bunların resmî Horizon token dışa aktarımları olduğu iddia edilmez. Eksiksiz örneği çalıştırmak için uydurma bir ServiceNow paket kurulumu veya platform API gerekmez. ## ServiceNow Horizon Tasarım Sistemi Workspace Boşluk, Yarıçap ve Tipografi ### Gerçek boşluk dizisini kullanın Belgelenen ölçek 2, 4, 8, 12, 16, 24, 32 ve 40px değerlerinden oluşur. Çalışma, bu değerleri kuyruk ile kayıt arasındaki aralığı, kayıt içindeki dolguyu ve meta veriler arasındaki daha küçük mesafeleri ayırt etmek için kullanır. Aynı adım tekrarlandığında bile bu değerler farklı gruplama ilişkilerine hizmet eder. Her yere eşit dolgu uygulanan bir ekran bu hiyerarşiyi kaybettirirdi. ### Başlıklar ve okuma metni için ayrı roller belirleyin Yayımlanmış yazı tipi ailesi rollerine uygun olarak başlıklarda Cabin, gövde metninde Lato kullanılır. Çalışmada geniş ekranlarda 32px sayfa başlığı, 24px kayıt başlığı kullanılır. Yarıçap referansları varsayılan 4/8/12 dizisi yerine 2, 6 ve 8px değerleridir. Yuvarlatılmış durum etiketleri, durumu yalnızca şekil veya renkle belirtmez; Open ya da Reviewed sözcüklerini de içerir. ## ServiceNow Horizon Tasarım Sistemi Kuyruk, Seçili Kayıt ve Filtreleme ### Tek bir seçili kaydı koruyun Kuyruktaki her eylem bir uygulama isteğinin adını, sahibini ve durumunu gösterir. İstek seçildiğinde bitişiğindeki ayrıntılar doldurulur ve yeni başlığa odaklanılır. Seçili eylemde aria-current ve görünür bir kenarlık stili kullanılır. Bu, yerel bir Horizon bileşeni API değil, özgün bir liste/ayrıntı düzenidir; incelenebilmesi için tüm durum mantığı sağlanmıştır. ### Filtre seçimi kaldırdığında durumu düzeltin Durum filtresi görünür kuyruğu daraltır. Seçili istek artık filtrelenen kümeye dahil değilse uygulama, eşleşen ilk isteği seçer. Eşleşen istek kalmazsa boş durum mesajı ve Tüm istekleri göster eylemi görüntülenir. Sayı hesabında payda olarak üç kaydın tamamı kullanılır. Filtreleme kayıtları silmez veya durumlarını sessizce değiştirmez. - Seçili kaydı geçerli filtrelenmiş kümede tutun. - Kümede kayıt olmadığında anlaşılır bir boş durum gösterin. - Verileri silmeden Tüm istekleri göster eylemiyle durumu düzeltin. ## ServiceNow Horizon Tasarım Sistemi Taslak Notları ve İnceleme Doğrulaması ### Taslakları ilgili kayda bağlı tutun İnceleyen kişi yazarken metin alanı, ilgili kaydın taslağını günceller. Başka bir isteğe geçip geri dönmek taslağı korur. Boş veya yalnızca boşluk içeren bir not, isteğin incelendi olarak işaretlenmesini engeller: satır içi bir hata görüntülenir, aria-invalid ayarlanır ve odak metin alanına döner. Veri modeli, kaydedilmiş notu ve geçerli taslağı açıkça ayrı tutar. ### Yerel durum geçişini gözlemlenebilir kılın İnceleme başarıyla tamamlandığında kırpılmış not kaydedilir ve kaydın durumu Reviewed olarak değiştirilir. Kuyruk, geçerli filtreye göre yeniden hesaplanır ve durum mesajında etkilenen kayıt belirtilir. Ayrıca hiçbir kaydın ServiceNow'a gönderilmediği açıkça ifade edilir. Böylece görsel bir onayın, örneğin gerçekleştirmediği bir platform işlemi yapılmış izlenimi vermesi önlenir. ## ServiceNow Horizon Tasarım Sistemi Yeniden Açma ve Erişilebilir Geri Bildirim ### Yeniden açarken yararlı çalışmaları koruyun İsteği yeniden açma eylemi, incelenmiş bir kaydı kaydedilmiş notunu koruyarak Open durumuna döndürür. Yalnızca Reviewed filtresi etkinse liste boş kalabilir; kurtarma eylemi tam kuyruğu geri yükler. Bu birleşim; her düğmeyi tek başına denetlemekten daha fazlasını ortaya koyarak kayıt durumu, filtreleme ve seçili ayrıntı arasındaki ilişkiyi sınar. ### Metni, odağı ve durumu birlikte kullanın Durum renkleri metin etiketleriyle birlikte kullanılır. Doğrulama, üzerinde çalışılması gereken alana odaklanır; kayıtlar arasında gezinme başlığa odaklanır ve yerel güncellemeler durum bölgesi üzerinden bildirilir. Çalışma, üretim ortamındaki bir Workspace'in yardımcı teknolojilerle test edilmesi gerekliliğini ortadan kaldırmaz. Bu testlerin başlayabileceği, incelenebilir ve eksiksiz bir yerel akış sunar. ## ServiceNow Horizon Tasarım Sistemi Eksiksiz Yerel Kaynak ve Kontroller ### Herkese açık yazı tipi bağımlılıklarını yükleyin Sağlanan giriş dosyası, Cabin ve Lato yazı tiplerinin herkese açık paketlerini ve özgün bileşim stil sayfasını içe aktarır. HTML kabuğu kök öğeyi sağlar. Bu örnekte ServiceNow çalışma zamanı, kimlik bilgileri veya uç noktası yoktur. Gerçek platform entegrasyonu, yerel kayıt dizisini ServiceNow API sözleşmesi olarak ele almak yerine Horizon'ın Workspace ve geliştirici kaynakları üzerinden başlatılmalıdır. 1. Herkese açık yazı tipi bağımlılıklarını vanilla uygulamasına yükleyin. 2. Eksiksiz giriş dosyasını, stil sayfasını ve kök HTML kabuğunu kaydedin. 3. İncelemeyi kaydetmeden önce taslağın korunduğunu doğrulayın. 4. Durum filtrelemeyi yeniden açma ve boş durum kurtarmayla birlikte sınayın. ### Birbirine bağlı iş akışını denetleyin Boş bir not gönderin, bir taslak yazın, başka bir isteği ziyaret edin ve taslağın korunduğunu doğrulamak için geri dönün. Kaydı incelendi olarak işaretleyin, Reviewed filtresini uygulayın ve kaydı yeniden açın. Boş durumdan kurtarma adımını ve notun korunduğunu denetleyin. Dar ekranlarda kuyruk, hiçbir eylemi kaybetmeden ayrıntıların üstünde sıralanır. Bu durum değişikliklerinin yanı sıra yazı tipi yüklemesi, JavaScript hataları ve yatay taşma da denetlenir. ## ServiceNow Horizon Tasarım Sistemi Bileşen Örnekleri ### main.js — kuyruk ve inceleme mantığının tamamı Tüm kayıtlar, taslaklar, filtreler, doğrulama ve kurtarma adımları. ``` import '@fontsource/cabin/latin-600.css'; import '@fontsource/lato/latin-400.css'; import '@fontsource/lato/latin-700.css'; import './horizon.css'; const records=[{id:'REQ-104',title:'Review the workshop outline',owner:'Design team',priority:'Normal',detail:'Compare the proposed agenda with the decision the team needs to make. Capture one question that should be resolved before the workshop.'},{id:'REQ-105',title:'Check the shared resource list',owner:'Content team',priority:'High',detail:'Review the resource titles for clear action language and confirm that each summary explains when the resource is useful.'},{id:'REQ-106',title:'Prepare the research readout',owner:'Research team',priority:'Normal',detail:'Group the observations by theme. Keep direct observations separate from the team’s interpretation and include the questions still open.'}].map(x=>({...x,status:'Open',note:''}));let selected=records[0].id; document.querySelector('#root').innerHTML=`

OpenDesign · Workflow study

Team review workspace

Review three original practice requests. Update a local record while keeping the queue and details in context.

`; function renderQueue(){let filter=document.querySelector('#filter').value,visible=records.filter(x=>filter==='All'||x.status===filter);if(!visible.some(x=>x.id===selected))selected=visible[0]?.id;const queue=document.querySelector('#queue');queue.replaceChildren(...visible.map(r=>{let b=document.createElement('button');b.className='queue-item';b.dataset.id=r.id;b.setAttribute('aria-current',String(r.id===selected));b.innerHTML=`${r.id}${r.title}${r.owner}${r.status}`;b.onclick=()=>{selected=r.id;renderQueue();renderDetail();document.querySelector('#record-title')?.focus()};return b}));document.querySelector('#queue-count').textContent=`${visible.length} of ${records.length} requests`;document.querySelector('#empty').hidden=visible.length>0;document.querySelector('#clear').hidden=visible.length>0;} function renderDetail(){const r=records.find(x=>x.id===selected),panel=document.querySelector('#detail');if(!r){panel.innerHTML='

Choose another status

All local requests are still available through the status filter.

';return}panel.innerHTML=`

${r.id} · ${r.owner}

${r.title}

${r.detail}

Priority
${r.priority}
Status
${r.status}

Write one useful observation. This note remains in the page.

`;const note=panel.querySelector('#note');note.value=r.draft??r.note;note.oninput=()=>{r.draft=note.value;document.querySelector('#error').hidden=true;note.removeAttribute('aria-invalid');document.querySelector('#feedback').textContent=''};panel.querySelector('#review').onsubmit=e=>{e.preventDefault();if(!note.value.trim()){document.querySelector('#error').hidden=false;note.setAttribute('aria-invalid','true');note.focus();return}r.note=note.value.trim();r.draft=r.note;r.status='Reviewed';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reviewed locally. No record was sent to ServiceNow.';document.querySelector('#record-title')?.focus();};panel.querySelector('#reopen').onclick=()=>{r.status='Open';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reopened. The saved review note is retained.';document.querySelector('#record-title')?.focus();};} document.querySelector('#filter').onchange=()=>{renderQueue();renderDetail();document.querySelector('#feedback').textContent=''};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All';renderQueue();renderDetail();document.querySelector('#filter').focus()};renderQueue();renderDetail(); ``` Kod referansı - Tüm davranışlar, resmî bir Workspace bileşeni API değil, özgün uygulama kodudur. ### horizon.css — özgün bileşim Belgelenmiş tipografi/boşluk/yarıçap referansları ve uygulama önekli özgün renkler. ``` :root{--app-ink:#21342c;--app-action:#285c47;--app-surface:#f2f5f3;--app-border:#c9d3cd;--app-error:#a32424;--app-radius-small:2px;--app-radius-medium:6px;--app-radius-large:8px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Lato,Arial,sans-serif;color:var(--app-ink);background:var(--app-surface)}main{max-width:1160px;margin:auto;padding:32px}h1,h2,h3{font-family:Cabin,Arial,sans-serif;font-weight:600;line-height:1.25}h1{font-size:32px;margin:8px 0 16px}h2{font-size:24px;margin:8px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}header>p:last-child{max-width:68ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}.toolbar label{display:flex;gap:12px;align-items:center}select,textarea,button{font:inherit}select{padding:8px;border:1px solid var(--app-border);border-radius:6px;background:white;color:var(--app-ink)}.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:24px}nav{align-self:start}.queue-item{display:grid;gap:8px;width:100%;text-align:left;margin-bottom:12px;background:white;border:1px solid var(--app-border);border-radius:8px;padding:16px;color:var(--app-ink);cursor:pointer}.queue-item[aria-current=true]{border:2px solid var(--app-action);padding:15px;background:#e8f0ea}.queue-item strong{font-size:16px}.record-id,.queue-item>span{font-size:14px}.status{justify-self:start;border-radius:2px;padding:2px 8px;background:#e8eeeb}.status.reviewed{background:#d0ead9}.workspace section{background:white;padding:24px;border:1px solid var(--app-border);border-radius:8px;min-width:0}dl{display:flex;gap:40px;margin:24px 0}dt{font-size:14px;color:#58685f}dd{margin:4px 0;font-weight:700}form>label{font-weight:700}.hint{font-size:14px;margin:8px 0}textarea{width:100%;padding:12px;border:1px solid #6b7f72;border-radius:6px;resize:vertical;color:var(--app-ink)}button{border:1px solid #6b7f72;border-radius:6px;background:white;padding:8px 16px;color:var(--app-ink);cursor:pointer}.primary{background:var(--app-action);color:white;border-color:var(--app-action)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.error{color:var(--app-error);font-weight:700}.hint,.error{max-width:60ch}#feedback:empty{display:none}#feedback{background:#d0ead9;padding:16px;border-radius:6px}footer{font-size:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--app-border)}:focus-visible{outline:3px solid #477fd0;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.workspace section{padding:16px}h1{font-size:24px}.eyebrow{overflow-wrap:anywhere}} ``` Kod referansı - Özgün renk değerleri resmî Horizon token'ları olarak tanımlanmamalıdır. ### index.html — kök kabuk Bağımsız uygulamanın tam giriş noktası. ``` Team review study
``` Kod referansı - Kök Vite index.html dosyasını bu dosyayla değiştirin. ## ServiceNow Horizon Tasarım Sistemi Aracı Kurulumu ### Uygulamaya Başlangıç Noktası Bu yalnızca özgün çalışmayı çalıştırır. Yerel ServiceNow uygulaması için uygun platform geliştirme ortamı gerekir. ``` npm create vite@latest horizon-study -- --template vanilla cd horizon-study npm install npm install @fontsource/cabin@5.3.0 @fontsource/lato@5.3.0 # Save index.html at root; main.js and horizon.css in src. npm run dev ``` ### Projeniz İçin Bir İstem ``` Doğrulanmış Horizon Workspace tipografi, boşluk ve yarıçap referanslarını kullanarak özgün istek inceleme çalışmasının tamamını oluşturun. Özgün renkleri app- önekiyle koruyun. Kayıt başına taslakları koruyun, incelemeden önce doğrulama yapın, durum değişikliklerinden sonra filtrelenmiş seçimi yeniden hesaplayın, yeniden açıldığında notları koruyun ve boş durumdan kurtarma olanağı sağlayın. Canlı bir ServiceNow bağlantısı olduğunu iddia etmeyin. ``` ## ServiceNow Horizon Tasarım Sistemi Kaynakları ve Kapsamı Horizon Workspace temellerinden yararlanan özgün bir OpenDesign HTML/CSS çalışmasıdır. Özgün renkler ve iş akışı mantığının yanı sıra belgelenmiş Cabin/Lato tipografisini ve boşluk/yarıçap değerlerini kullanır. Bir ServiceNow örneği veya yerel Workspace çalışma zamanı değildir. - Workspace genel bakışı Çerçeve bağlamı ve ilgili kaynaklar. - Boşluklar Modüler ölçek ve Sass referans adları aynen. - Köşe yarıçapı Yayımlanmış 2/6/8px değerleri. - Tipografi Cabin/Lato ve boyut rolleri. - Renk yönergeleri Amaç ve renkten bağımsız durum ipuçları. ## ServiceNow Horizon Tasarım Sistemi İlgili Kaynaklar ### ServiceTitan Anvil Anvil2’yi üç katmanlı belirteç modeli, doğrulanmış açık/koyu rol değerleri ve teknisyen, saat ve inceleme durumlarını eşzamanlı güncelleyen eksiksiz bir hizmet atama etkileşimiyle somutlaştırın. ### Siemens iX Açık bir önem derecesi sözlüğü, temaya duyarlı renk rolleri ve iX Event List API ile endüstriyel olayları inceleyin. Bu kılavuz, incelenmiş bir kaydı giderilmiş bir makine alarmıyla karıştırmadan yerel bir ekipman defteri oluşturur. ### Sprout Social Seeds Karma seçim, filtrelenmiş boş durumlar ve geri alma özelliklerine sahip eksiksiz bir editoryal inceleme kuyruğunda Seeds’in gerçek herkese açık renk, boşluk, ürün tipografisi ve kenarlık belirteçlerini inceleyin. - [Uygulama başvurusu](https://horizon.servicenow.com/workspace/overview) - [Kaynak](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Kaynak](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Kaynak](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Kod referansı](https://horizon.servicenow.com/workspace/overview) - [Workspace genel bakışı Çerçeve bağlamı ve ilgili kaynaklar.](https://horizon.servicenow.com/workspace/overview) - [Boşluklar Modüler ölçek ve Sass referans adları aynen.](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Köşe yarıçapı Yayımlanmış 2/6/8px değerleri.](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Tipografi Cabin/Lato ve boyut rolleri.](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Renk yönergeleri Amaç ve renkten bağımsız durum ipuçları.](https://horizon.servicenow.com/workspace/foundations/color/color-overview)