تصميم الصفحات والأزرار وفقًا لإرشادات تصميم واجهة المستخدم

كثير من الناس يقولون "أريد أن تكون الصفحة أشبه بـ Apple" أو "أريد أن تكون الأزرار أكثر احترافية"، لكن عند البدء فعليًا، غالبًا ما يتوقفون عند سؤال واحد:

ما الذي يجب أن أشير إليه فعليًا؟

النظر إلى لقطات الشاشة والمحاكاة يعلمك فقط "هل تبدو مشابهة أم لا". لكن عندما تفتح إرشادات تصميم Apple و Google و Microsoft و Atlassian، ستكتشف أن ما يميزها حقًا ليس الأسلوب البصري، بل قدرتها على توضيح مشاكل التصميم: ما الذي تبرزه الصفحة أولاً، وكيف يتم تصنيف الأزرار، وكيف يتم التأكيد على العمليات - هذه معايير الحكم هي الجوهر.

الإشارة إلى إرشادات التصميم ليست لجعل المنتج "يشبه شخصًا ما"، بل لتعلم كيف يتخذ الآخرون أحكامهم.

لماذا لا يزال تعلم هذا ضروريًا الآن

قواعد التصميم تم تدريبها بالفعل في النماذج، وتم امتصاصها بشكل افتراضي في أدوات التصميم، وحتى AI يمكنه تعلمها من بضع لقطات شاشة. لكن لا يزال من الضروري أن نعرف من أين تأتي هذه القواعد ولماذا تم تحديدها بهذا الشكل.

انظر إلى بعض النصوص الأصلية أولاً، وشعر بالفارق

إذا كنت تعتقد سابقًا أن "إرشادات التصميم هي مجرد الحديث عن الأسلوب"، فانظر أولاً إلى بعض النصوص الرسمية الأصلية.

عادة ما نقول في الفريق هكذا:

• اصنع مربعًا منسدلًا
• ضع قائمة هنا
• أضف بعض الوظائف إلى شريط القوائم
• ضع زرين هنا، واحد للتأكيد وواحد للإلغاء

يبدو هذا طبيعيًا، لكن في إرشادات الشركات الكبرى، هذه المصطلحات ليست مفاهيم غامضة، بل مفككة بدقة كبيرة.

ما نقوله عادةً	النص الأصلي الرسمي	ببساطة
"اصنع قائمة"	Apple: "A menu reveals its options..."	Menu يُستخدم للعمليات
"ضع وظائف في شريط القوائم"	Apple: "menu bar menus contain all the commands..."	هذا قائمة أوامر التطبيق في الأعلى
"اصنع مربعًا منسدلًا"	Apple: "A pop-up list lets the user choose one option among several."	pop-up لاختيار واحد من القائمة
"اصنع مربعًا منسدلًا أيضًا"	Apple: "A pull-down list is generally used for selecting commands in a specific context."	pull-down للنقر لتنفيذ العملية الحالية
"يمكن استخدام القائمة للتصفية أيضًا"	Fluent: "If you need to collect information from people, try a select, dropdown, or combobox instead."	Menu ليس لاختيار القيم
"يمكن استخدام القائمة للتنقل أيضًا"	Material: "Menus should not be used as a primary method for navigation within an app."	Menu ليس للتنقل الرئيسي
"اكتب OK / Cancel على الزر بشكل عشوائي"	Apple: "Always use 'Cancel' to title a button that cancels the alert's action."	نص الزر لا يمكن كتابته بشكل عشوائي

الاقتباسات في الجدول يمكن النقر عليها مباشرة للانتقال إلى الصفحة الرسمية المقابلة.

هذا هو المكان الذي يسهل أن تُصاب بالذهول فيه عندما تنظر إلى إرشادات التصميم لأول مرة حقًا:

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

لن يقول Apple فقط "اصنع قائمة"؛ بل سيستمر في التمييز بين:

• menu
• menu bar menu
• pop-up button
• pull-down button
• context menu

لن يقول Fluent فقط "مربع منسدل"؛ بل سيستمر في التمييز بين:

• menu
• dropdown
• select
• combobox

هذه هي ضرورية إرشادات التصميم.

ليس لجعل الصفحة تبدو أكثر احترافية، بل لجعل الفريق عندما يناقش UI، لا يكون لدى كل شخص شيء مختلف في ذهنه.

ما ستتعلمه

1. لماذا يجب النظر إلى إرشادات التصميم أولاً عند تصميم الصفحات والأزرار
2. ما المحتوى الذي يستحق الإشارة إليه في إرشادات Apple و Material و Fluent و Atlassian
3. كيفية توضيح "التسلسل الهرمي للصفحة" و"التسلسل الهرمي للأزرار"
4. كيفية جعل AI يشير إلى إرشادات الآخرين لتوليد الصفحات والأزرار

1. لماذا يمكن لإرشادات التصميم أن تساعدك في توضيح الصفحة

بعد قراءة النصوص الأصلية أعلاه، ستكتشف نقطة رئيسية:

إرشادات التصميم ليست إضافة تجميلية، بل تبدأ بجعل المصطلحات دقيقة أولاً.

كثير من الصفحات لا تبدو جيدة، ليس لأن الألوان ليست متقدمة بما فيه الكفاية، بل لأن التسلسل الهرمي للمعلومات فوضوي.

كثير من الأزرار ليست سهلة الاستخدام، ليس لأن الحدود المستديرة غير صحيحة، بل لأن:

• الأزرار الرئيسية كثيرة جدًا، والمستخدم لا يعرف أي واحد ينقر عليه
• الأزرار الخطيرة والأزرار العادية تبدو متشابهة تقريبًا
• جميع الأزرار في الصفحة تتنافس على الانتباه
• أنماط ودلالات الأزرار غير متسقة عبر الصفحات المختلفة

إرشادات التصميم الناضجة تحل هذه المشاكل بالضبط. عادةً ما تحدد:

محتوى الإرشادات	ما المشكلة التي تحلها
التسلسل الهرمي للصفحة	أين تنظر أولاً، أين تنظر لاحقًا، كيف يتم تنظيم المعلومات
أساسيات بصرية	كيف توحد الألوان والمسافات والخطوط والحدود المستديرة والظلال
التسلسل الهرمي للأزرار	كيف نميز بين الأزرار الرئيسية والثانوية والنصية والخطيرة
قواعد الحالات	كيف يتم عرض hover و focus و disabled و loading
دلالات التفاعل	أي زر هو "تأكيد"، وأي هو "إلغاء"، وأي هو "المزيد من العمليات"

لذا، ما توفره إرشادات التصميم حقًا ليس "غلافًا"، بل مجموعة من معايير الحكم.

2. عند الإشارة إلى إرشادات الشركات الكبرى، ركز على ماذا

2.1 الإشارة إلى Apple: تعلم "التعريف بما يكفي من الدقة"

أكثر ما يستحق تعلمه من Apple ليس الضبط البصري فقط، بل أنها تحدد المفاهيم بدقة كبيرة.

ما يسميه العديد من الفرق "قائمة" أو "مربع منسدل"، ستستمر Apple في تفكيكه:

• menu: مجموعة من الأوامر أو الخيارات أو الحالات
• menu bar menu: مجموعة أوامر على مستوى التطبيق
• pop-up button: اختيار قيمة واحدة
• pull-down button: تفعيل أمر في السياق الحالي
• context menu: إجراءات شائعة متعلقة بالكائن أو المهمة الحالية

هذا التمييز مهم جدًا، لأنه يؤثر مباشرة على:

• هل هذا المكون لاختيار القيم أم لتنفيذ الإجراءات
• هل ينتمي إلى جزء من الصفحة أم إلى مستوى التطبيق
• هل يجب أن يعرض القيمة المحددة حاليًا بشكل دائم أم يظهر الأوامر مؤقتًا فقط

عندما تبدأ في التفكير بهذه الدقة، ستصبح الصفحات التي تصممها أوضح بكثير فجأة.

2.2 الإشارة إلى Apple: تعلم التسلسل الهرمي للصفحة والضبط

إرشادات Apple Human Interface Guidelines مناسبة بشكل خاص لتعلم شيئين:

• كيف تبني الصفحة تسلسلاً هرميًا واضحًا
• كيف تحافظ عناصر التحكم على الوضوح دون أن تطغى على المحتوى

تؤكد Apple على Hierarchy و Harmony و Consistency. هذا يعني أنه عند تصميم الصفحة يجب أن تجيب على:

• ما هي أهم معلومة في الصفحة الحالية
• ما هي المهمة الرئيسية للمستخدم
• أي عملية يجب أن تكون الأبرز، وأي عملية يجب أن تتوارى

إذا كنت تشير إلى Apple لتصميم الصفحات، يمكنك التركيز على:

• لا تجعل معلومات الشاشة الأولى مجزأة جدًا، ركز على المحتوى الأساسي أولاً
• استخدم المساحات البيضاء وأحجام الخطوط والتجميع لخلق النظام، بدلاً من الاعتماد على الكثير من الحدود
• لا تجعل جميع الأزرار عالية التأكيد، فقط الإجراءات الرئيسية يجب أن تكون الأبرز

2.3 الإشارة إلى Material: تعلم هيكل الصفحة الواضح

Material Design مناسب جدًا لتعلم "كيف تنظم الصفحة سير المهام".

كثير من مكوناتها وإرشادات التخطيط تركز كلها على مساعدتك في التوضيح:

• هل الصفحة من نوع التصفح أم من نوع تنفيذ المهام
• هل الصفحة الحالية للمستخدم للقراءة أم للاختيار أم للإرسال
• أي العناصر في الصفحة يجب أن تتكرر بشكل ثابت، وأيها يجب أن يستجيب لتغيرات السياق

إذا كنت تشير إلى Material لتصميم الصفحات، يمكنك التركيز على:

• مناطق الصفحة واضحة، مسؤوليات الوحدات محددة
• تقسيم واضح بين التنقل ومنطقة المحتوى ومنطقة العمليات
• أنماط أزرار مختلفة تتوافق مع أولويات عمليات مختلفة

2.4 الإشارة إلى Fluent: تعلم حدود المكونات والتسلسل الهرمي للأزرار

Fluent 2 مناسب جدًا لمنتجات الخلفية ومنتجات الأدوات وأنظمة النماذج المعقدة. أكثر ما يستحق تعلمه هو أنها تخبرك مباشرة "لا تخلط بين المفاهيم".

على سبيل المثال، تكتب بوضوح: إذا كنت تريد "collect information"، فلا تستمر في استخدام menu، بل يجب أن تفكر في select و dropdown و combobox.

هذه الجملة مهمة جدًا، لأنها تحطم "كلها تقريبًا متشابهة" في أذهان كثير من الناس.

Fluent 2 تولي أيضًا أهمية كبيرة لـ:

• التسلسل الهرمي للعمليات
• حدود الدلالات للمكونات
• الوضوح في سيناريوهات المعلومات الكثيفة

إذا كنت تشير إلى Fluent لتصميم الأزرار، يمكنك التركيز على:

• Primary button يُستخدم لاستقبال الإجراء الأ أهم في المنطقة الحالية
• Secondary button يُستخدم لاستقبال الإجراءات الداعمة
• الأزرار ذات التأكيد الضعيف مثل Subtle و Transparent للعمليات التي لا ينبغي أن تنافس المسار الرئيسي
• كلما زاد عدد الأزرار في الصفحة، زادت الحاجة للتحكم في الأولوية البصرية

2.5 الإشارة إلى Atlassian: تعلم إدارة الصفحات والأزرار بشكل منهجي

Atlassian Design System مناسب بشكل خاص للحالات التي يكون فيها "فريق واحد يصنع صفحات كثيرة". تؤكد على:

• الأساسيات (foundations) هي القاعدة المشتركة
• tokens هي طريقة توحيد القرارات البصرية
• المكونات (components) هي وحدات التفاعل التي يتم إعادة استخدامها مرارًا

إذا كنت تشير إلى Atlassian لتصميم الصفحات والأزرار، فأكثر ما له قيمة هو:

• جعل أحجام الأزرار وألوانها وحدودها المستديرة ومسافاتها قواعد موحدة
• تثبيت إيقاع تخطيط الصفحة
• جعل الصفحات المختلفة رغم اختلاف المحتوى، لها لغة هيكلية متسقة

3. عند تصميم الصفحات، ما النقاط التي يجب الإشارة إليها من الإرشادات

عندما تنظر إلى نظام تصميم، لا تسأل أولاً "هل هذه الصفحة جميلة"، بل اطرح الأسئلة التالية أولاً.

3.1 نظرة أولى على الصفحة، هل الرئيسي والثانوي واضحان

عادةً يجب أن تحتوي الصفحة على ثلاث طبقات على الأقل:

• المعلومات الرئيسية: أهم محتوى في الصفحة الحالية
• المعلومات المساعدة: محتوى يساعد على الفهم أو الإضافة
• العمليات الثانوية: الإجراءات التي لا ينبغي أن تتداخل مع المهمة الرئيسية

إذا لم يتم فصل الطبقات الثلاث، ستصبح الصفحة "كل شيء مهم"، وهو ما يعادل "لا شيء مهم".

3.2 تخطيط الصفحة، هل يخدم المهمة بدلاً من تكديس الوحدات

عند الإشارة إلى الإرشادات، يمكنك الانتباه بشكل خاص إلى:

• هل منطقة العنوان توضح هدف الصفحة بوضوح
• هل منطقة المحتوى الرئيسي منظمة حول المهمة
• هل أزرار العمليات قريبة من المحتوى ذي الصلة
• هل المعلومات الثانوية تم إضعافها بشكل مناسب

3.3 العمليات في الصفحة، هل لها أولوية

كثير من الصفحات بنظرة واحدة لديها 6 أزرار، وكل زر يشبه CTA، هذا نموذجي لفقدان السيطرة على التسلسل الهرمي.

الطريقة الأكثر معقولية هي:

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

4. عند تصميم الأزرار، ما النقاط التي يجب الإشارة إليها من الإرشادات

الأزرار هي الجزء الأسهل في "التصميم العشوائي"، لكنها أيضًا الجزء الذي يكشف بشكل أكبر مدى نضج النظام.

4.1 قسّم الأزرار حسب "الدلالات" أولاً، ثم حسب "النمط"

لا تفكر أولاً في "زر أزرق أم زر أسود"، فكر أولاً ما هو دور هذا الزر.

يمكن تقسيم أدوار الأزرار الشائعة هكذا:

نوع الزر	الوظيفة	استراتيجية النمط الشائعة
Primary	الإجراء الأ أهم في المنطقة الحالية	مصمت، تباين عالي، الأبرز
Secondary	إجراءات داعمة	بحدود أو تأكيد بمستوى أقل
Tertiary / Text	عمليات ضعيفة	نص أو نسبة بصرية منخفضة
Destructive	عمليات خطيرة مثل الحذف والتعطيل والمسح	لون تحذيري أو نمط يوضح الخطر بوضوح
Icon button	عمليات أدوات محلية	بسيط، قريب من السياق

4.2 لا تضع الكثير من Primary Button في صفحة واحدة

هذا هو الفخ الذي يقع فيه معظم المبتدئين بسهولة.

إذا كان هناك 4 أزرار رئيسية في الصفحة، فهذا يعادل عدم وجود زر رئيسي. معنى الزر الرئيسي في الأصل هو "إخبار المستخدم بما يجب أن يفعله الآن".

يمكنك الاقتراض من الممارسات المشتركة للعديد من أنظمة التصميم:

• عادةً ما يتم الاحتفاظ بزر رئيسي واحد فقط في منطقة رئيسية واحدة
• الإلغاء والرجوع والإغلاق عادةً لا تنافس زر التأكيد على نفس المستوى
• المزيد من العمليات توضع في أزرار ثانوية أو قوائم

4.3 يجب أن تعبر الأزرار عن تغيرات الحالة

عادةً ما تكتب إرشادات التصميم حالات الأزرار بوضوح شديد:

• الحالة الافتراضية
• حالة التمرير (hover)
• حالة التركيز (focus)
• حالة التعطيل (disabled)
• حالة التحميل (loading)
• حالة الخطر

هذا مهم، لأن الزر ليس صورة ثابتة، بل هو أحد عناصر التحكم الأكثر تكرارًا في تشغيل المستخدم.

4.4 نص الزر هو أيضًا جزء من التصميم

نص الزر ليس مجرد "مشكلة نص"، بل يؤثر بشكل مباشر على فهم المستخدم.

على سبيل المثال:

• حفظ
• حفظ التغييرات
• نشر فورًا
• حذف المشروع
• نقل إلى سلة المحذوفات

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

5. قائمة تحقق عملية لتصميم الصفحات والأزرار

عند تصميم الصفحات بنفسك، يمكنك مراجعة هذه القائمة بسرعة أولاً:

قائمة الصفحة

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

قائمة الأزرار

• هل هذا الزر هو الإجراء الرئيسي أم الثانوي
• لماذا يستحق أن يكون أكثر بروزًا من الأزرار الأخرى
• هل يوجد الكثير من الأزرار الرئيسية في الصفحة
• هل العمليات الخطيرة محددة بوضوح
• هل نص الزر محدد بما فيه الكفاية

6. كيفية استخدام AI للإشارة إلى إرشادات الآخرين لتصميم الصفحات

هذا القسم هو الأكثر عملية.

كثير من الناس عندما يطلبون من AI تصميم صفحات، يقولون فقط:

ساعدني في إنشاء صفحة إعدادات، أريدها أن تكون أكثر احترافية، أشبه بأسلوب Apple

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

للمبتدئين، الطريقة الأكثر عملية ليست تلخيص فقرة طويلة بنفسك، بل لصق الجمل الرئيسية من النص الأصلي للإرشادات مباشرة لـ AI.

لهذا الطريقة فائدتان:

• لا تحتاج إلى "ترجمة" أفكار التصميم بنفسك أولاً
• يمكن لـ AI فهم الصفحة والأزرار بسهولة أكبر وفقًا للتعريفات الرسمية

6.1 مثال 1: جعل AI يشير إلى Apple لتصميم صفحة إعدادات

ابحث أولاً عن جملة أصلية من Apple:

"Establish a clear visual hierarchy..."

يمكنك لصقها مباشرة لـ AI هكذا:

أشر إلى هذه الجملة من Apple Human Interface Guidelines:
"Establish a clear visual hierarchy..."

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

النقطة المهمة في الكتابة بهذا الشكل هي: لا تحتاج إلى شرح الكثير بنفسك، فقط الصق الكلمات الأصلية من Apple.

6.2 مثال 2: جعل AI يشير إلى Fluent لتصميم أزرار صفحة الخلفية

ابحث أولاً عن جملة أصلية من Fluent:

"Only use one primary button in a layout..."

يمكنك لصقها مباشرة لـ AI هكذا:

أشر إلى هذه الجملة من Fluent 2:
"Only use one primary button in a layout..."

ساعدني في تصميم أزرار صفحة إدارة الفريق.
زر إضافة عضو هو الأبرز، والتصدير والتصفية والمزيد من العمليات أضعف، وزر الحذف بارز بشكل منفصل.

هذه الجملة مناسبة جدًا للمبتدئين، لأنها تخبر AI مباشرة: لا تضع الكثير من الأزرار الرئيسية في منطقة واحدة.

6.3 مثال 3: جعل AI يشير إلى إرشادات الصفحة وإرشادات الأزرار في نفس الوقت

يمكنك أيضًا لصق جملتين أصليتين في وقت واحد، وجعل AI يشير إلى الصفحة والأزرار في نفس الوقت:

Apple: "Establish a clear visual hierarchy..."

Fluent: "Only use one primary button in a layout..."

ثم اكتب مباشرة هكذا:

أشر إلى الجملتين التاليتين من إرشادات التصميم الأصلية:
Apple: "Establish a clear visual hierarchy..."
Fluent: "Only use one primary button in a layout..."

ساعدني في تصميم صفحة تفاصيل المشروع.
تحتوي الصفحة على مقدمة المشروع والأعضاء وآخر الأنشطة ومدخل الإعدادات.
التسلسل الهرمي للصفحة واضح قليلاً، مع الاحتفاظ بزر رئيسي واحد فقط، وبقية الأزرار أضعف.

هذه الطريقة مناسبة بشكل خاص للمبتدئين، لأنك تحتاج فقط إلى معرفة كيفية نسخ النص الأصلي، ثم إضافة جملتين من متطلباتك الخاصة.

7. كيفية استخدام AI للإشارة إلى إرشادات الأزرار لتوليد تصميم الأزرار مباشرة

إذا كنت تريد فقط تصميم الأزرار أولاً، يمكنك أيضًا لصق النص الأصلي لإرشادات الأزرار مباشرة.

على سبيل المثال، تعريف Atlassian للزر قصير جدًا:

"A button triggers an event or action."

يمكنك أن تسأل AI هكذا:

أشر إلى هذه الجملة من Atlassian:
"A button triggers an event or action."

ساعدني في تصميم مجموعة أنماط أزرار لصفحة الخلفية.
أريد زرًا رئيسيًا وزرًا ثانويًا وزر حذف، وأخبرني أين يُستخدم كل منها.

هذا النوع من الأوامر مناسب بشكل خاص للمبتدئين، وهو في الأساس "الصق النص الأصلي + اذكر المتطلبات".

8. الخلاصة

تصميم الصفحات والأزرار وفقًا لإرشادات تصميم UI، الأهم ليس "أن تبدو مثل من"، بل تعلم الأشياء التالية:

1. تنظيم الصفحة بالتسلسل الهرمي، بدلاً من تكديس المحتوى
2. التعبير عن أولوية العمليات بتقسيم الأزرار، بدلاً من جعل جميع الأزرار بارزة بنفس الدرجة
3. توجيه التصميم بالتعريفات والحدود ومعايير الحكم في إرشادات التصميم
4. عند جعل AI يشير إلى إرشادات الآخرين، الإشارة إلى "المبادئ والهيكل"، وليس فقط الغلاف

عندما تستخدم الإرشادات بهذه الطريقة، ما تشير إليه ليس مجرد أسلوب، بل طريقة تفكير تصميم ناضجة.

---

مراجع

جميع الروابط التالية من أنظمة تصميم رسمية أو وثائق رسمية:

• Apple Human Interface Guidelines: Overview
• Apple Human Interface Guidelines: Menus
• Apple Human Interface Guidelines: Alerts
• Apple Human Interface Guidelines: Buttons
• Apple Archive: How Menus Work
• Apple Archive: Managing Pop-Up Buttons and Pull-Down Lists
• Material Design: Buttons overview
• Material Design: Menus
• Microsoft Fluent 2: Start designing
• Microsoft Fluent 2: Menu usage
• Microsoft Fluent 2: Button usage
• Atlassian Design System: Foundations
• Atlassian Design System: Button