0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

2026-10-15 21:17:28 +08:00

27 KiB

Raw Blame History

نظام تصميم مستوحى من Apple

Category: الوسائط والمستهلك إلكترونيات استهلاكية. مساحة بيضاء فاخرة، SF Pro، صور سينمائية.

1. السمة البصرية والأجواء

لغة Apple على الويب هي نظام تحريري دقيق يتناوب بين هدوء يشبه المعارض الفنية وكتل معلومات بكثافة بيع التجزئة. تبقى النبرة البصرية مقيدة: لوحات محايدة واسعة، عناصر تحكم هادئة، وصور للمنتجات تُمنح كل الثقل التعبيري تقريبًا. الواجهة مهندَسة لتختفي حتى تصبح الأجهزة والمواد وخيارات التشطيب هي المقدمة السردية.

عبر الصفحات الخمس التي جرى تحليلها، يبقى الإيقاع متسقًا لكنه ليس أحاديًا. تستخدم الأسطح التسويقية (الصفحة الرئيسية وصفحة Environment) تقطيعًا سينمائيًا قائمًا على الأسود والضوء، بينما تُدخِل أسطح التجارة (تدفقات Store وShop) تباعدًا أضيق، والمزيد من عناصر التحكم النفعية، وأكوام بطاقات أكثر كثافة دون كسر القواعد الأساسية للعلامة التجارية. والنتيجة هي نظام واحد بترسين: وضع العرض ووضع المعاملة.

أسلوب الطباعة هو عامل الاستقرار. يحمل SF Pro Display تسلسل العناوين الرئيسية والترويج التجاري بارتفاعات أسطر مدمجة وتباعد محكوم، بينما يتولى SF Pro Text بيانات المنتج الوصفية، والتنقل، والفلاتر، وواجهة الاختيار الكثيفة. يبقى أسلوب الطباعة متحفظًا، لكن مدى المقياس واسع بما يكفي لدعم كل من رسائل اللافتات الرئيسية والتسميات النفعية الدقيقة.

الخصائص الرئيسية:

إيقاع ثنائي للأقسام: مشاهد سوداء غامقة (#000000) تتناوب مع حقول محايدة باهتة (#f5f5f7)
عائلة لكنة زرقاء واحدة لدلالات الإجراء والروابط (#0071e3, #0066cc, #2997ff)
وضعا تشغيل مزدوجان في نظام واحد: وحدات عرض سينمائية ومُكوِّنات تجارية كثيفة
اعتماد كبير على الصور وتشطيبات المواد؛ تبقى عناصر تحكم الواجهة رفيعة بصريًا
مقاييس عناوين محكمة (SF Pro Display، شبه عريض) مقترنة بطباعة نص/روابط مدمجة (SF Pro Text)
هندسة حبوب الدواء والكبسولات بوصفها لغة الإجراء المميِّزة (من 18px إلى 980px وعناصر تحكم دائرية)
استخدام العمق باعتدال؛ التباين وفصل الأسطح يقومان بمعظم عمل التطبيق الطبقي
إيقاع كتل لونية متعدد الصفحات: فصول رئيسية سوداء -> حقول ترويج تجاري محايدة باهتة -> أسطح بيع تجزئة بيضاء نفعية -> أسطح دقيقة داكنة لعناصر التحكم

2. لوحة الألوان والأدوار

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

الأساسي

الأسود المطلق (#000000): لوحات رئيسية غامرة، فصول منتجات عالية الدراما، مرتكزات واجهة عميقة.
رمادي Apple الباهت (#f5f5f7): السطح الفاتح الرئيسي لأشرطة الميزات، وكتل المقارنة، والانتقالات التحريرية.
الحبر شبه الأسود (#1d1d1f): النص الأساسي ولون عناصر التحكم ذات التعبئة الداكنة على اللوحات الفاتحة.

الثانوي واللكنة

أزرق إجراء Apple (#0071e3): تعبئة الإجراء الأساسية ولكنة العلامة التجارية للإشارة إلى التركيز.
أزرق روابط النص (#0066cc): لون الروابط المضمَّنة المُحسَّن للقراءة الطويلة.
أزرق الروابط عالي الإضاءة (#2997ff): معالجة روابط ساطعة على المشاهد الأغمق حيث يلزم تباين أقوى.

السطح والخلفية

اللوحة البيضاء النقية (#ffffff): خلفيات قوائم البيع/المنتجات والأقسام المعاملاتية الكثيفة.
سطح الجرافيت A (#272729): طبقة سياق للبطاقات الداكنة وعناصر التحكم في الوسائط.
سطح الجرافيت B (#262629): طبقة نفعية داكنة أعمق قليلًا لتجميعات عناصر التحكم.
سطح الجرافيت C (#28282b): أسطح داعمة داكنة مرتفعة.
سطح الجرافيت D (#2a2a2c): الدرجة المرتفعة الأغمق المستخدمة للفصل في المشاهد الداكنة الأغنى.

المحايدات والنص

الرمادي المحايد الثانوي (#6e6e73): نص الجسم الثانوي، الأوصاف المساعِدة، البيانات الوصفية من المستوى الثالث.
الرمادي الناعم للحدود (#d2d2d7): الفواصل، الخطوط الخارجية الخفيفة، والاحتواء النفعي الخافت.
الرمادي المتوسط للحدود (#86868b): خطوط حقول أقوى في سياقات تكوين المنتج والفلاتر.
الرمادي الداكن النفعي (#424245): التقاطع بين نص/سطح داكن محايد في سياقات المتجر.

الدلالي واللكنة

إشارة الاختيار/التركيز (#0071e3): إشارة تركيز وحالة اختيار مشتركة عبر سياقات التسويق والتجارة.
الخطأ/التحذير/النجاح: لم تظهر لوحة دلالية مميَّزة بشكل متسق في مجموعة الأسطح المستخرجة.

نظام التدرج

الصفحات المستخرجة مدفوعة بالأسطح الصلبة بأغلبية ساحقة. يأتي الثراء البصري من التصوير الفوتوغرافي وعرض التشطيبات بدلًا من تدرجات الواجهة الدائمة.

3. قواعد الطباعة

عائلة الخط

عائلة العرض: SF Pro Display، البدائل SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
عائلة النص: SF Pro Text، البدائل SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
تقسيم الاستخدام: تتولى عائلة العرض العناوين الرئيسية للأبطال/المنتجات وعناوين الترويج التجاري؛ وتتولى عائلة النص التنقل، وعناصر التحكم، والتسميات، ونصوص التجارة الكثيفة.

التسلسل الهرمي

الدور	الحجم	الوزن	ارتفاع السطر	تباعد الأحرف	ملاحظات
Hero Display XL	80px	600	1.00-1.05	-1.2px	مقياس بطل Environment/store
Hero Display L	56px	600	1.07	-0.28px	لحظات بطل الصفحة الرئيسية
Section Display	48px	500-600	1.08	-0.144px	عناوين الفصول الرئيسية
Product Heading	40px	600	1.10	normal	عناوين أقسام المنتج والحملة
Feature Display	38px	600	1.21	0.152px	إبرازات الأجهزة والترويج التجاري
Promo Display	32px	300-600	1.09-1.13	0.128px to 0.352px	أبطال فرعيون على مستوى الوحدة
Card/Product Title	28px	600	1.14	0.196px	تسمية على مستوى المربعات والنص الأساسي
Utility Heading	24px	600	1.17	0.216px / -0.2px	رؤوس المُكوِّن والمحتوى المُجمَّع
Link/Action Heading	21px	600	1.14-1.38	0.231px	روابط ترويجية أكبر
Subhead	19px	600	1.21	0.228px	مقدمات أقسام مدمجة
Body Primary	17px	400	1.47	-0.374px	النص الأساسي القياسي وأوصاف البيع بالتجزئة
Body Emphasis	17px	600	1.24	-0.374px	التسميات المؤكَّدة والقيم الرئيسية
Control Label	14px	400-600	1.29-1.47	-0.224px	الأزرار، التسميات المساعِدة، نص التنقل المدمج
Micro UI	12px	400-600	1.00-1.33	-0.12px	الطباعة الدقيقة، التسميات الدقيقة
Legal/Meta	10px	400	1.30-1.47	-0.08px	البيانات الوصفية الكثيفة والنص القانوني الداعم

المبادئ

الاستمرارية عبر أنواع الصفحات: يمتد الحمض النووي الطباعي نفسه عبر الإطلاقات السينمائية وتدفقات شراء المنتجات، مانعًا انقسام العلامة التجارية بين التسويق والتجارة.
الانضغاط على نطاق واسع: تستخدم طبقات العرض تباعد أسطر محكمًا وتباعدًا مضبوطًا لتبدو آلية ومُقدِّمة للمنتج أولًا.
كثافة قابلة للقراءة في عمق البيع بالتجزئة: يوازن SF Pro Text بين الإحكام وإيقاع رأسي كافٍ لقوائم المنتجات الطويلة ومصفوفات الخيارات.
سلّم أوزان مقيس: 600 هو وزن التأكيد المهيمن؛ يظهر 700 بشكل انتقائي؛ ويُستخدم 300 باعتدال للتباين في الأسطر الأكبر.

ملاحظة حول بدائل الخطوط

أقرب البدائل المتاحة مجانًا: Inter للتنفيذ الكثيف بالنص، ومقاييس شبيهة بـ SF Pro Display-like يجري تقريبها بـ Inter Tight للعناوين.
عند الاستبدال، ارفع ارتفاع السطر قليلًا (+0.02 إلى +0.06) على أحجام الجسم وخفِّف شدة التباعد السالب للحفاظ على القراءة.

4. تنسيقات المكوِّنات

الأزرار

إجراء بتعبئة أساسية: خلفية #0071e3، نص #ffffff، نصف قطر 8px، حشو أفقي مدمج (شائعًا 8px 15px). يُستخدم لإجراءات الشراء/التقدم الحاسمة.
إجراء بتعبئة داكنة: خلفية #1d1d1f، نص #ffffff، نصف قطر 8px. يُستخدم عندما تحتاج الأسطح الفاتحة إلى عنصر أساسي مقيَّد عالي التباين.
عائلة إجراء حبة الدواء/الكبسولة: إجراءات كبسولة كبيرة بأنصاف أقطار 18px-56px وروابط حبة دواء متطرفة بـ 980px. تُرسِّخ صورة Apple الظلية الناعمة لكن الدقيقة لدعوة اتخاذ الإجراء.
أصداف الفلاتر/الأزرار النفعية: أصداف فاتحة (#fafafc أو أبيض شفاف) بحدود رمادية خفيفة (#d2d2d7 / #86868b) لسياقات التكوين الكثيفة.
سلوك الضغط: تقلِّص عناصر التحكم النشطة عادةً المقياس أو تُزيح التعبئة قليلًا للإشارة إلى تأكيد ضغط فيزيائي.

البطاقات والحاويات

بطاقات تحريرية/منتجات: بطاقات فاتحة على حقول #f5f5f7 أو بيضاء بتأطير أدنى وتكوين يقدِّم الصورة أولًا.
بطاقات نفعية داكنة: درجات جرافيت (#272729 إلى #2a2a2c) تُستخدم للتراكبات، وعناصر التحكم في الوسائط، والوحدات ذات السياق الداكن.
لوحات المُكوِّن: حاويات مدوَّرة (غالبًا 12px-18px) بتعريف حدود واضح لكن مقيَّد.
وحدات الدوارة/الإبراز: أصداف مدوَّرة أكبر (28px-36px) لمسارات المحتوى المميَّز.

المدخلات والنماذج

حقول إدخال البيع بالتجزئة: خلفيات شفافة أو بيضاء، نص داكن (#1d1d1f)، احتواء بقيادة الحدود (#86868b).
عناصر تحكم الاختيار: تظهر هندسة عناصر تحكم دائرية/شبيهة بالتبديل بشكل متكرر في واجهات اختيار المنتجات.
استراتيجية الكثافة: تبقى حقول النماذج هادئة بصريًا لإبقاء صور الأجهزة وتسلسل التسعير مهيمنين.

التنقل

تنقل التسويق العام: شريط داكن شفاف مدمج بروابط صغيرة النوع وأيقونات مقيَّدة.
طبقات تنقل Store/المتجر الفرعي: أشرطة نفعية إضافية، ورقائق، وعناصر تحكم مجزَّأة لتضييق الفئات والمنتجات.
تسلسل الروابط: تبقى أزرق الروابط الإشارة التفاعلية الأساسية بينما يدعم النص المحايد مجموعات التنقل الكثيفة.

معالجة الصور

تصوير يقدِّم الجسم أولًا: تُقدَّم الأجهزة والملحقات في المقدمة على أسطح صلبة مضبوطة.
عرض تشطيب عالي الدقة: تفاصيل الانعكاس/المواد محورية في الإقناع البصري.
تأطير مختلط: تتعايش مشاهد البطل الكاملة مع بطاقات البيع بالتجزئة المدوَّرة والصور المصغَّرة للترويج التجاري المقصوصة بإحكام.

مكوِّنات مميِّزة أخرى

مصفوفة مُكوِّن المنتج: أكوام خيارات ومحدِّدات تجمع بين الرقائق، وعناصر التحكم بنمط الراديو، وكتل التسعير/الملخص السياقية.
نقاط/أسهم التحكم في الدوارة: مفردات تحكم دائرية في تراكبات خافتة لتقدُّم المعرض.
لوحات قصة Environment: فصول سردية تمزج الطباعة التحريرية مع صور سينمائية للمنتج/البيئة.

5. مبادئ التخطيط

نظام التباعد

الوحدة الأساسية فعليًا هي 8px، لكن النظام يدعم خطوات دقيقة كثيفة للمحاذاة الدقيقة.
قيم التباعد المعاد استخدامها بشكل متكرر عبر الصفحات: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
ثوابت إيقاع عالمية مرئية عبر كل من تدفقات التسويق والبيع بالتجزئة: سقالة وحدة 8px بفواصل نفعية 14-20px لحشو المكوِّنات وتباعد القوائم.

الشبكة والحاوية

صفحات العرض: أعمدة مركزية كبيرة بمساحة تنفُّس أفقية واسعة وفصول لونية بعرض كامل.
صفحات التجارة: شبكات منتجات وعناصر تحكم متعددة الأعمدة أضيق مع تكديس معياري متكرر.
سلوك الحاوية: نواة قابلة للقراءة مقيَّدة بهوامش خارجية سخية عند عرض سطح المكتب.

فلسفة المساحة البيضاء

إيقاع المشهد: تستخدم الفصول البصرية الرئيسية مساحة تنفُّس واسعة من الأعلى/الأسفل.
ضغط المعلومات عند الحاجة: تضغط صفحات البيع بالتجزئة التباعد عمدًا لإظهار مزيد من المعلومات القابلة للتنفيذ لكل إطار عرض.
فصل بقيادة التباين: تعتمد انتقالات الأقسام على تغيرات الأسطح أكثر من الفواصل الزخرفية.

مقياس نصف قطر الحدود

5px: روابط/وسوم نفعية صغيرة وأصداف صغيرة ثانوية.
8px-12px: عناصر التحكم القياسية والحقول المدمجة.
16px-18px: البطاقات، وإطارات الوحدات، ولوحات التجارة.
28px-36px: حاويات الوحدات والإبراز الأكبر.
56px / 100px / 980px: الكبسولات، وحبوب الدواء الكبيرة، وأشكال دعوة اتخاذ الإجراء المميِّزة الممدودة.
50%: عناصر التحكم في الوسائط والاختيار الدائرية.

6. العمق والارتفاع

المستوى	المعالجة	الاستخدام
Level 0	أسطح محايدة مسطحة (`#ffffff`, `#f5f5f7`, `#000000`)	المراحل السردية والمنتجية الرئيسية
Level 1	احتواء حدود خفيف (`#d2d2d7`, `#86868b`)	الفلاتر، حقول الإدخال، البطاقات النفعية
Level 2	ظل ناعم (`rgba(0,0,0,0.08)` إلى `rgba(0,0,0,0.22)` حيثما وُجد)	البطاقات المميَّزة ووحدات الترويج التجاري المرتفعة
Level 3	تدرُّج الأسطح الداكنة (`#272729` -> `#2a2a2c`)	التراكبات، عناصر التحكم في الوسائط، تجمعات نفعية داكنة
Accessibility	إشارة تركيز زرقاء (`#0071e3`)	تأكيد لوحة المفاتيح والاختيار

العمق مقيَّد عمدًا. تفضِّل Apple التباين اللوني، وتدرُّج الأسطح، والتسلسل الهرمي التركيبي على أكوام الظلال الثقيلة.

العمق الزخرفي

يُنشأ العمق الزخرفي بشكل أساسي عبر الواقعية الفوتوغرافية وعرض المواد، لا عبر تأثيرات الواجهة الاصطناعية.
توفِّر التراكبات الشفافة والأشرطة النفعية الشبيهة بالزجاج تطبيقًا طبقيًا جويًا خفيفًا في التنقل وعناصر التحكم.

7. ما يجب فعله وما لا يجب فعله

افعل

استخدم الثلاثية المحايدة (#000000, #f5f5f7, #ffffff) كأساس بنيوي.
احجز اللكنات الزرقاء لدلالات الإجراء والتنقل الحقيقية.
أبقِ الطباعة محكمة ومتعمَّدة، خصوصًا عند مقاييس العرض.
حافظ على لغة هندسة الكبسولة/الدائرة لعناصر التحكم والإجراءات الرئيسية.
دع صور المنتجات تحمل الدراما البصرية؛ وأبقِ عناصر التحكم متحفظة.
استخدم الاحتواء بقيادة الحدود في سياقات البيع بالتجزئة الكثيفة بدلًا من زخرفة البطاقات الثقيلة.
حافظ على فصل واضح بين وحدات العرض والوحدات المعاملاتية مع إبقاء الرموز الأساسية مشتركة.

لا تفعل

لا تُدخِل لوحات لكنة ثانوية واسعة تنافس أزرق Apple.
لا تُفرِط في استخدام الظلال، أو تأثيرات التوهج، أو التدرجات الزخرفية في عناصر تحكم الواجهة الأساسية.
لا تخلط عائلات خطوط غير مرتبطة أو تُرخِ التباعد عشوائيًا.
لا تُسطِّح كل الزوايا إلى نصف قطر واحد؛ تستخدم Apple طبقات أنصاف أقطار هادفة.
لا تُثقِل وحدات التجارة بحدود سميكة أو تأثيرات بصرية صاخبة.
لا تُزِل إيقاع التباين المحايد بين الفصول الداكنة والفاتحة.
لا تعامل تدفقات التسويق والشراء كأنظمة تصميم منفصلة.

8. السلوك المتجاوب

نقاط التوقف

الاسم	العرض	التغييرات الرئيسية
Small Mobile	374px وأقل	عناصر تحكم بيع بالتجزئة محكَّمة، أكوام منتجات بعمود واحد
Mobile	375px-640px	وحدات بعمود واحد، صفوف إجراءات مدمجة، محدِّدات مكثَّفة
Tablet	641px-833px	بطاقات موسَّعة وانتقالات مختلطة بـ1-2 عمود
Tablet Wide	834px-1023px	ترويج تجاري متعدد الأعمدة أكثر استقرارًا، كتل نص أكبر
Desktop	1024px-1240px	تخطيطات بيع بالتجزئة كاملة وبنى مقارنة المنتجات
Desktop Wide	1241px-1440px	توسُّع بطل التسويق وتباعد أقسام أوسع
Large Desktop	1441px+	أقصى مساحة تنفُّس للفصول وتكوين تحريري واسع

أهداف اللمس

تُقدَّم الإجراءات الأساسية والثانوية عمومًا بهندسة حبوب دواء/أزرار ملائمة للنقر.
تتوافق عناصر التحكم في الوسائط والاختيار الدائرية مع الحد الأدنى من نية اللمس في سياقات الجوال.
تستخدم واجهة التجارة الكثيفة تسميات مدمجة لكنها تحافظ على مناطق نقر واضحة عبر حشو الشكل المحيط.

استراتيجية الطي

تتقلَّص طباعة بطل التسويق إلى طبقات منفصلة مع الحفاظ على تباين التسلسل الهرمي.
تنطوي شبكات المنتجات والتجارة من متعددة الأعمدة إلى بطاقات مكدَّسة مع رؤية مستمرة للمحدِّد.
يضغط التنقل النفعي إلى تجميعات روابط/عناصر تحكم أبسط مع الحفاظ على الإجراءات الرئيسية.
تصبح تجمعات الخيارات/التكوين متسلسلة رأسيًا لإبقاء تدفق الشراء خطيًا على الشاشات الصغيرة.

سلوك الصور

تحافظ صور المنتجات على النسبة والمركزية عبر نقاط التوقف.
تبقى مرئيات البطل مهيمنة على الجوال، مع إعادة وضع النص حول أولوية الوسائط.
تبقى الصور المصغَّرة للبيع بالتجزئة مقروءة عبر منطق قص أكثر إحكامًا وتكديس بطاقات أكثر كثافة.
تستمر الوحدات بقيادة الصور في ترسيخ الإيقاع كلما زادت كثافة التخطيط.

9. دليل توجيه الوكيل

مرجع لوني سريع

أزرق الإجراء الأساسي: أزرق إجراء Apple (#0071e3)
أزرق الروابط المضمَّنة: أزرق روابط النص (#0066cc)
لوحة الفصل الداكن: الأسود المطلق (#000000)
لوحة الفصل الفاتح: رمادي Apple الباهت (#f5f5f7)
النص الأساسي على الفاتح: الحبر شبه الأسود (#1d1d1f)
النص الثانوي: الرمادي المحايد الثانوي (#6e6e73)
حدود البيع بالتجزئة الناعمة: الرمادي الناعم للحدود (#d2d2d7)
حدود البيع بالتجزئة القوية: الرمادي المتوسط للحدود (#86868b)

أمثلة توجيهات المكوِّنات

"صمِّم بطل منتج بأسلوب Apple على لوحة سوداء (#000000) بعنوان رئيسي شبه عريض بخط SF Pro Display (48-56px)، ونص داعم موجز، ودعوتي اتخاذ إجراء بشكل كبسولة باستخدام #0071e3 و#1d1d1f."
"أنشئ لوحة تكوين تجارية على الأبيض (#ffffff) ببطاقات مدوَّرة 18px، وحقول حدود #86868b، ونص أساسي بخط SF Pro Text 17px، ومحدِّدات خيارات مدمجة."
"ابنِ شبكة بطاقات ترويج تجاري تتناوب بين أسطح #f5f5f7 وبيضاء، ببطاقات تقدِّم الصورة أولًا، وظلال مقيَّدة، وبيانات وصفية بخط SF Pro Text 14-17px."
"ولِّد تجمُّع عناصر تحكم دوارة باستخدام أزرار دائرية (نصف قطر 50%)، وتراكبات رمادية خافتة، وتغذية راجعة نشطة واضحة لتنقُّل المعرض."
"ركِّب إيقاع صفحة مختلط للتسويق + البيع بالتجزئة: فصل عرض داكن -> فصل ميزات فاتح -> وحدة قائمة منتجات كثيفة مع إبقاء اللكنات الزرقاء للإجراءات والروابط فقط."

دليل التكرار

ثبِّت الأساس المحايد أولًا (#000000, #f5f5f7, #ffffff) قبل ضبط اللكنات.
أبقِ اللكنات الزرقاء نادرة وهادفة؛ إذا كان كل شيء أزرق، ينهار التسلسل الهرمي.
اضبط الطباعة بهذا الترتيب: مقياس العرض، قراءة الجسم، ثم التسميات الدقيقة.
طابِق نصف القطر حسب فئة المكوِّن (حقل، بطاقة، كبسولة، دائرة) بدلًا من تدوير مقاس واحد للجميع.
زِد الكثافة تدريجيًا عند الانتقال من أقسام العرض إلى أقسام التجارة.
تحقَّق من أن صور المنتجات تبقى الطبقة البصرية الأقوى بعد كل مراجعة.

الثغرات المعروفة

لم تظهر ألوان حالة دلالية مميَّزة (خطأ/تحذير/نجاح) بشكل متسق في مجموعة الصفحات المستخرجة.
تختلف بعض الحالات الدقيقة للتفاعل حسب الوحدة ولا تُمثَّل كرموز نظام عالمية.
تكشف بعض وحدات البيع بالتجزئة عن تجاوزات طباعة خاصة بالسياق لا تظهر عبر الصفحات الخمس كلها.

27 KiB Raw Blame History