كيفية استخدام الشبكات عند إنشاء نماذج أولية للصفحات

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

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

ما هي الشبكة ولماذا استخدامها

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

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

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

في الصفحة النهائية ، عادة ما تكون الشبكات غير مرئية. ولكن يمكن رؤيتها على النماذج الأولية والتخطيطات.

ما هي الشبكات

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

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

المساحات المظلمة والواسعة في الرسم التوضيحي هي الأعمدة ، والضوء والضيقة البادئة.

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

في هذه الحالة ، الوحدات النمطية هي مستطيلات 20 × 20 بكسل ، وتتميز بخطوط أكثر سمكًا.

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

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

كيفية استخدام تنسجم خلال النماذج

هذا هو القسم العملي الذي يعلم كيفية استخدام الشبكات عند إنشاء نماذج أولية.

حيث لرسم شبكات

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

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

لتمكين الشبكات في Proto.io ، حدد قائمة إعدادات التفضيلات - الشبكة.

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

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

إذا كنت تستخدم Justinmind Prototype ، في المحرر ، حدد علامة التبويب قوالب واستخدم أحد شبكات القوالب: 12 أو 16 عمودًا.

إذا كنت تستخدم برامج نماذج أولية أخرى ، فاعثر على الشبكات بنفسك.

كيفية بناء الشبكة

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

السؤال: كم عدد الأعمدة يجب أن تكون في شبكة الأعمدة؟ الجواب المختصر هو 12. النقطة ليست حتى أن معظم أطر CSS التي يستخدمها مطورو الويب مبنية على شبكات ذات 12 عمودًا. إذا لزم الأمر ، يتم تغيير الإعدادات الافتراضية للأطر.

الرقم 12 سحري تقريبًا: إنه مقسم إلى 6 و 4 و 3 و 2. وهذا يعني أنه في صفحة تحتوي على شبكة مكونة من 12 عمودًا في صف واحد ، يمكنك ترتيب ستة أو أربعة أو ثلاثة أو عنصرين بشكل متناغم. نظرًا لأن الرقم قابل للقسمة دائمًا بمفرده ومن جانب واحد ، يمكنك وضع 12 أو عنصر واحد على التوالي.

علاوة على ذلك ، إذا لم تهتم بالأعمدة المتطرفة ، فإن شبكة الأعمدة المكونة من 12 عمودًا تسمح لك بوضع متناغم في صف مكون من خمسة أو 10 عناصر.

الشبكات التي تحتوي على عدد مختلف من الأعمدة لا توفر هذه المرونة. على سبيل المثال ، ينقسم 16 إلى 8 و 4 و 2. من أجل وضع متناغم ثلاثة أو ستة عناصر في صف واحد ، يمكنك إسقاط عمودين خارجيين.

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

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

ولكن لإنشاء نموذج أولي في 99 حالة من أصل 100 ، من الملائم العمل مع شبكة من 12 عمودًا. سيقوم مصمم محترف أو مطور ويب ، بفضل شبكة الأعمدة ، بتحويل النموذج الأولي الخاص بك إلى عدة تخطيطات لأحجام مختلفة للشاشة.

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

  • في البرنامج المختار للنماذج الأولية ، يمكنك العمل مع صفحة القالب لسطح المكتب. يجب أن يكون عرض الصفحة 960 بكسل على الأقل. ترك نهج المهنيين أول المحمول.
  • يجب أن تكون الهوامش ضعف عرض المسافات البادئة على الأقل بين الأعمدة (المزاريب). يبدو أن هذه التقنية توجه وجهة نظر الزائر داخل الصفحة.
  • كلما كانت المسافة بين الأعمدة أوسع ، زادت مساحة الصفحة "الجوية" أو المساحة الحرة.

يمكن رؤية مثال للشبكة التي تعمل بها في الرسم التوضيحي.

كيفية استخدام شبكة العمود بمرونة عند تخطيط تخطيط الصفحة

شبكة العمود - أساس تخطيط الصفحة. يمكن توضيح ذلك بتخطيط نموذجي من المقالة "كيفية إنشاء صفحات النموذج الأولي" (انظر الصورة).

في هذه الحالة ، يشغل الرأس والتذييل جميع الأعمدة الـ 12. يمكن أن تشغل الوحدة الرئيسية والشريط الجانبي 9 و 3 أو 10 و 2 على التوالي.

بمساعدة شبكة الأعمدة ، من الممكن إنشاء تخطيطات أكثر تعقيدًا ، على سبيل المثال ، مع توزيع الأعمدة 5-5-2 و3-6-3 وما إلى ذلك.

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

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

في صفحة "متصل" توجد قائمة التنقل وبطاقات الفئات.

يمكن تمثيل مثل هذا التخطيط في شكل أربعة كتل عرض ثلاثة أعمدة.

مثال آخر من موقع "Svyaznoy": دليل للهواتف الخاصة بشركة مصنعة واحدة مع قائمة التنقل وأربع بطاقات المنتج على التوالي.

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

مثال عملي أدناه سيساعد على فهم مبادئ العمل مع شبكة أعمدة بشكل أفضل.

باستخدام الشبكة: مثال لصفحة النموذج الأولي

لإنشاء نموذج أولي للصفحة ، استخدمت شبكة بها 12 عمودًا. قيد التشغيل وشبكة الورق ، لتسهيل ترتيب العناصر في الاتجاه الرأسي.

أقوم بإضافة شعار وزر تحويل وقائمة تنقل إلى الرأس. انتبه إلى محاذاة الشبكة: تشغل العناصر 4 و 4 و 9 أعمدة على التوالي.

تحت رأس إضافة شريط التمرير كبير. انها تحتل 10 المتحدثين المركزية.

ضمن شريط التمرير ، أضف ثلاث بطاقات منتج ، تتكون من صورة ونص وزر تنقل. بطاقات تناول أربعة أعمدة.

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

في تذييل الصفحة إضافة معلومات الخدمة. يمكن عرض النموذج الأولي للصفحة باستخدام زر معاينة في الركن الأيمن العلوي من الشاشة.

في وضع المعاينة ، لا يتم عرض الشبكة. يسمح لنا ذلك بتقييم النموذج الأولي دون تدخل مرئي ، وإذا لزم الأمر ، نعود إلى التحرير. على سبيل المثال ، في وضع المعاينة ، بدا شريط التمرير ضيقًا جدًا.

أقوم بزيادة عرض شريط التمرير إلى 12 عمودًا أو إزالة وحدات التحكم من الصور إلى الأعمدة الخارجية للشبكة. أتذكر أنه بجانب قائمة التنقل ، تركت الغرفة لنموذج البحث.

النموذج الأولي جاهز.

أداة بسيطة وقوية

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

شاهد الفيديو: الخطوات الأولى نحو النجاح على الإنترنت. تسويق نشاطك التجاري على الإنترنت (شهر اكتوبر 2019).

ترك تعليقك