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

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

Category: وسائل الإعلام والمستهلكين منصة تنقل. أسود وأبيض جريء، طباعة محكمة، طاقة حضرية.

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

لغة تصميم Uber هي درس في الحد الأدنى الواثق من نفسه — كون أسود وأبيض حيث كل بكسل يؤدي غرضاً محدداً، ولا شيء يُزيِّن دون أن يكسب حقه في الوجود. يُبنى التجربة بأكملها على ثنائية صارمة: الأسود الحالك (#000000) والأبيض النقي (#ffffff)، مع غياب شبه تام لأي رمادي متوسط يضعف الرسالة. هذا ليس الحد الأدنى المُجرَّد لشركة ناشئة لم تُكمل تصميمها — بل هو تحفظ مقصود من علامة تجارية راسخة بما يكفي لتهمس بدلاً من أن تصرخ.

الخط المميز UberMove هو خط هندسي بلا زوايا مزخرفة، خاص بالشركة، ذو طابع مربع ومهندس بوضوح. العناوين بخط UberMove Bold بحجم 52px تحمل ثقل لافتة إعلانية — تسلطية، مباشرة، لا تعتذر. الخط المصاحب UberMoveText يتولى نص الجسم والأزرار بطابع أكثر ليونة وقابلية للقراءة بوزن متوسط (500). يُشكِّلان معاً نظاماً طباعياً يشبه خريطة مواصلات: واضح، فعّال، مبني للمسح البصري السريع.

ما يجعل تصميم Uber مميزاً حقاً هو استخدامه للصور الفوتوغرافية والرسوم التوضيحية بالعرض الكامل، مقترنةً بعناصر تفاعلية على شكل حبوب (border-radius بقيمة 999px). شرائح التنقل وأزرار الدعوة للإجراء ومحددات الفئات تشترك جميعها في هذا الشكل الكبسولي، مما يخلق لغة واجهة ملموسة وملائمة للإبهام لا تُخطئها عين. الرسوم التوضيحية — مشاهد دافئة ومُسلوبة قليلاً للسائقين والركاب والمشهد الحضري — تُضخّ فيها إنسانية في نظام قد يبدو بارداً وأحادي اللون بدونها. يتناوب الموقع بين أقسام محتوى بيضاء وتذييل أسود كامل، مع تخطيطات بطاقية تستخدم أخف الظلال الممكنة (rgba(0,0,0,0.12-0.16)) لإيجاد إحساس بالارتفاع الخفيف دون كسر الجمالية المسطحة.

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

أساس أسود وأبيض خالص مع غياب شبه تام للرمادي المتوسط في واجهة المستخدم
UberMove (العناوين) + UberMoveText (الجسم/واجهة المستخدم) — عائلة خطوط هندسية بلا زوايا مزخرفة، خاصة بالشركة
كل شيء على شكل حبة: الأزرار والشرائح وعناصر التنقل تستخدم جميعها 999px border-radius
رسوم توضيحية دافئة وإنسانية تتناقض مع الواجهة الأحادية اللون الصارمة
تخطيط بطاقي مع ظلال خافتة كالهمس (opacity بين 0.12 و0.16)
شبكة تباعد 8px مع تخطيطات مضغوطة ومكثفة المعلومات
تصوير جريء مدمج كخلفيات مقطع رئيسي بعرض كامل
تذييل أسود يُرسِّخ الصفحة بيئة داكنة عالية التباين

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

الألوان الأساسية

Uber Black (#000000): لون العلامة التجارية المحدِّد — يُستخدم للأزرار الرئيسية والعناوين ونص التنقل والتذييل. ليس "شبه أسود" أو "قريب من الأسود"، بل أسود حقيقي لا يقبل المساومة.
Pure White (#ffffff): لون السطح الأساسي والنص العكسي. يُستخدم لخلفيات الصفحات وأسطح البطاقات والنص على العناصر السوداء.

الحالات التفاعلية وحالات الأزرار

Hover Gray (#e2e2e2): حالة تمرير زر أبيض — رمادي فاتح بارد نظيف يوفر تغذية راجعة واضحة دون دفء.
Hover Light (#f3f3f3): تمرير خفيف للأزرار البيضاء المرتفعة — رمادي خفيف بالكاد ملحوظ للتفاعل اللطيف.
Chip Gray (#efefef): خلفية الأزرار الثانوية/التصفية وشرائح التنقل — رمادي محايد فاتح للغاية.

النص والمحتوى

Body Gray (#4b4b4b): النص الثانوي وروابط التذييل — رمادي متوسط حقيقي دون تحيز دافئ أو بارد.
Muted Gray (#afafaf): النص الثالثي وروابط التذييل المخففة ومحتوى العناصر النائبة.

الحدود والفواصل

Border Black (#000000): حدود رفيعة بسماكة 1px للاحتواء الهيكلي — تُستخدم باعتدال على الفواصل وحاويات النماذج.

الظلال والعمق

Shadow Light (rgba(0, 0, 0, 0.12)): ارتفاع بطاقة قياسي — ارتفاع خفيف كالريشة لبطاقات المحتوى.
Shadow Medium (rgba(0, 0, 0, 0.16)): ارتفاع أقوى قليلاً للأزرار العائمة والطبقات المتراكبة.
Button Press (rgba(0, 0, 0, 0.08)): ظل داخلي لحالات الضغط/النشطة على الأزرار الثانوية.

حالات الروابط

Default Link Blue (#0000ee): الأزرق القياسي للمتصفح لروابط النص مع خط سفلي — يُستخدم في محتوى الجسم.
Link White (#ffffff): الروابط على الأسطح الداكنة — تُستخدم في التذييل والأقسام الداكنة.
Link Black (#000000): الروابط على الأسطح الفاتحة مع زخرفة خط سفلي.

نظام التدرجات

تصميم Uber خالٍ تماماً من التدرجات اللونية. ثنائية الأسود/الأبيض والكتل اللونية المسطحة تُنشئ كل التسلسل الهرمي البصري. لا تظهر أي تدرجات في أي مكان بالنظام — كل سطح لون صلب، وكل انتقال حافة حادة أو ظل.

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

عائلة الخطوط

العناوين / العرض: UberMove، مع خطوط احتياطية: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
الجسم / واجهة المستخدم: UberMoveText، مع خطوط احتياطية: system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

ملاحظة: UberMove و UberMoveText خطوط خاصة بالشركة. للتطبيقات الخارجية، استخدم system-ui أو Inter كأقرب بديل متاح. الطابع الهندسي ذو النسب المربعة لـ UberMove يمكن تقريبه باستخدام Inter أو DM Sans.

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

الدور	الخط	الحجم	الوزن	ارتفاع السطر	ملاحظات
عرض / مقطع رئيسي	UberMove	52px (3.25rem)	700	1.23 (محكم)	أقصى تأثير، حضور لافتة إعلانية
عنوان قسم	UberMove	36px (2.25rem)	700	1.22 (محكم)	مراسي الأقسام الرئيسية
عنوان بطاقة	UberMove	32px (2rem)	700	1.25 (محكم)	عناوين البطاقات والميزات
عنوان فرعي	UberMove	24px (1.5rem)	700	1.33	رؤوس الأقسام الثانوية
عنوان صغير	UberMove	20px (1.25rem)	700	1.40	عناوين مضغوطة، عناوين قوائم
تنقل / واجهة مستخدم كبيرة	UberMoveText	18px (1.13rem)	500	1.33	روابط التنقل، نص واجهة المستخدم البارز
جسم / زر	UberMoveText	16px (1rem)	400-500	1.25-1.50	نص الجسم القياسي، تسميات الأزرار
تعليق	UberMoveText	14px (0.88rem)	400-500	1.14-1.43	البيانات الوصفية، الأوصاف، الروابط الصغيرة
دقيق	UberMoveText	12px (0.75rem)	400	1.67 (مريح)	النص الصغير، النص القانوني

المبادئ

عناوين عريضة، جسم متوسط: عناوين UberMove بوزن 700 (عريض) حصراً — كل عنوان يضرب بقوة لافتة إعلانية. نص الجسم وواجهة المستخدم بـ UberMoveText يستخدم 400-500، مما يُنشئ تسلسلاً هرمياً بصرياً واضحاً من خلال تباين الوزن.
ارتفاعات سطر محكمة للعناوين: تستخدم جميع العناوين ارتفاعات سطر بين 1.22-1.40 — مضغوطة ومؤثرة، مصممة للمسح البصري لا للقراءة المتأنية.
طباعة وظيفية: لا يوجد أي معالجة نصية تزيينية. لا تباعد بين الحروف، لا تحويل للنص، لا تحجيم زخرفي. كل عنصر نصي يخدم غرض تواصل مباشر.
خطان، أدوار صارمة: UberMove للعناوين حصراً. UberMoveText للجسم والأزرار والروابط وواجهة المستخدم حصراً. الحدود لا تُعبَر أبداً.

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

الأزرار

الأسود الأساسي (دعوة للإجراء)

الخلفية: Uber Black (#000000)
النص: Pure White (#ffffff)
الحشو: 10px 12px
نصف القطر: 999px (حبة كاملة)
الحد: none
التركيز: حلقة داخلية rgb(255,255,255) 0px 0px 0px 2px
زر الإجراء الأساسي — جريء، عالي التباين، لا يخطئه البصر

الأبيض الثانوي

الخلفية: Pure White (#ffffff)
النص: Uber Black (#000000)
الحشو: 10px 12px
نصف القطر: 999px (حبة كاملة)
عند التمرير: تنتقل الخلفية إلى Hover Gray (#e2e2e2)
التركيز: تنتقل الخلفية إلى Hover Gray وتظهر حلقة داخلية
يُستخدم على الأسطح الداكنة أو كإجراء ثانوي مصاحب للأسود الأساسي

شريحة / تصفية

الخلفية: Chip Gray (#efefef)
النص: Uber Black (#000000)
الحشو: 14px 16px
نصف القطر: 999px (حبة كاملة)
النشط: ظل داخلي rgba(0,0,0,0.08)
شرائح التنقل، محددات الفئات، أزرار تبديل التصفية

زر الإجراء العائم

الخلفية: Pure White (#ffffff)
النص: Uber Black (#000000)
الحشو: 14px
نصف القطر: 999px (حبة كاملة)
الظل: rgba(0,0,0,0.16) 0px 2px 8px 0px
التحويل: translateY(2px) إزاحة طفيفة
عند التمرير: تنتقل الخلفية إلى #f3f3f3
عناصر التحكم في الخريطة، زر التمرير للأعلى، دعوات الإجراء العائمة

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

الخلفية: Pure White (#ffffff) على الصفحات البيضاء؛ لا تمييز واضح لخلفية البطاقة
الحد: none بشكل افتراضي — البطاقات تُعرَّف بالظل، لا بالحدود
نصف القطر: 8px لبطاقات المحتوى القياسية؛ 12px للبطاقات المميزة/المروَّجة
الظل: rgba(0,0,0,0.12) 0px 4px 16px 0px للارتفاع القياسي
البطاقات كثيفة المحتوى مع حشو داخلي أدنى
البطاقات التي تقودها الصور تستخدم صوراً بعرض كامل مع نص متراكب أو أسفلها

حقول الإدخال والنماذج

النص: Uber Black (#000000)
الخلفية: Pure White (#ffffff)
الحد: 1px solid Black (#000000) — المكان الوحيد الذي تظهر فيه الحدود المرئية بشكل بارز
نصف القطر: 8px
الحشو: تباعد مريح قياسي
التركيز: لا حالة تركيز مخصصة — يعتمد على حلقة تركيز المتصفح القياسية

التنقل

تنقل علوي ثابت بخلفية بيضاء
الشعار: علامة Uber الكلمية/الأيقونة بحجم 24x24px باللون الأسود
الروابط: UberMoveText بحجم 14-18px، وزن 500، بلون Uber Black
شرائح تنقل على شكل حبة بخلفية Chip Gray (#efefef) لتنقل الفئات ("Ride"، "Drive"، "Business"، "Uber Eats")
زر تبديل القائمة: زر دائري بنصف قطر 50%
الجوال: نمط قائمة الهامبرغر

معالجة الصور

مشاهد مرسومة يدوياً ودافئة (لا صور فوتوغرافية لأقسام الميزات)
أسلوب الرسم التوضيحي: أشخاص مُسلَّبون قليلاً، لوحة ألوان دافئة داخل الرسوم، جو معاصر
أقسام المقطع الرئيسي تستخدم تصويراً جريئاً أو رسماً توضيحياً كخلفيات بعرض كامل
رموز QR لدعوات تحميل التطبيق
جميع الصور تستخدم 8px أو 12px border-radius عند احتوائها في بطاقات

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

تنقل شريحة الفئة

صف أفقي من الأزرار على شكل حبة للتنقل من المستوى الأعلى ("Ride"، "Drive"، "Business"، "Uber Eats"، "About")
كل شريحة: خلفية Chip Gray، نص أسود، نصف قطر 999px
الحالة النشطة مشار إليها بخلفية سوداء مع نص أبيض (انعكاس)

مقطع رئيسي بإجراء مزدوج

مقطع رئيسي مقسم: نص/دعوة للإجراء على اليسار، خريطة/رسم توضيحي على اليمين
حقلا إدخال جنباً إلى جنب لنقطة الانطلاق/الوجهة
زر دعوة للإجراء "See prices" في حبة سوداء

بطاقات التخطيط المسبق

بطاقات تروّج لميزات مثل "Uber Reserve" وتخطيط الرحلات
مكثفة الرسوم التوضيحية مع صور دافئة تتمحور حول الإنسان
أزرار دعوة للإجراء سوداء بنص أبيض في الأسفل

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

نظام التباعد

الوحدة الأساسية: 8px
المقياس: 4px، 6px، 8px، 10px، 12px، 14px، 16px، 18px، 20px، 24px، 32px
حشو الأزرار: 10px 12px (مضغوط) أو 14px 16px (مريح)
الحشو الداخلي للبطاقة: تقريباً 24-32px
التباعد الرأسي بين الأقسام: سخي لكن فعّال — تقريباً 64-96px بين الأقسام الرئيسية

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

الحد الأقصى لعرض الحاوية: تقريباً 1136px، مركزي
المقطع الرئيسي: تخطيط مقسم مع نص على اليسار ومرئيات على اليمين
أقسام الميزات: شبكات بطاقية عمودين أو عمود واحد بعرض كامل
التذييل: شبكة روابط متعددة الأعمدة على خلفية سوداء
أقسام بعرض كامل تمتد إلى حواف نافذة العرض

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

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

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

حاد (0px): لا زوايا مربعة في العناصر التفاعلية
قياسي (8px): بطاقات المحتوى، حقول الإدخال، صناديق القائمة
مريح (12px): البطاقات المميزة، الحاويات الكبيرة، بطاقات الروابط
حبة كاملة (999px): جميع الأزرار والشرائح وعناصر التنقل والحبوب
دائرة (50%): صور الصورة الرمزية، حاويات الأيقونات، عناصر التحكم الدائرية

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

المستوى	المعالجة	الاستخدام
مسطح (المستوى 0)	لا ظل، خلفية صلبة	خلفية الصفحة، المحتوى المضمّن، أقسام النص
خفيف (المستوى 1)	`rgba(0,0,0,0.12) 0px 4px 16px`	بطاقات المحتوى القياسية، كتل الميزات
متوسط (المستوى 2)	`rgba(0,0,0,0.16) 0px 4px 16px`	البطاقات المرتفعة، العناصر المتراكبة
عائم (المستوى 3)	`rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px)	أزرار الإجراء العائمة، عناصر التحكم في الخريطة
مضغوط (المستوى 4)	`rgba(0,0,0,0.08) inset` (999px spread)	حالات الزر النشطة/المضغوطة
حلقة التركيز	`rgb(255,255,255) 0px 0px 0px 2px inset`	مؤشرات تركيز لوحة المفاتيح

فلسفة الظلال: يستخدم Uber الظل كأداة هيكلية بحتة، لا بشكل زخرفي. الظلال دائماً سوداء بشفافية منخفضة جداً (0.08-0.16)، مما يُنشئ الحد الأدنى من الارتفاع اللازم لفصل طبقات المحتوى. نصف قطر التمويه متوسط (8-16px) — بما يكفي ليبدو طبيعياً لكن لا يبالغ في الدراما. لا ظلال ملونة، لا مجموعات ظلال متعددة الطبقات، لا تأثيرات توهج محيطي. يُوصَل العمق أكثر من خلال تباين الأقسام بين الأسود والأبيض منه عبر ارتفاع الظلال.

7. الإرشادات والمحظورات

يجب فعله

استخدام الأسود الحقيقي (#000000) والأبيض النقي (#ffffff) كلوحة ألوان أساسية — التباين الصارم هو Uber بعينه
استخدام 999px border-radius لجميع الأزرار والشرائح وعناصر التنقل على شكل حبة
الإبقاء على جميع العناوين بخط UberMove Bold (700) لتأثير مستوى اللافتة الإعلانية
استخدام ظلال خافتة كالهمس (opacity بين 0.12-0.16) لارتفاع البطاقة — بالكاد مرئية
الحفاظ على أسلوب التخطيط المضغوط الكثيف المعلومات — Uber يعطي الأولوية للكفاءة على الهوائية
استخدام رسوم توضيحية دافئة تتمحور حول الإنسان لتلطيف الواجهة أحادية اللون
تطبيق نصف قطر 8px لبطاقات المحتوى و12px للحاويات المميزة
استخدام UberMoveText بوزن 500 للتنقل ونص واجهة المستخدم البارز
إقران الأزرار الأساسية السوداء بأزرار ثانوية بيضاء للتخطيطات ذات الإجراء المزدوج

لا يجب فعله

لا تُدخل الألوان في واجهة المستخدم — واجهة Uber صارمة بالأسود والأبيض والرمادي فقط
لا تستخدم زوايا مدورة أقل من 999px على الأزرار — شكل الحبة الكاملة عنصر هوية محوري
لا تُطبّق ظلاً ثقيلاً أو ظلاً مسقطاً بشفافية عالية — العمق خافت كالهمس
لا تستخدم خطوطاً مزخرفة في أي مكان — طباعة Uber هندسية بلا زوايا حصراً
لا تُنشئ تخطيطات هوائية وفسيحة مع مسافات بيضاء مفرطة — كثافة Uber مقصودة
لا تستخدم تدرجات أو طبقات ألوان — كل سطح لون مسطح صلب
لا تخلط UberMove في نص الجسم أو UberMoveText في العناوين — التسلسل الهرمي صارم
لا تستخدم حدوداً تزيينية — الحدود وظيفية (حقول الإدخال، الفواصل) أو غائبة تماماً
لا تُخفف تباين الأسود/الأبيض بأبيض مائل للصفرة أو أسود مائل للرمادي — الثنائية مقصودة

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

نقاط التوقف

الاسم	العرض	التغييرات الرئيسية
جوال صغير	320px	الحد الأدنى للتخطيط، عمود واحد، مدخلات متراكبة، طباعة مضغوطة
جوال	600px	الجوال القياسي، تخطيط متراكب، تنقل هامبرغر
تابلت صغير	768px	تبدأ شبكات عمودين، تخطيطات بطاقية موسعة
تابلت	1119px	التخطيط الكامل للتابلت، محتوى المقطع الرئيسي جنباً إلى جنب
سطح مكتب صغير	1120px	تنشط شبكة سطح المكتب، شرائح تنقل أفقية
سطح مكتب	1136px	التخطيط الكامل لسطح المكتب، أقصى عرض للحاوية، مقطع رئيسي مقسم

مناطق اللمس

جميع أزرار الحبة: ارتفاع 44px كحد أدنى (حشو رأسي 10-14px + ارتفاع السطر)
شرائح التنقل: حشو سخي 14px 16px للضغط المريح بالإبهام
عناصر التحكم الدائرية (القائمة، الإغلاق): نصف القطر 50% يضمن أهدافاً كبيرة وسهلة الضغط
أسطح البطاقات تعمل كأهداف لمس بالمساحة الكاملة على الجوال

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

التنقل: تنقل الشرائح الأفقي ينطوي إلى قائمة هامبرغر مع زر تبديل دائري
المقطع الرئيسي: التخطيط المقسم (نص + خريطة/مرئيات) يتراكب إلى عمود واحد — نص في الأعلى، مرئيات في الأسفل
حقول الإدخال: مدخلا نقطة الانطلاق/الوجهة جنباً إلى جنب يتراكبان رأسياً
بطاقات الميزات: شبكة عمودين تنطوي إلى بطاقات متراكبة بعرض كامل
العناوين: 52px العرض تتقلص عبر 36px، 32px، 24px، 20px
التذييل: شبكة روابط متعددة الأعمدة تنطوي إلى أكورديون أو عمود واحد متراكب
شرائح الفئة: تمرير أفقي مع تجاوز على الشاشات الأصغر

سلوك الصور

تتقلص الرسوم التوضيحية بشكل متناسب داخل حاوياتها
صور المقطع الرئيسي تحافظ على نسبة العرض إلى الارتفاع، وقد تُقص على الشاشات الأصغر
أقسام رمز QR تُخفى على الجوال (تحميل التطبيق ينتقل إلى روابط مباشرة للمتجر)
صور البطاقات تحافظ على 8-12px border-radius بجميع الأحجام

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

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

الزر الأساسي: "Uber Black (#000000)"
خلفية الصفحة: "Pure White (#ffffff)"
نص الزر (على الأسود): "Pure White (#ffffff)"
نص الزر (على الأبيض): "Uber Black (#000000)"
النص الثانوي: "Body Gray (#4b4b4b)"
النص الثالثي: "Muted Gray (#afafaf)"
خلفية الشريحة: "Chip Gray (#efefef)"
حالة التمرير: "Hover Gray (#e2e2e2)"
ظل البطاقة: "rgba(0,0,0,0.12) 0px 4px 16px"
خلفية التذييل: "Uber Black (#000000)"

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

"أنشئ قسم مقطع رئيسي على Pure White (#ffffff) مع عنوان بحجم 52px بخط UberMove Bold (700)، line-height 1.23. استخدم نص Uber Black (#000000). أضف عنواناً فرعياً بـ Body Gray (#4b4b4b) بحجم 16px UberMoveText وزن 400 مع line-height 1.50. ضع زر دعوة للإجراء Uber Black (#000000) على شكل حبة مع نص أبيض، نصف قطر 999px، حشو 10px 12px."
"صمم شريط تنقل الفئات مع أزرار أفقية على شكل حبة. كل حبة: خلفية Chip Gray (#efefef)، نص Uber Black (#000000)، حشو 14px 16px، border-radius 999px. الحبة النشطة تنعكس إلى خلفية Uber Black مع نص Pure White. استخدم UberMoveText بحجم 14px وزن 500."
"ابنِ بطاقة ميزة على Pure White (#ffffff) مع 8px border-radius وظل rgba(0,0,0,0.12) 0px 4px 16px. العنوان بخط UberMove بحجم 24px وزن 700، الوصف بـ Body Gray (#4b4b4b) بحجم 16px UberMoveText. أضف زر دعوة للإجراء أسود على شكل حبة في الأسفل."
"أنشئ تذييلاً داكناً على Uber Black (#000000) مع نص عنوان Pure White (#ffffff) بخط UberMove بحجم 20px وزن 700. روابط التذييل بـ Muted Gray (#afafaf) بحجم 14px UberMoveText. تنتقل الروابط عند التمرير إلى Pure White. تخطيط شبكة متعدد الأعمدة."
"صمم زر إجراء عائماً بخلفية Pure White (#ffffff)، نصف قطر 999px، حشو 14px، وظل rgba(0,0,0,0.16) 0px 2px 8px. عند التمرير تنتقل الخلفية إلى #f3f3f3. استخدمه للتمرير للأعلى أو عناصر التحكم في الخريطة."

دليل التكرار

ركز على مكوّن واحد في كل مرة
ارجع إلى لوحة الأسود/الأبيض الصارمة — "استخدم Uber Black (#000000)" وليس "اجعله داكناً"
حدد دائماً 999px radius للأزرار والحبوب — هذا غير قابل للتفاوض لهوية Uber
صف عائلة الخط بشكل صريح — "UberMove Bold للعنوان، UberMoveText Medium للتسمية"
للظلال، استخدم "ظل همس (rgba(0,0,0,0.12) 0px 4px 16px)" — لا ظلاً ثقيلاً أبداً
أبقِ التخطيطات مضغوطة وكثيفة المعلومات — Uber فعّال، لا هوائي
يجب أن تكون الرسوم التوضيحية دافئة وإنسانية — صف "أشخاصاً مُسلَّبين بأنماط دافئة" لا أشكالاً مجردة
قارن بين دعوات الإجراء السوداء والأزرار الثانوية البيضاء للتخطيطات المتوازنة ذات الإجراء المزدوج

27 KiB Raw Blame History