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。
7.6 KiB
7.6 KiB
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), halka0 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.