ماهي المخططات الشبكية أو ال Wireframing في تصميم تجربة المستخدم

Nov 26, 2019

قبل أن أبدء في شرح المخططات الشبكية، أريد أن أطرح عليك بعض الأسئلة ،

كيف تقرر أنك سوف تختار شبكة من أربعة أعمدة أو خمسة أعمدة على صفحة ويب؟ … أين تضع الصور وأين تضع مقاطع الفيديو؟ … كيف تقرر أنك ستختار عناصر قابلة للتمرير أفقيًا أو قائمة رأسية أثناء التصميم؟ … كيف تقرر وضع أربعة أو خمسة مكونات في شريط التنقل؟

في هذه المقالة ، سأجيب على كل هذه الأسئلة (وأكثر!) ببساطة عن طريق تعريفك بمفهوم يسمى Wireframing (المخططات الشبكية).

 

ما هو التخطيط الشبكي؟

التخطيط الشبكي هي طريقة لتصميم موقع او تطبيق على المستوى الهيكلي من خلال إنشاء مخططات شبكية.

 

ما هو المخطط الشبكي؟

وفقًا لموقع usability.gov – “المخطط الشبكي عبارة عن توضيح ثنائي الأبعاد لواجهة الصفحة التي تركز بشكل خاص على تخصيص مساحة وتحديد أولويات المحتوى والوظائف المتاحة والسلوكيات المقصودة”. 

 

 

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

ربما لاحظت في الصورة أعلاه أنها لا تتضمن أي لون أو تصميم أو رسومات. إن السبب وراء خلوهم من أي ألوان أو عناصر بصرية هو أن الهدف الرئيسي هو فهم الوظائف ، ووضع العناصر الأساسية ، وكيفية تفاعل المستخدم معها.

لماذا المخططات الشبكية مهمة؟

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

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

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

“يشبه المخطط الشبكي مخطط البناء ولا ينبغي تخطيه ، تمامًا كما لو كنت لا تبني منزلًا دون مخطط”

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

انواع المخططات الشبكية

هناك نوعان رئيسيان من المخططات الشبكية:

  • مخططات شبكية منخفضة الدقة أو Lo-Fi
  • مخططات شبكية عالية الدقة ، تُعرف أيضًا باسم Hi-Fi

المخططات الشبكية منخفضة الدقة هي عبارة عن رسم تخطيطي على الورق وتتضمن المحتوى الأساسي والمرئي وعادة ما تكون ثابتة (غير تفاعلية).

أما المخططات الشبكية عالية الدقة  فهي تكون مفصلة للغاية ولديها التفاصيل التي تفتقدها المخططات الشبكية منخفضة الدقة. 

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

متى تستخدم المخططات الشبكية؟

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

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

كيف تقوم بعمل المخططات الشبكية ؟

هل أحتاج إلى دفع مبلغ كبير لبرنامج يقوم بإنشاء مخططات شبكية؟

لا! قلم وبعض الأوراق يعتبر كافيًا وفعالًا عند القيام بإنشاء تخطيط شبكي . يمكن أن تقوم ببعض الرسومات الأولية  وسيكون ذلك كافيًا لإيصال الافكار. 

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

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

  • Balsamiq
  • Invison
  • MarvelApp
  • Axure

و غيرها الكثير.

يمكن أيضًا استخدام Sketch و Adobe XD لإنشاء مخططات شبكية.

وفي الختام

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

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

ونتمنى لكم تخطيطًا سعيدًا !

 

المقالة الاصلية wireframes-in-ux

 

إطار تجربة المستخدم
منصة و مجتمع إلكتروني عربي مهتم و متخصص في مجال تجربة المستخدم و واجهات المستخدم , تهدف إلى تمكين المحتوى العربي و رفع الوعي لدى المستخدم العربي في مجال تجربة المستخدم

منصة و مجتمع إلكتروني عربي مهتم و متخصص في مجال تجربة المستخدم و واجهات المستخدم , تهدف إلى تمكين المحتوى العربي و رفع الوعي لدى المستخدم العربي في مجال تجربة المستخدم

منصة و مجتمع إلكتروني عربي مهتم و متخصص في مجال تجربة المستخدم و واجهات المستخدم , تهدف إلى تمكين المحتوى العربي و رفع الوعي لدى المستخدم العربي في مجال تجربة المستخدم

يتم توليد النص هنا استنادا الى معلومات المنتج بشرح
مختصر لما يتميز به , يتم توليد النص هنا استنادا الى
معلومات المنتج بشرح مختصر لما يتميز به , يتم
توليد النص هنا استنادا الى معلومات المنتج بشرح
مختصر لما يتميز به ,

Share This