1.4التنسيق وتخطيط الصفحة
الأساسي في 30 ثانية
- التقرير المقروء صفحة مؤلفة، وليس مجموعة مرئيات: هرمية، ومحاذاة، ومساحة بيضاء.
- الشبكة النموذجية: KPI في الأعلى، والاتجاهات في الوسط، والتفاصيل في الأسفل — قراءة بحرف Z تنجح في كل مكان.
- محاذاة/توزيع (Align / Distribute) من القائمة، وليس بالنظر أبدًا؛ وإعادة تسمية العناوين التلقائية؛ و4 إلى 6 مرئيات كحد أقصى في الصفحة.
حالة مصغّرة متسلسلة — زينب تخطّط صفحة الإدارة
لزينب مرئياتها الأربعة لكن الصفحة مبعثرة: عناوين مطولة، ومرئيات سيئة المحاذاة. فتطبّق القسم: ترتب المرئيات حسب الشبكة — بطاقة KPI في الأعلى، ورسم الأعمدة والمنحنى في الوسط، والمصفوفة في الأسفل. وتحدد مرئيات الوسط (Ctrl + نقرة)، ثم تنسيق (Format) ← محاذاة للأعلى وتوزيع أفقيًا. وبالفرشاة، تعيد تسمية العناوين («رقم الأعمال حسب المدينة» بدل «مجموع المبلغ حسب المدينة») وتضع عنوان صفحة. فتُقرأ صفحتها بحرف Z: الرقم الرئيسي، والاتجاه، والتفاصيل.
حالة مستقلة لهذا القسم: تعود في الدرس والمخطط والنص البرمجي وتحدي 48 ساعة للقسم 1.4.
1. التنسيق والمحاذاة
التقرير المقروء ليس مجموعة مرئيات: بل صفحة مؤلفة. وتنطبق قواعد التصميم (الهرمية، والمحاذاة، والمساحة البيضاء)، بأدوات جزء التنسيق (Format) (الفرشاة: العنوان، والألوان، والخلفية، والحد) وأوامر المحاذاة (محاذاة / توزيع). ولا تحاذي زينب بالنظر أبدًا: بل من القائمة.
2. الشبكة النموذجية
شبكة تنجح في كل مكان: KPI في الأعلى، والاتجاهات في الوسط، والتفاصيل في الأسفل — قراءة بحرف Z. ونضبط حجم الصفحة (Page Size) (16:9 افتراضيًا، قابل للتخصيص حسب الهدف)، ونعيد تسمية العناوين التلقائية: «مجموع المبلغ حسب المدينة» ليس عنوانًا، في حين «رقم الأعمال حسب المدينة» عنوان. وتعيد زينب تنظيم صفحتها حسب هذه الشبكة.
3. التهوية وترتيب الأولويات
مرئيات أقل في الصفحة = مقروئية أكثر: نستهدف 4 إلى 6 مرئيات كحد أقصى، والباقي في صفحات أخرى. ومنطقة اللوحة (Canvas) هي القيد الذي يفرض ترتيب الأولويات: فما يتجاوزها غير موجود. وسيستقبل هذا التخطيط المقسمات والتنقل في المستوى 3. وتختبر زينب عرضها في وضع عرض القراءة (Reading View).
🔎 مثال ملموس — 🔎 مثال ملموس — محاذاة نظيفة
تؤلف زينب صفحتها دون محاذاة بالنظر أبدًا:
حدد مرئيات الوسط (Ctrl + نقرة)
← تنسيق (Format) ← محاذاة للأعلى ← توزيع أفقيًا
← عناوين واضحة («رقم الأعمال حسب المدينة»)، وخلفية بيضاء، وحد خفيف
← عنوان صفحة (مربع نص): «مبيعات 2026 — نظرة عامة».القراءة: محاذاة/توزيع يحسب الحواف والتباعدات — وليس بالنظر أبدًا.
الدرس: صفحة هرمية (KPI، اتجاه، تفاصيل) تُقرأ بحرف Z وتُفهم بلمحة.
مفردات القسم
- جزء التنسيق (Format) (الفرشاة)
- تنسيق المرئي المحدد: العنوان، والألوان، والتسميات، والخلفية، والحد، والظل.
مثال بسيط: تمنح زينب فيه كل مرئي عنوانًا واضحًا وخلفية بيضاء.
ما ليس كذلك: تعديل بيانات المرئي.
رد فعل: تزيين مرئي ← جزء التنسيق.
- محاذاة / توزيع (Align / Distribute)
- تنسيق ← محاذاة: حواف وتباعدات محسوبة — ولا محاذاة بالنظر أبدًا.
مثال بسيط: تحاذي زينب مرئيات الوسط من القائمة.
ما ليس كذلك: تحريك بالفأرة حتى «يبدو مستقيمًا».
رد فعل: محاذاة نظيفة ← قائمة محاذاة.
- حجم الصفحة (Page Size)
- 16:9 افتراضيًا؛ قابل للتخصيص حسب الهدف (شاشة، عمودي للجوال/PDF).
مثال بسيط: تبقي زينب 16:9 لشاشة إدارة.
ما ليس كذلك: صفحة بالتنسيق الافتراضي دون التفكير في الهدف.
رد فعل: فكّر في الهدف قبل الحجم.
- سمة التقرير (Theme)
- عرض ← السمات: لوحة الألوان والخطوط الشاملة.
مثال بسيط: ستستخدمها زينب لتوحيد التقرير كله.
ما ليس كذلك: لون مختار مرئيًا مرئيًا.
رد فعل: اتساق شامل ← سمة.
- منطقة اللوحة (Canvas)
- مساحة الصفحة: ما يتجاوزها غير موجود.
مثال بسيط: ترتب زينب الأولويات: 4 إلى 6 مرئيات كحد أقصى.
ما ليس كذلك: تمرير لا نهائي يغرق المعلومة.
رد فعل: القيد = يفرض ترتيب الأولويات.
في التطبيق — تطبيق عملي — تأليف الصفحة بوضوح
- استعد مرئياتك الأربعة من 1.3: رتّبها حسب الشبكة — بطاقة KPI أعلى اليسار، ورسم الأعمدة والمنحنى في الوسط، والمصفوفة في الأسفل، كما تفعل زينب.
- حدد مرئيات الوسط (Ctrl + نقرة) ← تنسيق (Format) ← محاذاة للأعلى، ثم توزيع أفقيًا.
- بالفرشاة: امنح كل مرئي عنوانًا واضحًا (وليس «مجموع المبلغ حسب المدينة» بل «رقم الأعمال حسب المدينة»)، وخلفية بيضاء بحد خفيف.
- أضف عنوان صفحة (إدراج ← مربع نص): «مبيعات 2026 — نظرة عامة». واختبر العرض في وضع عرض القراءة (Reading View).
نص برمجي خطوة بخطوة — التخطيط كما تفعل زينب (5 دقائق)
1) ترتب زينب مرئياتها الأربعة: بطاقة KPI في الأعلى، ورسم الأعمدة والمنحنى في الوسط، والمصفوفة في الأسفل. 2) تحدد مرئيات الوسط (Ctrl + نقرة) ← تنسيق (Format) ← محاذاة للأعلى، ثم توزيع أفقيًا. 3) بالفرشاة، تعيد تسمية كل عنوان («رقم الأعمال حسب المدينة») وتضع خلفية بيضاء بحد خفيف. 4) تضيف عنوان صفحة عبر إدراج ← مربع نص. 5) تختبر العرض في وضع عرض القراءة (Reading View).
تحقق من حجم الصفحة حسب الهدف: 16:9 للشاشة؛ أما التخطيط الجوال المخصص فيُعالج لاحقًا.
قالب للنسخ واللصق — شبكة صفحتي
الشبكة (القراءة بحرف Z):
الأعلى : بطاقة KPI (الرقم الرئيسي)
الوسط : رسم الأعمدة + المنحنى (الاتجاهات)
الأسفل : المصفوفة / الجدول (التفاصيل)
المحاذاة: تحديد ← تنسيق ← محاذاة للأعلى + توزيع
العناوين: واضحة («رقم الأعمال حسب المدينة»)، وليس «مجموع المبلغ حسب المدينة»
الكثافة: 4 إلى 6 مرئيات كحد أقصى؛ الاختبار في وضع عرض القراءة.هرمية بحرف Z
تضع زينب KPI، ثم الاتجاه، ثم التفاصيل: فتتبع العين الرقم الرئيسي أولًا.
عناوين واضحة
تستبدل زينب «مجموع المبلغ حسب المدينة» بـ«رقم الأعمال حسب المدينة».
محاذاة من القائمة
تحاذي زينب وتوزّع مرئيات الوسط دون استهداف بالنظر أبدًا.
صفحة مهوّاة
تحصر زينب صفحتها في 5 مرئيات وتنقل الباقي إلى صفحة أخرى.
✓ ممارسات جيدة
- اتبع الشبكة: KPI في الأعلى، والاتجاهات في الوسط، والتفاصيل في الأسفل.
- أعد تسمية العناوين التلقائية.
- محاذاة/توزيع من القائمة؛ و4 إلى 6 مرئيات في الصفحة.
✗ أخطاء شائعة
- محاذاة المرئيات بالنظر (استخدم محاذاة/توزيع).
- إثقال صفحة (مرئيات أكثر = مقروئية أقل).
- ترك العناوين التلقائية المطولة.
النقاط الأساسية
- KPI في الأعلى، والاتجاهات في الوسط، والتفاصيل في الأسفل: الشبكة بحرف Z.
- أعد تسمية العناوين التلقائية («مجموع المبلغ…» ليس عنوانًا).
- محاذاة/توزيع من القائمة، وليس بالنظر أبدًا.
- 4 إلى 6 مرئيات كحد أقصى في الصفحة للبقاء مقروءًا.
تحدي 48 ساعة — طبّقه غدًا
استعد صفحتك كما تفعل زينب ونسّقها: رتّب KPI والاتجاهات والتفاصيل حسب الشبكة، وحاذِ من القائمة (محاذاة + توزيع)، وأعد تسمية كل عنوان، واحصر نفسك في 5 مرئيات. واختبر العرض في وضع عرض القراءة (Reading View).
- أؤلف صفحة حسب الشبكة بحرف Z.
- أحاذي وأوزّع مرئياتي من القائمة.
- أعيد تسمية العناوين وأحدّ الكثافة.
أسئلة شائعة
كيف أنسخ تنسيق مرئي إلى آخر؟
فرشاة «نسخ التنسيق (Format Painter)» (الصفحة الرئيسية) تعمل كما في Office: حدد المرئي النموذج، وانقر الفرشاة، ثم انقر الهدف. وللاتساق الشامل، سنذهب أبعد مع السمات (المستوى 4.1).
سيُرى تقريري على الجوال: كيف أكيّفه؟
يمكن لكل صفحة أن تحظى بتخطيط جوال (Mobile Layout) مخصص: عرض ← تخطيط الجوال — نعيد فيه تنظيم المرئيات الموجودة في عمود. يُفعل في نهاية التصميم (المستوى 5.3).
ما الشبكة النموذجية التي تنظّم صفحة التقرير؟