ما هو الهيكل السلكي (Wireframe)؟ كل شيء عن الإطارات الشبكية

الهيكل السلكي

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

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

ما هو الهيكل السلكي (Wireframe)؟

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

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

ما هو أستخدام الهيكل السلكي في تصميم UI / UX؟

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

توفير الوقت والمال

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

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

حفظ الأفكار

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

تلقي ردود الفعل

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

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

أنواع الإطارات الشبكية

عادةً ما يتم تقسيم أنواع الإطارات الشبكية إلى ثلاث فئات بناءً على مقدار التفاصيل، وسوف تتعرف على كل منها أدناه.

إطارات سلكية منخفضة الدقة أو Low-fidelity Wireframes

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

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

أنواع الإطارات الشبكية

إطارات سلكية متوسطة الدقة(Mid-fidelity Wireframes)

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

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

الإطارات الشبكية

Mid fidelity wireframe

إطارات سلكية عالية الدقة أو High-fidelity Wireframes

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

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

بالطبع، لرسم وتصميم إطارات سلكية عالية الدقة، يمكنك استخدام مجموعات تصميم الإطار السلكي الجاهزة.

الإطارات السلكية

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

كيفية تصميم ورسم إطارات سلكية (Wireframing)

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

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

  1. رسم إطارات سلكية باستخدام أدوات مثل الورق والقلم
  2. رسم وتصميم الهيكل السلكي باستخدام برامج التصميم

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

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

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

يمكنك مشاهدة مثال على العناصر المستخدمة لتصميم الإطارات الشبكية في الصورة أدناه.

أدوات وبرامج تصميم الإطار السلكي

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

  • Adobe XD: يعد برنامج Adobe XD أحد أكثر برامج تصميم واجهة المستخدم شيوعًا، ويمكن استخدامه كأحد برامج تصميم Wireframe نظرًا لمجموعة ميزاته الواسعة. يمكنك تصميم الإطارات السلكية التي تريدها باستخدام الأدوات المتوفرة في هذا البرنامج.
  • Figma: برنامج آخر شائع للغاية في مجتمع مصممي واجهة المستخدم هو برنامج Figma، والذي يحتوي، مثل Adobe XD، على أدوات تلبي احتياجاتك لرسم وتصميم الإطارات الشبكية.
  • Balsamiq: برنامج Balsamiq هو برنامج متخصص لتصميم الإطارات السلكية التي يمكنك استخدامها لتصميم الإطارات السلكية. يمكنك حتى نقل التصميمات التي رسمتها على الورق إليها وتحويلها تلقائيًا إلى إطارات سلكية رقمية وتقديمها إلى صاحب العمل أو المستخدم بجودة أعلى.

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

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

  1. قبل البدء في تصميم الإطارات السلكية، حدد الغرض من تصميمها، وبناءً على ذلك، حدد أداة التصميم ونوع الإطار السلكي الذي ستصممه.
  2. لا تنس أن تصميمها يجب أن يتم في أسرع وقت ممكن، لذا تأكد من وضع الوقت في الاعتبار. لا ينبغي أن تقضي الكثير من الوقت في تصميم الإطارات الشبكية.
  3. لا تهتم بالإطارات السلكية ذات التفاصيل المنخفضة والمتوسطة.
  4. يمكنك استخدام الورق والقلم أو البرنامج لرسم إطار سلكي، ولا يوجد فرق في استخدام هاتين الأداتين، ولكن يُقترح رسم الواير فريمات الأساسية يدويًا بالورق والقلم.
  5. يمكنك تدوين أسماء العناصر المختلفة في كل إطار سلكي واستخدام كل منها.
  6. بجانب كل صفحة، يمكنك كتابة وصف عنها.
  7. يمكنك تصميم الإطارات الشبكية بالترتيب الذي من المفترض أن يرى فيه المستخدم الصفحات المختلفة لمنتجك واستخدامها لتصميم تدفق المستخدم.
  8. لا تنس استخدام أبعاد الصفحة الصحيحة في تصميم الإطار السلكي. لا تفكر أبدًا في ورقة A4 كشاشة متنقلة!
  9. حاول مراعاة نسبة حجم العناصر المختلفة في تصميم الإطار السلكي، لكن لا يلزم أن تكون الأحجام دقيقة.
الإطارات الشبكية

منشور ذات صلة
برنامج 3D MAX 13 Minutes

ما هو برنامج 3D MAX؟

أمير مقدم

يعد برنامج 3D Max أحد أشهر برامج رسومات الكمبيوتر المستخدمة لإنشاء نماذج ثلاثية الأبعاد ورسوم متحركة وصور رقمية. ويحظى بشعبية كبيرة بين المصممين ثلاثي الأبعاد وفناني الجرافيك.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة