# Samsung One UI Tasarım Sistemi

## Samsung One UI Tasarım Sistemi Arayüz Önizlemesi

Görünümü değiştirin, %200 okuma metnini inceleyin ve sıfırlamayı iptal edin ya da onaylayın.

## 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.

### Yayımlanmış yerleşim ve erişim gereksinimleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Side margins | At least 24dp on left and right | Yerel yerleşim referansı; dp değerlerini sessizce CSS piksel olarak yeniden etiketlemeyin. |
| Viewing and interaction areas | Viewing above; frequently used interaction below | Bağlamı ve erişilebilir eylemleri bilinçli şekilde düzenleyin; bu bir yerleşim ilkesidir, sabit bir ekran yüksekliği oranı değildir. |
| Cutout handling | Adapt placement to camera cutouts and orientation | Temel içeriği cihazın çentiğinin arkasına yerleştirmeyin. |
| Text resizing | Up to 200% without losing content or function | Yayımlanmış erişilebilirlik yönergeleri; tarayıcı incelemesi, açıkça belirtilen okuma boyutu denetimiyle paragrafın yeniden akışını gösterir. |
| Target separation | Large enough touch areas with space between them | Herkese açık metin burada sayısal bir alt sınır belirtmez; örnekteki 48px denetimler özgün bir web tercihidir. |
### Yayımlanmış etkileşim kuralları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Complex gestures | Provide an alternative action | Bir görevi tamamlamanın tek yolu olarak sürüklemeyi veya çoklu parmak etkileşimini kullanmayın. |
| Automatic content | Provide control for moving content over 5 seconds | İncelemede otomatik karusel veya zamanla kaybolan içerik yoktur. |
| Error recovery | Clear message and focus on the next useful action | Görünür metin ve net bir kurtarma eylemi kullanın. |
| Screen transitions | Feedback and an explicit way back | Sıfırlama iletişim kutusu, iptal seçeneği ve klavyedeki Escape tuşuyla kurtarma olanağı sunar. |
| Focus blocks | Subdued surfaces for function-focused content | Renk rolleriyle ilgili yönergeler; resmî bir belirteç dışa aktarımıymış gibi sayısal renk paleti uydurulmamıştır. |
### Özgün tarayıcı incelemesi tercihleri — Samsung belirteçleri değildir

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --study-background | #F3F3F6 | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
| --study-card | #FFFFFF | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
| --study-text | #17171C | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
| --study-action | #2557C8 | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
| Card radius | 24px | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
| Minimum control height | 48px | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
| Reading-size options | 100%, 150%, 200% | Bu bağımsız tarayıcı yorumlaması için hazırlanmıştır. Bu değer resmî bir One UI tasarım belirteci olarak sunulmaz. |
## Samsung One UI 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ı.

## 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

Paragrafta normal metin ve yazı boyutuyla birlikte ölçeklenen satır yüksekliği kullanılır. Test edilen en dar genişlikte sözcükler kart içinde satır sonundan bölünür ve içerik belge sırasına göre erişilebilir kalır. Bu, yeniden akışın tek bir örneğini gösterir; üretim arayüzünde ayrıca tüm etiketler, çeviriler ve gerçek kullanıcı içeriği yerel erişilebilirlik ayarlarıyla test edilmelidir.

## 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.

1. Sağlanan, kendi içinde eksiksiz HTML belgesini kaydedin.

2. Dizinini yerel olarak sunun ve önizlemeyi açın.

3. %200 okuma boyutunu ve her iki görünüm modunu test edin.

4. İ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.

```
<!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>
```

Kod referansı

- 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.

## 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.

```
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Projeniz İçin Bir İstem

```
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.
```

## 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.

- One UI ilkeleri Görüntüleme, etkileşim ve uyarlanabilir deneyim.

- Izgara sistemi 24dp kenar boşlukları, kesikler ve cihaz bağlamları.

- Yerleşim ve tipografi %200 metin ölçekleme ve hedeflerin ayrılması.

- Etkileşim ve denetim Kurtarma, alternatif giriş ve açık gezinme.

- Renk sistemi Sade odak alanları ve amaca yönelik renk rolleri.

## Samsung One UI Tasarım Sistemi İlgili Kaynaklar

### SAP Fiori

UI5 Web Components aracılığıyla SAP Fiori’ın Horizon temasını kullanın: gerçek tema parametreleri, açık içerik yoğunluğu, anlamsal değer durumları ve yerel doğrulama içeren bir satın alma talebi düzeni.

### SEEK Braid

Temaya özel değişkenler, dört gerçek kesme noktası, bağlama uygun metin, farklı düğme tonları ve eylemi devre dışı bırakmak yerine doğrulamayı açıklayan denetimli bir alan içeren özgün bir iş arama düzeniyle Braid’i anlayın.

### Segment Evergreen

Gerçek tema değerleri, denetimli etiket girişi, kurallarla canlı eşleşme, boş durumdan kurtarma akışı ve yerel inceleme iletişim kutusu içeren bir Evergreen örneği.


- [Uygulama başvurusu](https://developer.samsung.com/one-ui/index.html)
- [Kaynak](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [Kaynak](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Kaynak](https://developer.samsung.com/one-ui/color/system.html)
- [Kod referansı](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [One UI ilkeleri Görüntüleme, etkileşim ve uyarlanabilir deneyim.](https://developer.samsung.com/one-ui/index.html)
- [Izgara sistemi 24dp kenar boşlukları, kesikler ve cihaz bağlamları.](https://developer.samsung.com/one-ui/layout/grid.html)
- [Yerleşim ve tipografi %200 metin ölçekleme ve hedeflerin ayrılması.](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [Etkileşim ve denetim Kurtarma, alternatif giriş ve açık gezinme.](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [Renk sistemi Sade odak alanları ve amaca yönelik renk rolleri.](https://developer.samsung.com/one-ui/color/system.html)