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

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

الاطار الشبكي للموقع يدعى أيضا مخطط الصفحة أو مخطط الشاشة وهو دليل مرئي يمثل الاطار الهيكلي لأي موقع ويب[1]، ويحدد هذا الاطار تصميم الصفحة أو طريقة تنظيم محتوى الموقع بما في ذلك عناصر الواجهة وأنظمة التصفح وكيفية التكامل بينها[2]؛ وعادة ما لا يكون للاطار أسلوب مطبعي ولا لون ولا يحتوي على رسومات حيث ان التركيز يكون على الفعالية والمسلك واولوية المحتوى.[3]، أي ان التركيز على "وظيفة الشاشة وليس شكلها.”[4]

ويركز الاطار الشبكي للموقع على
  • نوع المعلومات المعروضة
  • نطاق الوظائف المتاحة
  • الاولويات النسبية للمعلومات والوظائف
  • القواعد المستخدمة في عرض انواع معينة من المعلومات
  • دان.م.براون Brown,Dan M تصميم الاتصالاتCommunicating Design: توثيق المواقع من اجل التصميم والتخطيط، الطبعة الثانية، شركة نيوريدرز للنشر، 2011، ص169.

ويقوم الاطار الشبكي بالربط بين البنية المفاهيمية الأساسية أو عمارة المعلومات بواجهة الموقع أو التصميم المرئي للموقع،[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". اطلع عليه بتاريخ 2011-03-25. 
  • Wodtke، Christina؛ Govella, Austin (2009). Information Architecture: Blueprints for the Web, Second Edition. New Riders. ISBN 978-0-321-59199-9. 
  • "Wireframes".