تعتبر تجربة المستخدم من أهم العوامل التي تميز بين التطبيقات والمواقع الناجحة وتلك التي تفتقر للإقبال. ومن بين الأدوات البارزة في مجال تصميم واجهات المستخدم نجد Figma، الذي نال شهرة واسعة بفضل قدراته المتميزة وسهولة استخدامه.
تصميم عناصر الواجهات المتقدمة يحتاج من المصممين إلى مزج الإبداع مع الفهم العميق لاحتياجات المستخدمين. بفضل ميزاته التعاونية، يمكن للمصممين العمل جنبًا إلى جنب مع كامل الفريق بنفس الوقت، مما يتيح تبادل الأفكار وتطوير حلول مبتكرة بسرعة وكفاءة.
في هذا المقال، سنأخذك في رحلة لاستكشاف كيفية الاستفادة القصوى من Figma في تصميم عناصر واجهات متقدمة. سنبدأ من الخطوات الأولية للتخطيط، ونعبر عبر نصائح وحيل تجعل عملية التصميم أكثر سلاسة واحترافية، وصولاً إلى التنفيذ النهائي. إذا كنت تسعى لتحسين مهاراتك في تصميم الواجهات، فهذا المقال سيكون دليلك الكامل لاستخدامه بشكل محترف وسهل.
قبل البداية ما رأيك بالاطلاع على مقالنا بعنوان: لماذا ينبغي على كاتب تجربة المستخدم تعلّم أداة فيجما Figma؟
لماذا نختار Figma لتصميم عناصر الواجهات المتقدمة؟
قد يتساءل البعض لماذا نستخدم Figma في تصميم عناصر الواجهات المتقدمة عندما تتوفر العديد من الأدوات الأخرى مثل Sketch وAdobe XD وغيرها. الإجابة على هذا السؤال تكمن في تفضيلات المصمم واحتياجات الفريق العامل معه.
من المؤكد أن اختيار الأداة المناسبة يعتمد على مدى سهولة تعامل المصمم معها وارتياحه لاستخدامها. ومع ذلك، هناك عوامل تجعل Figma خيارًا مفضلًا في العديد من الحالات، خاصة عند العمل ضمن فريق.
أحد أبرز مميزات استخدامه هو قدرته على تعزيز العمل التعاوني بشكل فعال. مما يوفر بيئة عمل تتيح للمصممين والمبرمجين التواصل بلغة مشتركة، مما يسهل عملية تنفيذ التصميمات بشكل دقيق ومتوافق مع المتطلبات الفنية. هذا يسهم في تسريع وتيرة العمل ويضمن تقديم منتجات نهائية عالية الجودة.
كما أنه يدعم إنشاء عناصر تصميم قابلة للتنفيذ والفهم من قبل المبرمجين، مما يعزز التفاهم بين أعضاء الفريق ويقلل من العقبات التي قد تواجهها عند نقل التصميمات إلى مرحلة البرمجة.
بدأت باستخدام Adobe XD، ولم يكن ذلك بدافع التعصب لأداة معينة، بل بسبب تفضيلي الشخصي وارتياحي لاستخدامها في البداية. ومع ذلك، وجدت أن Figma يلبي احتياجات عملي وفريقي بشكل أفضل، ولهذا قررت الانتقال إليه. وإذا وجدت في المستقبل أداة أخرى تناسب احتياجاتنا أكثر من Figma، فلن أتردد في الانتقال إليها.
م. بدر الشهري
ما هي المكونات الذكية – Smart Component
المكونات الذكية (Smart Components) في التصميم هي عناصر يمكن إعادة استخدامها بسهولة عبر مختلف الواجهات والشاشات في التطبيقات.
مثال على ذلك زر يمكن استخدامه في تسجيل الدخول، تسجيل الخروج، حذف الحساب، تأكيد الرسائل، وغيرها من السيناريوهات.
عندما نصمم الزر كمكون ذكي، فإن أي تغيير نجريه عليه، مثل تغيير اللون أو الخط أو الحجم، سينعكس تلقائيًا على جميع الأماكن التي يستخدم فيها هذا المكون. هذا يوفر الكثير من الوقت والجهد مقارنةً بحالة تصميم المكونات بدون استخدام المكونات الذكية، حيث يتطلب الأمر تعديل كل نسخة من العنصر على حدة في جميع الشاشات التي يظهر فيها.
استخدام المكونات الذكية يصبح أكثر أهمية في المشاريع الكبيرة التي تحتوي على العديد من الشاشات، حيث يمكن أن تتجاوز عدد الشاشات 50 أو 100 شاشة. في هذه الحالة، إذا لم تكن المكونات مصممة كعناصر ذكية، سيكون من الصعب جدًا تحديث كل المكونات يدويًا عند الحاجة إلى إجراء تغيير. لذلك، يُنصح دائمًا باستخدام المكونات الذكية للعناصر المتكررة في التصميم لضمان الكفاءة والاتساق في المظهر والوظائف عبر التطبيق بأكمله.
كيف أبني عناصر التصميم المتقدمة
لبناء عناصر تصميم متقدمة، يجب أولاً تحديد العناصر التي ستتكرر استخدامها بشكل كبير. على سبيل المثال، الأزرار، حقول النصوص، مناطق النص، خيارات الراديو، وصناديق الاختيار هي عناصر تتكرر عادةً ويمكن بناؤها كمكونات ذكية منذ بداية المشروع، حتى قبل استخدامها فعلياً، لأن استخدامها مضمون في مراحل لاحقة.
بالمقابل، بعض العناصر مثل بطاقات التصميم (Cards) أو الأنماط المحددة يتم بناؤها أثناء العمل على التصميم. استخدام المكونات القابلة لإعادة الاستخدام يساعد في الحفاظ على ثبات التصميم، خاصة عندما يعمل على المشروع أكثر من شخص. إذا بنى كل شخص زراً بطريقة مختلفة، سيظهر المشروع بشكل غير متناسق، مما يؤثر على تجربة المستخدم النهائية.
عند بناء مكون ذكي مثل زر، يتم تحديد جميع خصائصه من البداية مثل الحجم، اللون، والنص، ثم إعادة استخدامه في مختلف الشاشات. هذا يساعد في تقليل الأخطاء غير المقصودة ويضمن اتساق التصميم. إذا كانت هناك حاجة لتعديل أي خصائص في المستقبل، يمكن تعديل المكون الذكي وسيتم تطبيق التعديلات على جميع الشاشات التي تستخدمه.
هذه الطريقة ترفع جودة المنتج وتوفر الوقت، لأن بناء كل عنصر من البداية في كل مرة يستغرق وقتًا طويلاً. بدلاً من ذلك، يمكن بناء المكون مرة واحدة ثم إعادة استخدامه. في كل مرة يواجه المصمم حاجة جديدة، يمكنه تعديل المكون الأصلي ليشمل هذه الحاجة.
في النهاية، عند تصميم مكون ذكي أو أي عنصر تصميم آخر، يجب التأكد من أن المعلومات مرتبة بوضوح وأن التصميم يؤدي الهدف المرجو منه بفعالية. على سبيل المثال، في تصميم بطاقات المستخدمين، يمكن التركيز على جعل الصورة الشخصية كبيرة إذا كانت هي العنصر الأهم، أو تكبير الاسم إذا كان هو الأهم. ترتيب العناصر حسب الأهمية يساعد في توصيل المعلومات بوضوح وسهولة للمستخدم النهائي.
يمكنك الاطلاع على مقالنا بعنوان: قوّة التصميم العاطفي: السر وراء جذب المستخدمين
أمثلة واقعية ونماذج
في عملية التصميم، من الضروري تقسيم المكونات إلى أجزاء صغيرة يمكن إعادة استخدامها بسهولة. سنوضح ذلك من خلال بناء بطاقة تحتوي على عدة عناصر مثل عنوان، مستوى الدورة، عدد الدروس، وأفتار المحاضر. سنستخدم طريقة الصفوف والأعمدة لتحقيق تصميم منظم وقابل للتوسع.
تقسيم البطاقة إلى صفوف وأعمدة
- تحديد الصفوف والأعمدة الأساسية:
الصف الأول: يحتوي على مستوى الدورة.
الصف الثاني: يحتوي على عنوان الدورة.
الصف الثالث: يحتوي على عدد الساعات والدروس.
الصف الرابع: يحتوي على أفتار المحاضر واسمه.
- إنشاء مكونات فرعية:
مستوى الدورة: نقوم بإنشاء مكون خاص بمستوى الدورة مع تخصيص الألوان والأحجام المناسبة.
عنوان الدورة: نص بسيط يمكن تخصيص حجمه ولونه.
عدد الساعات والدروس: يمكن تقسيم هذا الصف إلى عمودين، كل عمود يحتوي على نص وعدد.
أفتار المحاضر: يحتوي على صورة المحاضر واسمه.
خطوات البناء التفصيلية:
- إنشاء مكون مستوى الدورة:
– نبدأ بكتابة النص “مستوى متقدم”.
– نضع النص داخل إطار (Frame) ونعطيه لون الخلفية المناسب.
– نحول الإطار إلى مكون (Component) ليكون قابلًا لإعادة الاستخدام.
- إنشاء مكون عنوان الدورة:
– نكتب نص عنوان الدورة مثل “دورة تصميم المنتجات”.
– نحدد حجم الخط واللون المناسب.
– نحول النص إلى مكون.
- إنشاء مكون عدد الساعات والدروس:
– نكتب عدد الساعات مثل “3 ساعات” وعدد الدروس مثل “28 درس”.
– نضع كل نص داخل إطار (Frame).
– نحول الإطار إلى مكون بحيث يمكن تعديل النص بسهولة.
- إنشاء مكون أفتار المحاضر:
– نضع صورة المحاضر داخل إطار.
– نكتب اسم المحاضر تحت الصورة.
– نحول الإطار بالكامل إلى مكون.
تجميع المكونات في بطاقة واحدة:
- إنشاء إطار رئيسي للبطاقة:
– نحدد حجم البطاقة ولون الخلفية.
– نضيف إطارًا داخليًا ليكون بمثابة الحافة الداخلية للبطاقة.
- إضافة المكونات إلى البطاقة:
– نضيف مكون مستوى الدورة في الصف الأول.
– نضيف مكون عنوان الدورة في الصف الثاني.
– نضيف مكون عدد الساعات والدروس في الصف الثالث.
– نضيف مكون أفتار المحاضر في الصف الرابع.
- ضبط المسافات والهوامش:
– نضبط المسافات بين الصفوف باستخدام القيم المناسبة (مثل 8 بكسل أو 16 بكسل).
– نتأكد من محاذاة النصوص والصور بشكل صحيح داخل البطاقة.
استخدام المكونات الذكية (Smart Components):
- إنشاء خصائص قابلة للتعديل:
– نحدد خصائص النصوص والألوان التي يمكن تعديلها من خلال واجهة المستخدم.
– نضيف خيارات لإظهار أو إخفاء الأيقونات بجانب النصوص.
- إعادة استخدام المكونات في بطاقات أخرى:
– يمكن استخدام نفس المكونات في بطاقات مختلفة مع تعديل النصوص والألوان من دون الحاجة إلى بناء المكون من جديد.
تنفيذ عملي
يمكن الآن تحويل التصميم النظري إلى واقع عملي باستخدام أداة التصميم مثل Figma أو Adobe XD. سنقوم بإنشاء المكونات وتجميعها وفقًا للخطوات السابقة لضمان أن تكون البطاقة النهائية قابلة لإعادة الاستخدام والتوسع بسهولة.
مثال عملي:
- تصميم البطاقة في Figma:
– افتح Figma وقم بإنشاء مشروع جديد.
– ابدأ بإنشاء المكونات الفرعية (مستوى الدورة، عنوان الدورة، عدد الساعات والدروس، أفتار المحاضر).
– اجمع المكونات داخل إطار رئيسي للبطاقة.
- تخصيص المكونات:
– حدد خصائص النصوص والألوان التي يمكن تعديلها.
– اضف خيارات لإظهار أو إخفاء الأيقونات.
- تجربة البطاقة:
– قم بإعادة استخدام البطاقة مع تعديلات مختلفة للنصوص والألوان.
– تأكد من أن البطاقة تبدو جيدة وتعمل بشكل صحيح في كل الحالات.
بهذه الطريقة، يمكن تصميم بطاقات سهلة الاستخدام وقابلة للتعديل بسهولة مما يسهل العمل على المصممين والمطورين على حد سواء.
أدوات مساعدة لـ Figma
هناك العديد من الأدوات المساعدة والمكونات الإضافية لـ Figma التي يمكن أن تساعدك في تحسين عملية التصميم. إليك بعض الأدوات:
- Unsplash: أداة رائعة للحصول على صور فوتوغرافية مجانية عالية الجودة وخالية من حقوق الملكية.
- Remove BG: تساعدك على إزالة الخلفية من الصور تلقائيًا بنقرة واحدة.
- Autoflow: لربط عناصر التصميم بأسهم بطريقة مبسطة.
- Content Reel: توفر صورًا ونصوصًا وأيقونات وعناصر أخرى لتسهيل عملية التصميم.
- Design Lint: لفحص تصميمك والتأكد من خلوه من الأخطاء.
- Iconify: تقدم ما يقارب 100000 أيقونة ورمز لاستخدامها في مشروعك.
- Color Designer: للحصول على تدرجات الألوان واستكشاف تناغم الألوان.
تنويه: جميع الخطوات المذكورة أعلاه موجودة كـ تطبيق عملي بصورة مباشرة ضمن الجلسة التي سنضع رابطها نهاية هذا المقال.
في الختام
تُعد كتابة تجربة المستخدم من العناصر الأساسية التي تسهم في نجاح المشاريع الرقمية الحديثة. من خلال إيلاء الاهتمام لكافة التفاصيل المتعلقة بالمحتوى الرقمي، يستطيع الكتاب تحسين تجربة المستخدم وتعزيز رضاهم عن الخدمات أو المنتجات. ليس ذلك فحسب، بل إن تبني استراتيجيات متقدمة في كتابة تجربة المستخدم يساهم في تحقيق أهداف الأعمال وتوسيع قاعدة العملاء.
هذا المقال مستوحى من جلسة ويببينار أقامتها المنصة، قدمها الخبير م. بدر الشهري – مصمم تجربة المستخدم (UX) بالإتحاد السعودي للأمن السيبراني، وحاوره الأستاذ محمود عبد ربه مؤسس منصة “تعلّم كتابة تجربة المستخدم بالعربية”.
لمشاهد الجلسة كاملة عبر الرابط أدناه
إذا كنت ترغب في تطوير مهاراتك في هذا المجال وتصبح كاتب تجربة مستخدم محترف، يمكنك الانضمام إلى الدورات المقدمة عبر منصتنا. نقدم محتوى تعليمي متميز يلبي احتياجاتك ويعزز من قدراتك في كتابة تجربة المستخدم بالعربية. لا تفوت الفرصة لتكون جزءاً من هذا المجال المتنامي.
