استجابة رؤوس والشعارات - نصائح والمزالق
لقد تخلل مفهوم تصميم الويب المتجاوب الويب ، وأصبح عنصرًا أساسيًا لمطوري الواجهة الأمامية. لا يوجد إنكار لقيمة التصميم المتجاوب في العالم الحديث ولكن هناك بعض الصعوبة في فهم كيفية تصميم المخططات سريعة الاستجابة بشكل صحيح.
يمكن أن يستمر الموضوع بإسهاب نظرًا لوجود العديد من المناطق الفريدة لموقع الويب ولكن التركيز على العناصر الفردية يمكن أن يساعدك على فهم أهداف المستخدم بشكل أفضل ، وكيف يمكن تحقيق هذه الأهداف من خلال تصميم متجاوب.
أود أن تغطي نصائح لتصميم الرؤوس والشعارات, و قوائم الملاحة, لأنها تتعلق بتصميم استجابة. خذ هذه الاقتراحات لأنها تنطبق على عملك الخاص وتأكد من تصميم واجهاتك مع مراعاة سلوك المستخدم.
أرق Navbars
على الشاشات الكبيرة ، من الطبيعي أن يكون لديك رؤوس كبيرة ، وربما حتى رؤوس كبيرة الحجم ذات طبقات ارتباط متعددة المستويات. لكن الشاشات الأصغر لا تملك نفس المساحة ، ويجب تقييدها حسب الحاجة.
منذ تطبيقات المحمول الأصلية لديها عادة رؤوس ثابتة, هذه ممارسة شائعة في التصميم المتجاوب أيضًا. رأس ثابت يجب أن يتقلص أيضا عندما تكون على أجهزة أصغر: هذا يترك مساحة أكبر للمحتوى ، ولكنه لا يزال يتيح للقراء الوصول المباشر إلى الرأس والتنقل.
خذ على سبيل المثال تخطيط Cartoon Brew على شاشة كاملة الحجم وعلى جهاز محمول.
عند نقطة توقف 600 بكسل ، يتقلص التنقل إلى نصف طوله تقريبًا على الصفحة. هذا يجعل كل من الشعار وقائمة التنقل القابلة للنقر أصغر ، لكنهما كذلك أكثر تناسبا بكثير إلى مساحة الشاشة النسبية.
ضع في اعتبارك أيضًا أن Cartoon Brew لديه مربع قائمة منسدلة كقائمة استجابة على شاشة الجوال. هذا يعني ذلك تراكب المحتوى في الصفحة عند فتحها ، لذلك من المهم ترك مساحة كبيرة لهذا الغرض.
يمكن العثور على مثال مماثل على موقع Jacksonville Art Walk على الويب. يبقى شريط التنقل العلوي ثابتًا أثناء التمرير لكن يتقلص على الأجهزة الصغيرة. هذا هو الأفضل للتصميم استجابة لأن شريط التنقل أرق يترك مساحة أكبر للمحتوى على شاشة أصغر المحمول.
يحتوي كل رابط في شريط التنقل على أيقونة ذات صلة مرفقة بالرابط النصي. يبدو هذا رائعًا على شاشة عريضة ولكنه مفصل للغاية بالنسبة للشاشات الأصغر.
يتغير تنقل Art Walk إلى قائمة منسدلة تحتوي على روابط ثابتة حول نقطة توقف 770 بكسل. يتم إخفاء الرموز في القائمة المنسدلة لأنها ستكون صغيرة جدًا ومكتظة جدًا على الأجهزة الأصغر.
عند تصميم رأس متجاوب ، فكر دائمًا في ذلك مساحة الشاشة الكلية بينما تصفيف شريط التنقل. إذا كنت لا تريد أن يظل الرأس ثابتًا فهذا أمر جيد تمامًا ، لكنك قد لا تزال ترغب في ذلك يتقلص قليلا لتوفير مساحة في الجزء العلوي من الصفحة.
Iconify الشعار
تتضمن معظم الشعارات بعض النصوص وأيقونة أو رسومات لتمثيل العلامة التجارية. هذا يعني أنك تستطيع دائما تصغير الكل (نعم إنها كلمة حقيقية) هذا النوع من الشعارات وصولا الى رمز من نسخته الكاملة.
هذه تقنية قوية للرؤوس المستجيبة لأنه لا يوجد دائمًا مساحة كافية لشعار كامل. تفقد بعض التألق والسحر لشعار بالحجم الكامل ، ولكن هذا هو الثمن الذي قد تضطر إلى دفعه مقابل تصميم مستجيب نظيف.
تحقق من شعار Web Designer News وشاهد كيف يتغير أثناء تغيير حجم المتصفح.
ربما لن يتعرف الجميع على هذا الرمز عند زيارته لأول مرة للموقع ، ولكن بفضل التعرف على الأنماط هذه ليست مشكلة كبيرة.
ظل الأشخاص على الإنترنت لفترة كافية ليعرفوا أن الزاوية العلوية اليسرى من الصفحة مخصصة للشعار. يتم استخدام هذا الرمز الوردي الصغير أيضًا في فافيكون ، لذلك من السهل إجراء بعض الاستنتاجات دون البحث في الموقع.
لا تحتاج دائمًا إلى الاعتماد على الرسومات الخاصة بتقنية الشعار المكثف. يستخدم رأس Young and Hungry نصًا أخضرًا ساطعًا للشعار الذي يتكثف في النهاية على النص "Y&H".
منحت هذا قد لا يعمل مع كل موقع إذا لم يكن من السهل التعرف على العلامة التجارية كأحرف فردية. لكنه يذهب لإظهار تلك الشعارات يمكن أن تصبح أكثر بساطة في كل من الرسومات والنص ، وكلا الخيارين شغل مساحة أقل على شاشات أصغر.
التعامل مع خلفيات ملء الشاشة
تستخدم العديد من الصفحات المقصودة خلفيات ملء الشاشة لجذب المزيد من الانتباه. هذه تقنية قوية ولكنها تعمل غالبًا على الشاشات الكبيرة.
إذا كيف يمكنك التعامل مع هذا على شاشة أصغر؟ عموما ، المصممين سواء أزل صورة الخلفية بعد نقطة توقف معينة ، أو الصورة نفسها يحصل على محاذاة لتناسب في النافذة.
يستخدم Cap Radio Raffle هذه التقنية على صفحته الرئيسية. صورة الخلفية يبقي نقطة محورية في الرأي في جميع الأوقات ، بغض النظر عن حجم الشاشة.
هذا النوع من الحل عادة يتطلب بعض المواقع المغلق لكنه بسيط للغاية عندما تحصل على تعليق منه. مجرد الحفاظ على نقطة محورية في الرأي في جميع الأوقات ، و تغيير حجم حاوية الصورة لتناسب بما يتناسب مع الجهاز.
خارج الخلفيات الكبيرة لأسباب جمالية ، يمكنك أيضًا استخدام صور كبيرة لمحتوى الصفحة. تستخدم صفحة Mashable الرئيسية خلفية صورة مميزة للقصة الإخبارية العليا التي تغطي التصميم بأكمله.
تخطيط استجابة يضغط الصورة في حين الحفاظ على نقطة محورية مركزية. من الصعب القيام بذلك لأن تلك الصورة المميزة تتغير عندما تتغير القصة ، لذلك يجب تنسيق الصور بعناية. لا يزال حل Mashable طريقة رائعة للتعامل مع الصور بملء الشاشة للمدونات وتخطيطات المجلات عند تصميمها بشكل صحيح.
تبسيط الملاحة
عند تجديد للشاشات الصغيرة, احتفظ بأكبر عدد ممكن من الروابط في الملاحة ، و اجعله سهل المنال. هذا يعني أنك قد تحتاج إلى التخلص من بعض الروابط إذا كان لديك قوائم منسدلة متعددة المستويات.
على الرغم من أنه إذا كانت لديك الإستراتيجية الصحيحة ، فلا يزال من الممكن إبقاء جميع القائمة المنسدلة في براعة. على سبيل المثال يستخدم Kidscreen القائمة المنبثقة مع أيقونات سهم صغير مشيرا إلى الروابط الفرعية في القائمة استجابة.
يتجادل العديد من الناس ضد قائمة الهامبرغر ، لكنني جئت لقبولها كعنصر ضروري لقوائم التنقل الطويلة. إنه يعمل ببساطة ، وأصبح من المفهوم على نطاق واسع من قبل معظم مستخدمي الهواتف الذكية بأنه "زر القائمة".
في الواقع ، ستتعرض لضغوط شديدة للعثور على موقع سريع الاستجابة لا يعتمد على قائمة الهامبرغر الثلاثة أشرطة. CyberChimps هو مثال عظيم على ذلك يستخدم القائمة المنسدلة العمودية بدلا من الشريحة في.
تتم إعادة ترتيب بنية التنقل لـ CyberChimps لتنزلق إلى أسفل الصفحة. القائمة يسقط من فوق مع عناصر كتلة كبيرة للروابط.
مع المزيد من المساحة للنقر و نص الرابط أكبر, تصبح عملية التنقل في الصفحات أكثر بساطة. تهدف إلى اتباع هذه الفلسفة برأسك المستجيب بالكامل ، وسوف تتحسن تصميماتك بشكل كبير.
بناء الخاصة بك
مع هذه النصائح تحت تصرفك ، يجب ألا تكون هناك مشكلة في بناء رؤوس متجاوبة صالحة للاستعمال. في حين أن هناك الكثير من الأدوات لمساعدتك ، فإن الطريقة الوحيدة لفهم الحقيقة هي من خلال الممارسة.
حتى تأخذ هذه التقنيات معك والبدء في بناء المواقع! لقد أدرجت أيضًا حفنة من الموارد الإضافية للرؤوس سريعة الاستجابة التي يمكنك الاطلاع عليها أدناه.
- إنشاء قائمة التنقل الأساسية المستجيبة لـ CSS (teamtreehouse.com)
- أفضل الممارسات لرأس الموقع المستجيب (ux.stackexchange.com)
- كيف يمكنني جعل صورة الرأس مستجيبة بشكل صحيح? (stackoverflow.com)
