admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
161 lines
7.6 KiB
Markdown
161 lines
7.6 KiB
Markdown
# Duolingo'dan İlham Alan Tasarım Sistemi
|
||
|
||
> Category: Üretkenlik ve SaaS
|
||
> Dil öğrenme platformu. Parlak baykuş yeşili, kalın gölgeler, oyunlaştırılmış neşe.
|
||
|
||
## 1. Görsel Tema ve Atmosfer
|
||
|
||
Duolingo, görsel dil olarak işlenmiş oyunlaştırmadır. Arayüz çekinmeden parlaktır; **baykuş yeşili** (`#58cc02`) marka birincil rengi olarak kullanılır ve her etkileşimli öğenin altında, basılmayı bekleyen bir 3D düğme gibi görünen kalın 4px alt gölgesi bulunur. Sayfa beyazdır (`#ffffff`) ve 2–3px kalın kenarlıklar koyu gri (`#e5e5e5`) renktedir; tüm sistem daha iyi hiyerarşiyle yeniden doğmuş 2015 iOS uygulaması gibi okunur.
|
||
|
||
Tipografi, krom için **Feather Bold** (özel yuvarlak köşeli sans-serif) ve gövde metni için **Mona Sans** (veya Inter) kullanır. Görüntüleme boyutları büyük ve kendinden emin — Duolingo asla fısıldamaz. Başlıklar genellikle yeşil alt çizgi darbesi taşır veya yeşil bir hap üzerinde oturur; maskot Duo (yeşil bir baykuş) statik bir logo olarak değil, aktif bir illüstrasyon karakteri olarak görünür.
|
||
|
||
Şekil dili dostanedir: kartlarda 16–20px yarıçap, düğmelerde 12px, çipler ve ilerleme çubuklarında 9999px. İkonografi dolu, yuvarlak ve beceriye göre renk kodludur — her ders yüzeyi anında tanımlanabilir bir renk çifti içerir.
|
||
|
||
**Temel Özellikler:**
|
||
- Baykuş yeşili (`#58cc02`) yüzeyin %30'undan fazlasında kullanılan baskın marka rengi
|
||
- Her düğmede 4px kalın alt gölge ("dokunsal basma" karşılığı)
|
||
- 2–3px düz kenarlıklar, asla ince çizgiler
|
||
- Feather Bold (yuvarlak görüntüleme) + Mona Sans (gövde)
|
||
- Büyük, kendinden emin metin — görüntüleme boyutları 48px'den başlayıp yükselir
|
||
- Karakter olarak maskot: Duo baykuşu katılım sürecinde, hatalarda, serilerde görünür
|
||
- Seri turuncusu (`#ff9600`) ve mücevher pembesi (`#ce82ff`) ikincil marka renkleri olarak
|
||
|
||
## 2. Renk Paleti & Roller
|
||
|
||
### Birincil
|
||
- **Baykuş Yeşili** (`#58cc02`): Marka birincili, birincil CTA, doğru cevap.
|
||
- **Koyu Baykuş Yeşili** (`#58a700`): Yeşil düğmeler için basma/gölge rengi.
|
||
- **Açık Baykuş Yeşili** (`#89e219`): Hover, yumuşak dolgular.
|
||
- **Soluk Baykuş Yeşili** (`#dbf8c5`): Yumuşak yüzey, başarı afişi.
|
||
|
||
### İkincil Vurgular
|
||
- **Seri Turuncusu** (`#ff9600`): Seri sayacı, alev ikonu, premium enerji.
|
||
- **Koyu Seri Turuncusu** (`#cc7a00`): Basılmış turuncu.
|
||
- **Mücevher Pembesi** (`#ce82ff`): Mücevher para birimi, Super Duolingo.
|
||
- **Yılan Balığı Mavisi** (`#1cb0f6`): İpucu düğmesi, bilgi bağlantısı.
|
||
- **Kardinal Kırmızı** (`#ff4b4b`): Yanlış cevap, can kaybı.
|
||
- **Arı Sarısı** (`#ffc800`): Pro rozeti, başarı.
|
||
|
||
### Yüzey
|
||
- **Kar** (`#ffffff`): Birincil arka plan.
|
||
- **Yılan Balığı** (`#f7f7f7`): Bölüm ayırıcı, ikincil yüzey.
|
||
- **Kuğu** (`#e5e5e5`): Devre dışı arka plan, gömülü blok.
|
||
- **Kurt** (`#777777`): Koyu ayırıcı, ikincil metin.
|
||
|
||
### Mürekkep & Metin
|
||
- **Yılan Balığı Siyahı** (`#3c3c3c`): Birincil metin.
|
||
- **Kurt** (`#777777`): İkincil metin, alt yazılar.
|
||
- **Tavşan** (`#afafaf`): Devre dışı, yer tutucu.
|
||
|
||
### Kenarlık
|
||
- **Kuğu** (`#e5e5e5`): Standart 2px kenarlık.
|
||
- **Tavşan** (`#afafaf`): Hover'da vurgulanan kenarlık.
|
||
|
||
## 3. Tipografi Kuralları
|
||
|
||
### Yazı Tipi Ailesi
|
||
- **Görüntüleme / UI / Başlıklar**: `Feather Bold`, yedek: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
|
||
- **Gövde / Uzun Metin**: `Mona Sans`, yedek: `'Helvetica Neue', system-ui, sans-serif`
|
||
- **Kod (nadir, okullar/yönetim)**: `JetBrains Mono`, yedek: `ui-monospace, Menlo, monospace`
|
||
|
||
### Hiyerarşi
|
||
|
||
| Rol | Yazı Tipi | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Görüntüleme | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Katılım kahramanı |
|
||
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Sayfa başlığı |
|
||
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Bölüm başlığı |
|
||
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Kart başlığı, ders satırı |
|
||
| Büyük Gövde | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Ders istemi, talimat |
|
||
| Gövde | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Standart düzyazı |
|
||
| Açıklama | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP sayacı, meta veri |
|
||
| Düğme | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Standart düğme etiketi |
|
||
| Seri | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Seri sayısı, alev üzerinde |
|
||
|
||
### İlkeler
|
||
- **800 varsayılandır**: Feather Bold, başlıklarda ve düğmelerde 800 ağırlıkta çalışır. Bu sistemde 700 zayıf görünür.
|
||
- **Büyük metin**: Başlık boyutları tipik ürün markalarından %25–40 daha büyüktür — güven kimlik olarak.
|
||
- **Yuvarlak harf biçimleri**: Her glif yumuşak uçlara sahiptir; keskin serifler dostluk sözleşmesini bozar.
|
||
|
||
## 4. Bileşen Stilleri
|
||
|
||
### Düğmeler
|
||
|
||
**Birincil (Baykuş Yeşili)**
|
||
- Arka plan: `#58cc02`
|
||
- Metin: `#ffffff`
|
||
- Dolgu: 14px 24px
|
||
- Yarıçap: 16px
|
||
- Border-bottom: 4px solid `#58a700` (kalın gölge)
|
||
- Hover: arka plan `#89e219`
|
||
- Aktif: translate-y 4px, border-bottom 0 (düğme "basılır")
|
||
- Kullanım: "Devam Et", "Kontrol Et", ana CTA.
|
||
|
||
**İkincil (Alt Gölgeli Beyaz)**
|
||
- Arka plan: `#ffffff`
|
||
- Metin: `#777777`
|
||
- Kenarlık: 2px solid `#e5e5e5`
|
||
- Border-bottom: 4px solid `#e5e5e5`
|
||
- Yarıçap: 16px
|
||
- Dolgu: 14px 24px
|
||
- Hover: metin `#3c3c3c`, kenarlık `#afafaf`
|
||
|
||
**Seri Turuncusu**
|
||
- Arka plan: `#ff9600`
|
||
- Metin: `#ffffff`
|
||
- Border-bottom: 4px solid `#cc7a00`
|
||
- Kullanım: seri hedefi, "Seriyi Başlat"
|
||
|
||
**Hata (Kardinal Kırmızı)**
|
||
- Arka plan: `#ff4b4b`
|
||
- Metin: `#ffffff`
|
||
- Border-bottom: 4px solid `#cc3b3b`
|
||
- Kullanım: yanlış cevap geri bildirimi.
|
||
|
||
### Kartlar / Ders Karoları
|
||
- Arka plan: `#ffffff`
|
||
- Kenarlık: 2px solid `#e5e5e5`
|
||
- Border-bottom: 4px solid `#e5e5e5`
|
||
- Yarıçap: 16px
|
||
- Dolgu: 16px
|
||
- Hover: 2px yükselt, gölge `0 4px 0 #d7d7d7`
|
||
|
||
### Beceri Ağacı Düğümü (Ders Balonu)
|
||
- Boyut: 80×72px
|
||
- Arka plan: beceri rengi tonlu (aktif için yeşil, kilitli için gri)
|
||
- Border-bottom: 6px solid daha koyu varyant
|
||
- Yarıçap: 50% (dairesel)
|
||
- Aktif: 1.6s'de bir 1.0 → 1.05 nabız atar
|
||
|
||
### Giriş Alanları
|
||
- Arka plan: `#ffffff`
|
||
- Kenarlık: 2px solid `#e5e5e5`
|
||
- Yarıçap: 12px
|
||
- Dolgu: 12px 16px
|
||
- Odak: kenarlık `#1cb0f6` (yılan balığı mavisi), halka `0 0 0 3px rgba(28, 176, 246, 0.2)`
|
||
|
||
### İlerleme Çubuğu
|
||
- Yol: `#e5e5e5`
|
||
- Dolgu: `#58cc02` (veya seri için `#ff9600`)
|
||
- Yarıçap: 9999px
|
||
- Yükseklik: 16px
|
||
- Animasyonlu dolgu: artışta 320ms ease-out.
|
||
|
||
## 5. Boşluk & Düzen
|
||
|
||
- **Temel birim**: 4px. Ölçek: 4, 8, 12, 16, 24, 32, 48, 64.
|
||
- **Kapsayıcı**: maks. 1080px, 24px oluk.
|
||
- **Ders ağacı sütunu**: 320px genişlik; masaüstünde ortalı.
|
||
|
||
## 6. Hareket
|
||
|
||
- **Süre**: Düğme basması için 180ms; beceri düğümü kilit açma için 320ms; aktif düğüm nabzı için 1.6s.
|
||
- **Hızlanma**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, hafif aşma) kilit açma animasyonları için.
|
||
- **Maskot**: Duo her 4–6s'de bir göz kırpar, seri dönüm noktalarında zıplar (480ms ease-out yay).
|
||
|
||
## 7. Kullanım Yönergeleri
|
||
|
||
- Yüksek doygunluktaki baykuş yeşilini, kalın alt gölgeleri ve yuvarlak ders geometrisini birlikte tutun; düz yeşil düğmeler tek başına Duolingo gibi okunmaz.
|
||
- Aşırı büyük kalın metni, ürünün teşvik veya geri bildirime ihtiyaç duyduğu ders, seri ve ilerleme anları için ayırın.
|
||
- Eğlenceli hareketi ilerleme durumu değişikliklerinde tutumlu kullanın; her denetimde genel zıpla animasyonlarından kaçının.
|