Share to: share facebook share twitter share wa share telegram print page

 

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

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

الإطار الشبكي للموقع أو مخطط الصفحة أو الشاشة (بالإنجليزية: 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". مؤرشف من الأصل في 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.
Kembali kehalaman sebelumnya


Index: pl ar de en es fr it arz nl ja pt ceb sv uk vi war zh ru af ast az bg zh-min-nan bn be ca cs cy da et el eo eu fa gl ko hi hr id he ka la lv lt hu mk ms min no nn ce uz kk ro simple sk sl sr sh fi ta tt th tg azb tr ur zh-yue hy my ace als am an hyw ban bjn map-bms ba be-tarask bcl bpy bar bs br cv nv eml hif fo fy ga gd gu hak ha hsb io ig ilo ia ie os is jv kn ht ku ckb ky mrj lb lij li lmo mai mg ml zh-classical mr xmf mzn cdo mn nap new ne frr oc mhr or as pa pnb ps pms nds crh qu sa sah sco sq scn si sd szl su sw tl shn te bug vec vo wa wuu yi yo diq bat-smg zu lad kbd ang smn ab roa-rup frp arc gn av ay bh bi bo bxr cbk-zam co za dag ary se pdc dv dsb myv ext fur gv gag inh ki glk gan guw xal haw rw kbp pam csb kw km kv koi kg gom ks gcr lo lbe ltg lez nia ln jbo lg mt mi tw mwl mdf mnw nqo fj nah na nds-nl nrm nov om pi pag pap pfl pcd krc kaa ksh rm rue sm sat sc trv stq nso sn cu so srn kab roa-tara tet tpi to chr tum tk tyv udm ug vep fiu-vro vls wo xh zea ty ak bm ch ny ee ff got iu ik kl mad cr pih ami pwn pnt dz rmy rn sg st tn ss ti din chy ts kcg ve 
Prefix: a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9