الإطار الشبكي للموقع

الإطار الشبكي للموقع أو مخطط الصفحة أو الشاشة (بالإنجليزية: Website wireframe)‏ أو (بالإنجليزية: screen blueprint)‏ وهو دليل مرئي يظهر الإطار أو الشكل الهيكلي لأي موقع ويب^[1]، ويحدد تصميم الصفحة أو طريقة تنظيم المحتويات فيها بما في ذلك عناصر الواجهة وأنظمة التصفح وكيفية التكامل بينها^[2]؛ وعادة ما لا يكون للإطار أسلوب مطبعي ولا لون ولا يحتوي على رسومات حيث ان التركيز يكون على الفعالية والمسلك واولوية المحتوى.^[3]، أي ان التركيز على "وظيفة الشاشة وليس شكلها.”^[4]

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

ويقوم الإطار الشبكي بالربط بين البنية المفاهيمية الأساسية أو عمارة المعلومات بواجهة الموقع أو التصميم المرئي للموقع،^[2] ويساعد الإطار الشبكي في تحديد أداء مختلف قوالب الشاشات في الموقع والعلاقات بينها، وتعد عملية تصميم هذا الإطار عملية متكررة وفعالة في عمل نماذج اولية سريعة للصفحات وفي نفس الوقت تقييم مدى الجانب العملي في مفهوم التصميم، وعادة ما تبدا عملية توليد الاطر بين "الأعمال البنيوية الراقية مثل المخططات الانسيابية أو خرائط المواقع وتصميم الشاشات.”^[3] وعند تصميم المواقع تصبح الأفكار ملموسة عند تصميم الاطر الشبكية لتلك المواقع.^[5] وبعيدا عن المواقع تستخدم الاطر الشبكي في عمل نماذج اولية لمواقع أجهزة المحمول اوتطبيقات الحاسب أو غيرها من المتجات التي تعتمد على الشاشات والتي تتضمن التفاعل بين الإنسان والحاسب.^[6] وسوف تؤدي التكنولوجيات والوسائط التي ستظهر في المستقبل إلى منح الإطار الشبكي القدرة على التكيف والتطور.

يمكن استخدام الإطار الشبكي من قبل تخصصات مختلفة، ويستخدم المبرمجون هذا الإطار من اجل التحكم على نحو ملموس في أداء الموقع، اما مصممي المواقع فيستخدمونه من اجل دفع عملية واجهة المستخدم UI، ويستخدم متخصصوا التصميم المعتمد على خبرة المستخدم ومهندسو المعلومات هذا الإطار من اجل اظهار مسارات التصفح بين الصفحات، ويستخدمه اصحاب الأعمال لضمان ان الاشتراطات والأهداف قد تحققت من خلال التصميم،^[3] ومن بين المتخصصين الاخرين الذين يقومون بتصميم الإطار الشبكي مهندسي المعلومات ومصممي الواجهات التفاعلية ومتخصصي التصميم المعتمد على خبرة المستخدم ومصممي الجرافيكس والمبرمجين ومديري المنتجات.^[6]

ويمكن ان يصبح التعامل مع الإطار الشبكي جهدا تعاونيا حيث انها تربط بين البنية المعلوماتية (عمارة المعلومات) والتصميم المرئي، ونظرا لوجود تداخل في هذه التخصصات المهنية قد تحدث بعض التناقضات مما يجعل عملية تصميم الإطار الشبكي أحد الاجزاء التي تثير الجدل في عملية تصميم المواقع.^[5] ونظرا لان هذا الإطار المواقع تعد من قبيل المفاهيم الجمالية «البسيطة» فمن الصعوبة بمكان على المصممين تحديد مدى الدقة المطلوبة في تصوير التصميمات الفعلية للشاشات.^[4] ومن بين الصعوبات الأخرى هي ان تلك الاطر لا تعرض على نحو فاعل تفاصيل تفاعلية، والتصميمات الحديثة لواجهات المستخدم تضم عدة ادوات مثل اللوحات الممتدة Extended Panels والتاثيرات العائمة Hover Effects والدومات Carousels، وهي ادوات تمثل تحديا للمخططات ثنائية الابعاد.^[7]

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

دقة منخفضة: تشبه المخطط التقريبي أو المحاكاة التقريبية، ولا تحتوي الاطر الشبكية قليلة الدقة على الكثير من التفاصيل كما يمكن إنتاجها بسرعة، وهذه الاطر تساعد فريق المشروع من حيث التعاون الفعال بينهم حيث انها تكون أكثر تجريدا وتستخدم المستطيلات والعناوين من اجل تمثيل المحتوى.^[8]، ويستخدم أسلوب المحتوى الزائف أو الملئ بنص لاتيني (نص لاتيني) أو المحتوى الرمزي لتمثيل البيانات عند عدم توفر المحتوى الحقيقي.^[9]

دقة عالية: كثيرا ما تستخدم الاطر ذات الدقة العالية في التوثيق لانها تضم مستوى من التفاصيل يطابق على نحو أفضل تصميم الصفحة الحقيقية وبالتالي تاخذ وقتا أطول في تصميمها.^[8]

ونجد بالنسبة ل��رسومات البسيطة أو منخفضة الدقة ان أسلوب النموذج الورقي الأولي paper prototyping يعد أسلوبا شائعا، ونظرا لان هذه المخططات تعد مجرد صور تمثيلية تستخدم الحواشي وهي ملاحظات متجاورة من اجل تفسير مسلك البرنامج.^[10] ويشيع استخدام برامج الكمبيوتر في عمل الاطر مع المشروعات الأكثر تعقيدا، وتسمح بعض الأدوات بدمج خاصية التفاعلية ومن بينها الرسوم المتحركة باستخدام برنامج فلاش وبعض تكنولوجيات الإنترنت مثل لغة رقم النص الفائق HTML وصفحات الطرز المتراصة CSS وجافا سكريبتJavaScript.

برمجيات تصميم الإطار الشبكي

• ميكروسوفت فيزوMicrosoft Visio
• كاكو Cacoo
• كريتليCreately
• موكابس بواسطة شركة بالساميكMockups, by Balsamiq
• ديزينر فيستا DesignerVista
• لوسيد تشارتLucidChart
• جمبتشارت Jumpchart
• بروتوشيرProtoShare
• اجورAxure
• جستينميند بروتوتيبر Justinmind Prototyper
• أدوبي فايروركس Adobe Fireworks
• أدوبي إليستريتور Adobe Illustrator
• اومنيجرافيلOmniGraffle
• موكينجبيردMockingbird
• هوتجلوHotGloo
• بيدوكوPidoco
• انتيتيبAntetype
• تنسكرينز10screens
• اب سكتشرApp Sketcher
• ويرفريم سكتشر Wireframe Sketcher

يمكن تقسيم المخطط الهيكلي للمواقع الإلكترونية إلى ثلاث مكونات: التصميم المعلوماتي وتصميم التصفح وتصميم الواجهة، وفي تصميم الصفحة تجتمع هذه العناصر، اما الإطار الشبكي فيحدد العلاقة بين هذه المكونات.^[2]

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

يقدم نظام التصفح مجموعة من العناصر في الشاشة والتي تسمح للمستخدم بالانتقال من صفحة إلى أخرى داخل الموقع الإلكتروني، ويجب على تصميم التصفح ان يوضح العلاقة بين الوصلات التي يحتوي عليها بحيث يفهم المستخدم الخيارات المتاحة امامه من اجل تصفح الموقع، وكثيرا ما تحتوي المواقع الإلكترونية على أنظمة تصفح متعددة مثل التصفح العامglobal navigation والتصفح الموضعيlocal navigation والتصفح التكميليsupplementary navigation والتصفح السياقيcontextual navigation والتصفح باذنcourtesy navigation.^[12]

يشمل تصميم واجهة المستخدم اختيار وتنظيم عناصر الواجهة لتمكين المستخدم من التفاعل مع أداء النظام.^[13] والهدف من ذلك هو تسهيل الاستخدام بأقصى درجة من الفعالية، ومن بين العناصر الشائعة الوجود في تصميم الواجهة ازرار المهام والحقول النصية وصناديق الاختيار وازرار الراديو والقوائم المنسدلة.

• عمارة المعلومات
• تصميم مواقع الويب

• Brown، Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders. ISBN:978-0-13-138539-9.
• Garrett، Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. ISBN:978-0-321-68865-1.
• "Konigi Wiki – Wireframes". مؤرشف من الأصل في 2015-03-19. اطلع عليه بتاريخ 2011-03-25.
• Wodtke، Christina (2009). Information Architecture: Blueprints for the Web, Second Edition. New Riders. ISBN:978-0-321-59199-9. {{استشهاد بكتاب}}: الوسيط author-name-list parameters تكرر أكثر من مرة (مساعدة)
• "Wireframes". مؤرشف من الأصل في 2011-09-04.