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

الإطار الشبكي للموقع أو مخطط الصفحة أو الشاشة (بالإنجليزية: 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] والهدف من ذلك هو تسهيل الاستخدام بأقصى درجة من الفعالية، ومن بين العناصر الشائعة الوجود في تصميم الواجهة ازرار المهام والحقول النصية وصناديق الاختيار وازرار الراديو والقوائم المنسدلة.

انظر أيضًا

ملاحظات
  1. Brown 2011, p. 166
  2. Garrett 2010, p. 131
  3. Brown 2011, p. 167
  4. Brown 2011, p. 168
  5. Wodtke, Govella 2009, p. 186
  6. Konigi.com 2011
  7. Brown 2011, p. 169
  8. Wodtke, Govella 2009, p. 185
  9. Brown 2011, p. 175
  10. Brown 2011, p. 194
  11. Garrett 2010, p. 126
  12. Garrett 2010, p. 120-122
  13. Garrett 2010, p. 30

المراجع
  • 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"، مؤرشف من الأصل في 19 مارس 2015، اطلع عليه بتاريخ 25 مارس 2011.
  • Wodtke, Christina (2009)، Information Architecture: Blueprints for the Web, Second Edition، New Riders، ISBN 978-0-321-59199-9.
  • "Wireframes"، مؤرشف من الأصل في 04 سبتمبر 2011.
  • بوابة إنترنت
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.