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。
9.9 KiB
9.9 KiB
نظام تصميم مستوحى من Duolingo
Category: الإنتاجية والبرمجيات كخدمة منصة تعلّم اللغات. الأخضر البومي الزاهي، الظلال السميكة، البهجة المحوّلة إلى ألعاب.
1. الثيم البصري والأجواء
Duolingo هو تحويل الألعاب إلى لغة بصرية. الواجهة زاهية بجرأة واضحة، مع الأخضر البومي (#58cc02) كلون رئيسي للعلامة التجارية، وظل سفلي سميك بارتفاع 4px على كل عنصر تفاعلي يشبه زر ثلاثي الأبعاد ينتظر الضغط عليه. الصفحة بيضاء (#ffffff) مع حدود سميكة 2–3px بلون رمادي داكن (#e5e5e5)، ويُقرأ النظام بأكمله كتطبيق iOS من عام 2015 أُعيد توليده بتدرج هرمي أفضل.
تستخدم الطباعة Feather Bold (خط مستدير مخصص بلا أسنان) لعناصر الواجهة وMona Sans (أو Inter) لمحتوى النص. أحجام العرض كبيرة وواثقة — Duolingo لا يهمس أبدًا. غالبًا ما تحمل العناوين خطًا أخضر تحتها أو تجلس على حبة خضراء، وتظهر تميمة Duo (بومة خضراء) كشخصية توضيحية نشطة، لا كشعار ثابت.
لغة الأشكال ودية: نصف قطر 16–20px على البطاقات، 12px على الأزرار، 9999px على الشرائح وأشرطة التقدم. الأيقونات مملوءة، مستديرة، ومشفّرة بالألوان حسب المهارة — لكل سطح درس زوج ألوان يمكن التعرف عليه فورًا.
الخصائص الرئيسية:
- الأخضر البومي (
#58cc02) كلون مهيمن للعلامة التجارية، يُستخدم في أكثر من 30% من السطح - ظل سفلي سميك 4px على كل زر (خاصية "الضغط اللمسي")
- حدود صلبة 2–3px، لا خطوط رفيعة أبدًا
- Feather Bold (عرض مستدير) + Mona Sans (المحتوى)
- نص كبير وواثق — أحجام العرض تبدأ من 48px وتتصاعد
- التميمة كشخصية: تظهر بومة Duo في الإعداد الأولي، الأخطاء، التتاليات
- البرتقالي للتتاليات (
#ff9600) والزهري الجوهرة (#ce82ff) كألوان ثانوية للعلامة التجارية
2. لوحة الألوان والأدوار
الأساسية
- الأخضر البومي (
#58cc02): الأساسي للعلامة التجارية، CTA الرئيسي، الإجابة الصحيحة. - الأخضر البومي العميق (
#58a700): لون الضغط/الظل لأزرار خضراء. - الأخضر البومي الفاتح (
#89e219): التمرير فوقه، التعبئات الخفيفة. - الأخضر البومي الباهت (
#dbf8c5): سطح خفيف، لافتة النجاح.
النبرات الثانوية
- البرتقالي للتتاليات (
#ff9600): عداد التتاليات، أيقونة اللهب، الطاقة المميزة. - البرتقالي العميق للتتاليات (
#cc7a00): البرتقالي عند الضغط. - الزهري الجوهرة (
#ce82ff): عملة الجواهر، Super Duolingo. - الأزرق الثعبان (
#1cb0f6): زر التلميح، رابط المعلومات. - الأحمر الكاردينالي (
#ff4b4b): إجابة خاطئة، فقدان حياة. - الأصفر النحلة (
#ffc800): شارة المحترفين، الإنجاز.
السطح
- الثلج (
#ffffff): الخلفية الأساسية. - الثعبان (
#f7f7f7): فاصل الأقسام، السطح الثانوي. - البجعة (
#e5e5e5): خلفية معطّلة، كتلة مضمّنة. - الذئب (
#777777): فاصل داكن، نص ثانوي.
الحبر والنص
- أسود الثعبان (
#3c3c3c): النص الأساسي. - الذئب (
#777777): النص الثانوي، التعليقات التوضيحية. - الأرنب (
#afafaf): معطّل، عنصر نائب.
الحدود
- البجعة (
#e5e5e5): حد قياسي 2px. - الأرنب (
#afafaf): حد مؤكد عند التمرير.
3. قواعد الطباعة
عائلة الخطوط
- العرض / واجهة المستخدم / العناوين:
Feather Bold، مع بديل:'DIN Round Pro', 'Helvetica Neue', sans-serif - المحتوى / النص الطويل:
Mona Sans، مع بديل:'Helvetica Neue', system-ui, sans-serif - الكود (نادر، المدارس/الإدارة):
JetBrains Mono، مع بديل:ui-monospace, Menlo, monospace
التسلسل الهرمي
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
|---|---|---|---|---|---|---|
| العرض | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | بطل الإعداد الأولي |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | عنوان الصفحة |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | عنوان القسم |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | عنوان البطاقة، صف الدرس |
| محتوى كبير | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | تلميح الدرس، التعليمات |
| المحتوى | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | النثر القياسي |
| التعليق التوضيحي | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | عداد XP، البيانات الوصفية |
| الزر | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | تسمية الزر القياسية |
| التتالي | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | رقم التتالي، على اللهب |
المبادئ
- 800 هو الافتراضي: يعمل Feather Bold بوزن 800 على العناوين والأزرار. يبدو 700 ضعيفًا في هذا النظام.
- نص كبير: أحجام العناوين أكبر بنسبة 25–40% من العلامات التجارية النموذجية للمنتجات — الثقة كهوية.
- أحرف مستديرة: لكل رمز نهايات ناعمة؛ ستؤدي الأحرف المسنّنة إلى كسر عقد الودية.
4. تصميم المكونات
الأزرار
الأساسي (الأخضر البومي)
- الخلفية:
#58cc02 - النص:
#ffffff - الحشو: 14px 24px
- الزاوية: 16px
- Border-bottom: 4px solid
#58a700(الظل السميك) - التمرير فوقه: خلفية
#89e219 - النشط: translate-y 4px، border-bottom 0 (الزر "ينضغط")
- الاستخدام: "متابعة"، "تحقق"، CTA الرئيسي.
الثانوي (أبيض مع ظل سفلي)
- الخلفية:
#ffffff - النص:
#777777 - الحد: 2px solid
#e5e5e5 - Border-bottom: 4px solid
#e5e5e5 - الزاوية: 16px
- الحشو: 14px 24px
- التمرير فوقه: النص
#3c3c3c، الحد#afafaf
برتقالي التتاليات
- الخلفية:
#ff9600 - النص:
#ffffff - Border-bottom: 4px solid
#cc7a00 - الاستخدام: هدف التتالي، "ابدأ التتالي"
الخطأ (الأحمر الكاردينالي)
- الخلفية:
#ff4b4b - النص:
#ffffff - Border-bottom: 4px solid
#cc3b3b - الاستخدام: تغذية راجعة للإجابة الخاطئة.
البطاقات / بلاطات الدرس
- الخلفية:
#ffffff - الحد: 2px solid
#e5e5e5 - Border-bottom: 4px solid
#e5e5e5 - الزاوية: 16px
- الحشو: 16px
- التمرير فوقه: رفع 2px، ظل
0 4px 0 #d7d7d7
عقدة شجرة المهارات (فقاعة الدرس)
- الحجم: 80×72px
- الخلفية: لون المهارة مظلّل (أخضر للنشط، رمادي للمقفل)
- Border-bottom: 6px solid متغير أغمق
- الزاوية: 50% (دائري)
- النشط: ينبض 1.0 → 1.05 كل 1.6s
حقول الإدخال
- الخلفية:
#ffffff - الحد: 2px solid
#e5e5e5 - الزاوية: 12px
- الحشو: 12px 16px
- التركيز: حد
#1cb0f6(أزرق الثعبان)، حلقة0 0 0 3px rgba(28, 176, 246, 0.2)
شريط التقدم
- المسار:
#e5e5e5 - التعبئة:
#58cc02(أو#ff9600للتتالي) - الزاوية: 9999px
- الارتفاع: 16px
- تعبئة متحركة: 320ms ease-out عند الزيادة.
5. التباعد والتخطيط
- الوحدة الأساسية: 4px. المقياس: 4، 8، 12، 16، 24، 32، 48، 64.
- الحاوية: حد أقصى 1080px، هامش 24px.
- عمود شجرة الدروس: عرض 320px؛ محاذاة مركزية على سطح المكتب.
6. الحركة
- المدة: 180ms لضغط الزر؛ 320ms لفتح قفل عقدة المهارة؛ 1.6s لنبضة العقدة النشطة.
- التسهيل:
cubic-bezier(0.34, 1.56, 0.64, 1)(back-out، تجاوز طفيف) لفتح الأقفال. - التميمة: تومض Duo كل 4–6s، وتقفز عند معالم التتاليات (480ms ease-out نابض).
7. إرشادات الاستخدام
- حافظ على الأخضر البومي عالي التشبع، والظلال السفلية السميكة، وهندسة الدروس المستديرة معًا؛ الأزرار الخضراء المسطحة وحدها لا تُعطي انطباع Duolingo.
- احتفظ بالنص الغامق كبير الحجم لحظات الدروس والتتاليات والتقدم حيث يحتاج المنتج إلى تشجيع أو تغذية راجعة.
- استخدم الحركة المرحة بتقتير حول تغييرات حالة التقدم، مع تجنب الرسوم المتحركة المرتدة العامة على كل عنصر تحكم.