ما الفرق بين تخطيط الصفحة Wireframing والنمذجة المبدئية Prototyping؟
غالبًا ما يخلط الأشخاص (حتى المصممون) بين مصطلحات تخطيط الصفحة والنموذج الأولي. أعلم أن كلاهما جزء من عملية التصميم ، لذلك أواجه أسئلة مثل: أليست متشابهة في الشكل والوظيفة ، ألا يحل أحدهما محل الآخر؟ لا يمكنك القول أنهم أكثر أو أقل نفس الشيء؟
في الحقيقة الجواب (لا). تلعب كل من تخطيطات الصفحات والنماذج الأولية دورًا فريدًا في عملية تصميم المنتج. غالبًا ما يرجع الاختلاف الرئيسي بينهما إلى الدقة (التشابه مع المنتج النهائي) ، ولكن هناك اختلافات أخرى في التصميم والوظيفة.
لكن قبل شرح الاختلافات ، لماذا لا نبدأ بتعريف موجز لكل منها؟
تعريف مخطط الصفحة Wireframe
تخطيطات الصفحة عبارة عن قوالب حقيقية منخفضة الدقة تخدم ثلاثة أغراض بسيطة ودقيقة:
- يوفر المعلومات المعروضة على الصفحة.
- يوفر نظرة عامة على هيكل الصفحة وتخطيطها.
- يمثل الاتجاه العام ويشرح تجربة المستخدم لواجهة المستخدم.
سر التصميم الجيد للصفحة هو بساطته.
تذكر أن أحد الاختلافات الرئيسية بين تخطيطات الصفحة والنماذج الأولية هو الدقة؟ غالبًا ما تتراوح تخطيطات الصفحة من دقة منخفضة أو متوسطة. التفاعل ضئيل للغاية ، مما يسمح للمصممين باختبار السلوك دون القلق بشأن شكل المنتج ومظهره.
تعريف النموذج الأولي
النموذج الأولي هو نموذج عمل بسيط نسبيًا لتطبيق / صفحة ويب. يعتبر هذا عادةً الخطوة التالية في عملية تصميم (التطبيق / صفحة الويب) بعد تخطيط الصفحة.
تتضمن النماذج الأولية الصور الملونة والرسوم المتحركة بالإضافة إلى التصورات الأولية للمحتوى الفعلي الذي سيتم عرضه في (التطبيق / صفحة الويب).
على عكس تخطيطات الصفحة ، غالبًا ما تكون النماذج الأولية متوسطة أو عالية الدقة. يسمح للمستخدمين باختبار واجهة المنتجات الرقمية وكيفية التفاعل معها. هذا مفيد عند اختبار قابلية استخدام التطبيق الخاص بك. غالبًا ما يشبه منتجًا أكثر اكتمالًا ، مما يوفر الوقت والجهد المبذول في النماذج الأولية أثناء مرحلة التطوير.
إذن ما هو الفرق حقًا؟
إذا كنت تفكر في المنتج على أنه جسدًا بشري ، فإن تخطيطات الصفحات والنماذج الأولية متشابهة ولكنها تخدم أغراضًا مختلفة.
- تعمل الإطارات الشبكية بمثابة "الهيكل العظمي" لمنتجك الرقمي. هذا هو الأساس ، يمنحك فكرة عامة عن هيكل ما تقوم ببنائه.
- يعتمد الهيكل العظمي للتصميم على المحتوى الذي يعمل (العضلة). كلما قمت بإنشاء المحتوى العام لتصميمك بشكل أسرع ، كلما كان المسار من مخطط الصفحة إلى النموذج الأولي أوضح. يساعد في الحصول على محتوى حقيقي حتى يتدفق كل شيء بالطريقة التي تريدها.
- النموذج الأولي هو تمثيل مرئي أكثر لمنتج. فكر في النموذج الأولي على أنه "جسم خشن بملامح وجه وبشرة مثالية." النماذج الأولية مثل جعل عملك وثيق الصلة بجمهورك. بالطبع ، لا يمكنك اعتباره نهائيًا ، لكن لا بأس في إظهاره للآخرين. في هذه المرحلة ، كل ما عليك فعله هو إجراء بعض التعديلات الطفيفة قبل إرسال التصميم إلى مهندس للتصميم الفعلي.
أدوات تساعدك على تصميم نماذج Prototype و Wireframe
تعمل بعض الأدوات كبرنامج شامل من الرسم إلى النماذج الأولية إلى التصميم النهائي ، في حين أن البعض الآخر أكثر تخصصًا ويركز على جميع أجزاء عملية تصميم المنتج. فيما يلي قائمة قصيرة بما نوصي به (صفحة):
يعد القلم والورق أسهل طريقة للبدء في تخطيط الإطار السلكي.
غالبًا ما يكون الرسم بشكل طبيعي أسرع طريقة لاستخراج الأفكار من رأسك وانعكاسها. من مزايا استخدام هذه الطريقة أنها غير مكلفة. لم يعجبك التصميم؟ قم بوميض الورقة وتخلص منها بعيدًا!
Wirify هي أداة "يمكنها تحويل أي صفحة ويب إلى تخطيط بنقرة واحدة" ، ولكنها لا تُستخدم غالبًا لإنشاء تخطيطات الصفحات على حساب تحليل الصفحات بطريقة واضحة ومبسطة. يعد هذا أمرًا رائعًا إذا كنت تراجع نموذجًا حقيقيًا لتحسينه.
يشبه Freehand السبورة البيضاء الرقمية البسيطة التي تتيح لك ولفريقك التعاون والتواصل. يوفر لك Freehand من العملية الشاقة المتمثلة في مسح الرسومات المرسومة يدويًا واستيرادها ثم إعادة رسمها عند إجراء تغييرات طفيفة.
Sketch هو محرر رسومات متجه لنظام macOS يستخدم لتصميم الشاشة والمنتجات الرقمية. تُعرف بأنها أداة أسهل في الاستخدام (قليلاً) من Adobe Photoshop. إلى جانب واحدة من أكثر أدوات واجهة المستخدم شيوعًا ، فإنه يجعل النماذج الأولية أسهل بكثير.
يتيح لك InVision استيراد ملفات التصميم التي أنشأتها للتو في Sketch أو Adobe Photoshop (لأولئك الذين لا يعرفون) وإضافة الرسوم المتحركة والإيماءات والانتقالات. تحويل الشاشات الثابتة إلى نماذج أولية تفاعلية. يمكنك أيضًا تبسيط عملية التعليق بالسماح لعملائك وأعضاء الفريق وأصحاب المصلحة بالتعليق مباشرةً على تصميماتك.
 بين مصطلحات تخطيط الصفحة والنموذ…){kind=link}
تعليقات
إرسال تعليق