10 مواقع تفعل الملاحة العمودية الحق
تتدفق غالبية قوائم تصفح الويب أفقيًا عبر الصفحة. هذا يأتي من تاريخ المراقبين التقليديين كونها أوسع وليس أطول.
ولكن مع وجود مساحة شاشة كبيرة ، بات من الممكن الآن لمواقع الويب استخدام قوائم التنقل العمودية بدلاً من ذلك. وكثير منهم تبدو رائعة.
هذه الأمثلة العشرة للقوائم العمودية مثالية للدراسة من أجل أسلوب التصميم الفريد وإمكانية الاستخدام المتميزة.
1. مشاتل بيترشام
على ال مشاتل بيترشام موقع الويب ستجد الملاحة العمودية المتداخلة. هذه التقنية ليست شيئًا ستجده كثيرًا ولكنها تعمل بشكل جيد على هذا الموقع.
يستخدم كل رابط تنقل رئيسي رمزًا في الخلفية لنقل الروابط مرئيًا. واثنين من الروابط فتح القوائم الفرعية محاذاة بجوار القائمة الأساسية. هذه تأخذ مكان القوائم المنسدلة التي تراها عادة على القوائم الأفقية.
هذا الموقع مستجيب لذلك في أحجام صغيرة تختفي هذه الروابط خلف قائمة الهامبرغر. وهذا يخلق فجوة معقولة بين مستخدمي سطح المكتب مع مساحة كافية للروابط العمودية ، ومستخدمي أجهزة الجوّال الذين يحققون أداءً أفضل باستخدام شريط التنقل الأفقي.
2. مطعم أربور
مثال آخر فريد جدا هو مطعم اربور التي لديها الملاحة العمودية النظيفة مع الكثير من الفضاء بين الروابط. يظهر المحتوى في حاوية منزلقة أيضًا تتم محاذاتها رأسياً بجوار التنقل.
نمط المحتوى هذا فريد جدًا. تحافظ معظم مواقع nav العمودية على محتواها مع الصفحة الرئيسية ، ولكن في هذه الحالة يمكنك إظهار / إخفاء المحتوى بكل سهولة. يضيف بعض الذوق في الملاحة العمودية التي تحافظ على تدفق زخم الصفحة مع المحتوى.
3. سموكي العظام
سموكي العظام له شيئان يحدثان له: طعام رائع وموقع قاتل.
تستخدم كل صفحة التنقل العمودي الطويل الثابت على الجانب الأيسر. هذا عنصر أساسي لمعظم مواقع الويب لأن غالبية القراء الغربيين يستهلكون المحتوى من اليسار إلى اليمين ، أما الزاوية العلوية اليسرى فهي المكان التقليدي لشعار الموقع.
ميزة إضافية واحدة أحبها هي قائمة الطعام تسرد جميع أطباق المطعم. إذا قمت بالنقر فوق ارتباط "القائمة" سترى كيف يعمل هذا أيضا مثل إضافة قائمة فرعية عموديا. بالتأكيد فكرة رائعة تعمل بشكل جيد لموقع مطعم صغير.
4. ماموث ميديا
عندما يكون لديك محتوى أقل ، يمكنك الابتعاد عن المزيد من خيارات التنقل الشائعة. ماموث ميديا مثال جيد يحتوي فقط على خمس صفحات رئيسية على موقعهم بالإضافة إلى مدونة.
وجه واحد محدد لهذا الملاحة هو ميزة المنسدلة المخفية. إذا نقرت على رابط "العمل" ، فستحصل على رابطين بديلين يمكنك النقر عليهما. تظهر تحت الرابط الرئيسي بحيث تأخذ دور قائمة منسدلة أصغر.
حتى على الجوال ، تتبع هذه الملاحة أسلوبًا مشابهًا. إنه دليل على أنه عندما لا يكون لديك الكثير من الروابط ، يمكنك دفع الإبداع.
5. الأمازون
الجميع وجدتهم يعرفون الأمازون. يمتلك بائع التجزئة عبر الإنترنت مجموعة رائعة ، ولكن لديه أيضًا تصميم واجهة مستخدم رائع وصلات التنقل العمودية على صفحات البحث عن المنتج.
يحتوي Amazon على عشرات الفئات لكل عبارة بحث. وهذا يعني أنهم بحاجة إلى طريقة لعرض ميزات البحث المحسَّنة دون الاكتظاظ في الصفحة. التنقلات العمودية منطقية فقط لأنها يمكن أن تصل إلى الجانب بينما لا تزال متاحة بالكامل.
إذا كنت تصمم أي نوع مماثل من التصفية ، فأنا بالتأكيد أوصي بدراسة إستراتيجية أمازون. لقد قاموا بتحسين موقعهم على نحو لا نهاية لذلك هناك الكثير من الأسباب التي تجعلهم يعتقدون أن روابط الفرز العمودية تعمل بشكل جيد.
6. كوروم
وكوروم يحتوي الموقع على نظام تنقل رأسي نظيف آخر ، مع ميزات بسيطة للغاية. روابط كل الأحرف الكبيرة ، والنص داكن ، وأنماط التحويم الواضح ، والتباين القوي مع الصفحة الرئيسية.
هذا هو واحد من أكبر الجوانب عند تصميم الملاحة العمودية. تحتاج عادةً إلى إنشاء قسمة قوية بين شريط التنقل العمودي ومحتوى الصفحة. في هذه الحالة يتم ذلك باستخدام لون خلفية أخف مع شعار كوروم بالقرب من الأعلى.
وبدلاً من ذلك ، يحصل المستخدمون المتجاوبون على الجوّال على قائمة منسدلة تعمل بشكل جيد كبديل للشاشات الأطول من نطاق أوسع.
7. نوا الدراجات
من أفضل الطرق لاستخدام التنقل العمودي هو تخطيط صفحة واحدة. مواقع إعلامية مثل نوا دراجات لا تحتاج دائمًا إلى عشرات الصفحات الممتلئة بالمحتوى.
لذا ، فمن خلال قائمة التنقل العمودية يكون من الأسهل جدًا تصفح المحتوى بحثًا عن نزوة باستخدام الرسوم المتحركة ومناطق الصفحات المخصصة. في هذه الحالة ، تندمج بوابة Nua Bikes مع الصفحة نظرًا لارتباطها المباشر بجميع محتويات هذه الصفحة.
8. مايكل نجو
هناك موقع آخر يتبع اتجاه التنقل الرأسي للصفحة الواحدة محفظة مايكل نجو .
يحتوي على صورة رأس جذابة تجذب انتباهك على الفور وتلفت انتباهك. ولكن المحتوى هو الجزء الأكثر إثارة للاهتمام لأنه يعمل جميعًا من خلال 3 روابط مختلفة: المنزل والعمل والاتصال.
تحتوي روابط التنقل على عناوين فرعية خاصة بها أيضًا حتى يمكنك مشاهدة ما يفعلونه حتى في لمح البصر.
شيء واحد هو أن نلاحظ كيف يبقى التنقل ثابتة أثناء التمرير أسفل الصفحة. هذا يحافظ على جميع الروابط يمكن الوصول إليها من أي نقطة وهو أمر حاسم في قائمة رأسية أصغر.
9. Medienstadt.koeln
الموقع الألماني Medienstadt.koeln لديه اختلاف مختلف تمامًا عن التنقل العمودي. ولا تزال واجهة التنقل مخفية وراء قائمة الهامبرغر في جميع الأوقات ، ولكنها لا تزال تمتد على ارتفاع الشاشة بالكامل.
يتضمن أيضًا روابط أكثر من مجرد التنقل الأفقي العادي. هذا أمر منطقي ولكن يمكن أن يكون مربكا لبعض الزوار.
أكثر ما يعجبني في النمط العمودي هو كيف يبقى بعيدًا حتى على سطح المكتب حتى الحاجة إليه.
منح هناك مناقشات حول قضايا الاكتشاف مع قوائم همبرغر. ولكنني أعتقد أن هذا الرمز أصبح سريعًا ، وهذا التصميم هو مثال ممتاز على التنقل العمودي المخفي أثناء العمل.
10. نظام Metrick
وكالة الإعلان نظام Metrick يبقي الملاحة الخاصة بهم بسيطة وإلى النقطة. إنه يتبع النمط العمودي ولكنه أيضًا مختلف كثيرًا عن الآخرين في هذا المنشور.
تعجبني القائمة المنسدلة المخفية التي تعرض روابط إضافية فقط عند النقر على الرابط الأساسي. رابط "المجلة" هو مثال جيد. تظهر روابط جديدة على الجانب وتتلاشى مع عرض بنقرة واحدة.
يحصل مستخدمو الجوّال على تجربة مماثلة باستثناء أن روابط القائمة الفرعية هذه تظهر أسفل الرابط الرئيسي. ولكن هذه الملاحة صغيرة جدًا لدرجة أنها يمكن أن تعمل تقريبًا لكل حجم شاشة.
الختامية
يعمل التنقل العمودي بشكل أفضل على المواقع التي تعتمد على مساحة شاشة إضافية. وتشمل هذه عادة مواقع المحفظة والمطاعم والشركات الصغيرة ومحلات التجارة الإلكترونية.
ولكن بغض النظر عن الموقع ، يمكنك دائمًا محاولة إضافة تنقل رأسي إلى التصميم الخاص بك. وآمل أن تتمكن هذه الأمثلة من البدء في استخدام بعض الأفكار الرائعة لتصميم السلكي والتصميم بالحجم الطبيعي.