مخطط صفحة المصطلحات والنموذج الأولى
 |
| ما الفرق بين تخطيط الصفحة Wireframing والنوذج المبدئي Prototyping |
غالبا ما يخلط الأشخاص (حتى المصممين) بين مخطط صفحة المصطلحات والنموذج الأولي. وهم يعرفون أن كلاهما جزء من عملية التصميم, لكنهم يواجهون أسئلة على غرار: هي نفسها في الشكل والوظيفة لا ينبغي لأحدهما أن يحل محل الآخر؟ يمكن أن نقول انهم الى حد كبير نفس الشيء .
في الواقع ، الجواب هو لا. تلعب كل من تخطيطات الصفحات والنماذج الأولية أدوارا مميزة وفريدة من نوعها في عملية تصميم المنتج. وعلى الرغم من أن الاختلاف الرئيسي بينهما غالبا ما يتلخص في الدقة (مدى تشابهها مع المنتج النهائي) ، إلا أن هناك اختلافات أخرى-أيضا - في التصميم والوظائف.
لكن قبل أن نشرح الاختلافات ، ماذا عن أن نبدأ بتعريفات بسيطة لكل منها.
تعريف تخطيط صفحة Wireframe
مخطط الصفحة هوعبارة عن نموذج حقيقي منخفض الدقة - يخدم ثلاثة أغراض بسيطة ودقيقة.
- يوفر المعلومات التي سيتم عرضها على الصفحة.
- يعطي لمحة عامة عن بنية الصفحة والتخطيط.
- يعبر عن التوجه العام ويصف واجهة المستخدم ux.
يكمن سر مخطط الصفحة الجيد في بساطته
هل تتذكر كيف أن أحد الاختلافات الرئيسية بين تخطيطات الصفحة والنماذج الأولية هو الدقة غالبا ما تكون تخطيطات الصفحة منخفضة أو متوسطة الدقة .
الإبداعات التي تظهر على الشاشة والتي لها مظهر أكثر جاذبية تعتبر نتاجاً للصياغة المبتكرة للجملة من خلال استخدام المربعات والخطوط المرسومة على الورق. التفاعل ضئيل، لذلك يمكن للمصمم اختبار السلوك دون القلق بشأن شكل وأسلوب المنتج.
تعرف على المهارات التي يجب توافرها في مصمم الجرافيك
تعريف النموذج الأولي Prototype
النموذج الأولي هو نموذج عمل بسيط نسبيا لصفحة تطبيق / ويب. عادة ما يتم النظر في الخطوة التالية في عملية التصميم (التطبيق/صفحة الويب) بعد مخطط الصفحة.
تتضمن النماذج الأولية صورا ملونة ورسوم متحركة بالإضافة إلى تصور أولي للمحتوى الفعلي الذي سيكون موجودا في (صفحة التطبيق/الويب).
من خلال اختبار واجهة المنتج الرقمي وطريقة تفاعل المستخدم معه، غالباً ما تكون النماذج الأولية متوسطة أو عالية الدقة، على عكس تخطيطات الصفحة.
وهو أمر مفيد عند اختبار قابلية استخدام التطبيق. وبما أن المنتج الأكثر اكتمالا غالبا ما يشبه المنتج النهائي ، فإن الوقت والجهد المستثمر في إنشاء النموذج الأولي يمكن أن ينقذهما أثناء مرحلة التطوير.
 |
| تعريف النموذج المبدئي Prototype |
إذن ما هو الفرق حقا
إذا كنت تعتبر منتجك جسما بشريا، فإن كل من تخطيطات الصفحات والنماذج الأولية تخدم أغراضا متشابهة ولكنها مميزة:
- تخطيطات الصفحات Wireframe تلعب دور (الهيكل العظمي) من المنتج الرقمي الخاص بك. هذا هو الأساس ويوفر فكرة عامة عن هيكل ما كنت بناء.
- يعتمد الهيكل العظمي للتصميم على المحتوى الذي يلعب الدور (العضلات) ، وكلما أسرعت في إنشاء محتوى عام لتصميمك ، كان المسار أكثر وضوحا من مخطط الصفحة إلى النموذج الأولي. يساعد في الحصول على المحتوى الفعلي للتأكد من أن كل شيء يتدفق بالطريقة التي تريدها.
- النماذج الأولية هي تمثيل مرئي أكثر لمنتجك. فكر في النموذج الأولي على أنه (جسم شبه مكتمل بشرة كاملة أو ملامح وجه). صياغة نموذج أولي يشبه جعل إبداعك مناسبا للجمهور.
- لا يمكننا اعتبارها نسخة نهائية بالطبع ، لكن من المقبول إظهارها للآخرين.في هذه المرحلة ، كل ما عليك فعله هو إجراء تعديلات بسيطة قبل إرسال تصميماتك إلى المهندسين لتنفيذها في الواقع.
الأدوات التي تساعدك على تصميم النموذج الأولي Prototype وقوالب Wireframe
على الرغم من وجود أدوات يمكن أن تكون بمثابة برنامج شامل للانتقال من الرسومات إلى النماذج الأولية إلى التصميم النهائي ، إلا أن هناك أيضا أدوات أكثر تخصصا تركز على كل جزء من عملية تصميم المنتج. فيما يلي قائمة مختصرة بالأشياء المُوصى بها على الصفحات:
القلم والورق هما أسهل طريقة لبدء التخطيط لصفحة Wireframe.
غالبا ما تكون الرسومات التلقائية هي أسرع طريقة لنقل الأفكار من عقلك إلى العالم حتى تتمكن من التفكير فيها ومراجعتها. من مميزات إستخدام هذه الطريقة أنها غير مكلفة على الإطلاق . لماذا تحب تصميم وميض ورقة ورميها بعيدا.
Wirify هي أداة مهمة" تسمح لك بتحويل أى صفحة ويب إلى مخطط بضغطة زر واحدة" ، على الرغم من أن هذة الأداة هى أقل إستخداما لإنشاء المخططات للصفحات على حساب تحليل الصفحات بطريقة واضحة وسلسة ومبسطة. هذا شيء عظيم إذا كنت تقوم بمراجعة نموذج الفعلي في محاولة لتحسينه.
Freehand مثل السبورة الرقمية البسيطة التي تمكنك أنت وفريقك من التعاون والتواصل. باستخدام Freehand يوفر لك خطوات شاقة من المسح الضوئي وتحميل الرسوم البيانية مرسومة باليد ، ومن ثم إعادة رسم لهم من جديد عند إجراء تغيير بسيط.
 |
| Freehand |
Sketchهو محرر الرسومات شعاعي (Vector) لنظام التشغيل ماك ، وتستخدم لتصاميم الشاشة والمنتجات الرقمية. كما هو معروف (قليلا) أداة أبسط لاستخدام من أدوبي فوتوشوب. من خلال دمجها مع إحدى أدوات واجهة المستخدم المتاحة على نطاق واسع ، سيكون من الأسهل بكثير الحصول على النموذج الأولي الخاص بك.
InVision (إذا كنت لا تعرف) يسمح لك لتحميل ملفات التصميم الذي أنشأته للتو في Sketch أو أدوبي فوتوشوب ، إضافة الرسوم المتحركة والإيماءات والحركات الانتقالية. حول شاشتك الثابتة إلى نموذج أولي تفاعلي.
يمكنك أيضا تبسيط عملية التعليق من خلال السماح لعملائك وأعضاء فريقك وأصحاب المصلحة بالتعليق مباشرة على تصميمات.
اكتب تعليقا اذا كان لديك اى تساؤل عن الموضوع