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

الإطار الشبكي للموقع أو مخطط الصفحة أو الشاشة  أو  وهو دليل مرئي يظهر الإطار أو الشكل الهيكلي لأي موقع ويبBrown 2011, p. 166، ويحدد تصميم الصفحة أو طريقة تنظيم المحتويات فيها بما في ذلك عناصر الواجهة وأنظمة التصفح وكيفية التكامل بينهاGarrett 2010, p. 131؛ وعادة ما لا يكون للإطار أسلوب مطبعي ولا لون ولا يحتوي على رسومات حيث ان التركيز يكون على الفعالية والمسلك واولوية المحتوى.Brown 2011, p. 167، أي ان التركيز على "وظيفة الشاشة وليس شكلها.”Brown 2011, p. 168

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

ويقوم الإطار الشبكي بالربط بين البنية المفاهيمية الأساسية أو عمارة المعلومات بواجهة الموقع أو التصميم المرئي للموقع، ويساعد الإطار الشبكي في تحديد أداء مختلف قوالب الشاشات في الموقع والعلاقات بينها، وتعد عملية تصميم هذا الإطار عملية متكررة وفعالة في عمل نماذج اولية سريعة للصفحات وفي نفس الوقت تقييم مدى الجانب العملي في مفهوم التصميم، وعادة ما تبدا عملية توليد الاطر بين "الأعمال البنيوية الراقية مثل المخططات الانسيابية أو خرائط المواقع وتصميم الشاشات.” وعند تصميم المواقع تصبح الأفكار ملموسة عند تصميم الاطر الشبكية لتلك المواقع.Wodtke, Govella 2009, p. 186
وبعيدا عن المواقع تستخدم الاطر الشبكي في عمل نماذج اولية لمواقع أجهزة المحمول اوتطبيقات الحاسب أو غيرها من المتجات التي تعتمد على الشاشات والتي تتضمن التفاعل بين الإنسان والحاسب.Konigi.com 2011 وسوف تؤدي التكنولوجيات والوسائط التي ستظهر في المستقبل إلى منح الإطار الشبكي القدرة على التكيف والتطور.

 استخدامات الإطار الشبكي 

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

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

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

دقة منخفضة: تشبه المخطط التقريبي أو المحاكاة التقريبية، ولا تحتوي الاطر الشبكية قليلة الدقة على الكثير من التفاصيل كما يمكن إنتاجها بسرعة، وهذه الاطر تساعد فريق المشروع من حيث التعاون الفعال بينهم حيث انها تكون أكثر تجريدا وتستخدم المستطيلات والعناوين من اجل تمثيل المحتوى.Wodtke, Govella 2009, p. 185، ويستخدم أسلوب المحتوى الزائف أو الملئ بنص لاتيني (نص لاتيني) أو المحتوى الرمزي لتمثيل البيانات عند عدم توفر المحتوى الحقيقي.Brown 2011, p. 175

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

ونجد بالنسبة للرسومات البسيطة أو منخفضة الدقة ان أسلوب النموذج الورقي الأولي paper prototyping يعد أسلوبا شائعا، ونظرا لان هذه المخططات تعد مجرد صور تمثيلية تستخدم الحواشي وهي ملاحظات متجاورة من اجل تفسير مسلك البرنامج.Brown 2011, p. 194 ويشيع استخدام برامج الكمبيوتر في عمل الاطر مع المشروعات الأكثر تعقيدا، وتسمح بعض الأدوات بدمج خاصية التفاعلية ومن بينها الرسوم المتحركة باستخدام برنامج فلاش وبعض تكنولوجيات الإنترنت مثل لغة رقم النص الفائق 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

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

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

 التصميم المعلوماتي 

التصميم المعلوماتي هو تقديم المعلومات بطريقة تسهل الفهم من خلال تحديد مكانها واولويتها، ويعد التصميم المعلوماتي أحد مجالات تصميم الجرافيك والتي تهدف إلى عرض المعلومات بفعالية من اجل وضوح عملية التواصل، ويجب في حالة المواقع ان يتم تنظيم المعلومات بطريقة تعكس اهداف ومهام المستخدم.Garrett 2010, p. 126

 تصميم التصفح 

يقدم نظام التصفح مجموعة من العناصر في الشاشة والتي تسمح للمستخدم بالانتقال من صفحة إلى أخرى داخل الموقع الإلكتروني، ويجب على تصميم التصفح ان يوضح العلاقة بين الوصلات التي يحتوي عليها بحيث يفهم المستخدم الخيارات المتاحة امامه من اجل تصفح الموقع، وكثيرا ما تحتوي المواقع الإلكترونية على أنظمة تصفح متعددة مثل التصفح العامglobal navigation والتصفح الموضعيlocal navigation والتصفح التكميليsupplementary navigation والتصفح السياقيcontextual navigation والتصفح باذنcourtesy navigation.Garrett 2010, p. 120-122

 تصميم الواجهة 

يشمل تصميم واجهة المستخدم اختيار وتنظيم عناصر الواجهة لتمكين المستخدم من التفاعل مع أداء النظام.Garrett 2010, p. 30 والهدف من ذلك هو تسهيل الاستخدام بأقصى درجة من الفعالية، ومن بين العناصر الشائعة الوجود في تصميم الواجهة ازرار المهام والحقول النصية وصناديق الاختيار وازرار الراديو والقوائم المنسدلة.

 انظر أيضًا 
 عمارة المعلومات
 تصميم مواقع الويب

 ملاحظات 

 المراجع 







تصنيف:تصميم الويب