admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5afeb6b78aef0dde2d29ba35a736c8b7921771d2
workbuddy_skills/open-design/design-systems/airbnb/DESIGN-ar.md
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

45 KiB
Raw Blame History

Design System Inspired by Airbnb

Category: التجارة الإلكترونية والتجزئة سوق سفر. لهجة مرجانية دافئة، مدفوع بالتصوير الفوتوغرافي، واجهة مستديرة.

1. الموضوع البصري والأجواء

يبدو تصميم Airbnb لعام 2026 كمجلة سفر صادفت أن تكون تطبيقاً — لوحات بيضاء ناصعة تفسح المجال لصور فوتوغرافية تملأ الشاشة بالكامل، وتختفي الواجهة ذاتها لتترك المنشورات تتنفس. يُستخدم اللون المرجاني الوردي Rausch المميز (#ff385c) بشكل مقتصد لكن لا يمكن الخطأ في التعرف عليه: الدعوة للبحث، ومؤشر علامة التبويب النشطة، وزر الإجراء الأساسي، وأحياناً الأسعار أو أيقونة قلب قائمة الأمنيات. كل شيء آخر تدرج رمادي منضبط، إذ يحمل #222222 تقريباً كل سطر نص.

ما يجعل هذا النظام لا يمكن إخطاؤه بوصفه Airbnb هو مقدار الثقة التي يمنحها للمحتوى. تُعرض صور العقارات بحجم البطل، 4:3 مع معالجة نصف قطر من حافة إلى حافة. يتم تبديل الفئات عبر محدد ثلاثي التبويب (المنازل / التجارب / الخدمات) الذي يستخدم أيقونات مرسومة بثلاثية الأبعاد (منزل بسقف مائل، منطاد هوائي ساخن، جرس خدمة) — مادية وملمسية وتكاد تكون شبيهة بالألعاب — مقرونة بتسميات Airbnb Cereal VF الواضحة. هذا هو المنتج الاستهلاكي النادر الذي تتعايش فيه العروض ثلاثية الأبعاد والواجهة المطبعية البحتة دون توتر.

أحدث سطح هو خط المنتجات التجارب — نفس الإطار المعدني، لكن بكثافة بطاقات أغنى، وتصوير فوتوغرافي أكثر، ولوحة حجز مثبتة في المركز مع تسعير ثابت في القضيب الأيمن. تتبع صفحات تفاصيل المنشور (سواء الغرف أو التجارب) قالباً محكماً: شبكة صور البطل الكاملة الشاشة ← بطاقة حجز دائرية متداخلة (ثابتة عند التمرير) ← المرافق ← التقييمات (جوائز المفضلة لدى الضيوف تستخدم تقييم 4.81 كبير في المنتصف مع تخطيط إكليل الغار) ← الخريطة ← ملف المضيف الشخصي ← الإفصاحات. الإيقاع متسق سواء كنت تحجز غرفة أو جولة يخت.

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

  • المرجانية الوردية Rausch (#ff385c) كلون علامة تجارية بلكنة واحدة، تستخدم فقط للدعوات للإجراء الأساسية وزر البحث
  • تصوير فوتوغرافي كامل الشاشة بنسبة 4:3 / 16:9 مع تدوير خفيف للزوايا (14–20 بكسل) بوصفه المفردات البصرية الأساسية
  • أيقونات الفئات المُصنَّعة ثلاثية الأبعاد مقرونة بعلامات تبويب مطبعية — المكان الوحيد الذي يسمح فيه النظام بالرسم التوضيحي
  • أزرار أيقونات دائرية 50% (سهم الرجوع، مشاركة، المفضلة، أسهم الدوارة) منتشرة في كل مكان
  • Airbnb Cereal VF يحمل كل تسمية، من الحاشية القانونية بـ 8 بكسل إلى عنوان القسم بـ 28 بكسل — نظام عائلة واحدة
  • ترميز لون المستوى الإنتاجي: Airbnb Plus (ماجنتا #92174d)، Airbnb Luxe (بنفسجي داكن #460479)، Airbnb (مرجاني Rausch)
  • تخطيط جائزة المفضلة لدى الضيوف — رقم تقييم عملاق في المركز بين إكليلي غار، أحد أكثر اللحظات التعرف عليها في النظام
  • لوحة الحجز الثابتة مع تكديس السعر ← التواريخ ← الضيوف، مثبتة في القضيب الأيمن على سطح المكتب، تتحول إلى شريط "احجز" مثبت في الأسفل على الهاتف المحمول
  • التنقل السفلي الثابت للهاتف المحمول (استكشاف / قوائم الأمنيات / تسجيل الدخول) مع صبغة Rausch للحالة النشطة

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

أساسي

  • Rausch (#ff385c): المرجاني الوردي المميز للعلامة التجارية. متغير CSS --palette-bg-primary-core. يُستخدم في: زر "احجز" الأساسي، زر إرسال البحث، التسطير أسفل علامة التبويب النشطة، ملء قلب قائمة الأمنيات، التأكيد على الأسعار. اللون ذو الرؤية الفردية الأعلى في كل صفحة.

ثانوي ولهجة

  • Deep Rausch (#e00b41): نوع أكثر تشبعاً. متغير CSS --palette-bg-tertiary-core. يُستخدم لحالات الضغط/النشاط على الأزرار ونقاط نهاية التدرج.
  • Plus Magenta (#92174d): متغير CSS --palette-bg-primary-plus. لون العلامة التجارية لمستوى منتج Airbnb Plus — عرض قوائم منتقاة من الدرجة الأعلى.
  • Luxe Purple (#460479): متغير CSS --palette-bg-primary-luxe. لون العلامة التجارية لمستوى منتج Airbnb Luxe — تأجير الفيلات/المزارع.
  • Info Blue (#428bff): متغير CSS --palette-text-legal. يُستخدم لروابط قانونية/معلوماتية (الشروط، الخصوصية، الإفصاحات) — لون الرابط الوحيد غير أحادي اللون في النظام.

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

  • Canvas White (#ffffff): خلفية الصفحة الافتراضية. كل بطاقة وكل حاوية وكل صفحة تفاصيل تبدأ من هنا.
  • Soft Cloud (#f7f7f7): صبغة سطح فرعي خفية تُستخدم في خلفيات التذييل وأغلفة عرض الخريطة والأقسام "كل شيء آخر" التي تريد التراجع عن الأبيض الأساسي.
  • Hairline Gray (#dddddd): لون الحدود 1 بكسل المنتشر في كل مكان — يفصل البطاقات وصفوف المرافق ولوحات التقييمات وأعمدة التذييل. العامل الأساسي في نظام التخطيط.

محايد والنص

  • Ink Black (#222222): متغير CSS --palette-text-primary. شبه الأسود للنظام. كل عنوان وكل فقرة نص وكل تسمية تنقل وكل سعر. يُستخدم في ~90% من جميع النصوص على الصفحة.
  • Charcoal (#3f3f3f): متغير CSS --palette-text-focused. يُستخدم في نص الإدخال في حالة التركيز ونص التأكيد بمستوى واحد أقل.
  • Ash Gray (#6a6a6a): متغير CSS --palette-bg-tertiary-hover. تسميات ثانوية، نص بأسلوب الترجمة "تأجير الأكواخ" تحت أسماء المدن، روابط التذييل المكتومة.
  • Mute Gray (#929292): متغير CSS --palette-text-link-disabled. الأزرار المعطلة والبيانات الوصفية ذات الأولوية المنخفضة.
  • Stone Gray (#c1c1c1): فواصل ثلاثية، حدود الأيقونات، أفاتارات العناصر النائبة.

دلالية ولهجة

  • Error Red (#c13515): متغير CSS --palette-text-primary-error. أخطاء التحقق من النماذج، تحذيرات الإجراءات المدمرة.
  • Deep Error (#b32505): متغير CSS --palette-text-secondary-error-hover. الأنواع المضغوطة/النشطة من حالات الخطأ.
  • Translucent Black (rgba(0, 0, 0, 0.24)): متغير CSS --palette-text-material-disabled. تسميات ذات أسلوب مادي معطلة.

نظام التدرج

يظهر تدرج علامة Airbnb التجارية بشكل مقتصد، عادةً فقط على الشعار الكلمي ولحظة زر البحث ذات العلامة التجارية:

linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)

هذا الانتقال المرجاني ← الماجنتا هو "اللحظة ذات العلامة التجارية" — لا يُستخدم أبداً كسطح كامل، فقط كملء حبة ضيقة أو معالجة للشعار.

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

عائلة الخط

  • Airbnb Cereal VF (الأساسي والوحيد): السانس سريف ذو الوزن المتغير الخاص الذي يحمل النظام بالكامل. النسخ الاحتياطية (بالترتيب): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

الأوزان المرصودة في الرموز المستخرجة: 500، 600، 700. لا يوجد 400-عادي — وزن "الجسم" للنظام هو 500، مما يمنح كل كتلة نص كثافة إضافية دقيقة تُقرأ على أنها واثقة ومتعمدة.

ميزات OpenType: تُستخدم salt (البدائل الأسلوبية) على التسميات المضغوطة 11 بكسل و14 بكسل بوزن 600 — على الأرجح للأرقام الأضيق وتشكيل الأحرف الخاصة. لم تُرصد ميزات التشبيك أو الأرقام الكسرية.

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

الدور الحجم الوزن ارتفاع السطر تباعد الحروف ملاحظات
عنوان القسم 28 بكسل / 1.75 rem 700 1.43 0 "إلهام لرحلات مستقبلية" — عناوين مستوى الصفحة
عنوان القسم الفرعي 22 بكسل / 1.38 rem 500 1.18 -0.44 بكسل "ما يقدمه هذا المكان"، "تعرف على المضيفين" — فواصل المحتوى
عنوان البطاقة 21 بكسل / 1.31 rem 700 1.43 0 عناوين لوحة التقييمات، عناوين البطاقات الرئيسية
عنوان المنشور 20 بكسل / 1.25 rem 600 1.20 -0.18 بكسل "جولة يخت للمجموعات الصغيرة، نبيذ وفاكهة لا محدودة" — عناوين المنشورات في صفحات التفاصيل
ترجمة عريضة 16 بكسل / 1.00 rem 600 1.25 0 اسم المضيف، اسم المدينة
نص متوسط 16 بكسل / 1.00 rem 500 1.25 0 نص الجسم الأساسي في صفحات التفاصيل
زر كبير 16 بكسل / 1.00 rem 500 1.25 0 "احجز"، "كن مضيفاً"
زر افتراضي 14 بكسل / 0.88 rem 500 1.29 0 تسميات الزر القياسية
رابط 14 بكسل / 0.88 rem 500 1.43 0 روابط التنقل، روابط التذييل
تعليق متوسط 14 بكسل / 0.88 rem 500 1.29 0 البيانات الوصفية، خطوط الترجمة ("تأجير الأكواخ"، "تأجير الفيلات")
تعليق عريض 14 بكسل / 0.88 rem 600 1.43 0 ميزة salt ممكّنة — إحصاءات رقمية، تأكيد النص الصغير
تعليق صغير 13 بكسل / 0.81 rem 400 1.23 0 تواريخ التقييمات، البيانات الوصفية الدقيقة
مايكرو افتراضي 12 بكسل / 0.75 rem 400 1.33 0 إخلاء مسؤولية التذييل، النص القانوني الدقيق
مايكرو عريض 12 بكسل / 0.75 rem 700 1.33 0 تسميات حبة "جديد"
شارة أحرف كبيرة 11 بكسل / 0.69 rem 600 1.18 0 ميزة salt — شارات الفئة/الحالة المضغوطة
مرتفع 8 بكسل / 0.50 rem 700 1.25 0.32 بكسل أحرف كبيرة — حواشي الأسعار، الذيول العشرية

المبادئ

  • عائلة واحدة، أوزان عديدة. يتعامل Airbnb Cereal VF مع كل شيء من النص القانوني 8 بكسل إلى عناوين الصفحات 28 بكسل — الهوية البصرية تأتي من العائلة نفسها، وليس من مزج الخطوط.
  • 500 هو الـ 400 الجديد. وزن "العادي" للنظام هو 500، مما يمنح كل فقرة ملمساً أكثر ثقة قليلاً من الافتراضي على الويب.
  • التتبع السلبي فقط على أنواع العرض. تضغط العناوين بحجم 20 بكسل وما فوق التتبع بمقدار -0.18 إلى -0.44 بكسل للشعور بالنحت؛ أحجام الجسم تبقى عند 0 تتبع لسهولة القراءة.
  • ارتفاعات السطر الضيقة للعناوين، السخية للجسم. تعمل أنواع العرض عند 1.18–1.25 (ضيق)؛ الجسم والتعليقات تفتح إلى 1.43 للراحة في النماذج الطويلة.
  • لا أحرف كبيرة بالكامل إلا عند 8 بكسل. التحويل الوحيد للأحرف الكبيرة في النظام هو المرتفع 8 بكسل — في كل مكان آخر، يقوم جمل الحالة مع تحولات الوزن الدقيقة بالعمل.

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

Airbnb Cereal VF ملكية خاصة. أقرب بديل مفتوح المصدر هو Circular Std (لا يزال تجارياً) أو Inter (مجاني، Google Fonts) مع تقليل تباعد الحروف بمقدار -0.01em في أحجام العرض. للأمانة الصارمة للعلامة التجارية، تعمل سلسلة الاحتياطي الموثقة (Circular, -apple-system, system-ui) بشكل مقبول على macOS/iOS حيث يُحلَّل system-ui إلى San Francisco، الذي له نسب مماثلة.

4. أنماط تصميم المكونات

الأزرار

الدعوة للإجراء الأساسية ("احجز"، "ابحث"، "أضف تواريخ")

  • الخلفية: Rausch #ff385c
  • النص: Canvas White #ffffff، Airbnb Cereal 500، 16 بكسل
  • الحشو: ~14 بكسل رأسي، 24 بكسل أفقي
  • نصف القطر: 8 بكسل (مستطيل) أو 50% (نوع الأيقونة الدائرية)
  • الحدود: لا يوجد
  • نشط/مضغوط: transform: scale(0.92) بالإضافة إلى حلقة تركيز 2 بكسل #222222 عند 0 0 0 2px

الزر الثانوي ("كن مضيفاً"، إجراءات ثلاثية محدودة)

  • الخلفية: #ffffff
  • النص: Ink Black #222222، Airbnb Cereal 500، 14–16 بكسل
  • الحشو: 10 بكسل 16 بكسل
  • نصف القطر: 20 بكسل (حبة) أو 8 بكسل (مستطيل)
  • الحدود: 1 بكسل صلب Hairline Gray #dddddd

زر الأيقونة الدائري فقط (سهم الرجوع، مشاركة، مفضلة، عناصر تحكم الدوارة)

  • الخلفية: #f2f2f2 (أبيض خفيف الإبعاد) أو أبيض مع حدود سوداء شفافة 1 بكسل
  • الأيقونة: ضربة مخطط #222222، 16–20 بكسل
  • الحجم: قطر 32–44 بكسل
  • نصف القطر: 50%
  • نشط/مضغوط: transform: scale(0.92)؛ حلقة بيضاء خفية 4 بكسل 0 0 0 4px rgb(255,255,255) للفصل عن خلفيات التصوير الملونة

زر معطل

  • الخلفية: #f2f2f2
  • النص: Stone Gray #c1c1c1
  • الشفافية: 0.5

زر علامة تبويب الحبة (محدد الفئات "المنازل / التجارب / الخدمات")

  • الخلفية: شفاف
  • النص: Ink Black #222222، Airbnb Cereal 500، 16 بكسل
  • الحشو: 8 بكسل 14 بكسل
  • الحالة النشطة: تسطير Ink Black بعرض 2 بكسل أسفل التسمية
  • مقرون بأيقونة مرسومة مُصنَّعة ثلاثية الأبعاد 36–48 بكسل فوق التسمية

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

بطاقة المنشور (شبكة الصفحة الرئيسية، نتائج البحث)

  • الخلفية: #ffffff
  • نصف القطر: 14 بكسل على الصورة، يجلس النص مباشرة أسفله على خلفية شفافة
  • الصورة: نسبة 4:3، كاملة الشاشة، مدورة بنصف القطر نفسه 14 بكسل
  • الحشو: لا يوجد على الحاوية الخارجية؛ 12 بكسل مسافة بين الصورة وصفوف البيانات الوصفية
  • الظل: لا يوجد — يأتي الفصل من المساحة البيضاء ونصف القطر الجوهري للصورة
  • نمط البيانات الوصفية: المدينة/المنطقة في السطر 1 (16 بكسل 600)، المسافة/المدة في السطر 2 (14 بكسل 500 Ash Gray)، نطاق التاريخ في السطر 3، صف السعر مع "لليلة" في الأسفل

لوحة حجز صفحة التفاصيل (القضيب الأيمن الثابت في صفحات الغرفة/التجربة)

  • الخلفية: #ffffff
  • نصف القطر: 14–20 بكسل
  • الحدود: 1 بكسل صلب Hairline Gray #dddddd
  • الظل: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 — ارتفاع خفي من ثلاث طبقات متراكبة
  • الحشو: 24 بكسل
  • العرض: ~370 بكسل، مثبت 120–140 بكسل أسفل أعلى نافذة العرض
  • المحتوى: عنوان السعر ← منتقي التاريخ ← قائمة منسدلة للضيوف ← الدعوة للإجراء الأساسية ← حاشية "لن يُحسب عليك أي رسوم بعد"

بطاقة شبكة المرافق (في صفحات تفاصيل المنشور)

  • الخلفية: #ffffff
  • الحدود: 1 بكسل صلب Hairline Gray #dddddd على مستوى الصف (وليس لكل عنصر)
  • الحشو: 16 بكسل رأسي لكل صف مرافق
  • نمط الأيقونة + التسمية: أيقونة مخطط 24 بكسل على اليسار، تسمية وزن 500 بـ 16 بكسل على اليمين

بطاقة التقييم (تقييم فردي في صفحات التفاصيل)

  • الخلفية: #ffffff، لا حدود
  • الحشو: 0 (يعتمد على فجوات الشبكة)
  • المحتوى: أفاتار دائري 40 بكسل + اسم بوزن 600 بـ 16 بكسل + تاريخ Ash Gray 400 بـ 14 بكسل في صف واحد، ثم فقرة جسم وزن 500 بـ 14 بكسل أدناه

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

شريط البحث (الصفحة الرئيسية الأساسية)

  • الخلفية: #ffffff
  • الحدود: 1 بكسل صلب Hairline Gray #dddddd يلف الأجزاء الثلاثة (أين / متى / من)
  • نصف القطر: 32 بكسل (حبة كاملة)
  • الظل: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — إحساس عائم خفي
  • الهيكل: ثلاثة أجزاء مفصولة بفواصل رأسية رفيعة، كل جزء يحتوي على تسمية وزن 500 بـ 12 بكسل فوق عنصر نائب وزن 500 بـ 14 بكسل
  • الإرسال: زر الأيقونة الدائرية Rausch على الحافة اليمنى، قطر 48 بكسل

مدخل النص (النماذج العامة)

  • الخلفية: #ffffff
  • الحدود: 1 بكسل صلب Hairline Gray #dddddd
  • نصف القطر: 8 بكسل
  • الحشو: 14 بكسل 16 بكسل
  • التركيز: تنتقل الحدود إلى Ink Black، تضيف حلقة خارجية سوداء 0 0 0 2px
  • الخطأ: تنتقل الحدود إلى #c13515 (Error Red)، يستخدم النص المساعد نفس اللون

منتقي التاريخ

  • شبكة التقويم: تخطيط 7 أعمدة، خلايا يوم دائرية 50% عرضها 40–44 بكسل
  • النطاق المحدد: خلفية Ink Black #222222 مع أرقام بيضاء
  • مراسي البداية/النهاية: دوائر مملوءة أكبر؛ التواريخ الوسطى تستخدم صبغة Soft Cloud #f7f7f7

التنقل

التنقل العلوي (سطح المكتب)

  • الارتفاع: ~80 بكسل
  • الخلفية: #ffffff
  • اليسار: تخطيط شعار الكلمة + شعار Airbnb في Rausch (102×32 بكسل)
  • الوسط: محدد الفئات ثلاثي التبويب (المنازل / التجارب / الخدمات) مع أيقونات 3D بـ 36–48 بكسل مكدسة فوق تسميات وزن 500 بـ 16 بكسل؛ علامة التبويب النشطة لها تسطير Ink Black بـ 2 بكسل
  • اليمين: رابط نص "كن مضيفاً"، ثم كرة أرضية دائرية 32 بكسل (اللغة)، ثم قائمة أفاتار الهامبورغر 36 بكسل
  • حد سفلي: 1 بكسل صلب Hairline Gray #dddddd

التنقل العلوي (الهاتف المحمول)

  • حبة بحث بصف واحد تشغل العرض الكامل: عنصر نائب "ابدأ بحثك" مع أيقونة مكبر صغيرة
  • أدناه: يستمر محدد الفئات ثلاثي التبويب (المنازل / التجارب / الخدمات) — تتقلص الأيقونات المرسومة إلى ~28 بكسل
  • شريط علامات التبويب الثابت في الأسفل: استكشاف (حالة نشطة Rausch) / قوائم الأمنيات / تسجيل الدخول — أيقونات 24 بكسل فوق تسميات 12 بكسل

التنقل الثانوي لصفحة تفاصيل المنشور

  • تمرير أفقي ثابت من روابط المراسي (الصور · المرافق · التقييمات · الموقع · المضيف) يظهر عند التمرير لما هو أبعد من صورة البطل
  • الارتفاع: 56 بكسل
  • حد سفلي: 1 بكسل صلب Hairline Gray

معالجة الصور

  • نسب العرض الأساسية: 4:3 لشبكات المنشورات في الصفحة الرئيسية، 16:9 لتصوير بطل التجارب، 1:1 للأفاتارات
  • نصف القطر: 14 بكسل على صور شبكة المنشورات، 20 بكسل على أطر صورة بطل صفحة التفاصيل، 50% على الأفاتارات
  • شبكة الصور في صفحات التفاصيل: شبكة خمس صور بصورة واحدة كبيرة على اليسار (عرض 50%) وأربع صور أصغر في شبكة 2×2 على اليمين، تتشارك جميعها في الحاوية الخارجية المدورة 20 بكسل
  • التحميل الكسول: استخدام مكثف لـ loading="lazy" مع معاينات عنصر نائب ضبابية
  • الدوارة: أزرار سهم دائرية 32 بكسل تغطي الصورة، مركزة رأسياً؛ مؤشرات النقاط تجلس 12 بكسل فوق الحافة السفلية

المكونات المميزة

تخطيط جائزة المفضلة لدى الضيوف (بارز في صفحات تفاصيل المنشورات ذات التقييم العالي)

  • رقم التقييم المركزي المعروض بـ 44–56 بكسل بوزن 700
  • رسمان توضيحيان بـ SVG لإكليل الغار مرسومان يدوياً يجلسان على اليسار واليمين بارتفاع ~48 بكسل
  • أدناه: تسمية "المفضلة لدى الضيوف" بـ 12 بكسل 700 أحرف كبيرة مع تتبع 0.32 بكسل، وترجمة فرعية قصيرة بـ 14 بكسل 500 Ash Gray
  • كتلة بعرض كامل، لا حدود للحاوية — تجلس مباشرة على اللوحة البيضاء

محدد الفئات ثلاثي التبويب (يظهر في أعلى كل سطح تصفح)

  • ثلاث علامات تبويب: المنازل / التجارب / الخدمات
  • كل علامة تبويب: أيقونة مرسومة مُصنَّعة ثلاثية الأبعاد (~48 بكسل ارتفاع) فوق تسمية وزن 500 بـ 16 بكسل
  • تحمل التجارب والخدمات حالياً حبة صغيرة "جديد" باللون الأزرق الداكن (نص أبيض 12 بكسل 700 على خلفية زرقاء داكنة) تعوم في أعلى يمين الأيقونة
  • علامة التبويب النشطة: تسطير Ink Black بـ 2 بكسل أسفل التسمية

شبكة مدن الإلهام (الصفحة الرئيسية "إلهام لرحلات مستقبلية")

  • شبكة 6 أعمدة من روابط الوجهات على سطح المكتب، عمودان على الهاتف المحمول
  • كل خلية: اسم مدينة 16 بكسل 600 في السطر 1، ترجمة فرعية لنوع الإيجار Ash Gray 500 بـ 14 بكسل في السطر 2 ("تأجير الأكواخ"، "تأجير الفيلات")
  • لا صور — شبكة نصية فقط
  • مع علامات تبويب أعلاه حسب الفئة (الأكثر شهرة / الفنون والثقافة / الشاطئ / الجبال / الهواء الطلق / أشياء تفعلها / نصائح وإلهام السفر / الشقق الصديقة لـ Airbnb) — علامة التبويب النشطة لها تسطير 2 بكسل وتحول الوزن

بطاقة الحجز الثابتة (صفحات تفاصيل المنشور)

  • تبقى ثابتة 120 بكسل أسفل أعلى نافذة العرض على سطح المكتب بينما يتمرر المستخدم لما هو أبعد من البطل
  • تنهار إلى شريط سفلي بعرض كامل على الهاتف المحمول مع تسمية "من $X / ليلة" وحبة Rausch "احجز"
  • تُظهر دائماً: عنوان السعر ← عرض التاريخ ← محدد الضيوف ← الدعوة للإجراء Rausch ← إخلاء مسؤولية "لن يُحسب عليك أي رسوم بعد"

بطاقة مضيف التجربة (صفحات تفاصيل التجربة)

  • حاوية دائرية بعرض كامل مع صورة غلاف 3:2 في الأعلى
  • أفاتار المضيف (دائري، 56 بكسل) يتداخل مع الحافة السفلية للغلاف بنسبة 50%
  • أسفل التداخل: اسم المضيف بـ 16 بكسل 700، مدة خدمة المضيف بـ 14 بكسل 500 Ash Gray، زر حبة Rausch الصغير "راسل المضيف"
  • يُستخدم كمرحلة انتقالية بين التقييمات وكتلة المرافق/الموقع

شريط "أشياء يجب معرفتها" (صفحات تفاصيل المنشور)

  • شبكة 3 أعمدة من كتل القواعد/السياسات (قواعد المنزل، السلامة والممتلكات، سياسة الإلغاء)
  • كل عمود: أيقونة في الأعلى، عنوان 16 بكسل 600، نص جسم Ash Gray 14 بكسل 500، رابط "عرض المزيد" في تسطير Ink Black
  • الفاصل: حدود علوية وسفلية بـ 1 بكسل Hairline Gray على الشريط الكامل

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

نظام التباعد

  • الوحدة الأساسية: 8 بكسل
  • المقياس المستخرج: 2، 3، 4، 5.5، 6، 8، 10، 11، 12، 15، 16، 18.5، 22، 24، 32 بكسل — دقيق الحبوب مع عدد قليل من القيم خارج الشبكة المستخدمة لمحاذاة الأيقونات الكاملة للبكسل
  • حشو القسم: ~48–64 بكسل أعلى/أسفل على سطح المكتب، 24–32 بكسل على الهاتف المحمول
  • الحشو الداخلي للبطاقة: 24 بكسل في لوحات الحجز والبطاقات الكبيرة، 16 بكسل في صفوف المرافق، 12 بكسل في بيانات بطاقة المنشور الوصفية
  • الممر بين بطاقات المنشور: 24 بكسل سطح المكتب، 16 بكسل الهاتف المحمول
  • بين صفوف النص المكدسة: 4–8 بكسل (ضيق جداً — يعزز إحساس "المعلومات الكثيفة" لمنشورات السفر)

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

  • أقصى عرض للمحتوى: 1760–1920 بكسل على العرض الفائق (يترك Airbnb الشبكة تتنفس أكثر من معظم المواقع)؛ 1280 بكسل على معظم صفحات التفاصيل
  • شبكة منشورات الصفحة الرئيسية: 6 أعمدة عند ≥1760 بكسل، 5 عند ≥1440 بكسل، 4 عند ≥1128 بكسل، 3 عند ≥800 بكسل، 2 عند ≥550 بكسل، 1 أسفل ذلك
  • صفحة التفاصيل: عمودان غير متماثلين — المحتوى الرئيسي ~58%، لوحة الحجز الثابتة ~36% على اليمين، ~6% ممر
  • التذييل: 3 أعمدة دعم / استضافة / Airbnb

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

Airbnb غزير المعلومات لكنه لا يكتظ أبداً. تُستخدم المساحة البيضاء للـ تجميع — بطاقات المنشورات لها 24 بكسل ممر حتى تُقرأ كل صورة كجسم متميز، لكن البيانات الوصفية تحت كل بطاقة تستخدم فجوات 4–8 بكسل حتى يبدو السعر/المدينة/التاريخ كوحدة واحدة. لوحة حجز صفحة التفاصيل لها حشو داخلي 24 بكسل، لكن الصفوف ضمنها (منتقي التاريخ، محدد الضيوف، الدعوة للإجراء) مكدسة بـ 12 بكسل — الحدود بين البطاقة والصفحة تؤدي مزيداً من عمل الفصل من المحتوى ضمنها.

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

نصف القطر الاستخدام
4 بكسل علامات المراسي المضمنة، رقائق العلامات
8 بكسل أزرار النص، القوائم المنسدلة، أزرار الأدوات المساعدة الصغيرة
14 بكسل تصوير بطاقة المنشور، حاويات المحتوى العامة، الشارات
20 بكسل الأزرار المستديرة الأساسية (شكل الحبة)، الصور الكبيرة، لوحة الحجز
32 بكسل حبة شريط البحث، حاويات فائقة الكبر
50% جميع أزرار الأيقونات الدائرية، جميع الأفاتارات، قلوب قائمة الأمنيات — الهندسة الدائرية المميزة للنظام

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

المستوى المعالجة الاستخدام
0 لا ظل بطاقات المنشور، محتوى الجسم، الأقسام النصية فقط
1 rgba(0, 0, 0, 0.08) 0 4px 12px أزرار الأيقونات النشطة/المضغوطة (مثل الرجوع، المشاركة، المفضلة) — رفع خفي للإشارة إلى التفاعل
2 rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 بطاقة لوحة الحجز الثابتة، المشاريع، قوائم القائمة المنسدلة — ارتفاع الثلاث طبقات المميز للنظام
حلقة التركيز 0 0 0 2px #222222 أزرار الحالة النشطة، إدخال البحث المركّز
حلقة الفاصل الأبيض rgb(255, 255, 255) 0 0 0 4px الأزرار الدائرية المغطاة على الصور — حلقة بيضاء 4 بكسل تفصل الزر بنظافة عن خلفيات الصور الملونة

فلسفة الظل: يستخدم Airbnb ظلالاً متراكبة ومتعددة الطبقات بدلاً من ظل واحد. يُقرأ ظل لوحة الحجز ثلاثي الطبقات كارتفاع متماسك واحد لكنه في الواقع ثلاثة ظلال منفصلة بقيم شفافية/تعتيم مختلفة — يخلق تنعيم حواف خفياً عند محيط الظل يبدو متميزاً دون أن يكون ثقيلاً.

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

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

7. افعل ولا تفعل

افعل

  • احجز Rausch #ff385c للإجراءات الأساسية ومؤشر علامة التبويب النشطة — لا تخففه أبداً بالاستخدامات الزخرفية.
  • اترك مجالاً للتصوير الفوتوغرافي ليتنفس — قصاصات 4:3 مع زوايا مدورة 14–20 بكسل، لا نص مغطى، لا شاشات تدرجية.
  • استخدم Ink Black #222222 لكل طبقة نص تحت Rausch — هذا هو شبه الأسود للنظام، ولا تستخدم أبداً #000000 الحقيقي.
  • قرن الأيقونات المرسومة ثلاثية الأبعاد لمحدد الفئات ثلاثي التبويب بالطباعة المسطحة — لا تخلط أساليب الرسم التوضيحي داخل سطح واحد.
  • كدّس ثلاثة ظلال منخفضة الشفافية (~2%، 4%، 10%) لإنشاء ارتفاع لوحة الحجز المميز.
  • استخدم حدود Hairline Gray #dddddd بـ 1 بكسل لكل فاصل من بطاقة إلى بطاقة ومن صف إلى صف.
  • عامل لوحة الحجز كـثابتة على سطح المكتب، تنهار إلى شريط حجز مثبت في الأسفل على الهاتف المحمول.
  • استخدم تباعد 4–8 بكسل داخل مجموعات البيانات الوصفية و24 بكسل بين البطاقات — كثافة المعلومات مقصودة.

لا تفعل

  • لا تُدخل ألوان لهجة ثانوية خارج لوحة مستوى المنتج Rausch / Plus Magenta / Luxe Purple.
  • لا تضع نصاً داخل الصور — التعليقات تجلس دائماً أسفل الصورة، وليس أعلاها مباشرة.
  • لا تستخدم تسميات بالأحرف الكبيرة الكاملة باستثناء دور المرتفع الفردي 8 بكسل.
  • لا تُدور أزرار الأيقونات إلى أي شيء آخر غير 50% — الاستدارة هي الهندسة المميزة للنظام.
  • لا تضف ظلالاً إلى بطاقات المنشور — تجلس على لوحة بيضاء بدون ارتفاع.
  • لا تستخدم خلفيات تدرجية — التدرج الوحيد في النظام هو كنسة ضيقة من Rausch ← ماجنتا على الشعار الكلمي.
  • لا تستخدم وزن الخط 400-عادي — وزن جسم Airbnb Cereal هو 500.
  • لا تتجاوز Airbnb Cereal VF بوجه عرض مختلف — النظام عائلة واحدة بتعمد.

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

نقاط التوقف

يعلن Airbnb عن ~60 نقطة توقف (أثر تصميم وقت الإنشاء من مكتبة المكونات)، لكن تحولات التخطيط ذات المعنى تحدث في مجموعة أصغر بكثير:

الاسم العرض التغييرات الرئيسية
فائق العرض ≥1760 بكسل شبكة منشورات 6 أعمدة، أقصى عرض للمحتوى 1760–1920 بكسل
سطح المكتب XL 1440–1759 بكسل شبكة 5 أعمدة، التنقل الكامل مرئي، لوحة الحجز الثابتة على القضيب الأيمن
سطح المكتب 1128–1439 بكسل شبكة 4 أعمدة، لوحة الحجز الثابتة تستمر
كمبيوتر محمول 1024–1127 بكسل شبكة 3–4 أعمدة، يبقى تنقل الفئات أفقياً
لوحي 800–1023 بكسل شبكة 3 أعمدة، قد ينهار البحث العام إلى حبة صف واحد
لوحي صغير 550–799 بكسل شبكة عمودين، تنتقل لوحة الحجز إلى كتلة مضمنة بعرض كامل
هاتف محمول 375–549 بكسل تخطيط مكدس 1 عمود، يظهر شريط علامات التبويب الثابت في الأسفل (استكشاف / قوائم الأمنيات / تسجيل الدخول)
هاتف محمول صغير <375 بكسل يضيق حشو الحافة إلى 16 بكسل؛ تتقلص أيقونات محدد الفئات إلى ~28 بكسل

أهداف اللمس

تلبي جميع العناصر التفاعلية 44×44 بكسل أو تتجاوزها. عائلة أزرار الأيقونات الدائرية بحجم 32–44 بكسل تحديداً مع حشو منطقة الضرب الموسعة 8–12 بكسل. زر الحجز الأساسي Rausch بارتفاع ~48 بكسل. منطقة الضرب لمحدد الفئات ثلاثي التبويب هي المستطيل الكامل للتسمية والأيقونة (عادةً ~64×80 بكسل لكل علامة تبويب).

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

  • التنقل: يحتفظ التنقل العلوي بشعار Airbnb الكلمي + محدد ثلاثي التبويب على اللوحي وما فوق؛ على الهاتف المحمول ينزلق المحدد أسفل حبة البحث مباشرة، وتنتقل ضوابط الكرة الأرضية/الأفاتار إلى شريط علامات التبويب المثبت في الأسفل.
  • شريط البحث: حبة ثلاثة أجزاء (أين / متى / من) مع زر إرسال دائري Rausch على سطح المكتب؛ تنهار إلى حبة "ابدأ بحثك" صف واحد على الهاتف المحمول، النقر عليها يفتح ورقة بحث الشاشة الكاملة.
  • لوحة الحجز: القضيب الأيمن الثابت على ≥1128 بكسل؛ مضمنة داخل عمود المحتوى الرئيسي بين 800–1127 بكسل؛ حبة "احجز" الثابتة في الأسفل على <800 بكسل.
  • شبكة المنشورات: تعيد التدفق من 6 ← 5 ← 4 ← 3 ← 2 ← 1 أعمدة عبر نقاط التوقف.
  • شبكة صور صفحة التفاصيل: تخطيط خمس صور (1 كبيرة + 4 صغيرة) على سطح المكتب؛ يصبح دوارة بالشاشة الكاملة قابلة للتمرير على الهاتف المحمول مع مؤشرات نقطة الصفحة.
  • التذييل: يطوي التخطيط ذو 3 أعمدة إلى عمود واحد مكدس عند <800 بكسل.

سلوك الصورة

  • loading="lazy" عالمي، مع صور مصغرة معاينة im_w= ذات معامل URL الضبابية تُقدَّم أولاً
  • تستخدم الصور المتجاوبة شبكة التوصيل muscache.com لـ Airbnb مع معامل الاستعلام im_w للتسليم القائم على العرض (im_w=240, im_w=720, im_w=1200, im_w=2400)
  • لا قصاصات توجيه الفن — يتم تكبير/تصغير نفس الصورة عبر نقاط التوقف
  • الدوارة تضبط تلقائياً ارتفاع الصورة للحفاظ على نسبة 4:3 متسقة بغض النظر عن النسبة المصدرية

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

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

  • الدعوة للإجراء الأساسية: "Rausch (#ff385c)"
  • خلفية الصفحة: "Canvas White (#ffffff)"
  • السطح الفرعي: "Soft Cloud (#f7f7f7)"
  • نص العنوان/الجسم: "Ink Black (#222222)"
  • النص الثانوي: "Ash Gray (#6a6a6a)"
  • الحدود/الفاصل: "Hairline Gray (#dddddd)"
  • الخطأ: "Error Red (#c13515)"
  • رابط المعلومات: "Info Blue (#428bff)"
  • لهجة مستوى Luxe: "Luxe Purple (#460479)"
  • لهجة مستوى Plus: "Plus Magenta (#92174d)"

أمثلة على موجهات المكونات

  • "أنشئ زر الحجز الأساسي: خلفية Rausch (#ff385c)، تسمية Airbnb Cereal بيضاء بوزن 500 عند 16 بكسل، حشو 14 بكسل × 24 بكسل، border-radius 8 بكسل، لا ظل. عند النشاط/الضغط أضف transform: scale(0.92) مع حلقة تركيز Ink Black بعرض 2 بكسل (0 0 0 2px #222222)."
  • "ابنِ بطاقة منشور بصورة فوتوغرافية 4:3 كاملة الشاشة عند border-radius 14 بكسل، لا ظل للحاوية؛ أسفل الصورة كدّس ثلاثة صفوف نص بفجوات 4 بكسل: اسم المدينة عند 16 بكسل 600 Ink Black، نوع الإيجار عند 14 بكسل 500 Ash Gray (#6a6a6a)، ونطاق السعر في 16 بكسل 500 Ink Black مع لاحقة لليلة بـ 14 بكسل."
  • "صمّم لوحة حجز ثابتة: خلفية بيضاء، border-radius 14 بكسل، حدود Hairline Gray (#dddddd) 1 بكسل، ظل ارتفاع 3 طبقات (rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0)، حشو 24 بكسل، عرض 370 بكسل، مثبت 120 بكسل أسفل أعلى نافذة العرض على سطح المكتب. المحتوى: عنوان السعر، منتقي التاريخ، قائمة منسدلة للضيوف، الدعوة للإجراء الأساسية Rausch، وإخلاء مسؤولية Ash Gray بـ 12 بكسل لن يُحسب عليك أي رسوم بعد."
  • "أنشئ محدد فئات ثلاثي التبويب: ثلاث علامات تبويب بعرض متساوٍ بتسميات المنازل والتجارب والخدمات؛ لكل علامة تبويب أيقونة مرسومة مُصنَّعة ثلاثية الأبعاد ~48 بكسل (منزل، بالون، جرس) فوق تسمية Ink Black بوزن 500 بـ 16 بكسل؛ علامة التبويب النشطة تحصل على تسطير Ink Black بـ 2 بكسل؛ أضف حبة جديد بيضاء صغيرة 12 بكسل 700 على خلفية زرقاء داكنة في أعلى يمين أيقونات التجارب والخدمات."
  • "اعرض تخطيط جائزة المفضلة لدى الضيوف: رقم تقييم مركزي عند 52 بكسل بوزن 700 Ink Black، يجلس على اليسار واليمين رسمان توضيحيان بـ SVG لإكليل الغار مرسومان يدوياً عند ~48 بكسل ارتفاع؛ أدناه، تسمية بأحرف كبيرة المفضل لدى الضيوف بـ 12 بكسل 700 مع تتبع 0.32 بكسل؛ ترجمة فرعية عند 14 بكسل 500 Ash Gray؛ كتلة بعرض كامل تجلس مباشرة على لوحة بيضاء بدون حدود للحاوية."

دليل التكرار

عند تحسين الشاشات الحالية المُنشأة بهذا نظام التصميم:

  1. ركز على مكون واحد في كل مرة.
  2. استشهد بأسماء ألوان محددة ورموز hex من هذا المستند (مثل "Ink Black #222222"، وليس "رمادي داكن").
  3. استخدم أوصافاً باللغة الطبيعية جانباً القياسات ("ارتفاع خفي بثلاث طبقات" بدلاً من سلسلة ظل طويلة).
  4. صف "الإحساس" المطلوب ("على غرار المجلة، الصورة أولاً" مقابل "أداة مكثفة").
  5. تقصَّ دائماً Airbnb Cereal VF بوزن 500 للجسم و600–700 للتأكيد — لا تستخدم 400 أبداً.
  6. أبقِ الوردي Rausch نادراً — إذا ظهر أكثر من عنصر ملون بـ Rausch لكل نافذة عرض، ففكر فيما إذا كان ينبغي تحييد أحدها.

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

  • بطاقات شبكة المنشورات في الصفحة الرئيسية: لم يتم التقاط شبكة بطاقات العقارات الرئيسية (السطح البصري الأساسي لـ airbnb.com) بالكامل في لقطات الشاشة المستخرجة من الصفحة الرئيسية — حمّل المحتوى جزئياً فقط. مواصفات بطاقة المنشور أعلاه مستنتجة من هيكل شبكة الإلهام والاتفاقيات الأوسع لـ Airbnb؛ أكّد نسب العرض الدقيقة وتسلسل البيانات الوصفية الهرمي مقابل الموقع المباشر قبل الاستخدام الإنتاجي.
  • أيقونات فئة التجارب: يتم تقديم الأيقونات المرسومة ثلاثية الأبعاد لـ المنازل / التجارب / الخدمات كأصول نقطية؛ مواصفات ملف مصدرها الدقيقة (SVG مقابل PNG، أبعاد البكسل المُصنَّع) غير موثقة هنا.
  • توقيتات الرسوم المتحركة والانتقالية: لم يتم التقاطها — نطاق الاستخراج الثابت.
  • الوضع الداكن: لا يشحن Airbnb وضعاً داكناً أصلياً في أسطح المنتج المستخرجة؛ يصف هذا المستند فقط ثيم الوضع الفاتح الفردي.
Reference in new issue View Git Blame Copy Permalink