الأزرار في تصميم واجهة المستخدم

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

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

الزر الأساسي (Primary button)

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

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

نصيحة احترافية! تجنب وضع العديد من الأزرار الأساسية في نفس الصفحة حتى لا تربك المستخدمين.

الزر الثانوي (Secondary button)

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

رغم أن الأزرار الثانوية أقل وضوحًا، تأكد من أن المستخدمين يمكنهم التمييز بين حالاتها المختلفة (المفعلة، المعطلة، التحويم، التركيز، إلخ).

الزر الثالثي (Tertiary button)

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

زر الأيقونة (Icon button)

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

من منظور إمكانية الوصول، فإن أزرار الأيقونات فقط لا توفر معنى كافيًا للمستخدمين الذين يعتمدون على التقنيات المساعدة. يمكن تحسين إمكانية الوصول بإضافة نص أو تعريف اسم الزر داخل عنصر <button>.

زر النص (Text button)

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

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

الزر المحاط (Outlined button)

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

الزر المرتفع (Raised button)

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

الزر المسطح (Flat button)

على عكس الأزرار المرتفعة، لا تحتوي الأزرار المسطحة على ظلال أو تأثيرات بارزة، لكنها لا تزال واضحة بفضل شكلها ولونها.

زر التقسيم (Split button)

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

نصيحة احترافية! حدّد عدد الخيارات لمنع المستخدمين من الشعور بالتشتت. يُفضل ألا يتجاوز عدد الخيارات 10-12 على سطح المكتب، وعددًا أقل على الهاتف المحمول.

زر التبديل (Toggle button)

يُستخدم زر التبديل لتجميع عدة وظائف (عادة 2 أو 3) في زر واحد، مع إبقاء جميع الخيارات مرئية. لا يمكن تحديد أكثر من زر واحد داخل المجموعة نفسها.

نصيحة احترافية! استخدم ألوانًا أو تراكبات واضحة للإشارة إلى الخيار المحدد.

زر القائمة (Menu button)

إذا كنت بحاجة إلى تجميع إجراءات متشابهة دون استخدام زر تبديل، يُعد زر القائمة خيارًا مثاليًا. فهو يفتح قائمة من الخيارات عند النقر عليه، مما يوفر مساحة داخل الواجهة.

زر الإجراء العائم (Floating action button - FAB)

تم تقديم أزرار الإجراءات العائمة ضمن إرشادات تصميم Material Design. توفر هذه الأزرار زرًا أساسيًا ثابتًا، وغالبًا ما تكون دائرية أو مربعة بزوايا مستديرة، وتُستخدم للإجراءات الرئيسية مثل الإنشاء أو الإضافة أو المشاركة.

يُنصح باستخدام زر إجراء عائم واحد فقط لكل صفحة لضمان تجربة مستخدم سلسة.

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

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

زر الزوايا الحادة (Sharp-corner button)

تُضفي الأزرار ذات الزوايا الحادة - التي لا تحتوي على أي انحناء - طابعًا جادًا ومتطورًا على التصميم. تمنح هذه الأزرار شعورًا بالصلابة والموثوقية مقارنةً بالأزرار ذات الزوايا المستديرة.

وفقًا لتأثير "Bouba/Kiki" النفسي، يربط معظم الأشخاص الأشكال الحادة والزاويّة بالمفاهيم الجادة، بينما تمنح الأشكال المنحنية شعورًا بالود والانفتاح. لذا، قد يكون استخدام الأزرار الحادة مثاليًا لمواقع شركات التأمين ولكنه قد يبدو قاسيًا لمتاجر بيع الهدايا والملابس الخاصة بالأطفال.

زر الزوايا المستديرة (Rounded button)

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

يُعد استخدام الأزرار المستديرة خيارًا مثاليًا لتعزيز الطابع الودود لعلامتك التجارية وضمان الشعور بالراحة للمستخدمين.

زر الحبة (Pill button)

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

للحصول على أفضل نتيجة:

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

زر القائمة المنسدلة (Dropdown button)

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

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

زر الإجراء العائم (Floating Action Button - FAB)

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

يجب ربط هذه الأزرار بالوظائف الأساسية للتطبيق، ولكن لا ينبغي استخدامها للإجراءات المدمرة مثل الحذف أو تسجيل الخروج.

زر العلامة التجارية (Branded button)

تتضمن أزرار العلامات التجارية عناصر تصميمية مخصصة مثل الألوان والشعارات الخاصة بالشركة، مثل أزرار "تسجيل الدخول عبر Google" أو "تحميل من App Store".

عند استخدامها:

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

زر مخصص (Custom button)

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

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

محاذاة النصوص والأيقونات داخل الأزرار

الأزرار المتوازنة بشكل جيد تُحسن من تجربة المستخدم. تأكد دائمًا من أن محتوى الزر (نص وأيقونة) محاذٍ أفقيًا وعموديًا في المنتصف. عند استخدام الأيقونات، ضعها داخل حاوية مستقلة لمنع اختلال التناسق.

لا تفصل بين النص والأيقونة داخل الزر

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