ما هو Sketch، Wireframe، Mockup، Prototype وما الفرق بينها؟

Sketch، Wireframe، Mockup، Prototype

اذا كنت في عالم التصميم فغالبا ما تسمع بالمصطلحات التالية Sketch ، Wireframe ، Mockup ، Prototype واذا كنت باحثا في مجال تصميم تجربة المستخدم وواجهات المستخدم فهذه المقالة ستكون مفيدة لك، واذا كنت محترفا فهي فرصة لمراجعة المعلومات سريعاً

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

لنتفق من البداية أن المصطلحات اعلاه مترابطة وتبدأ كسلسلة من Sketch (الرسم) وتنتهي بـ Prototype (النموذج الأولي)

الرسم، الرسم التخطيطي، نموذج الحجم الطبيعي، النموذج الأولي

1- مرحلة Sketch (الرسم)

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

الرسم باليد، الصورة من windows

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

قم بحفظ هذه الرسومات لترجع لها في المراحل القادمة ، بامكانك تصويرها 📷 بالهاتف بعد الانتهاء من الرسم لتسفيد منها في مرحلة العصف الذهني، ايضا بامكانك استخدامها في تطبيقات معروفة لتجعلها نموذج تفاعلي

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

2- مرحلة Wireframe (الرسوم التخطيطية)

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

low-fidelity (منخفض الدقة)

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

Meg Walkerمخطط رسومي لتطبيق أي أو أس، لـ

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

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

وبالرغم ان الرسوم التخطيطية تبدو بسيطة المظهر الا أنها تستغرق وقتاً وتحتاج الكثير من التفكير فالرسم يمثل هنا ما نسبته 10% من اجمالي العملية و90% هي التفكير، فالمصمم للمنتج في هذه المرحلة يبدأ بوضع الأجزاء بعناية فكل رابط يحتاج الي وجهة وكل صفحة بحاجة الي رابط لتصل أليها، فمن خلال الرسم التخطيطي تستطيع عرض هذا الرسم على المستخدمين المحتملين وطلب التعليقات وهو أمر رائع لأن الناس سيهتمون بالوظائف وتجربة المستخدم أكثر من الجماليات في هذه المرحلة

لم ننتهي بعد ولكن إذا اعجبك هذا المقال فلا تنسى الضغط على زر التصفيق 👏 ليصل للمزيد من المهتمين

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

Balsamiq, UXpin, Adobe XD …

Balsamiq tool

اشياء يجب تذكرها عند البدء بالرسم التخطيطي

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

ويرفريم باللون الازرق من شركة أدوبي

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

3- مرحلة Mockup (نموذج بالحجم الطبيعي)

أتمنى بالبداية ان أكون وفقت باختيار الترجمة الصحيحة للمصطلح 😅

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

Mid-fidelity (متوسط الدقة)

High-fidelity (عالي الدقة)

مرحلة الموكب اب، تصميم واجهة مسح الاصبع والبن كود لـ ابراهيم شقورة

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

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

يمكن انشاء النموذج بالحجم الطبيعي (موك أب) من خلال العديد من البرامج مثل

Adobe XD و Sketch و Figma

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

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

4- مرحلة Prototype (النموذج الأولي)

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

نموذج أولي تفاعلي لـ Athanasia Lykoudi

ونعود ونؤكد هنا أن هذا ليس هو المنتج النهائي

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

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

البرامج مثل ادوب اكس دي، وانفيجن، ومارفل آب ستساعدك في انتاج النموذج الاولي واختباره على الويب والموبايل والساعات الذكية وحتى اذا كان منتجك يستخدم الاوامر الصوتية

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

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

أذا اعجبك هذا المقال فلا تنسى الضغط على زر التصفيق 👏 ليصل للمزيد من المهتمين

واذا كنت مهتماً بمتابعتي ومتابعة أعمالي قم بزيارة بروفايلي على بيهانس