كيفية تخطيط ترتيب المحتوى لتصميم استجابة

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

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

إعادة ترتيب الشبكات إلى القوائم

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

مثال 1: مجلس مدينة ولنجتون

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

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

على الهواتف الصغيرة جدًا بعرض 320 بكسل ، تحتاج إلى تصميم لحجم الجهاز. في حالة جهاز iPhone ، يعد الجهاز أطول من عرضه ، لذا فمن المنطقي ترتيب المحتوى بهذه الطريقة.

مثال 2: مويا البرغر

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

يظل الصندوقان الترويجيان اللذان يعلنان عن تطبيق وقائمة Mooyah ثابتين جنبًا إلى جنب حتى تصبح الشاشة صغيرة بما يكفي لإعادة ترتيبها عموديا.

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

مثال 3: موضوع السوق

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

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

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

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

إخفاء أو إزالة الأعمدة

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

لكن الأجهزة الأصغر تحتاج إلى تدفق محتوى المنطقي عموديا. لقد وجدت خيارين ل التعامل مع sidebars المفرطة:

1. إسقاطها تحت المحتوى الرئيسي
2. أخفهم تمامًا

مثال 1: توقف الصحافة

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

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

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

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

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

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

مثال 2: Wishpond Blog

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

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

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

مثال 3: السيدة غوتييه

أنا أيضا أحب كيف تستخدم السيدة غوتييه “أحدث الأخبار” الشريط الجانبي على الصفحة الرئيسية. في النهاية يسقط تحت المحتوى, و يأخذ موقفا كاملا على الصفحة.

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

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

ضبط وضغط الهوامش

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

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

مثال 1: عالم واحد

يعد تذييل الصفحة على One World مثالًا رائعًا. لديها تعويم روابط تذييل sitewide الحق مع نموذج تسجيل البريد الإلكتروني على اليسار.

أثناء تغيير حجم المخطط ، تقلص الهوامش والحشوات بين هذه العناصر. أعمدة الارتباط الاقتراب معا, ونموذج الاشتراك يحصل أصغر قليلا, جدا.

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

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

مثال 2: الجزر الذهبية

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

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

التدفق الرأسي على شاشات أصغر

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

مثال 1: BodyBuilding.com مشاركة واحدة

خذ على سبيل المثال هذا آخر BodyBuilding الذي يستخدم صناديق صغيرة لاظهار التدريبات الغلوت مختلفة.

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

يجب أن يأخذ CSS المتجاوب الخاص بك هذه التفاصيل الصغيرة بعين الاعتبار لكل صفحة من صفحات الموقع.

مثال 2: فانيتي فير

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

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

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

ختام الأفكار

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

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