Özgün ve eksiksiz bir okuma tercihleri önizlemesi üzerinden One UI’ın görüntüleme ve etkileşim yapısını, 24dp kenar boşluğu yönergelerini ve %200 metin ölçekleme gereksinimini inceleyin. Koyu görünüm ve açık sıfırlama kurtarma akışı da içerir.
Özgün HTML/CSS/JavaScript; Samsung platform bileşenleri yerine yerel tarayıcı denetimleri ve iletişim kutusu. · Uygulama başvurusu
02
Samsung One UI Tasarım Sistemi Tasarım Referansı
Samsung'un herkese açık yerleşim ve erişilebilirlik yönergeleri; özgün CSS incelemesine yönelik tercihler ayrıca etiketlenmiştir. Yayımlanmamış renk paleti, yazı tipi veya bileşen API değeri uydurulmamıştır.
Samsung One UI Tasarım Sistemi One UI Tasarım Yönergeleri ve Tarayıcı Kapsamı
One UI'ı platform yönergeleri olarak ele alın
One UI; telefonlar, daha büyük ekranlar ve katlanabilir cihazlar dâhil Samsung cihazlarındaki etkileşimleri tanımlar. Genel amaçlı bir web bileşen paketi değildir. Sunulan örnek, okuma tercihleri üzerine özgün bir tarayıcı incelemesidir. Görüntüleme alanı, alt etkileşim alanı ve açık kurtarma seçeneklerini gösterir; Samsung bileşenlerini çalıştırdığı veya cihaz ayarlarını değiştirdiği iddiasında bulunmaz.
Uygulama değerlerini gerçeğe uygun biçimde belirtin
Referansta yayımlanmış gereksinimler ile tarayıcı için hazırlanmış değerler birbirinden ayrılır. Yerel 24dp kenar boşluğu özgün birimiyle kaydedilir; önizlemedeki 24px iç boşluk ise bilinçli bir web yorumlamasıdır. Mavi, gri yüzeyler ve 24px kart köşe yarıçapı, bu inceleme için belirlenmiş özgün değerlerdir. Bu ayrım, bir yapay zekâ aracısının görsel olarak inandırıcı bir CSS değişkenini doğrulanmış bir Samsung belirteci sanmasını önler.
dp ile CSS px değerlerini birbirinden ayrı tutun.
Özgün renk paleti ve köşe yarıçapı tercihlerini özgün olarak etiketleyin.
Tarayıcı önizlemesini Samsung sistem ayarı olarak tanımlamayın.
Samsung One UI Tasarım Sistemi Görüntüleme Alanı ve Erişilebilir Eylemler
Açılış alanına işlevsel bir rol verin
Üst bölge, Okuma tercihleri başlığını ve kısa bir bağlam satırını içerir. Altında gruplandırılmış ayarlar ve bir okuma örneği görevi tamamlar. Uygula ve sıfırla eylemleri bu gruplardan sonra yer alır. Bu yapı, başlığın kolayca okunmasını sağlarken ilgisiz denetimleri dekoratif bir cihaz çerçevesinin çevresine dağıtmak yerine anlamlı eylemleri bir arada tutar.
Cihazı taklit etmek yerine yapıyı uyarlayın
Tarayıcı incelemesinde işletim sistemi durum çubuğu, kamera çentiği veya cihaz izinleri yoktur. Dar yerleşimde tüm ayarlar kullanılabilir durumda kalır ve eylem satırı dikey olarak düzenlenebilir. Yerel uygulamalar gerçek güvenli alanları, çentikleri, yön değişikliklerini ve katlanabilir cihazlardaki değişiklikleri hesaba katmalıdır. Duyarlı bir tarayıcı ekran görüntüsü, cihaza özgü bu davranışları doğrulayamaz.
Samsung One UI Tasarım Sistemi Sakin Yüzeyler ve Açık Görünüm Seçenekleri
İlgili içeriği gruplandırmak için arka plan blokları kullanın
Her ayar ve okuma örneği, sakin bir kart yüzeyinde yer alır. Etkileşimli seçenekleri eylem rengi, açıklayıcı metni ise ayrı ve daha soluk bir rol belirtir. Koyu görünüm, açık arayüzün üzerine koyu bir katman eklemek yerine aynı rolleri değiştirir. Bu CSS renklerinin tümü özgün yorumlama değerleridir ve indirilebilir kaynakta buna göre etiketlenmiştir.
Görünüm değiştiğinde ayarları koruyun
Görünüm onay kutusu yalnızca önizlemenin temasını etkiler. Seçili okuma boyutunu temizlemez ve Samsung sistem tercihini değiştirdiği izlenimini vermez. Uygulama, seçeneklerden biri değiştiğinde daha önceki uygulama onayını temizler; böylece durum iletisi artık geçerli olmayan bir durumu bildirmez.
Samsung One UI Tasarım Sistemi Okuma Boyutu ve Yeniden Akış
%200 durumunu açıkça gösterin
Okuma boyutu denetimi %100, %150 ve %200 seçenekleri sunar. Örnek paragrafın yazı boyutunu değiştirir ve kartın içeriğe göre doğal biçimde büyümesini sağlar. Metin kırpılmaz, bitişik denetimlerin üzerine binmez ve ikinci bir sabit yükseklikli alan gerektirmez. Bu denetim özellikle bir okuma örneği içindir; tüm tarayıcıların veya işletim sistemlerinin yazı tipi ayarlarını değiştirdiği iddiasında bulunmaz.
Metnin tamamının okunabilir kalmasını sağlayın
Samsung One UI Tasarım Sistemi Uygulama, Sıfırlama ve İletişim Kutusu Odağı
Eyleme uygun onay ifadeleri kullanın
Bu önizlemeye uygula seçeneği, seçilen görünümü ve okuma yüzdesini bildirir. İleti, hiçbir şeyin cihaza gönderilmediğini açıkça belirtir. Hızla kaybolan bir bildirim yerine kalıcı bir durum iletisi kullanılır; böylece okurun sonucu incelemek için yeterli zamanı olur. Ayarlardan biri değiştirildiğinde önceki onay temizlenir.
Sıfırlamayı açık bir tercih hâline getirin
Sıfırla, Tercihleri koru ve Sıfırla eylemlerini içeren yerel bir tarayıcı iletişim kutusu açar. İptal ve Escape, iki geçerli tercihi de korur. Sıfırlama onaylandığında açık görünüm ve standart boyut geri yüklenir, ardından odak iletişim kutusunu açan eyleme döner. Durum değişikliğinin tamamı kaynak kodda uygulanmıştır; belirsiz bir işleyici varmış gibi anlatılmaz.
Samsung One UI Tasarım Sistemi Eksiksiz Tarayıcı İncelemesi ve Yerel Uygulamaya Geçişte Sonraki Adımlar
Uydurma One UI bağımlılığı olmadan çalıştırın
Eksiksiz HTML belgesi tüm stilleri, içeriği ve JavaScript bileşenini içerir. index.html adıyla kaydedip yerel olarak sunun. Harici yazı tipi veya çalışma zamanı isteği göndermez ve Samsung SDK gerektirmez. Yerel uygulamaya geçerken gerçek platform denetimleri, yoğunluk birimleri, erişilebilirlik hizmetleri ve yapılandırma değişiklikleri için resmî One UI ve Android kaynaklarını kullanın.
Sağlanan, kendi içinde eksiksiz HTML belgesini kaydedin.
Dizinini yerel olarak sunun ve önizlemeyi açın.
%200 okuma boyutunu ve her iki görünüm modunu test edin.
İptal, Escape ve onaylanmış sıfırlama akışlarını ayrı ayrı doğrulayın.
Hataları ortaya çıkaran işlem sırasını test edin
Koyu görünümü ve %200 okuma boyutunu seçip uygulayın ve onayı inceleyin. Sıfırlama penceresini açın, iptal edin ve her iki seçimin de korunduğunu doğrulayın. Escape tuşuyla tekrarlayın, ardından sıfırlamayı onaylayıp değerlerin ve odağın geri döndüğünü doğrulayın. Büyütülmüş paragrafı masaüstü ve telefon genişliklerinde inceleyerek hiçbir sözcüğün veya denetimin kırpılmadığını kontrol edin.
Samsung One UI Tasarım Sistemi Bileşen Örnekleri
index.html — okuma tercihleri çalışmasının tamamı
Eksiksiz yerleşim, açık/koyu temadaki roller, metin ölçeği denetimi ve iptal edilebilir sıfırlama iletişim kutusu.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences study</title><style>
/* Original web-study values, not exported Samsung design tokens. */
:root{--study-background:#f3f3f6;--study-card:#fff;--study-text:#17171c;--study-muted:#5b5b66;--study-action:#2557c8;--study-border:#d9d9e1;--study-text-scale:1}*{box-sizing:border-box}body{margin:0;background:var(--study-background);font-family:Arial,sans-serif;color:var(--study-text)}body.dark{--study-background:#101014;--study-card:#222228;--study-text:#f7f7fb;--study-muted:#bbbbc8;--study-action:#9bbaff;--study-border:#41414c}main{max-width:980px;padding:32px;margin:auto}.context{font-size:13px;line-height:1.6;color:var(--study-muted);max-width:74ch}.phone{max-width:560px;margin:32px auto;background:var(--study-background)}.viewing{padding:40px 24px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.viewing p{font-size:14px;margin:0 0 16px;color:var(--study-muted)}h1{font-size:40px;line-height:1.15;margin:0;letter-spacing:-.025em}h2,.setting-title{font-size:20px;line-height:1.4;margin:0}section.settings{padding:0 24px}.card{border-radius:24px;background:var(--study-card);padding:24px;margin-bottom:16px}.setting{display:flex;gap:24px;justify-content:space-between;align-items:center}.setting p{font-size:14px;line-height:1.5;color:var(--study-muted);margin:8px 0 0}input[type=checkbox]{width:28px;height:28px;accent-color:var(--study-action);flex-shrink:0}label{cursor:pointer}.field{display:grid;gap:12px}select,button{font:inherit}select{width:100%;border:1px solid var(--study-border);border-radius:12px;padding:12px;background:var(--study-card);color:var(--study-text);min-height:48px}.sample{font-size:calc(16px * var(--study-text-scale));line-height:1.55;overflow-wrap:anywhere;margin:16px 0 0}.actions{padding:16px 24px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}button{border:0;border-radius:999px;min-height:48px;padding:12px 16px;color:var(--study-action);background:var(--study-card);font-weight:700;cursor:pointer}.primary{background:var(--study-action);color:var(--study-background)}:focus-visible{outline:3px solid var(--study-action);outline-offset:4px}dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:24px;padding:24px;background:var(--study-card);color:var(--study-text)}dialog::backdrop{background:#0008}dialog p{line-height:1.6}dialog .dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}#confirmation{font-size:14px;line-height:1.5;padding:0 24px 16px;color:var(--study-muted)}#confirmation:empty{display:none}@media(max-width:600px){main{padding:16px}.phone{margin:16px auto}.viewing{padding:32px 24px}.card{padding:20px}.actions{grid-template-columns:1fr}.setting{gap:16px}h1{font-size:34px}h2,.setting-title{font-size:18px}}
</style></head><body><main><p class="context">OpenDesign original One UI-inspired web study. This demonstrates viewing and interaction areas, readable settings and explicit recovery. It does not control a Samsung device or run native One UI components.</p><div class="phone"><header class="viewing"><p>Make space to read</p><h1>Reading preferences</h1></header><section class="settings" aria-label="Reading preferences"><div class="card"><label class="setting"><span><strong class="setting-title">Dark appearance</strong><p>Use a darker surface in this preview.</p></span><input type="checkbox" id="dark" aria-label="Dark appearance"></label></div><div class="card"><label class="field" for="size"><strong class="setting-title">Reading size</strong><select id="size"><option value="1">Standard · 100%</option><option value="1.5">Large · 150%</option><option value="2">Extra large · 200%</option></select></label></div><div class="card"><h2>A moment to pause</h2><p class="sample">A clear page gives each idea room to breathe. Keep the words that help the reader decide what to do next.</p></div></section><div class="actions"><button id="reset">Reset preferences</button><button class="primary" id="apply">Apply to this preview</button></div><p id="confirmation" role="status"></p></div><dialog aria-labelledby="reset-title"><h2 id="reset-title">Reset reading preferences?</h2><p>This returns the preview to its light appearance and standard reading size.</p><div class="dialog-actions"><button id="cancel">Keep preferences</button><button id="confirm-reset" class="primary">Reset</button></div></dialog><p class="context">Published references include the 24dp side-margin guidance and text scaling up to 200%. CSS pixels here are an original browser interpretation of the layout; app colors and radii are explicitly original. Reading-size changes affect the sample paragraph so its reflow can be inspected. No preference is saved beyond this page.</p></main><script>
const dark=document.querySelector('#dark'),size=document.querySelector('#size'),confirmation=document.querySelector('#confirmation'),dialog=document.querySelector('dialog');function refresh(){document.body.classList.toggle('dark',dark.checked);document.documentElement.style.setProperty('--study-text-scale',size.value);confirmation.textContent='';}dark.onchange=refresh;size.onchange=refresh;document.querySelector('#apply').onclick=()=>{confirmation.textContent=`Applied to this preview: ${dark.checked?'dark':'light'} appearance, ${Math.round(Number(size.value)*100)}% reading size. Nothing was sent to a device.`};document.querySelector('#reset').onclick=()=>dialog.showModal();document.querySelector('#cancel').onclick=()=>dialog.close();document.querySelector('#confirm-reset').onclick=()=>{dark.checked=false;size.value='1';refresh();dialog.close();confirmation.textContent='Light appearance and standard reading size restored.';};dialog.addEventListener('close',()=>document.querySelector('#reset').focus());
</script></body></html>
Study önekli renkler ve boyutlar, web için özgün tercihlerdir.
Okuma ölçeği örnek paragrafı değiştirir; tarayıcı veya cihaz tercihleri değiştirilmez.
04
Samsung One UI Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Bu, özgün tarayıcı çalışmasını çalıştırır. Bu örnekte One UI npm paketi veya yerel Samsung çalışma zamanı yoktur.
sh
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan One UI esintili okuma çalışmasını, açıkça özgün bir tarayıcı yorumu olarak oluşturun. Görüntüleme ve etkileşim alanlarını, %200 ölçekte duyarlı metin akışını, açık görünüm durumunu, yalnızca yerel onayı, iptal edilebilir sıfırlamayı ve odağın geri dönmesini koruyun. Yerel dp gereksinimlerini özgün CSS piksel kararlarından ayrı tutun.
05
Samsung One UI Tasarım Sistemi Kaynakları ve Kapsamı
One UI ilkelerinin özgün bir OpenDesign tarayıcı yorumu. Yerel bir One UI çalışma zamanı değildir ve cihaz ayarlarını değiştirmez. Yayınlanmış gereksinimler ile web için özgün değerler referansta ayrı tutulmuştur.
